Внешние стилевые листы

Стилевые листы могут быть определены отдельно от документа. Это позволяет использовать такие стилевые листы во многих документах. Кроме того, стиль может быть изменен без модификации самого документа. Любой стиль обычно представляет собой иерархию стилевых листов. Некоторые из них используются вне зависимости от выбора пользователя. Для выбора внешних стилевых листов используется элемент Link. При этом необходимо установить следующие атрибуты:

href	для определения места размещения внешнего стилевого файла (href=url).
rel	определяет, является ли данный стилевой лист постоянным (rel="stylesheet"), стилевым листом по умолчанию (rel="stylesheet") или листом по выбору (rel="alternate stylesheet").
title	устанавливает заголовок в случае, когда стилевой лист является листом по умолчанию (активируется и деактивируется пользователем).

Сначала специфицируются постоянные (persistent) внешние стилевые листы (например, из файла mystyle.css).

Установка атрибута title превращает постоянный стилевой лист в лист по умолчанию. Агенты пользователя должны предоставлять возможность применения именованных стилей на базе атрибута title.

Добавление ключевого слова "alternate" к атрибуту rel делает стилевой лист альтернативным.

Все альтернативные стили, имеющие один и тот же заголовок (title), будут использоваться, когда пользователь (через агента пользователя) активирует этот стиль. Стилевые листы с разными заголовками в этом случае не будут применены. Однако, стилевые листы, которые не имеют атрибута title, применяются всегда (за исключением случая, когда пользователь отключает все стилевые листы).

Агент пользователя должен обеспечить средства выбора стилей для пользователей.
Значение атрибута title предоставляет имя, которое может использоваться при выборе стиля. В предлагаемом примере определено два альтернативных стиля, названных "compact". Если пользователь выберет стиль "compact", будут применены оба внешних стилевых листа, а также стилевой лист "common.css" (применяется всегда, так как атрибут title не установлен). Если пользователь выберет стиль "big print", агент пользователя применит файлы "bigprint.css" и "common.css".

<link rel="alternate stylesheet" title="compact" href="small-base.css">
<link rel="alternate stylesheet" title="compact" href="small-extras.css">
<link rel="alternate stylesheet" title="big- print" href="bigprint.css">
<link rel=stylesheet href="common.css">

Ниже предлагается вариант с элементами link и style.

<link rel=stylesheet href="corporate.css">
<link rel=stylesheet href="techreport.css">
<style type="text/css">

p.special { color: rgb(230, 100, 180) }

</style>

23.4. Установка именованного стиля по умолчанию

Для установки в документе именованного стиля по умолчанию используется элемент meta. Например (установка стилевого листа "compact" в качестве стиля по умолчанию):

<meta http-equiv="default-style" content="compact"

Стилевой лист по умолчанию может быть установлен в HTML-заголовке.

default-style: "compact"

Если имеется две или более деклараций стилевого листа по умолчанию, то работает последняя декларация. Если явной декларации стиля по умолчанию нет, то берется первый элемент link, где есть title и где имеется атрибут rel="stylesheet".

При отображении документа с использованием стилевых листов выполняются определенные правила наследования свойств (тип шрифта, цвет и т.д.). Если то или иное свойство не может быть наследовано, используется значение по умолчанию.

Некоторые стилевые языки поддерживают синтаксис, который позволяет разработчику спрятать содержимое элементов style от агентов пользователя, которые их не поддерживают, с тем, чтобы они не пытались отобразить эти фрагменты, как текст. Например (случай с CSS):

<style type="text/css">

</style

Иногда бывает удобно, конфигурируя WEB-сервер, установить стилевые листы, которые воздействуют на группу WWW-страниц. HTTP Link-заголовок имеет то же воздействие, что и элемент Link с теми же атрибутами и значениями. Заголовки с несколькими Link работают также как и несколько элементов Link, в соответствии с их порядком записи.

link: rel=stylesheet href="corporate.css"

cоответствует

<link rel="stylesheet" href="corporate.css">

Можно описать несколько альтернативных стилей, используя несколько Link-заголовков, а затем с помощью атрибута Rel определить стиль по умолчанию.

link: rel="stylesheet" title="compact" href="compact.css"
link: rel="alrernate stylesheet" title="big print" href="bigprint.css"

23.5. Форматирование

Для задания цвета фона может использоваться атрибут bgcolor = color (хотя это и не рекомендуется). Применение стилевых листов для решения этой задачи предпочтительнее.

Другой проблемой форматирования является выравнивание текста. Для этой цели служит атрибут Align = left|center|right|justify. Здесь справедливы те же замечания, что и в случае атрибута bgcolor. Ниже предлагается пример решения задачи выравнивания с использованием стилевого листа.

<head>
<style>
h1 { test-align: center }
</style>
</head>
<h1> how to carve wood </h1>

Следует иметь в виду, что приведенный текст отцентрирует все заголовки Н1. Можно ограничить зону действия данного стиля, установив атрибут ID.

<head>
<style type="text/css">
h1.wood {text-align: center}
</style>

</head>
<h1 id="wood"> how to carve wood </h1>

Аналогично для выравнивания по правому и левому полям с использование атрибута align:

<p align="justify"> ….далее следует текст….

То же с использованием стилевого листа:

<head>
<style type="text/css">
p.mypar {text-align: justify}
</style>
</head>
<p id="mypar"> ….далее следует текст….

Для двойного выравнивания последовательности параграфов можно группировать их с помощью элемента div.

<div align="justify">
<p> … текст первого параграфа….
<p> … текст второго параграфа….
<p> … текст третьего параграфа….
</div>

Решение той же задачи с использованием каскадирования стилевых листов:

<head>
<style type="text/css">
div.mypars {text-align: justify}
</style>
</head>
<div id="mypars">
<p> … текст первого параграфа….
<p> … текст второго параграфа….
<p> … текст третьего параграфа….
</div>

Для выравнивания всего документа с использованием каскадирования стилевых листов можно записать:

<head>
<style type="text/css">
body {text-align: justify}
</style>
</head>
<body>
… текст документа, подлежащий выравниванию …

</body>

Элемент center работает также как и элемент div с атрибутом align="center". Использование center не рекомендуется.

Содержание раздела