Лист стилей представляет собой набор правил CSS. Правила задаются в форме простых и групповых селекторов, ID селекторов, правил наследования и правил определения классов элементов, псевдоклассов и псевдоэлементов.
Селекторы
Простейшее правило CSS задается следующим образом:
Селектор { свойство CSS: значение }
Селектор это любой из рассмотренных нами ранее тегов HTML (например BODY, P, H1, LI). Далее в фигурных скобках декларируется значение свойств CSS определяющих стиль данного элемента в документе. Например:
H1 { color:red } - задает стиль заголовкам первого уровня.
Для удобства применения можно декларировать в одном правиле несколько свойств CSS для нескольких селекторов. Например:
BODY { background-color:white; color:black; font-family:Times New Roman; font-style:normal; font-size:10pt } - данное правило задет стиль всему телу документа (вместо атрибутов тега BODY).
H1, H2, H3, H4, H5, H6 {color:black; font-style:italic} - данное правило задает стиль заголовкам всех уровней в документе.
Правила наследования
При задании правил можно использовать принцип наследования, который задается при помощи контекстных селекторов, стиль которых зависит от вложенности в другие элементы. Контекстные селекторы задаются без разделительных запятых.
Основной_селектор Вложенный_селектор { свойство CSS: значение }
Например:
P STRONG { color:red; font-weight:bold } - задает стиль для элементов STRONG заключенных в контейнере абзаца.
Кроме этого следует помнить о внутреннем наследовании стилей в документе. Например стиль элемента BODY (в части тех свойств CSS, значения которых не переопределены в персональных правилах вложенных элементов) распространяется на все дочерние элементы и без их перечисления в контекстных селекторах.
Классы элементов
В правилах CSS используется понятие класса. Класс элемента задается следующим образом:
Селектор.Класс { свойство CSS: значение }
Например:
H1.normal { color:black; font-style:normal; font-family:serif } - класс строгого стиля заголовка;
H1.funny { color:blue;font-style:italic; font-family:fantasy } - класс легкомысленного стиля заголовка;
Для использования в HTML документе элемента конкретного класса применяется атрибут CLASS:
<H1 CLASS=normal>Технические параметры устройства DJP67575</H1>
<H1 CLASS=funny>Свежие анекдоты про программистов</H1>
В CSS можно определять классы не связанные с конкретными элементами:
Класс { свойство CSS: значение }
Например:
.red { color:red } - класс красного стиля элементов;
В HTML документе использование данного стиля выглядит так:
<p>Ничего не получается сказал он и набрал команду <kbd class=red>FORMAT C:</kbd></p>
Псевдоклассы и псевдоэлементы
В CSS определена особая группа классов и элементов автоматически поддерживаемых CSS совместимыми броузерами.
Селектор:псевдокласс { свойство CSS: значение }
Селектор:псевдоэлемент { свойство CSS: значение }
Например вот так можно задать стили для псевдоклассов элемента А:
a:link { color:blue; text-decoration:none } - стиль непосещенных ссылок;
a:active { color:red; text-decoration:underline } - стиль активизированных ссылок;
a:visited { color:navy; text-decoration:none } - стиль посещенных ссылок;
a:hover { color:red; text-decoration:underline } - стиль ссылок над которыми находится курсор-указатель;
a:focus { background-color:silver } - стиль ссылок получивших фокус ввода;
Манипулируя свойствами псевдоклассов можно задать разные стиль для выделенных посещенных и выделенных не посещенных ссылок:
a:focus:link { background-color:grey } - не посещенные;
А вот так можно задать стиль псевдоэлементу first-letter элемента P:
p:first-letter { color:red; font-weight:bold } - стиль для первой буквы абзаца;
ID селекторы
Кроме классов в правилах CSS применяются так называемые "ID селекторы", задающие стиль конкретного элемента документа со значением атрибута ID равным значению "ID селектора".
#значение ID { свойство CSS: значение }
Например:
#sample { color:black; font-family:monospace } - id селектор sample
В HTML документе применение данного правила выглядит так:
<P ID=sample>Здесь должен быть программный код примера</p>
