ИСПОЛЬЗОВАНИЕ СТИЛЕЙ И ЭФФЕКТОВ
Каскадные таблицы стилей
Каскадные таблицы стилей используются для отделения стиля элементов страниц (отступы, поля и т.д.) от структуры документа (заголовки разделов, текст, ссылки и т.д.). Такое отделение структуры от содержания позволяет быстро и удобно менять стиль документа.
Существует много способов задать стилевое оформление (стиль документа). Далее на листинге 1 приводится текст HTML-файла в котором используется встроенное стилевое оформление.
Листинг 1.
<html><body>
<P STYLE="font-size: 20pt"> Текст </P>
<P STYLE="font-size: 20pt; color: #0000FF">И еще текст </P>
<P STYLE="font-size: 25pt; color: #aF77dc">
ДАЛЬНЕЙШИЙ ТЕКСТ </P>
<P STYLE="font-size: 30pt; color: #00dc00">
ПРОДОЛЖЕНИЕ ТЕКСТА </P>
</body></html>
Далее на рис. 1 показан результат выполнения данного файла в окне браузера.
Рис. 1.
Первый раз мы используем встроенное стилевое оформление в строке
<P STYLE="font-size: 20pt"> Текст </P>
Атрибут STYLE позволяет задать стиль фрагмента документа. За каждым свойством таблицы стилей (в данном случае font-size) следует двоеточие, а за ним значение этого свойства. В этой строке мы задали размер шрифта для данного элемента P в двадцать пунктов.
В следующей строке
<P STYLE="font-size: 20pt; color: #0000FF">И еще текст </P>
заданы два свойства разделенные точкой с запятой. В этой строке кроме размера шрифта мы задаем синий цвет (это делается с помощью шестнадцатиричного кода). Вместо шестнадцатиричного кода можно использовать названия цветов, что будет использовано в следующем примере. Заметим, что встроенные стили (встроенные в определенный документ) перекрывают все прочие стили, которые обсуждаются далее.
Создание таблиц стилей с помощью элемента style
На листинге 2 показан пример создания таблицы стилей с помощью элемента STYLE. Результат выполнения программы отображен на рис.2.
Листинг 2.
<html><head> <STYLE TYPE="text/css">
EM { background-color: #8000FF; color: white }
H1 { font-family: Arial, sans-serif }
P { font-size: 18pt }
.blue {color: blue}
</STYLE></head>
<body> <h1 CLASS="blue"> Заголовок </h1>
Текст<P> Параграф </P><EM> Выделение </EM>
</body> </html>
Таблица стилей начинается в заголовочной части документа с тега
<STYLE TYPE="text/css">
Атрибут TYPE задает тип таблицы стилей. Стандартные текстовые таблицы стилей всегда используют тип text/css.
Рис.2.
Содержимое таблицы стилей задается в строках:
EM { background-color: #8000FF; color: white }
H1 { font-family: Arial, sans-serif }
P { font-size: 18pt }
.blue {color: blue}
Здесь определены правила для элементов EM, H1 и P. Все элементы EM, H1 и P этого документа будут отображаться в соответствии с указанными в этом стиле правилами. Заметим, что каждое правило начинается и заканчивается фигурной скобкой. Кроме того, в последней строке задается класс стилей .blue .
Свойство color задает цвет текста. Свойство background-color задает цвет фона (подобно атрибуту BGCOLOR в HTML). Свойство font-family задает название шрифта, которым должен быть изображен текст. В данном случае используем шрифт Arial. Второе значение sans-serif определяет типовое семейство шрифтов. Семейства шрифтов позволяют задать не конкретный шрифт, а тип шрифта, что позволяет добиться большей гибкости в работе сайта. В данном примере если шрифт Arial не будет найден на машине пользователя, то браузер будет использовать какой-нибудь другой шрифт типа sans-serif.
Несколько свойств отделяются друг от друга точкой с запятой. Например, можно задать
P { font-size: 18pt ;background-color: #00FFFF }
для дополнительной заливки параграфа фоном.
Свойство font-size определяет размер шрифта. В данном случае используется шрифт в 18pt.