Связанные таблицы стилей используются, когда необходимо применять один и тот же стиль для множества документов (например для поддержания корпоративного стиля крупной организации, лист стилей головного офиса связывается с документами отделений). В данном случае, набор правил CSS сохраняется в текстовом файле с расширением CSS, (желательно снабдить файл комментариями) например вот так:
/* таблица стилей - my_style.css */
/* стили тела документа */
body { background-color:white; color:black;
font-family:Times New Roman, serif;
font-style:normal; font-size:10pt;
text-align:justify }
/* стили ссылок */
a:link { color:blue;text-decoration:none } /* ссылки */
a:active { color:red;text-decoration:underline } /* активные */
a:visited { color:navy;text-decoration:none } /* просмотренные */
Связывание файла стиля с документом осуществляется в заголовке документа при помощи тега <LINK> - (См. раздел 2.3.).
<LINK TYPE="text/css" REL="stylesheet" HREF="URL css-файла">
При использовании связанных стилей, можно создавать разные таблицы стилей, для разных форм представления документа. Например вы можете наряду со стандартной таблицей стилей - normal.css создать таблицу стилей c более компактными шрифтами и форматированием, предназначенную для печати - prn.css. Тогда линковка данных таблиц осуществляется следующим образом:
<LINK TYPE="text/css" REL="stylesheet" MEDIA="screen" HREF="style/normal.css">
<LINK TYPE="text/css" REL="stylesheet" MEDIA="print" HREF="style/prn.css">
Атрибут MEDIA указывает броузеру какую таблицу стилей использовать для печати, а какую для просмотра документа.
Использование CSS позволяет существенно упростить разработку и поддержку Web-сайтов за счет отделения стиля представления документов от их содержания, т.к. один раз созданный набор правил представления элементов стиля, можно использовать для множества документов.
Отделение формы представления документа от содержания продемонстрируем на конкретном примере. Постараемся создать документ содержащий лишь теги структурирования (заголовки, абзацы, разделители), а правила форматирования его элементов определим в глобальной таблице стилей.
Пример 7. Использование CSS. [просмотр примера в окне]
<HTML>
<HEAD>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html">
<meta HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<title>Демонстрация возможностей CSS</title>
</HEAD>
<!-- глобальная таблица стилей -->
<style type="text/css">
<!-- стиль ссылок -->
a:link { color:blue; text-decoration:none }
a:visited { color:navy; text-decoration:none }
a:hover { color:red; text-decoration:underline; background-color:#7DC0E8 }
a:active { color:red; text-decoration:underline }
<!-- стиль тела документа -->
body { background-color:white; color:black;
font-family:Times New Roman; font-style:normal; font-size:medium;
text-align:justify }
<!-- стили элементов -->
h1, h2, h3 { text-align:center; background-color:#7DC0E8; width:100% }
hr { color:#7DC0E8; text-align:center; height:4; width:100%}
OL li { list-style-type:decimal }
UL li { list-style-type:square }
#layout1 { position:absolute; left:38%;top:25%; width:173; height:224}
#layout2 { position:absolute; left:2%;top:4%}
<!-- классы элементов -->
p.pdef { text-align:center; font-weight:bold }
.mystyle { text-align:center; color:#7DC0E8; font-size:x-large; font-style:italic }
</style>
<BODY>
<img id=layout1 src="backl.gif" alt="задний план"> <!-- первый слой -->
<div id=layout2> <!-- второй слой -->
<h1>Вот немногое из того, что может CSS</h1>
<p>Кроме отделения содержания документа от формы представления, данный пример явлется наглядной демонстрацией многослойного HTML документа. Данный документ содержит два слоя, размещение которых описаны при помощи ID селекторов CSS в глобальной таблице стилей. <p>Первым слоем документа явлется графическое изображение, заданное в теге <b>IMG</b> c атрибутом <b>ID</b> равным ID селектору - <kbd>layout1</kbd>. Стиль данного элемента (<i>размер и положение на странице</i>) заданы свойствами CSS в ID селекторе - <kbd> layout1</kbd>.
<p>Элементами второго слоя, явлются все текстовое ссодержимое документа: вышепреведенный заголовок, содержимое абзацев, линия разделитель и строка содержащая ссылку на адрес вебмастера. Положение данного слоя на странице описано в ID селекторе - <kbd>layout2</kbd>, кроме этого т.к. данный слой является элементом тела документа, то его содержимое наследует свойства элементов тела документа, заданные в глобальной таблице стилей.
<p class=mystyle>Желаю успеха в изучении CSS!</p>
<hr>
<p class=pdef>© 2001 Вебмастер <A HREF="mailto:[email protected]"><nobr>Свзатьс с вебмастером</nobr></A>
</div>
</BODY>
</HTML>
Сочетание знаний по использованию CSS с методами разработки интерактивных сценариев управления для Web-страниц (например на JavaScript) позволит вам разрабатывать интерактивные документы (См. раздел 5.2.)стандарта DHTML (Dinamic HTML).
В заключении отметим, что несмотря на то, что использование CSS рекомендовано W3C, а стандарты этого уважаемого органа должны выполнять современные броузеры, фирмы производители броузеров (Microsoft & Netscape) по разному трактуют важность и значимость многих свойств CSS. Одни свойства не работают в MSIE другие не поддерживаются Navigator`ом (это следствие нездоровой конкуренции - так спешат, что забывают о некоторых мелочах).
