5.3 Создание внешних и глобальных таблиц стилей
Рассмотрим самое простое применение CSS - задание правил отображения текста (или
прочего содержимого), находящегося внутри определенных HTML-элементов:
Н1 {color: red; font-family: arial}
H2, H3 {color: blue; font-family: courier}
P {font-style: italic}
При использовании данных таблиц стилей все заголовки первого уровня (H1) будут
отображаться красным цветом шрифтом Arial, заголовки второго (H2) и третьего (H3) уровней
будут отображены синим цветом шрифтом (Courier), а текст внутри каждого HTML- элемента Р
будет отображаться курсивом.
Приведенный выше текст уже является таблицей стилей. Его можно поместить в отдельный
CSS- файл . Тогда получится внешняя таблица стилей . А можно поместить определение CSS в
голову HTML- документа так , как это показано далее в примере 1. Тогда получится глобальная
таблица стилей.
Пример 1. Стили для HTML-элементов
<HTML>
<HEAD>
<TITLE>Использование стилей НТМL-элементов</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>
<P>Текст абзаца </P>
<H2>Заголовок второго уровня </H2>
<P>Текст абзаца</P>
<H3>Заголовок третьего уровня </H3>
<P>Текст абзаца </P>
</BODY>
</HTML>
На рис. 1 приведено подтверждение сказанных выше слов о том, как браузер покажет текст
документа с рассмотренной таблицей стилей.
Рисунок 1 - Задание стилей для HTML-элементов
5.4 Использование стилевых классов
Второй способ использования таблиц стилей - создание стилевых классов. Рассмотрим это
на примере:
H1.ar {color: red; font-family: arial}
13
H2.new {color: blue; font-family: newroman}
P.it {font-styte: italic}
.bol {font-weight: bold}
Здесь создано четыре стилевых класса с именами ar, new, it, bol. Первые три из них могут
использоваться только для HTML-элементов H1, H2 и Р соответственно . Четвертый стилево й
класс можно назначать любому элементу.
Назначение стилевого класса HTML-элементу осуществляется при помощи атрибута class.
Этот атрибут поддерживается для всех элементов, кроме BASE, BASEFONT, HEAD, HTML,
МЕТА, PARAM, SCRIPT, STYLE, TITLE.
Ниже приведен пример использования стилевых классов (как создание их, так и
назначение).
Пример 2. Использование стилевых классов
<HTML>
<HEAD>
<TITLE>Использование стилевых классов</TITLE>
<!-- Определение таблицы стилей-->
<STYLE type = "text/css">
H1.ar {color: red; font-family: arial}
H2.new {color: blue; font-family: newroman}
P.it {font-style: italic}
.bol {font-weigth : bold}
</STYLE>
</HEAD>
<BODY>
<H1>Заголовок первого уровня</H1>
<P>Текст абзаца </P>
<H1 class="ar">Измененный заголовок первого уровня</H1>
<H2>Заголовок второго уровня </H2>
<P class="it"> Курсивный текст абзаца </P>
<H2 class="new">Измененный заголовок второго уровня</Н2>
<P class="bol"> Полужирный текст абзаца </P>
</BODY>
</HTML>
Страница, формируемая браузером Internet Explorer при обработке приведенного примера,
показана на рис. 2.
Рисунок 2 - Использование стилевых классов