1

2 ВОПРОСЫ: 1. Наследование 2. Контекстные селекторы 3. Классы 4. Теги и 5. Z-index 6. Каскадирование

3 1. Наследование HTML-код имеет иерархическую структуру. Весь документ кодируется внутри тегов.... Внутри абзаца могут содержаться элементы, размеченные тегами и т. д. Наследование стилей означает, что если определен какой-то стиль для тега, то этот стиль будет относиться ко всем тегам документа. Соответственно, если задан стиль для некоторого тега, то все теги, расположенные внутри него в HTML-программе, также будут обладать этим стилем.

4 Пусть для тега задан стиль: P {color: red; font-size: 14pt; font-family: Arial,sans-serif} Тогда содержимое тега, помещенного внутрь абзаца, будет также выведено на экран рубленым шрифтом красного цвета размером в 14 пунктов. Например: Стилевые определения обладают свойством наследования.

5 Тогда результат этого фрагмента выглядит таким образом:

6 Если нужно, например, добавить для тега разрядку текста, то это задается дополнительно: <META http-equiv="Content-Type" content="text/html"> Дополнительное стилевое указание <!-- P {color:red;font-size:14pt; font-family:Arial,sans-serif} -->

7 Стилевые определения обладают свойством наследования

8 Как видите, содержимое тега выводится так же, как и содержимое тега, внутри которого он содержится (рубленым шрифтом в 14 пунктов красного цвета), но благодаря дополнительному определению style="letter-spacing: 6pt" между буквами появляются добавочные промежутки в 6 пунктов. Внутри тега-потомка можно не только ввести дополнительные стилевые определения, но и переопределить стилевые свойства родителя. Например, после следующего примера слово «наследования» будет показано синим цветом

9 <META http-equiv="Content-Type" content="text/html"> Переопределение стилевых свойств <!-- P {color: red;font-size:14pt; font-family:Arial,sans-serif} --> Стилевые определения обладают свойством <EM style="letter-spacing:6 рt; color:blue">наследования

10

11 2. Контекстные селекторы Можно написать стилевое определение, которое будет работать только при определенной комбинации вложенности тегов. Например, можно установить цвет текста в синим только для случая, когда этот тег расположен внутри тега. Например: <META http-equiv="Content-Type" content="text/html"> Контекстный селектор <!-- H3 EM {color: blue} --> Контекстный селектор

12 Слово «селектор» выводится на экран синим цветом только в первой строке внутри тега ), а во второй строке (внутри тега ) черным. Обратите внимание, что в стилевом определении отсутствует запятая. Это и есть признак контекстного определения. Если записать Н3, ЕМ {color: blue}, то синий цвет приобретут как теги, так и теги, т. е. запятая определяет одинаковые стили для группы тегов.

13 3. Классы Стилевые определения можно описывать без указания тега. В этом случае каждому определению присваивается имя, которое можно использовать для сопоставления заданного стиля конкретному тегу. Такие стилевые определения называются классами. Класс записывается следующим образом:.имя { характеристика: величина;... характеристика: величина; } Иными словами, определение записывается как обычно, но вместо указаний на теги размещается конструкция.имя.

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: текст Посмотрите, как работает этот код:

15 <META http-equiv="Content-Type" content="text/html"> Определение класса.def {font-family:Helvetica;font-size:14pt; border: solid 4pt red;padding: 6pt; margin-left:5%;margin-right:5% } Классы Клacc &#151; стилевое определение без привязки к тегу. Вместо указания тега в определении записывается имя класса. Перед именем класса ставится точка.

16 Результатом этого кода будет следующая страница:

17 Можно образовывать классы на основе существующих стилевых определений. В следующем примере за основу класса def взято определение стиля для тега и добавлены новые свойства: <META http-equiv="Content-Type" content="text/html"> Определение класса 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%}

18 Классы(обычный заголовок) Этот абзац использует стилевое определение для тега Р (рубленый шрифт). Этот абзац использует стиль производного класса &#147;def&#148; (в определение стиля для тега Р добавлено:красная рамка, поля, цвет фона, выравнивание слева и справа, повышенный размер шрифта).

19 4. Теги и Эти теги играют особую роль для CSS. Они позволяют выделять в документе отдельные области, задавая для них специфические свойства. Все, что нужно сделать это поместить теги, принадлежащие конструируемой области внутрь... или.... Разница между и только в одном: после блока браузер переходит на новую строку, а после блока нет. Использование тега позволяет тем самым задавать стилевые свойства даже отдельным словам и буквам. Посмотрим примеры использования этих тегов.

20 Пример использования : <META http-equiv="Content-Type" content="text/html"> Использование тега DIV.area1 { color:red; font-weight:bolder; font-size:40pt; background:aqua}.area2 { color:black; background:#CFB597}.area3 { color:blue;background:#C0C0C0}

21 Где начало того конца, которым оканчивается начало?

22 Пример использования : <META http-equiv="Content-Type" content="text/html"> Использование тега 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}

23 Где начало того конца, которым оканчивается начало?

24 5. Абсолютное позиционирование При помощи CSS можно отображать элементы на экране, используя реальные координаты, отсчитываемые от левого верхнего угла окна браузера. Такую возможность предоставляет стилевое свойство position со значением absolute. Сами координаты задаются в пикселях при помощи свойств left (горизонтальная координата) и top (вертикальная координата). Применение этих свойств иллюстрирует следующий пример.

25 <META http-equiv="Content-Type" content="text/html"> Абсолютное позиционирование.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}

26 Где начало того конца, которым оканчивается начало?

27 Как видите, браузер разместил три заданные тегами, области в указанные координаты. При этом области перекрывают друг друга. Ближе к пользователю получается та область, которая следует в HTML-коде последней. Если переставить порядок следования тегов в программе, то и порядок наложения областей друг на друга изменится. Однако CSS предоставляет программисту и другой, более гибкий инструмент для управления порядком наложения элементов. Это Z-index.

28 5. Z-index Этот стилевое свойство позволяет указывать, в каком слое (на каком уровне) находится элемент на экране. Номер основного уровня (на который выводятся обычные элементы без стилевых указаний) равен нулю. Следовательно, элементы с отрицательным Z- index расположены ниже (дальше), с положительным выше (ближе) основного экранного слоя. Если элементы имеют одинаковый Z-index, то они расположены в одном слое. В противном случае ближе к нам расположен слой, имеющий больший Z- index. Приведенный ниже пример демонстрирует свойство Z-index.

29 <META http-equiv="Content-Type" content="text/html"> Z-index Z-index <DIV style= "position:absolute; top:50; left:140; height:130; width:100; background:red; font-size:60; color:white; z-index:3"> Это ближе <DIV style="position:absolute; top:50; left:360; height:30; width:100; background:blue; font-size:30; color:white; z-index:1"> Это дальше <DIV style="position:absolute; top:80; left:270; width:125; z-index:2"> <IMG src=img555. jpg width=125 height=82 alt ="">

30 Результат этого кода – следующая страница:

31 6. Каскадирование Пользователи благодаря CSS получает гибкий инструмент для представления информации на экране компьютера. Важно не запутаться в том, как созданные стили будут взаимодействовать друг с другом, с атрибутами тегов (они тоже определяют стиль) и со стилями самого браузера (теми стилями, которыми браузер показывает документ по умолчанию).

32 Как было рассказано ранее, программист может использовать в HTML-документе три типа стилей: Встроенный (inline). Стиль, описанный внутри тега при помощи атри­бута style. Контролирует представление отдельного тега. Внедренный (embedded). Стиль, описанный в заголовке HTML-файла при помощи тегов …. Контролирует представление отдельного HTML-документа. Связанный (linked). Стиль, описанный в отдельном CSS-файле. Контролирует представление многих HTML-документов. Для ссылки на стилевой файл в головной части HTML-документа записывают тег.

33 В одном документе могут применяться все описанные выше три стилевых механизма. Добавим к этому стили, задаваемые обычными атрибутами тегов, и стиль «по умолчанию» самого браузера. Как это все взаимодействует, какому стилю отдает предпочтение браузер при построении документа на экране компьютера? Правила, которым должен следовать обычный браузер, называются каскадными. Они означают, что для браузера самыми главными являются встроенные стили, затем, по убыванию старшинства, внедренный и связанный.

34 Как следует из предыдущего занятия, внедренный и связанные стили совершенно равнозначны для браузера. Он следует последнему по порядку указанию. Самым младшим в стилевой иерархии оказывается стиль «по умолчанию». Его браузер использует тогда, когда нет никаких стилевых указаний. В понятие «каскадирование» входит и механизм наследования, по которому к потомку без собственных стилей применяется стиль родителя. Стили, заданные обычными атрибутами тегов, работают по общему каскадному правилу.

35 Пример 2. Это будет показано синим, а это будет показано красным. Пример 1. Это будет показано синим.

36