Механизмы CSS

"В научном сообществе, в котором зарождалась Всемирная Паутина, людей больше интересовало содержимое документов, нежели их оформление. Как только Интернет открылся для широкой публики, ограничения языка HTML стали источником постоянных разочарований и подтолкнули авторов всячески обходить стилевые ограничения HTML. Все это делалось из лучших побуждений – улучшить восприятие веб-страниц – однако используемые приемы имели далеко не лучшие побочные эффекты. В некоторых случаях и для некоторых задач приемы срабатывали, но не для всех и не всегда. Вот некоторые из применявшихся подходов:

• Использование собственных расширений HTML
• Преобразование текста в изображения
• Использование изображений для заполнения пустого пространства (вместо пробелов)
• Использование таблиц для верстки страниц
• Создание программ вместо использования HTML

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

Так характеризуют Рекомендации Веб Консорциума положение дел в веб-дизайне до изобретения Каскадных Таблиц Стилей (Cascading Style Sheet, CSS) (см. http://www.w3.org/TR/html4/present/styles.html.

Таблицы стилей решают эти проблемы, вытесняя собой ограниченный набор презентационных механизмов HTML. Они с легкостью регулируют межстрочные интервалы и отступы, цвет текста и фона, шрифты и стили, равно как и множество прочих деталей оформления.

Стандарт HTML 4.01 поддерживает следующие возможности CSS:

• Гибкое размещение стилевой информации

  Вынос таблицы стилей в отдельные файлы облегчает их повторное использование. Иногда полезно поместить стилевую информацию в самом документе, либо сгруппировав ее в начале документа, либо добавив атрибут стиля к тому или иному элементу. Можно также поместить стилевую информацию в заголовок http и применять ее ко всему сайту.

• Независимость от конкретного языка таблицы стилей

  Спецификация языка HTML 4.01 не привязана к какому-либо конкретному языку описания стилей и позволяет использовать целый ряд языков, например некоторый простой язык для большинства случаев и намного более сложный для немногих пользователей со специальными потребностями (глухих, слабовидящих и т.д.)

• Каскадность

  Язык CSS позволяет объединять стилевую информацию из нескольких источников. Это могут быть, например, корпоративный набор стилей, стили для группы документов и таблица стилей единичного документа. Раздельное хранение стилевой информации облегчает ее повторное использование и снижает нагрузку на сеть за счет эффективного кэширования. Каскадность определяет упорядоченную последовательность таблиц стилей, при которой правила из более поздних таблиц имеют приоритет перед более ранними. Не все языки таблиц стилей поддерживают каскадность.

• Зависимость от устройства или носителя информации

  Язык HTML не накладывает ограничений на устройство, посредством которого будет открыт документ. Таким образом, конечный пользователь может просматривать страницу как на экране компьютера, работающего под управлением Windows, Linux, Macintosh OS или какой-либо другой операционной системы, так и с помощью телевизионной приставки, специального телефонного аппарата, голосового браузера или монитора Брайля (для слабовидящих).

  Напротив, таблицы стилей привязаны к определенному устройству или группе устройств. Таблица стилей для просмотра на экране может подойти и для печати, но вряд ли полезна для голосового воспроизведения. Стандарт HTML 4.01 позволяют задать категорию устройств, для которых подходит данная таблица стилей и избежать загрузки ненужных таблиц. Язык таблицы стилей может допускать описание нескольких устройств в пределах одной таблицы.

• Альтернативные стили

  Разработчик может давать конечному пользователю несколько вариантов просмотра документа, например представления с различным размером шрифта. Стандарт позволяет задать предпочтительную таблицу стилей и альтернативы, предназначенные для отдельных категорий пользователей или носителей информации. Браузер, такой как Internet Explorer 8, позволяет выбирать или полностью отключать таблицу стилей.

• Вопросы производительности

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

  В стандарте учтены эти опасения. Разработчик может включать стилевую информацию в любой HTML-элемент, так что она будет доступна браузеру в момент загрузки. Что касается внешних таблиц стилей, то во многих случаях они улучшают производительность и скорость отображения, когда применяются к целой группе документов, поскольку уже присутствуют в кэше браузера во время загрузки второй и последующих страниц.

Добавление стиля в HTML документ

Наиболее простым (с точки зрения начинающего разработчика) является добавление атрибута style к HTML-элементу, например:

<p style="color: red">
    Этот абзац будет выведен красным</p>
  <p style="color: green">
    Этот абзац будет выведен зеленым</p>

Этот подход ( inline style ) удобен в случаях, когда требуется одноразово изменить отображение элемента, однако представьте, что обширная и, часто, одинаковая стилевая информация будет помещена во множество последовательных элементов. Это, во-первых, утяжеляет документ, во-вторых, затрудняет его редактирование (потребуется заменить стили во всех вхождениях), в-третьих, не позволяет применить различные стили для различных носителей информации (экран, принтер и т.д.). Стандарт описывает отделение содержимого (контента) от стилевой информации.

Элемент style может быть помещен внутри элемента head HTML-документа.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  ...
  <style type="text/css" media="screen">
    p {
      text-align: justify;
      text-indent: 1cm;
    }
    .RedParagraph {
      color: red;
    }
  </style>
</head>
<body>
  <p>
    Текст обычного абзаца</p>
  <p class="RedParagraph">
    Этот абзац наследует форматирование обычного абзаца плюс красный цвет текста</p>
  ...
</body>
</html>

Элемент style имеет ряд атрибутов, из которых обязательным является лишь атрибут type, описывающий язык таблицы стилей (в примере text/css ). Атрибут media определяет, для какого носителя предназначена стилевая информация; возможно как единичное значение, так и разделенный запятыми список, например, media=screen,print. Элемент style может находиться только в элементе head и встречаться там любое число раз. Внутри элемента style помещается стилевая информация, называемая правилами. Правила зависят от языка таблицы стилей. Правила CSS будут обсуждены ниже.

Наиболее продвинутым является использование внешних таблиц стилей. Этот подход дает целый ряд преимуществ:

• Разработчик или администратор сайта может применять одну таблицу для многих документов
• Разработчик может менять таблицу стилей, не меняя самого документа
• Средства просмотра (браузеры) могут загружать таблицы стилей селективно, базируясь на типе носителя.
• Стандарт HTML позволяет включать в документ любое число внешних таблиц стилей; язык таблиц стилей определяет, как эти таблицы будут взаимодействовать между собой
• Разработчик может определять взаимоисключающие таблицы стилей (называемые альтернативными), и конечный пользователь может выбирать одну из них. Браузер, такой как Internet Explorer 8, позволяет делать такой выбор.
• Разработчик может определить одну из альтернативных таблиц стилей как предпочтительную, и браузер будет использовать ее по умолчанию.

Внешние таблицы стилей подключаются к HTML-документу при помощи элементов link, которые располагаются в элементе head.

<link href="mystyle.css" rel="stylesheet" type="text/css">

Здесь атрибут href задает относительный или абсолютный путь к таблице стилей, type описывает тип содержимого (в данном случае язык таблицы стилей), атрибут rel показывает отношение ( relationship ) текущего документа к ссылке, определенной в href. Отметим, что rel="stylesheet" без атрибута title показывает, что указанная таблица стилей должна использоваться во всех случаях.

<link href="prefstyle.css" rel="stylesheet" title="compact" type="text/css"> описывает предпочтительную таблицу стилей (заданы rel и title ) и

<link href="altstyle.css" rel="alternate stylesheet" title="Medium" type="text/css"> альтернативную таблицу стилей.

Разработчик может указать предпочтительную таблицу стилей также при помощи элемента meta (расположенного в элементе head ):

<meta http-equiv="Default-Style" content="compact">

или в http-заголовке (передаваемом до начала загрузки документа):

Default-Style: compact

Если предпочтительная таблица стилей указана несколько раз (в элементах meta и/или HTTP заголовке), предпочтение отдается последней в списке.

Из двух или более элементов link или style, задающих предпочтительную таблицу стилей, выигрывает первая запись.

Элементы meta и HTTP-заголовок имеют преимущество перед элементами link.

Еще одной возможностью подключения внешней таблицы стилей является использование HTTP заголовков. Например: Link: <corporate.css>; rel=stylesheet

Эквивалентно <link href="corporate.css" rel="stylesheet">

При этом следует иметь в виду, что не все браузеры, в том числе Internet Explorer 8, понимают этот метод.