Скачать презентацию
Идет загрузка презентации. Пожалуйста, подождите
1
1
2
2 ВОПРОСЫ: 1. Наследование 2. Контекстные селекторы 3. Классы 4. Теги и 5. Z-index 6. Каскадирование
3
3 1. Наследование HTML-код имеет иерархическую структуру. Весь документ кодируется внутри тегов.... Внутри абзаца могут содержаться элементы, размеченные тегами и т. д. Наследование стилей означает, что если определен какой-то стиль для тега, то этот стиль будет относиться ко всем тегам документа. Соответственно, если задан стиль для некоторого тега, то все теги, расположенные внутри него в HTML-программе, также будут обладать этим стилем.
4
4 Пусть для тега задан стиль: P {color: red; font-size: 14pt; font-family: Arial,sans-serif} Тогда содержимое тега, помещенного внутрь абзаца, будет также выведено на экран рубленым шрифтом красного цвета размером в 14 пунктов. Например: Стилевые определения обладают свойством наследования.
5
5 Тогда результат этого фрагмента выглядит таким образом:
6
6 Если нужно, например, добавить для тега разрядку текста, то это задается дополнительно: Дополнительное стилевое указание
Дополнительное стилевое указание ">
7
7 Стилевые определения обладают свойством наследования
8
8 Как видите, содержимое тега выводится так же, как и содержимое тега, внутри которого он содержится (рубленым шрифтом в 14 пунктов красного цвета), но благодаря дополнительному определению style="letter-spacing: 6pt" между буквами появляются добавочные промежутки в 6 пунктов. Внутри тега-потомка можно не только ввести дополнительные стилевые определения, но и переопределить стилевые свойства родителя. Например, после следующего примера слово «наследования» будет показано синим цветом
Переопределение стилевых свойств Стилевые определения обладают свойством наследова" title="9 Переопределение стилевых свойств Стилевые определения обладают свойством наследова" class="link_thumb">
9
9 Переопределение стилевых свойств Стилевые определения обладают свойством наследования
Переопределение стилевых свойств Стилевые определения обладают свойством наследова">
Переопределение стилевых свойств Стилевые определения обладают свойством наследования">
Переопределение стилевых свойств Стилевые определения обладают свойством наследова" title="9 Переопределение стилевых свойств Стилевые определения обладают свойством наследова">
10
10
11
11 2. Контекстные селекторы Можно написать стилевое определение, которое будет работать только при определенной комбинации вложенности тегов. Например, можно установить цвет текста в синим только для случая, когда этот тег расположен внутри тега. Например: Контекстный селектор Контекстный селектор
Контекстный селектор Контекстный селектор">
12
12 Слово «селектор» выводится на экран синим цветом только в первой строке внутри тега ), а во второй строке (внутри тега ) черным. Обратите внимание, что в стилевом определении отсутствует запятая. Это и есть признак контекстного определения. Если записать Н3, ЕМ {color: blue}, то синий цвет приобретут как теги, так и теги, т. е. запятая определяет одинаковые стили для группы тегов.
13
13 3. Классы Стилевые определения можно описывать без указания тега. В этом случае каждому определению присваивается имя, которое можно использовать для сопоставления заданного стиля конкретному тегу. Такие стилевые определения называются классами. Класс записывается следующим образом:.имя { характеристика: величина;... характеристика: величина; } Иными словами, определение записывается как обычно, но вместо указаний на теги размещается конструкция.имя.
14
14 Например, определим стилевой класс с именем def :.def {color: red; font-size: 16pt; font-family: Geneva, Helvetica, sans-serif; border: solid 0.2cm blue } Здесь строка border: solid 0.2cm blue демонстрирует запись в одном стилевом указании нескольких параметров разного назначения (здесь: стиль, толщина рамки и ее цвет). Такую интеграцию допускают специальные обобщающие стилевые свойства, к которым относится border. Сопоставляют стилевой класс с тегом при помощи атрибута class: текст Посмотрите, как работает этот код:
Определение класса.def {font-family:Helvetica;font-size:14pt; border: solid 4pt red;padding: 6pt; margin-left:5%;margin-right:5% } Классы Клacc — стилевое определение без привязки к тегу. В" title="15 Определение класса.def {font-family:Helvetica;font-size:14pt; border: solid 4pt red;padding: 6pt; margin-left:5%;margin-right:5% } Классы Клacc — стилевое определение без привязки к тегу. В" class="link_thumb">
15
15 Определение класса.def {font-family:Helvetica;font-size:14pt; border: solid 4pt red;padding: 6pt; margin-left:5%;margin-right:5% } Классы Клacc — стилевое определение без привязки к тегу. Вместо указания тега в определении записывается имя класса. Перед именем класса ставится точка.
Определение класса.def {font-family:Helvetica;font-size:14pt; border: solid 4pt red;padding: 6pt; margin-left:5%;margin-right:5% } Классы Клacc — стилевое определение без привязки к тегу. В">
Определение класса.def {font-family:Helvetica;font-size:14pt; border: solid 4pt red;padding: 6pt; margin-left:5%;margin-right:5% } Классы Клacc — стилевое определение без привязки к тегу. Вместо указания тега в определении записывается имя класса. Перед именем класса ставится точка.">
Определение класса.def {font-family:Helvetica;font-size:14pt; border: solid 4pt red;padding: 6pt; margin-left:5%;margin-right:5% } Классы Клacc — стилевое определение без привязки к тегу. В" title="15 Определение класса.def {font-family:Helvetica;font-size:14pt; border: solid 4pt red;padding: 6pt; margin-left:5%;margin-right:5% } Классы Клacc — стилевое определение без привязки к тегу. В">
16
16 Результатом этого кода будет следующая страница:
Определение класса P " title="17 Можно образовывать классы на основе существующих стилевых определений. В следующем примере за основу класса def взято определение стиля для тега и добавлены новые свойства: Определение класса P " class="link_thumb">
17
17 Можно образовывать классы на основе существующих стилевых определений. В следующем примере за основу класса def взято определение стиля для тега и добавлены новые свойства: Определение класса P {font-family:Helvetica} P.def {text-align: justify; background:#CFB597; font-size:14pt; border:solid 4pt red; padding:6pt; margin-left:5%;margin-right:5%}
Определение класса P ">
Определение класса P {font-family:Helvetica} P.def {text-align: justify; background:#CFB597; font-size:14pt; border:solid 4pt red; padding:6pt; margin-left:5%;margin-right:5%}">
Определение класса P " title="17 Можно образовывать классы на основе существующих стилевых определений. В следующем примере за основу класса def взято определение стиля для тега и добавлены новые свойства: Определение класса P ">
18
18 Классы(обычный заголовок) Этот абзац использует стилевое определение для тега Р (рубленый шрифт). Этот абзац использует стиль производного класса “def” (в определение стиля для тега Р добавлено:красная рамка, поля, цвет фона, выравнивание слева и справа, повышенный размер шрифта).
19
19 4. Теги и Эти теги играют особую роль для CSS. Они позволяют выделять в документе отдельные области, задавая для них специфические свойства. Все, что нужно сделать это поместить теги, принадлежащие конструируемой области внутрь... или.... Разница между и только в одном: после блока браузер переходит на новую строку, а после блока нет. Использование тега позволяет тем самым задавать стилевые свойства даже отдельным словам и буквам. Посмотрим примеры использования этих тегов.
Использование тега DIV.area1 { color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2 { color:black; background:#CFB597}.area3 { color:blue;background:#C0C0" title="20 Пример использования : Использование тега DIV.area1 { color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2 { color:black; background:#CFB597}.area3 { color:blue;background:#C0C0" class="link_thumb">
20
20 Пример использования : Использование тега DIV.area1 { color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2 { color:black; background:#CFB597}.area3 { color:blue;background:#C0C0C0}
Использование тега DIV.area1 { color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2 { color:black; background:#CFB597}.area3 { color:blue;background:#C0C0">
Использование тега DIV.area1 { color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2 { color:black; background:#CFB597}.area3 { color:blue;background:#C0C0C0}">
Использование тега DIV.area1 { color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2 { color:black; background:#CFB597}.area3 { color:blue;background:#C0C0" title="20 Пример использования : Использование тега DIV.area1 { color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2 { color:black; background:#CFB597}.area3 { color:blue;background:#C0C0">
21
21 Где начало того конца, которым оканчивается начало?
Использование тега SPAN.area1 { color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2 { color:maroon; background:#CFB597; padding:6pt}.area3 { color:blue;b" title="22 Пример использования : Использование тега SPAN.area1 { color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2 { color:maroon; background:#CFB597; padding:6pt}.area3 { color:blue;b" class="link_thumb">
22
22 Пример использования : Использование тега SPAN.area1 { color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2 { color:maroon; background:#CFB597; padding:6pt}.area3 { color:blue;background:#C0C0C0; padding:6pt}
Использование тега SPAN.area1 { color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2 { color:maroon; background:#CFB597; padding:6pt}.area3 { color:blue;b">
Использование тега SPAN.area1 { color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2 { color:maroon; background:#CFB597; padding:6pt}.area3 { color:blue;background:#C0C0C0; padding:6pt}">
Использование тега SPAN.area1 { color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2 { color:maroon; background:#CFB597; padding:6pt}.area3 { color:blue;b" title="22 Пример использования : Использование тега SPAN.area1 { color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2 { color:maroon; background:#CFB597; padding:6pt}.area3 { color:blue;b">
23
23 Где начало того конца, которым оканчивается начало?
24
24 5. Абсолютное позиционирование При помощи CSS можно отображать элементы на экране, используя реальные координаты, отсчитываемые от левого верхнего угла окна браузера. Такую возможность предоставляет стилевое свойство position со значением absolute. Сами координаты задаются в пикселях при помощи свойств left (горизонтальная координата) и top (вертикальная координата). Применение этих свойств иллюстрирует следующий пример.
Абсолютное позиционирование.area1 { position:absolute; top:10; left:10; color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2 { position:absolute; top:20; left:150; color:maroon;" title="25 Абсолютное позиционирование.area1 { position:absolute; top:10; left:10; color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2 { position:absolute; top:20; left:150; color:maroon;" class="link_thumb">
25
25 Абсолютное позиционирование.area1 { position:absolute; top:10; left:10; color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2 { position:absolute; top:20; left:150; color:maroon; background:#CFB597; padding:12pt}.area3 { position:absolute; top:70; left:130; color:blue; background:#C0C0C0; padding:12pt}
Абсолютное позиционирование.area1 { position:absolute; top:10; left:10; color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2 { position:absolute; top:20; left:150; color:maroon;">
Абсолютное позиционирование.area1 { position:absolute; top:10; left:10; color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2 { position:absolute; top:20; left:150; color:maroon; background:#CFB597; padding:12pt}.area3 { position:absolute; top:70; left:130; color:blue; background:#C0C0C0; padding:12pt}">
Абсолютное позиционирование.area1 { position:absolute; top:10; left:10; color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2 { position:absolute; top:20; left:150; color:maroon;" title="25 Абсолютное позиционирование.area1 { position:absolute; top:10; left:10; color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2 { position:absolute; top:20; left:150; color:maroon;">
26
26 Где начало того конца, которым оканчивается начало?
27
27 Как видите, браузер разместил три заданные тегами, области в указанные координаты. При этом области перекрывают друг друга. Ближе к пользователю получается та область, которая следует в HTML-коде последней. Если переставить порядок следования тегов в программе, то и порядок наложения областей друг на друга изменится. Однако CSS предоставляет программисту и другой, более гибкий инструмент для управления порядком наложения элементов. Это Z-index.
28
28 5. Z-index Этот стилевое свойство позволяет указывать, в каком слое (на каком уровне) находится элемент на экране. Номер основного уровня (на который выводятся обычные элементы без стилевых указаний) равен нулю. Следовательно, элементы с отрицательным Z- index расположены ниже (дальше), с положительным выше (ближе) основного экранного слоя. Если элементы имеют одинаковый Z-index, то они расположены в одном слое. В противном случае ближе к нам расположен слой, имеющий больший Z- index. Приведенный ниже пример демонстрирует свойство Z-index.
