Встраивание таблиц стилей в документ
Чтобы таблица стилей могла воздействовать на внешнее представление документа, браузер должен знать о её существовании. Для этого её необходимо связать с HTML-документом.
Существует четыре способа связывания документа и таблицы стилей:
Внедрение - позволяет задавать все правила таблицы стилей непосредственно в самом документе.
Связывание - позволяет использовать одну таблицу стилей для форматирования многи страниц HTML.
Импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере.
Встраивание в тэги документа - позволяет изменять форматирование конкретных элементов страницы.
Теперь про каждый способ отдельно и подробно.
При внедрении таблицы стилей в документ, правила задаются в стилевом блоке, ограниченном тэгами <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.
Заметим, что этот метод дает вам возможность ссылаться на таблицы стилей, которые располагаются не на том же сервере, что и сама страница.
Следующий способ встроить таблицу стилей в документ - импортирование . При импортировании, также как и при связывании встраивается внешняя таблица стилей, но с помощью свойства @import таблицы стилей:
@import: url (mystyles.css)
Его следует задавать в начале стилевого блока <STYLE> или связываемой таблицы стилей перед заданием остальных правил. Значением свойства @import является URL-адрес файла таблицы стилей.
Последний способ задания значений свойств таблицы стилей предназначен для оперативного форматирования определённого элемента документа и называется встраивание в тэги . Каждый тэг HTML имеет параметр style , в котором можно задать значения его свойств в соответствии с синтаксисом каскадных таблиц стилей. Например, в следующем примере задаётся форматирование заголовка первого уровня, определяющее его отображение шрифтом красного цвета:
<H1 style="color: red"> Текст заголовка </h1>
Если внедренные, связанные и импортируемые таблицы стилей влияют на форматирование всех элементов документа, для которых определенны в таблице правила, то встраивание определений стилей в конкретный тэг влияет на отображение только элемента, определяемого данным тэгом.
Все способы встраивания таблиц стилей свободно сочетаются в одном документе.