Применение правил стиля к элементам документа

Атрибуты стиля применяются к элементам документа несколькими способами. Один из способов состоит в том, чтобы указать их в атрибуте style HTML_тега. Например, поля отдельного абзаца можно установить так:

Одной из главных задач CSS_стилей является отделение содержимого и структу_ ры документа от его представления. Задание стилей с помощью атрибута style в отдельных HTML_тегах не способствует решению этой задачи (хотя может быть полезным приемом DHTML_программирования). Чтобы добиться разделе_ ния структуры и представления, применяются таблицы стилей (stylesheets), объединяющие всю информацию о стилях в одном месте. Таблица CSS_стилей состоит из набора правил стиля. Каждое правило начинается с селектора, задаю_ щего элемент или элементы документа, к которым применяется правило; за се_ лектором следует набор атрибутов стиля и их значений, заключенный в фигур_ ные скобки. Простейший вид правил определяет стиль для одного или несколь_ ких конкретных тегов. Например, вот правило, устанавливающее поля и цвет фона для тега <body>:

body { margin_left: 30px; margin_right: 15px; background_color: #ffffff }

366 Глава 16. CSS и DHTML

Следующее правило определяет, что текст внутри заголовков <h1> и <h2> должен быть выровнен по центру:

h1, h2 { text_align: center; }

Обратите внимание на использование в примере запятой для разделения имен тегов, к которым должны применяться стили. Если запятая отсутствует, селек_ тор задает контекстное правило, применяемое только в том случае, если один тег вложен в другой. Например, следующие правила указывают, что теги <block_ quote> выводятся курсивом, но текст внутри тега <i>, находящегося внутри <blockquote>, должен выводиться прямым шрифтом:

blockquote { font_style: italic; }

blockquote i { font_style: normal; }

Другой тип правил в таблице стилей задает классы элементов, к которым долж_ ны применяться стили, и селектор в этом случае иной. Класс элемента определя_ ется атрибутом class HTML_тега. Например, следующее правило указывает, что любой тег с атрибутом class="attention" должен отображаться шрифтом полу_ жирного начертания:

.attention { font_weight: bold; }

Селекторы классов могут объединяться с селекторами имен тегов. Следующее правило указывает, что если в теге <p> есть атрибут class="attention", тег должен отображаться красным цветом (помимо полужирного начертания, как определе_ но предыдущим правилом):

p.attention { color: red; }

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

#p1 { visibility: hidden; }

Мы встречали атрибут id раньше: он применяется с DOM_функцией getElement_ ById() для получения отдельных элементов документа. Как можно предполо_ жить, этот вид правил в таблице стилей может с успехом использоваться для управления стилем отдельного элемента. При наличии такого правила сценарий может менять значение атрибута visibility со значения hidden (скрытый) на visible (видимый), вызывая динамическое появление элемента. Как это делает_ ся, показано в этой главе далее.

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