Терминология каскадных списков стилей
Список стилей содержит одно или несколько правил. Правило (rule) каскадного списка стилей представляет собой инструкцию для Web-браузера по форматированию или позиционированию HTML-элемента определенного типа. Список стилей в предыдущем примере содержит два правила. Первое правило указывает Web-браузеру, что текст, заключенный между начальным и конечным дескрипторами заголовка уровня 1 (<h1></h1>), должен выводится на экран шрифтом Verdana синего цвета и размера 40 пикселей:
h1 {color:blue; font-size:40px; font-family:verdana}
Первое правило списка стилей заставляет Web-браузер для первой строки текста, заключенного между начальным и конечным дескрипторами абзаца (<р></р>), ввести абзацный отступ два сантиметра и вывести его на экран шрифтом Helvetica белого цвета на зеленом фоне:
Р {color:white; background:green; font-family:Helvetica; text-indent:2cm}
Следующее простое правило списка стилей содержит "селектор" (h1), который указывает, к какому HTML-элементу должно применятся данное правило, выводящее элемент на экран синим цветом:
H1 {color:blue}
Оператор каскадного списка стилей всегда имеет вид селектор {правило}. В фигурных скобках может размещаться одно или несколько правил, при этом правила разделяются с помощью точки с запятой. Приведенное выше правило указывает Web-браузеру выводить текст, который в HTML-коде находится между начальным и конечным дескрипторами заголовка уровня 1 (<h1></h1>), синим цветом. Селектор (в приведенном примере h1) представляет собой HTML-дескриптор, к которому Web-браузер должен применять правило списка стилей, объявление (color:blue) — это инструкция позиционирования или форматирования, которую Web-браузер должен применить. Объявление, как и правило, состоит из двух частей: свойства (например, color) и значения (blue).
Как видно из двух правил, содержащихся в приведенном выше примере, объявления с помощью скобок за селектором можно объединять в группу - правило каскадного списка стилей. При этом отдельные объявления разделяются точкой с запятой. Так, например, на рис. 4.4 рассмотрены отдельные составляющие правила каскадного списка стилей, используемого для вывода на экран страницы, показанной на рис. 4.3.
Рис. 4.4. Правило каскадного списка стилей с одним селектором и тремя объявлениями
В качестве селектора можно использовать любой HTML-дескриптор, а одно правило может содержать несколько селекторов. Например, чтобы Web-браузер применял одно и то же правило к заголовкам уровня 2, тексту абзаца и неупорядоченного списка необходимо написать следующее правило:
h2, p, ul {color:green; font-family:arial}
Это правило указывает Web-браузеру выводить на экран заголовки уровня 2, текст абзаца и неупорядоченного списка шрифтом Arial зеленого цвета. Обратите внимание, что в качестве селектора могут использоваться совершенно любые HTML-дескрипторы. Таким образом, правила каскадных списков стилей могут применяться к изображениям (селектор img) и таблицам (селектор table).
Например, запустите свой любимый текстовый редактор и наберите следующий HTML-код:
<html><head><title>CSS-правило, применяемое к таблице</title><style type="text/css">
table {background:green; color:white; font-size:20px; position:absolute; left:150px; top:200px}</style></head><body><h1>Таблица с текстом белого цвета и фоном зеленого цвета</h1>
<table border="5">
<tr>
<td>Строка 1, столбец 1</td><td>Строка 1, столбец 2</td>
</tr><tr>
<td>Строка 2, столбец 1</td><td>Строка 2, столбец 2</td>
</tr>
</table>
</body></html>
Как уже известно из вводной части этой главы, код между начальным и ко- нечным дескрипторами <styie></styie > описывает правила каскадного списка стилей. Селектор table указывает браузеру применять правило списка стилей к содержащимся на странице таблицам. Поэтому в приведенном примере будет со- здана таблица с зеленым фоном и шрифтом белого цвета размером 20 пикселей. Более того, Web-браузер поместит таблицу на расстоянии 150 пикселей правее левой границы и 200 пикселей ниже верхней границы Web-страницы. Сохраните набранный код в HTML-файле (например, css Test2.htm) и откройте HTML- документ в Web-браузере. На экран будет выведена страница, похожая на пока- занную на рис. 4.5.
Рис. 4.5. Web-страница с каскадным списком стилей, форматирующим таблицу