Презентация на тему CSS (каскадные таблицы стилей)

Слайд 2 Цель создания CSS
CSS используется создателями веб-страниц для задания

Слайд 3 Базовый синтаксис CSS
В HTML это можно сделать

Слайд 4 {
: ;

Слайд 5 Связь CSS и HTML
Метод 1: In-line (атрибут

Слайд 6
Метод 2: внутри тега style


Example

Слайд 7 Метод 3: внешний (ссылка на таблицу стилей)
Внешняя

Слайд 8

My document

Слайд 9 Иерархия элементов внутри документа
HTML-документы строятся на основании иерархии

Слайд 10 Например, в документе присутствуют два абзаца p, включающие

Слайд 11 Селекторы

Слайд 12

Слайд 13

Слайд 14

Слайд 15 Классы и идентификаторы элементов
Класс или идентификатор может быть

Слайд 16 Основное отличие между классами элементов и идентификаторами элементов

Слайд 17 default.htm


Мой документ

Слайд 18

Слайд 19 Цвет и фон
color – цвет переднего плана
background-color-

Слайд 20 Названия цветов
ИмяКодОписание
white #ffffff или #fffБелый
silver #c0c0c0Серый
gray #808080Тёмно-серый
black #000000 или #000Чёрный
maroon #800000Тёмно-красный
red #ff0000 или

Слайд 21 Цвет переднего плана : свойство 'color'
h1 {color: #ff0000;}

Слайд 22 Свойство 'background-color'
body
{
background-color: #FFCC66;
}
h1
{
color: #990000;
background-color: #FC9804;
}

Слайд 23
Фоновые изображения [background-image]
body
{
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
H1
{
color: #990000;
background-color: #FC9804;
}

Слайд 24 Повторение/мультипликация фонового изображения [background-repeat]
background-repeat: no-repeat – изображение не

Слайд 25 body
{
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1
{color: #990000;
background-color: #FC9804;
}

Слайд 26 Блокировка фонового изображения [background-attachment]
body
{
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment:

Слайд 27 Расположение фонового рисунка [background-position]
содержит два значения: положение по

Слайд 28 Расположение фонового рисунка [background-position]

Слайд 29 body
{
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
H1

Слайд 30
Шрифты
font-family - семейство используемого шрифта
font-style - стиль

Слайд 31 Семейство шрифта [font-family]
Для задания шрифта может быть использовано

Слайд 32 Семейство шрифта [font-family]

Слайд 33
h1
{
font-family: arial, verdana, sans-serif;
}
h2
{
font-family: "Times New Roman",

Слайд 34 Стиль шрифта [font-style]
h1
{
font-family: arial, verdana, sans-serif;
}
h2

Слайд 35 Вариант шрифта [font-variant]
h1
{
font-variant: small-caps;
}
H2
{
font-variant: normal;
}

Слайд 36 Вес шрифта [font-weight] normal – стандартная насыщенность шрифта, bold

Слайд 37 Размер шрифта [font-size]
h1
{
font-size: 30px;
}
H2
{
font-size: 12pt;
}
h3

Слайд 38

Слайд 39 Сокращённая запись [font]
p
{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial,

Слайд 40 ТЕКСТ
text-indent - величина отступа для первой строки текста

Слайд 41 Отступы [text-indent]
p {text-indent: 30px;}

Слайд 42 Выравнивание текста [text-align] center –по центру; left –по

Слайд 43 Декоративный вариант [text-decoration]
line-through – зачеркнутый текст;
overline – линия

Слайд 44 Декоративный вариант [text-decoration]
h1 {text-decoration: underline;}h2 {text-decoration: overline;}h3

Слайд 45 Интервал между буквами [letter-spacing]
h1 {letter-spacing: 6px;}
p {letter-spacing: 3px;}

Слайд 46 Трансформация текста [text-transform]
capitalize
Капитализирует каждое слово. Например: "john doe"

Слайд 47 Трансформация текста [text-transform]

h1 {text-transform: uppercase;}li {text-transform: capitalize;}

Слайд 48 Ссылки
a {color: blue;}
a:link {color: blue;} ссылки,

Слайд 49 a:hover {color: orange; font-style: italic;}

Слайд 50 a:hover {letter-spacing: 10px;font-weight:bold;color:red;}

Слайд 51 UPPERCASE и lowercase
a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow;}

Слайд 52 Удаление подчёркивания ссылок
a {text-decoration:none;}
a:link {color: blue;text-decoration:none;}a:visited {color:

Слайд 53 Боксовая модель
margin – величина отступа от каждого края

Слайд 54 Боксовая модель

Слайд 55 margin

Слайд 56 margin
Количество значений
1 - отступы будут установлены одновременно от

Слайд 57 margin
Отступы прозрачны, на них не распространяется цвет фона

Слайд 58 padding

Слайд 59 Ширина блока

Слайд 60 Высота блока

Слайд 61 body {margin: 100px 40px 10px 70px;} p {text-align:justify}

Слайд 62 body {margin: 100px 40px 10px 70px;} p{margin: 5px 50px 5px

Слайд 63 h1{background: yellow;} h2{background: orange;}

Слайд 64 h1{background: yellow; padding: 20px 20px 20px 80px;} h2{background: orange; padding-left:120px;}

Слайд 65 Рамки
border-width
border-color
border-style
border

Толщина рамки [border-width]

Цвет рамки [border-color]

Типы рамок

Слайд 66
h1
{border-width: thick; border-style: dotted; border-color: gold;}
h2
{border-width:

Слайд 67

Слайд 68
h1
{border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width:

Слайд 69 – контейнер представляет собой прямоугольную область. Значения

Слайд 70 top
left
content
right
bottom

#top

Слайд 71 Управление размещением элементов
Для управления размещением элементов используется атрибут

Слайд 72
Всплывающие элементы (поплавки)
HTML-код для этого примера:

Слайд 73 колонки
Haec disserens qua de re agaturet

#column1
{float:left;width: 33%;}
#column2
{float:left;width: 33%;}
#column3 {float:left;width: 33%;}