Что такое CSS?

Синтаксис CSS

Таблица стилей документа представляет собой набор правил, ассоциированных с документом HTML и определяющих его отображение. Каждое правило в таблице стилей состоит из селектора и блока объявлений. Блок объявлений всегда отделяется от селектора пробелом и заключается в фигурные скобки. Селектор определяет область применения стилевого правила, а блок объявлений содержит одно или несколько объявлений, которые отделяются друг от друга точкой с запятой.

Каждое объявление включает в себя свойство и соответствующее этому свойству значение. Любое свойство является обобщенным параметром оформления и должно отделяться от значения двоеточием. Свойства могут быть достаточно разнообразны: они могут определять цвет элемента и фона, поля, заполнение, тип и размер шрифта и т.п. Набор допустимых значений для каждого конкретного свойства должен быть определен индивидуально. Правило может быть задано следующим образом:

P {font-family: arial; color: red}

В приведенном примере свойству font-family, определяющему вид шрифта, присваивается значение arial, а свойству color, определяющему цвет шрифта, – значение red. Поскольку блок объявлений соотносится с селектором P, то областью применения данного стилевого правила будут являться все элементы <P>…</P>.

Существует несколько различных селекторов, каждый из которых соответствуют различным частям разметки. Четырьмя наиболее общими селекторами являются универсальные селекторы, селекторы элементов, селекторы классов и селекторы идентификаторов.

Универсальные селекторы. Универсальные селекторы позволяют применить стилевое оформление сразу ко всем элементам на странице. Например, следующее правило устанавливает сплошную границу толщиной 1 пиксел для каждого элемента на странице:

* {border: 1px solid;}

Селекторы элементов. Для определения информации о представлении элементов HTML большинство стилевых правил используют в качестве селекторов имена этих элементов. Например,

P {font-size: 1.2em; margin: 10px 20px;}

Приведенное выше правило будет применяться ко всем элементам <P>…</P>.

Селекторы классов. Напомним, что Спецификация HTML 4.01 предусматривает для всех элементов специальный атрибут class, который позволяет особым образом отметить некоторые структурные элементы в документе, например

<P class="important">...</P>

Каскадные таблицы стилей позволяют использовать в качестве селекторов значения атрибутов class. Названия классов в селекторах предваряются точкой и указываются после имен элементов:

P.important {padding-left: 20px;}

В приведенном примере стилевое правило будет применяться только к тем элементам <P>…</P>, атрибут class которых имеет значение important.

Каскадные таблицы стилей также позволяют использовать в селекторах названия классов без указания имен элементов:

.important {padding-left: 20px;}

Подобные стилевые правила будут применяться ко всем элементам, которые имеют атрибут class с указанным значением.

Селекторы идентификаторов. Помимо классов, Спецификация HTML предусматривает для всех элементов еще один специальный атрибут id, с помощью которого любому элементу можно назначить уникальный идентификатор, например:

<DIV id="header">...</DIV>

Главное отличие идентификаторов от классов заключается в том, что каждое значение атрибута id должно быть уникальным. Идентификаторы в селекторах указываются после имен элементов и предваряются символом #:

DIV#header {width: 1000px;}

Данное стилевое правило будет применяться к единственному экземпляру элемента <DIV>…</DIV>, которому назначен атрибут id со значением header. Если в селекторе используется идентификатор без указания конкретного элемента, то такое стилевое правило будет применяться к единственному экземпляру любого элемента, значение id которого равно header:

#header {width: 1000px;}

Можно соединять несколько селекторов, чтобы определить еще более конкретные правила. Например, запись

P.warning{}

соответствует всем параграфам со значением class равным warning ;

DIV#example{}

соответствует элементу DIV со значением атрибута id равным example ;

P.info, LI.highlight{}

соответствует параграфам со значением class равным info и элементам списка со значением class равным highlight

Группировка селекторов

Если нескольким разным селекторам необходимо сопоставить одинаковые объявления, такие селекторы можно сгруппировать в список. Имена селекторов в данном случае должны разделяться запятыми:

P, UL {font-size: 1.2em; line-height: 1.5em;}

В приведенном примере для двух элементов P и UL назначается одинаковый размер шрифта и межстрочный интервал. Синтаксис каскадных таблиц стилей позволяет легко группировать не только простейшие селекторы с именами элементов, но также и другие типы селекторов. В некоторых случаях подобная группировка позволяет значительно сократить размер CSS-файла.

Дополнительные селекторы CSS

Кроме рассмотренных выше селекторов существуют и другие, которые позволяют выбирать элементы для стилевого оформления на основе более специальных критериев. Ниже будут рассмотрены некоторые из них.

Селекторы атрибутов. Селекторы атрибутов позволяют выбирать элементы на основе содержащихся в них атрибутов. Например, можно выбрать каждый элемент IMG с атрибутом alt с помощью следующего селектора:

IMG[alt] {border: 1px solid;}

Элементы можно выбирать не только на основе содержащихся в них атрибутов, но и по значениям этих атрибутов. Следующее правило будет применяться ко всем изображениям со значением атрибута src равным image.jpg:

IMG[src="image.jpg"] {border: 1px solid;}

Селекторы потомков. Селекторы потомков используются для выбора только определенных элементов, которые являются потомками других определенных элементов. Например, следующее правило будет применяться ко всем элементам STRONG, которые являются потомками элементов H1. Другими словами, оно применяется только к тем элементам STRONG, которые находятся внутри элемента H1, и никакого промежуточного элемента между ними нет:

H1 > STRONG {color: blue;}

Селекторы нижележащих элементов. Селекторы нижележащих элементов выбирают все подходящие элементы в любом месте иерархии элементов. Рассмотрим следующий фрагмент кода HTML:

<DIV>
  <STRONG>Первый потомок элемента DIV</STRONG>
  <P>Второй потомок элемента DIV 
    <STRONG>Единственный потомок элемента P</STRONG>.
  </P>
</DIV>

В этом фрагменте элемент DIV является предком всех других элементов: двумя его потомками являются элементы STRONG и P. Элемент P имеет один элемент-потомок - еще один STRONG. Можно использовать селектор потомков для выбора только первого элемента STRONG, находящегося непосредственно внутри DIV следующим образом:

DIV > STRONG { ... }

Если вместо этого использовать селектор нижележащих элементов, то будут выбраны оба элемента STRONG:

DIV STRONG { ... }

Селекторы смежных одноуровневых элементов. Эти селекторы позволяют выбирать определенный элемент, который следует непосредственно после другого определенного элемента на том же уровне в иерархии элементов. Например, если необходимо выбрать только элементы P, следующие непосредственно за элементами H1, можно воспользоваться следующим правилом:

H1 + P { ... }