Основы оформления документов

Селекторы и классы стиля

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

Тем не менее, там, где удобно, встроенные таблицы стилей всегда должны быть предпочтительным методом оформления, даже для приложения специальных только одноразовых стилей. Встроенные таблицы стилей локализуют настройки стиля оформления в одном разделе страницы <style>, делая их более доступными, чем если бы они были разбросаны по множеству линейных таблиц стилей. Встроенные таблицы стилей можно также легко преобразовать во внешние таблицы стилей для приложений уровня сайта. Ниже обсуждаются способы применения специального оформления элементов страницы с помощью встроенных объявлений стиля, а не с помощью линейных таблиц стилей.

Простые селекторы

За счет пересмотра большую часть встроенного оформления можно выполнить с помощью селекторов отдельных тегов и соответствующих объявлений стиля. Эти простые селекторы объявляют используемое по умолчанию оформление тега для всей страницы. Общий формат простого селектора показан в листинге 3.33.

selector {property:value [; property:value] ... }

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

<style type="text/css">
  body       {margin:20px; color:black}
  h1         {color:blue; text-align:center}
  h2         {color:blue; text-align:left}  
  p          {text-align:justify; text-indent:25px}
</style>

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

Селекторы ID

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

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

Первый шаг в оформлении этого конкретного параграфа состоит в присвоении ему значения id. id является уникальным идентификатором для тега. Он может быть любым именем, выбранным как комбинация алфавитных и цифровых символов. В следующем коде идентификатор id="Special" присвоен параграфу, требующему специального форматирования.

<p id="Special">Этот параграф требует специального оформления, 
    отличающегося от обычных параграфов на странице. Он должен быть смещен 
    на 25 пикселей от обоих  полей и не должен иметь отступа в первой 
    строке.</p>

С помощью id, присвоенного этому тегу <p>, можно определить специальное оформление, используя селектор ID во встроенной таблице стилей. Общий формат селектора ID показан в листинге 3.36.

selector#id {property:value [; property:value] ...}

Стили определяют для селектора, но только для селектора с заданным ( # ) значением id. Таким образом, селектор ID можно добавить к приведенной выше таблице стилей, чтобы отформатировать специальный параграф иначе, чем обычный параграф:

<style type="text/css">
  body     {margin:20px; color:black}
  h1         {color:blue; text-align:center}
  h2         {color:blue; text-align:left}  
  p           {text-align:justify; text-indent:25px}
  p#Special  {text-indent:0px; margin-left:25px; margin-right:25px}
</style>

Синтаксис p#Special относится к тегу <p> со значением id (#), заданным как "Special". Стандартный отступ первой строки в 25 пикселей, заданный простым селектором p, изменен на 0 пикселей для этого конкретного параграфа. Для этого параграфа также заданы значения левого и правого полей, отличающиеся от обычных параграфов. Однако его текст остается выровненным по ширине, как унаследовано из оформления стандартного параграфа, заданного селектором p. Другими словами, все параграфы наследуют оформление, заданное простым селектором p, если только стили не модифицируются или не дополняются селекторами p#id.

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

Оформление тегов <span> и <div>

Оформление тегов <span> и <div> не должно выполняться с помощью простых селекторов во встроенной таблице стилей. Эти теги часто появляются на странице несколько раз, чтобы выделить и оформить различные части текста и различные наборы элементов страницы, которые обычно требуют различного оформления. Поэтому невозможно связать один определенный стиль с этими тегами, не ограничивая их гибкость в оформлении других фрагментов текста или разделов, которые требуют отличающегося оформления. Другими словами, не применяйте кодирование следующих простых селекторов во встроенных таблицах стилей.

<style type="text/css">
  div     {property:value}
  span    {property:value}
</style>

Однако, используя селекторы ID с этими тегами, можно применять различное оформление для различных тегов <span> и <div>, не связывая их с одним определенным стилем.

В следующем примере двум параграфам задают один и тот же стиль, помещая их внутри тега <div>, для которого задается специальное оформление. Это оформление влияет только на этот единственный раздел с помощью своего уникального селектора ID. Оформление других разделов не затрагивается, так как они не имеют этого значения id. В то же самое время два тега <span>, получают свое уникальное оформление через свои уникальные значения id, оставляя незатронутым все остальное оформление охваченного тегами <span> текста.

<style type="text/css">
  div#Justify {text-align:justify}
  span#Red    {color:red}
  span#Blue   {color:blue}
</style>

<div id="Justify">
<p>Этот параграф оформляется наследованием оформления своего 
контейнерного раздела, который форматируется с помощью <span 
id="Red">"Justify"</span> style.</p>

<p>Это параграф также оформляется наследованием оформления своего 
контейнерного раздела. Кроме того, к одному из его слов применяется 
оформление <span id="Blue">"Blue"</span></p>
</div>