HTML: Популярный самоучитель
Шрифт:
Приведенный выше текст уже является таблицей стилей. Его можно поместить в отдельный 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
<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>
Рассмотрим еще один способ применения правил отображения, задаваемых с помощью стилевых таблиц. В стилевой таблице можно задать CSS-свойства HTML-элемента, имеющего определенное значение атрибута id (атрибут рассматривался в гл. 6). Как это делается, лучше сразу рассмотреть на примере 10.4.
<HTML>
<HEAD>
<TITLE>Использование id в CSS</TITLE>
<!– Определение таблицы стилей–>
<STYLE type = "text/css">
#left_pointer {width: 60; height: 120}
#right_pointer {width: 120; height: 60}
</STYLE>
</HEAD>
<BODY>
Рисунки без применения стилей
<IMG src = "left.gif">
<IMG src = "right.gif">
А к этим рисунками применен стиль (изменение размера)
<IMG src = "left.gif" id = "left_pointer">
<IMG src = "right.gif" id = "right_pointer">
</BODY>
</HTML>
В данном случае при помощи CSS задаются параметры отображения двух рисунков. Как это реализуется браузером, можно увидеть на рис. 10.3.
Рис. 10.3. Задание стилей отдельных элементов
Задать параметры отображения только одного элемента рассмотренным способом можно потому, что значение атрибута id, если оно используется, обычно делается уникальным.
Контекстные селекторы
Помимо селекторов, связанных с определенными HTML-элементами, стилевыми классами или идентификаторами элементов, можно создавать и более сложные селекторы. Они подходят для случаев, когда стиль должен применяться только к элементам документа, находящимся внутри какого-то другого элемента. Например, средствами CSS можно особым образом оформить элементы LI, находящиеся внутри элемента LO, принадлежащего к различным стилевым классам (пример 10.5).
<HTML>
<HEAD>
<TITLE>Сложные селекторы</TITLE>
<STYLE type = "text/css">
OL.ordinary_list LI {}
OL.italic_list LI {font-style: italic}
OL.colored_list LI {color: green; background-color: yellow}
</STYLE>
</HEAD>
<BODY>
Список, оформленный обычным шрифтом
<OL class = "ordinary_list">
<LI>Элемент списка
<LI>Элемент списка
</OL>
Список, оформленным курсивным шрифтом
<OL class = "italic_list">
<LI>Элемент списка
<LI>Элемент списка
</OL>
Раскрашенный список
<OL class = "colored_list">
<LI>Элемент списка
<LI>Элемент списка
</OL>
</BODY>
</HTML>