Связанные таблицы стилей

Связанные таблицы стилей используются, когда необходимо применять один и тот же стиль для множества документов (например для поддержания корпоративного стиля крупной организации, лист стилей головного офиса связывается с документами отделений). В данном случае, набор правил 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.).

При использовании связанных стилей, можно создавать разные таблицы стилей, для разных форм представления документа. Например вы можете наряду со стандартной таблицей стилей - normal.css создать таблицу стилей с более компактными шрифтами и форматированием, предназначенную для печати - prn.css. Тогда линковка данных таблиц осуществляется следующим образом:

Атрибут MEDIA указывает броузеру какую таблицу стилей использовать для печати, а какую для просмотра документа.

Использование CSS позволяет существенно упростить разработку и поддержку Web-сайтов за счет отделения стиля представления документов от их содержания, т.к. один раз созданный набор правил представления элементов стиля, можно использовать для множества документов.

Отделение формы представления документа от содержания продемонстрируем на конкретном примере. Постараемся создать документ содержащий лишь теги структурирования (заголовки, абзацы, разделители), а правила форматирования его элементов определим в глобальной таблице стилей.

Пример 7. Использование CSS.

<HTML>

<HEAD>

<title>Демонстрация возможностей CSS</title>

</HEAD>

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>

<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>

</div>

</BODY>

</HTML>

Сочетание знаний по использованию CSS с методами разработки интерактивных сценариев управления для Web-страниц (например на JavaScript) позволит вам разрабатывать интерактивные документы (См. раздел 5.2.) стандарта DHTML (Dinamic HTML).

В заключении отметим, что несмотря на то, что использование CSS рекомендовано W3C, а стандарты этого уважаемого органа должны выполнять современные броузеры, фирмы производители броузеров (Microsoft & Netscape) по разному трактуют важность и значимость многих свойств CSS. Одни свойства не работают в MSIE другие не поддерживаются Navigator`ом (это следствие нездоровой конкуренции - так спешат, что забывают о некоторых мелочах).

<14 15 161718 19 20 >

Дата добавления: 2015-04-19; просмотров: 751;