Правила CSS

Лист стилей представляет собой набор правил 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:visited { 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>