5.2. Варианты использования css
Таблицы стилей можно применить к web-странице любым из трех способов:
– встраивание;
– подключение;
– связывание.
В составе документа можно одновременно использовать различные типы таблиц стилей. При этом действуют правила каскадирования: встраиваемые стили имеют приоритет перед подключаемыми, подключаемые стили имеют приоритет перед связываемыми.
Встраиваемые стили. CSS – это средство, позволяющее задавать различные визуальные свойства HTML-тэгам. Стиль задается атрибутом STYLE, который можно использовать практически в каждом тэге, задавая его специфические свойства. Значения атрибута STYLE обязательно заключаются в кавычки (одинарные или двойные), причем свойства отделяются друг от друга точками с запятой (пробелы не обязательны). Встраиваемые стили оказывают влияние на тот тег, в котором используются.
Пример использования STYLE для отдельного абзаца:
< P STYLE="font–size: 1.5cm; color: green;">
Ниже приведен пример использования атрибута STYLE в HTML-коде для различного оформления строк списка, отображение этого примера в браузере представлено на рис. 5.1.
<HTML>
<HEAD>
<TITLE> стиль для отдельного тэга </TITLE>
</HEAD>
<BODY BGCOLOR="white" TEXT="black">
<H2> стиль для отдельного тэга </H2>
<HR>
<UL>
<LI>это обычный текст
<LI STYLE="color: red; font-size: 1cm; font-style: italic;">
Красные наклонные буквы высотой в 1 сантиметр
<LI STYLE="color: blue; font-size: 0.5cm margin-top: 2cm;">
Синие буквы высотой 0.5 см с отступом слева в 2 сантиметра
</UL>
</BODY>
</HTML>
Рис. 5.1. Отображение в браузере примера с встраиваемыми стилями
Встроенный стиль можно применять к строковым элементам, используя тег <SPAN>. Следующий пример показывает, как присваивается красный цвет одному слову в заголовке.
<H1>
<SPAN STYLE="color: red;"> Защита</SPAN>компьютерных сетей
</H1>
Возможно установить встроенный стиль для текстового блока, при этом свойства стиля будут применены ко всем элементам, входящим в блок.
<DIV STYLE="fony-family: serif; color: brown;">
<H1> Часть первая </H1>
<H2> Глава 1</H2>
<BR><BR>
<CITE>М. Булгаков<CITE>
</DIV>
Во всех вложенных элементах H1, H2, CITE блока DIV будет использован шрифт семейства serif коричневого цвета. Это произойдет согласно правилам наследования, которые будут рассмотрены позже.
Подключаемые стили. Подключаемые стили, которые также называются внутренними стилями, применяются ко всей web-странице. Для этого достаточно написать определение в головной части документа, которое использует парный тег <STYLE> </STYLE>.
<STYLE TYPE="text/css">
<! -- Описание таблицы стилей -- >
</STYLE>
В этом коде значение text/css атрибута TYPE сообщает браузеру, что в текущем файле применен текст на языке CSS. Все формальные описания стилей, представляющие собой CSS-правила, помещаются в элемент STYLE.
Каждое определение содержит перечисление свойств и значений. Описания всех свойств и значений разделяются точкой с запятой и заключаются в общие фигурные скобки.
селектор (или имена тэгов через запятую)
{
свойство: значение;
………………………
свойство: значение;
}
Пример задания стилей заголовков всех шести уровней для всей страницы в заголовочной части HTML-файла:
<HTML>
<HEAD >
<STYLE TYPE ="text /css">
H1, H2, H3, H4, H5, H6
{
text–align: right;
color: maroon;
font – family: "Arial Cyr", Geneva, Helvetica, Sans-serf;
}
</STYLE>
</HEAD>
Связываемые стили. Связываемые, или внешние, стили применяются к документам всего web-сайта. Обычной практикой является указание стилей в отдельном файле с расширением .css, который может использоваться несколькими HTML-документами, ссылающимися на этот файл. Это очень привлекательно, когда нужно выдержать сайт в одном стиле, не утруждая себя составлением таблиц для каждого документа. Если в файл стилей были внесены изменения, то эти изменения отразятся в каждом документе, который содержит ссылку.
Для этого необходимо сначала создать файл, содержащий стилевое оформление (набор стилей) и дать ему определенное имя, которое бы указывало на то, что там находится, например, файл с именем style.css. Покажем примерное содержимое этого файла.
<STYLE TYPE="text/css">
BODY{background: black; font-size: 9pt; color: red; font-family: Arial;}
.base {color: blue; font-style: italic;}
H1 {color: white;}
#bold {font-weight: bold;}
</STYLE>
В самих же HTML-файлах делается ссылка на этот файл при помощи тега <LINK>.
<LINK REL="stylesheet" TYPE="text/css" HREF="путь до файла">
Приведем пример привязки стилевого файла к одному из HTML-фай-лов, например к индексному.
<HTML>
<TITLE> </TITLE>
</HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="styles.css">
<BODY>
</BODY>
</HTML>