Каскадные страницы стилей css

Таблицы стилей.Таблицы стилей представляют наибольшее достижение для дизайнеров Web-страниц, расширяя возможности улучшения внешнего вида страниц. В научных средах, в которых и зародилась Web, люди более сосредоточены на содержании документов, нежели на их представлении. По мере открытия Web прочими людьми ограничения HTML стали источником разочарований, и авторам пришлось уклоняться от стилистических ограничений HTML. Хотя намерения и были добрыми - улучшение представления Web-страниц, -- технологии имели нежелательные побочные эффекты. Эти технологии работали только для некоторых, только иногда, но не для всех и не всегда. Сюда включаются:

· Использование собственных расширений HTML

· Преобразование текста в изображения

· Использование изображений для управления пустым пространством

· Использование таблиц для размещения объектов на станице

· Написание программ вместо использования HTML

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

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

Например, следующая таблица стилей CSS устанавливает зеленый цвет текста абзаца и окружает его сплошной красной рамкой:

P.special {

color : green;

border: solid red;

}

Авторы могут связывать таблицы стилей с исходным документом HTML с помощью элемента LINK:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

"http://www.w3.org/TR/REC-html40">

<HTML>

<HEAD>

<LINK href="special.css" rel="stylesheet" type="text/css">

</HEAD>

<BODY>

<P class="special">В этом абзаце текст должен быть зеленым.

</BODY>

</HTML>

</DIV>

HTML 4.0 обеспечивает поддержку следующих функций таблиц стилей:

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

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

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

Данная спецификация не привязывает HTML к конкретному языку таблиц стилей. Это позволяет использовать широкий диапазон таких языков, например, простые языки для большинства пользователей и более сложные для более специализированных случаев. Во всех примерах, приведенных ниже, используется язык CSS (Каскадные таблицы стилей), но можно использовать и другие языки.

Каскады

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

<SPAN class=index-inst title="accessibility::and style sheets">Зависимость от устройств</SPAN>

HTML позволяет авторам разрабатывать документы независимо от устройств. Это позволяет пользователям обращаться к Web-страницам с использованием различных устройств, например, графических дисплеев для компьютеров под управлением Windows, Macintosh OS и X11, телевизионных устройств, специальным образом адаптированных телефонов и портативных устройств на базе PDA, речевых браузеров и тактильных устройств на базе азбуки Бройля.

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

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

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

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

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

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

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

Как добавить стиль в HTML

Документы в формате HTML могут содержать правила таблиц стилей непосредственно или могут импортировать таблицы стилей.

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

Синтаксис данных стиля зависит от языка таблицы стилей.

<SPAN class=index-inst title="default::style sheet language|style&#10;sheet language::default|HTTP::Content-Style-Type header|Content-Style-Type header">Установка языка таблицы стилей по умолчанию</SPAN>

Авторы должны указывать язык таблицы стилей для информации о стиле, связанной с документом HTML.

Для установки языка таблицы стилей для документа по умолчанию следует использовать элемент META. Например, чтобы установить по умолчанию язык CSS, следует поместить в раздел HEAD следующее объявление:

<META http-equiv="Content-Style-Type" content="text/css">

зык таблиц стилей по умолчанию можно также установить с помощью заголовков HTTP. Показанное выше объявление с использованием тэга META эквивалентно заголовку HTTP:

Content-Style-Type: text/css

Агенты пользователей должны определять язык таблиц стилей по умолчанию для документа в соответствии со следующими шагами (от высшего приоритета к низшему):

Если в объявлении META задается "Content-Style-Type", язык таблиц стилей определяет последнее объявление в потоке символов.

В противном случае, если "Content-Style-Type" задается в заголовках HTTP, язык таблиц стилей определяет последний заголовок в потоке символов.

В противном случае по умолчанию используется язык "text/css".

Документы, включающие элементы, в которых устанавливается атрибут style, но не определяется язык таблиц стилей по умолчанию, являются некорректными. <SPAN class=index-inst title="authoring tool::and default style sheet language">Средства разработки</SPAN> должна генерировать информацию о языке таблиц стилей по умолчанию (обычно с помощью объявлений META), чтобы агенты пользователей не полагались на язык по умолчанию "text/css".

Наши рекомендации