Синтаксис CSS

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

p {color:green; font-size:13px;}

Каждое CSS-правило начинается с селектора (от англ. select – выбирать), который указывает какой именно HTML-элемент необходимо оформить. В нашем примере селектор p, указывает, что дальнейшее описание стилей относятся именно к параграфам. За селектором следует блок объявлений стилей в фигурных скобках, внутри которого объявления разделены точкой с запятой. При этом каждое объявление состоит из названия свойства и его значения, разделенных двоеточием. В данном примере для содержимого тега p указаны цвет (color) и размер шрифта (font-size).

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

p {
  color: green;
  font-size: 13px;
}

Смысле ее при этом остается прежним.

Селектор элемента

Рассмотрим чуть подробнее селекторы в CSS-правилах. Как понятно из приведенного выше примера, в качестве селектора можно указывать название тега. Тогда соответствующее CSS-правило распространяется на все аналогичные теги веб-страницы. Т.е. в нашем случае все абзацы на странице будут выведены зеленым цветом с размером шрифта в 13 пикселей.

Для указания одного конкретного HTML-элемента, т. е., например, одного абзаца из нескольких, можно использовать глобальный атрибут id. Так, для оформления только первого вступительного параграфа можно указать в нем произвольный уникальный идентификатор, например intro:

<p id="intro">Вступительный абзац текста.</p>
<p>Еще один абзац текста.</p>

и использовать его вместе с символом решетки # в качестве селектора в соответствующем CSS-правиле:

#intro {
  color: green;
  font-size: 13px;
}

Символ решетки означает, что в селекторе указан именно идентификатор тега. Т.е. в данном примере, CSS-правило определяет оформление содержимого тега с идентификатором "intro" (id="intro"). Причем, это не обязательно должен быть именно абзац, а может быть любой тег с данным id. Важно только отметить, что в рамках одной веб-страницы идентификаторы должны быть уникальны, т. е. их значения не должны повторяться для разных тегов.

Другой способ указать стили для конкретного HTML-элемента — это использование глобального атрибута class. В соответствующем селекторе название класса указывается после точки. Таким образом, чтобы указать цвет и размер шрифта для всех абзацев, оформленных с помощью класса "bright":

<p class="bright">Это выделенный абзац текста.</p>
<p>Обычный абзац текста.</p>
<p class="bright">Еще один выделенный абзац текста.</p>

можно использовать следующее CSS-правило:

.bright {
  color: green;
  font-size: 13px;
}

Причем, в отличие от атрибута id, одно и тоже значение атрибута class можно присваивать сразу нескольким тегам на странице, например, двум разным параграфам текста.

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

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

h1 {
  color: red;
}

h2 {
  color: red;
}

h3 {
  color: red;
}

Хотя, такие повторяющиеся определения можно объединить, перечислив соответствующие HTML-элементы в селекторе через запятую, что существенно сокращает CSS-код:

h1, h2, h3 {
  color: red;
}

Каскадные таблицы стилей (от англ. Cascading Style Sheets, CSS) — это язык, определяющий стиль или визуальное оформление веб-страниц, в т.ч. расположение HTML-элементов на экране, цвета текста и фона, шрифты и многое другое.