В строке
<h1 CLASS="blue"> Заголовок </h1>
атрибут CLASS использует класс стилей, в данном случае – blue (он был объявлен как .blue в заголовке STYLE). Заметим, что текст отображается на экране как со свойствами элемента H1, так и со свойствами класса стилей .blue .
Все стили, примененные к некоторому элементу (родительскому элементу), также применяются к элементам, находящимся внутри этого элемента (дочерним элементам).
Примеры наследования и специфичности стилей.
Рассмотрим пример приведенный на рис.3.
Рис.3.
Текст HTML-документа соответствующий данному рисунку показан на листинге 3.
Листинг 3.
<html><head><STYLE TYPE="text/css">
A.nodec { text-decoration:none}
A:hover { text-decoration:underline;
color: red;
background-color: #CCFFCC }
LI EM { color: green ; font-weight: bold }
UL { margin-left: 75px }
UL UL { text-decoration: underline ; margin-left: 15px }
</STYLE></head><body>
<h1> Список занятий на <EM> Понедельник </EM>: </h1><UL>
<LI> Физкультура </LI><LI> Философия </LI><LI>Информатика</LI><UL>
<LI>Графические программ</LI><LI>Языки программирования </LI>
</UL>
<LI>История <EM> России </EM></LI></UL>
<A CLASS="nodec" HREF="www.vnglu.narod.ru">
Сайт вечернего факультета НГЛУ </A></P>
</BODY></html>
В строке
A.nodec { text-decoration: none}
свойство text-decoration применяется ко всем элементам A, у которых атрибут CLASS имеет значение nodec. По умолчанию браузер отображает элемент A, подчеркивая его текст. В этой строке мы отменяем подчеркивание. Свойство text-decoration определяет текстовые эффекты внутри элемента.
Имя класса .nodec, добавленное к имени элемента A, представляет собой расширение класса стилей. Этот стиль применяется только к тем элементам A, у которых определен класс .nodec.
В строках
A:hover { text-decoration:underline;
color: red; background-color: #CCFFCC }
определяется стиль для псевдокласса hover. Псевдокласс hover динамически активируется, когда пользователь помещает курсор мыши поверх элемента A.
В строках
LI EM { color: green ; font-weight: bold }
задается стиль всех элементов EM, которые являются дочерними для элементов LI.
Аналогично можно задать одинаковые правила одновременно для нескольких элементов. Если бы мы хотели применить правила как к элементам LI, так и к элементам EM, то Вас следовало перечислить эти элементы через запятую следующим образом:
LI, EM { color: gray ; font-weight: bold }
В строке
UL UL { text-decoration: underline ; margin-left: 15px }
задаются правила для всех вложенных списков (для элементов UL, дочерних по отношению к элементам UL). Текст вложенных списков будет подчеркнут. Также эти правила устанавливают левый отступ для текста вложенных списков размером в 15 пикселей.
Пиксель – это относительная единица измерения длины. Его размер зависит от разрешения экрана. Другие относительные единицы – это em (размер шрифта), и проценты (например, margin-left: 10%). Чтобы текст элемента отображался в размере 150% от обычного, можно, например, использовать следующую конструкцию:
font-size: 1.5em
Можно использовать абсолютные единицы измерения длины, размер которых одинаков на всех системах. Это in (дюймы), cm(сантиметры) и др.