Встраивание стилей в документы |
Чтобы таблица стилей могла воздействовать на внешнее представление документа, браузер должен знать о её существовании. Для этого её необходимо связать с HTML-документом.
Существует четыре способа связывания документа и таблицы стилей:
1.
Внедрение - позволяет задавать все правила таблицы стилей непосредственно в самом документе.
2.
Связывание - позволяет использовать одну таблицу стилей для форматирования многи страниц HTML.
3.
Импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере.
4.
Встраивание в тэги документа - позволяет изменять форматирование конкретных элементов страницы.
Теперь про каждый способ отдельно и подробно.
При внедрении таблицы стилей в документ, правила задаются в стилевом блоке, ограниченном тэгами <STYLE type="text/css"> и </style>, который должен размещаться в разделе <HEAD> документа.
<HEAD>
<STYLE type="text/css">
<!--
B { text-transform: uppercase; }
P { background-color: lightgrey;
text-align: center; }
-->
</style>
</head>
Обычно браузеры, не поддерживающие какие-либо тэги, игнорируют их, интерпритируя однако их содержимое в том виде, в каком оно задано, что может приводить к ошибкам. Поэтому таблицу стилей следует заключить в тэг комментария <!--....-->. Как видите, всё очень просто.
В приведённом выше примере встроенная таблица стилей определяет отображение всех абзацев в документе (элемент <P>) на сером фоне с центрированными строками. Полужирный текст (тэг <B>) документа, будет отображаться прописными буквами, даже если в документе он задан строчными.
Способ связывание заключается в следующем: таблица стилей храниться в отдельном файле и присоединяется к документу с помощью тэга <LINK>, задаваемого в разделе <HEAD>:
<LINK rel="stylesheet" type="text/css" href="mystyles.css">
Связывание позволяет разработчику применить одинаковый набор правил форматирования к группе HTML-документов, т.е. ко всему сайту, что приводит к единообразному отображению различных документов и придаёт некую системность сайту. Изменение файла таблицы стилей приводит к изменению отображения всех страниц сайта, что очень удобна для форматирвания больших сайтов. Данный метод реализованн на данном сайте. Вот код таблицы стилей применённой к этой и другим страницам данного сайта:
P { margin-left: 20pt; }
P { margin-right: 20pt; }
TABLE { font-family: Arial; }
TABLE { font-size: 10pt; }
A:link { color: #000080; text-decoration: none; }
A:visited { color: #000080; text-decoration: none; }
A:hover { color: #000080; text-decoration: underline; }
Связываемый файл представляет собой обычный текстовый файл с кодом обычной таблицы стилей. Он должен иметь расширение .css.
Заметим, что этот метод дает вам возможность ссылаться на таблицы стилей, которые располагаются не на том же сервере, что и сама страница.
|
