HTML: Популярный самоучитель
Шрифт:
10.3. Записи таблицы стилей
Таблицы стилей представляют собой множество записей, называемых правилами. Каждое правило CSS состоит из двух частей: селектора и объявления стиля. Селектор несет в себе информацию, достаточную для нахождения в документе элементов, к которым применяется стиль. Объявление стиля представляет собой набор пар свойство/значение, заключенный в фигурные скобки {}. Синтаксис правила CSS следующий:
селектор {свойство: значение; свойство: значение; ...}
При объявлении стиля может быть задано как значение только одного свойства, так и значения сразу нескольких свойств CSS. В последнем случае пары свойство/значение отделяются
То, что обозначено в приведенном примере как селектор, может быть названием HTML-элемента (например, P, STRONG, H1), идентификатором фрагмента документа (#par1, #tabl1), именем стилевого класса (.par1, P.par1) или более сложной конструкцией, описанной ниже.
Свойство представляет один из предопределенных строковых идентификаторов, обозначающих тот или иной параметр, поддерживаемый для HTML-элемента (например, color, backgroundcolor, font-family). Тип присваиваемого значения зависит от конкретного параметра.
Одни и те же правила отображения могут применяться к нескольким различным селекторам. В этом случае запись в таблице стилей будет иметь следующий вид:
селектор, селектор, ... {свойство: значение; свойство: значение; ...}
Свойства CSS, которые можно задать для различных элементов, существенно отличаются. Часть их мы рассмотрим на примерах в тексте книги. Более полный перечень свойств с их описаниями вы сможете найти в приложении 2.
Правила отображения HTML-элементов
Рассмотрим самое простое применение CSS – задание стиля текста (или прочего содержимого), содержащегося внутри определенных HTML-элементов. Для этого нужно указать в качестве селектора название HTML-элемента (или нескольких HTML-элементов), например:
H1 {color: red; font-family: arial}
H2, H3 {color: blue; font-family: courier}
P {font-style: italic}
Теперь все заголовки первого уровня будут отображаться красным цветом шрифтом Arial, заголовки второго и третьего уровней будут отличаться только размером шрифта, а текст внутри каждого HTML-элемента P будет отображаться курсивом.
Приведенный выше текст уже является таблицей стилей. Его можно поместить в отдельный CSS-файл. Тогда получится внешняя таблица стилей. Можно поместить определение CSS внутрь HTML-документа так, как это показано в примере 10.1.
<HTML>
<HEAD>
<TITLE>Использование стилей HTML-элементов</TITLE>
<STYLE type = "text/css">
H1 {color: red; font-family: arial}
H2, H3 {color: blue; font-family: courier}
P {font-style: italic}
</STYLE>
</HEAD>
<BODY>
<H1>Заголовок первого уровня</H1>
Текст абзаца
<H2>Заголовок второго уровня</H2>
Текст абзаца
<H3>Заголовок третьего уровня</H3>
Текст абзаца
</BODY>
</HTML>
На рис. 10.1 приведено подтверждение сказанных выше слов о том, как браузер покажет текст документа с рассмотренной таблицей стилей.
Рис. 10.1. Задание стилей для HTML-элементов
Использование стилевых классов
Второй способ применения таблиц стилей основан на использовании стилевых классов. Рассмотрим это на примере:
H1.arial {color: red; font-family: arial}
H2.newroman {color: blue; font-family: newroman}
P.italic {font-style: italic}
.bold {font-weight: bold}
Здесь
созданные в таблице стилей селекторы указывают на четыре стилевых класса с именами arial, newroman, italic, bold. Перые три правила могут использоваться только для HTML-элементов H1, H2 и P, для которых заданы стилевые классы arial, newroman и italic соответственно. Четвертый селектор позволяет применить правило к любому элементу, стилевой класс которого указан как bold.Назначение стилевого класса HTML-элементу осуществляется при помощи атрибута class. Этот атрибут поддерживается для всех элементов, кроме BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE.
Рассмотрим пример использования стилевых классов (пример 10.2).
<HTML>
<HEAD>
<TITLE>Использование стилевых классов</TITLE>
<!– Определение таблицы стилей–>
<STYLE type = "text/css">
H1.arial {color: red; font-family: arial}
H2.newroman {color: blue; font-family: newroman}
P.italic {font-style: italic}
.bold {font-weight: bold}
</STYLE>
</HEAD>
<BODY>
<H1>Заголовок первого уровня</H1>
Текст абзаца
<H1 class = "arial">Измененный заголовок первого уровня</H1>
<H2>Заголовок второго уровня</H2>
<P class = "italic">Курсивный текст абзаца
<H2 class = "newroman">Измененный заголовок второго уровня</H2>
<P class = "bold">Полужирный текст абзаца
</BODY>
</HTML>
Страница, формируемая браузером Internet Explorer при обработке приведенного примера, показана на рис. 10.2.
Рис. 10.2. Использование стилевых классов
Как можно увидеть, для использования стилевых классов нужно немного больше поработать над содержимым HTML-документа, назначая нужным элементам значения атрибутов class. При этом доступно гораздо больше возможностей по оформлению документа: например, может быть недостаточно одного и того же цвета абзацев, одинакового выравнивания или шрифта текста. Есть еще множество случаев, когда удобнее создать некоторое количество стилевых классов, а не задавать CSS-свойства одинаковых HTML-элементов, как это сделано в примере 10.1.
Задание отображения единичных элементов документа
Стили можно определять не только в таблице стилей. При помощи атрибута style можно создавать так называемые «инлайн-стили». Атрибут style поддерживается для тех же HTML-элементов, что и атрибут class. Для создания «инлайн-стиля» атрибуту style присваивается значение, которое обычно записывается в скобках {} в строке таблицы стилей (то есть объявление правила). Ниже приведен переделанный пример 10.2, в котором как раз и реализовано определение стилей в атрибуте style (обратите внимание, что при этом отпала необходимость определения самой таблицы стилей) (пример 10.3).
<HTML>
<BODY>
<H1>Заголовок первого уровня</H1>
Текст абзаца
<H1 style = "color: red; font-family: arial">Измененный заголовок первого уровня</H1>
<H2>Заголовок второго уровня</H2>
<P style = "font-style: italic">Курсивный текст абзаца
<H2 style = "color: blue; font-family: newroman">Измененный заголовок второго уровня</H2>
<P style = "font-weight: bold">Полужирный текст абзаца
</BODY>
</HTML>