Основы работы с XHTML и CSS
Селекторы ID
Одним из способов применения специальных стилей для отдельных элементов страницы является задание для элемента уникального идентификатора. Затем во встроенной таблице стилей можно применить специальное оформление только к элементу с этим идентификатором.
Предположим, например, что для всей страницы Web принят для параграфа общий отступ и выравнивание с помощью показанной выше встроенной таблицы стилей. Скажем, все параграфы имеют отступ в 25 пикселей, а текст выравнивается по ширине с отступом первой строки в 25 пикселей. Предположим теперь, что один определенный параграф на странице требует отличающегося оформления. Этот один параграф должен быть смещен на 25 пикселей от левого и правого полей относительно окружающих параграфов, и он не должен иметь отступа в первой строке.
Первый шаг в оформлении этого конкретного параграфа состоит в присвоении ему значения id. id является уникальным идентификатором для тега. Он может быть любым именем, выбранным как комбинация алфавитных и цифровых символов. В следующем коде идентификатор id="Special" присвоен параграфу, требующему специального форматирования.
<p id="Special">Этот параграф требует специального оформления, отличающегося от обычных параграфов на странице. Он должен быть смещен на 25 пикселей от обоих полей и не должен иметь отступа в первой строке.</p>
Листинг 3.35. Идентификация параграфа для применения специального оформления (html, txt)
С помощью id, присвоенного этому тегу <p>, можно определить специальное оформление, используя селектор ID во встроенной таблице стилей. Общий формат селектора ID показан в листинге 3.36.
selector#id {property:value [; property:value] ...}
Листинг 3.36. Общий формат таблицы стилей для селектора ID (html, txt)
Стили определяют для селектора, но только для селектора с заданным (#) значением 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>
Листинг 3.37. Задание стилей для селектора ID (html, txt)
Синтаксис p#Special относится к тегу <p> со значением id (#), заданным как "Special". Стандартный отступ первой строки в 25 пикселей, заданный простым селектором p, изменен на 0 пикселей для этого конкретного параграфа. Для этого параграфа также заданы значения левого и правого полей, отличающиеся от обычных параграфов. Однако его текст остается выровненным по ширине, как унаследовано из оформления стандартного параграфа, заданного селектором p. Другими словами, все параграфы наследуют оформление, заданное простым селектором p, если только стили не модифицируются или не дополняются селекторами p#id.
Такой тип идентификация тега и оформления можно использовать для любого тега. Присвойте просто тегу уникальный id и выделяйте его из других тегов такого же типа, добавляя это значение #id к селектору тега.
