05. CSS-конструирование

На этой странице:

• CSS-инструментарий
• Контекстные определения
• Классы
• Элементы DIV и SPAN
• Комментарии в языке CSS

CSS-инструментарий

Ранее были показаны самые простые способы описаний стилевых свойств гипертекстового документа:

• запись стилевых правил в открывающем теге конкретного элемента при помощи атрибута style;
• запись стилевых правил в головной части HTML-кода или отдельном стилевом файле для всех элементов с заданным именем тега.

Для конкретного абзаца можно задать, например, выравнивание по ширине:

Только этот конкретный абзац будет выровнен по ширине.

Для всех абзацев такое указание нужно помещать внутрь элемента STYLE головной части кода или в отдельный стилевой файл и связывать с именем тега:

  
P {text-align:justify}

Теперь все элементы P будут выравниваться по ширине.

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

Предположим, одни абзацы нужно выравнивать по ширине, а другие по правому краю, как быть?

Можно написать для всех тегов P определение P {text-align:justify} в отдельном CSS-файле, а для каждого “правого” абзаца использовать указание <P style="text-align:right"> внутри открывающих тегов HTML-кода.

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

Ни первый, ни второй вариант не позволяют вынести все стилевые определения из HTML-кода, то есть не позволяют полностью отделить структурную разметку от визуальной.

Хотелось бы иметь возможность строить стилевые определения без привязки к именам тегов.

Такой механизм в CSS существует. Он позволяет описывать определение не для тега, а для класса.

Можно, например, написать определения двух классов с именами pj и pr:

  
.pj {text-align:justify}
.pr {text-align:right}

Для связи стилевых классов с элементами используется атрибут class. Для абзацев, которые нужно выравнивать по ширине, теперь нужно записывать <P class=pj>, а для абзацев с ровным правым краем — <P class=pr>.

Подробнее о стилевых классах рассказано в разделе “Классы”.

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

О контекстных определениях рассказывает следующий раздел.

Контекстные определения

Можно написать стилевое определение, которое будет работать только при определенной комбинации вложенности элементов.

Для задания контекстного определения нужно в его заголовке перечислить через пробелы имена тегов в порядке предполагаемой вложенности. Например, можно установить цвет для EM красным только для случая, когда этот элемент расположен внутри элемента P:

  
P EM {color:red}

Посмотрите как это работает на следующем примере.

Вы видите, что EM внутри P записывается красным, а внутри H1 — чёрным. Обратите внимание, что в заголовке стилевого определения отсутствует запятая. Это и есть признак контекстного определения. Если же записать P, EM {color:red}, то красный цвет приобретут как элементы P, так и элементы EM. То есть запятая определяет одинаковые стили для группы элементов.

Посмотрите ещё один пример контекстного определения.

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

Контекстные и групповые определения можно комбинировать. Запись H3 EM, H2 STRONG {color:blue} равнозначна двум таким правилам:

  
H3 EM {color:blue}
H2 STRONG {color:blue}

Классы

Стилевые определения можно описывать без указания тега. В этом случае каждому определению присваивается имя, которое можно использовать для сопоставления заданного стиля конкретному элементу. Такие стилевые определения называются классами. Класс записывается следующим образом:

  
.имя
{
 свойство: величина;
 ...
 свойство: величина;
}

Иными словами, определение записывается, как обычно, но вместо указаний на теги в заголовке используется конструкция .имя. Например, можно определить стилевой класс с именем def:

  
.def
{
  font-size: 130%;
  border: 2px solid red;
  background: #FFFFCC;
  padding: 10px;
}

Сопоставить класс с элементом можно при помощи соответствующего атрибута: <P class=def>. То есть в качестве значения атрибута class указывается имя класса.

Посмотрите, как работает этот код:

Можно образовывать классы с привязкой к именам тегов.

В следующем примере определен класс def, в котором за основу взято определение стиля для элементов P и добавлены новые свойства:

Можно образовывать контекстные определения с привязкой к классу. В следуюшем примере правило color:gray будет работать только для тех элементов LI, которые расположены внутри элемента класса list.

Элементы DIV и SPAN

Эти элементы играют особую роль при использовании языка CSS. Они позволяют выделять в документе области и задавать для них специфические свойства.

Разница между DIV и SPAN только в одном — первый элемент является элементом уровня блока, второй — последовательным элементом. Использование элемента SPAN позволяет задавать стилевые свойства даже отдельным словам и буквам.

Следующий пример демонстрирует использование этих элементов.

Комментарии в языке CSS

Комментарии в языке CSS записываются при помощи конструкции /* Это комментарий CSS */:

  
/* Выделенная область 
   ------------------ */
.def
{
  font-size: 130%;       /* Повышенный размер шрифта    */
  border: 2px solid red; /* Рамка красного цвета        */
  background: #FFFFCC;   /* Жёлтый фон                  */
  padding: 10px;         /* Отступ содержимого от рамки */
}

Комментарии можно записывать не только в стилевом файле или головной части HTML-кода, но и внутри значения атрибута style: