Вложенные таблицы стилей

Автор: Александр Головко Дата публикации:

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

Во-первых, это уже полноценная таблица стилей в которой можно писать любые допустимые правила (ты, конечно, помнишь, что встроенные стили содержали только часть правила — список определений для какого-нибудь конкретного элемента).

Во-вторых, опять таки, в отличие от встроенных стилей, правила не разбросаны по всему HTML, а сгруппированы в единый логических блок с которым удобно работать.

Ключ к вложенным таблицам — тег style

Знакомься, тег style:

должен располагаться в секции head;
содержимое тега представляет собой таблицу стилей, применяющуюся к документу;
в одном документе может быть несколько тегов style.

Пример применения:

<head>
<title>Заголовок окошка</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
html,body {
height: 100%;
}
img {
border: none;
}
ul{
list-style: none;
}
:focus{
-moz-outline-style:none;
}
-->
</style>
</head>

Атрибуты тега style

Обрати внимание, у тега присутствует атрибут type="text/css", который сообщает браузеру, что содержимое — таблица стилей.

Так же можно задать атрибут media, который позволяет применять таблицу стилей только для определенных устройств отображения. Например:

<style type="text/css">
<!--
body {
background:url(grad.png) repeat-x;
}
/* на мониторе сайт будет иметь какой-нибудь красиывй фон */
-->
</style>
<style type="text/css"  media="print">
<!--
body {
background:none;
}
/* а при выводе на устройство печати фон отключаем */
-->
</style>

Обратная совместимость

Ты, наверное, уже заметил, что в приведенных выше примерах содержимое тега style взято в HTML комментарии. Зачем? Все очень просто. Некоторые особо старые браузеры (я сейчас не имею в виду IE6) могут не понимать этот тег. Тогда они сам тег преспокойненько пропустят, а все его содержимое запросто могут вывести на экран.

Хотя по-идее содержимое находится в секции head и отображаться все же не должно, но кто ж их знает, этих древних браузеров! Не исключено, что в каменном веке выводилось на экран не только содержимое тега body! В общем, безопасным считается взять всю таблицу в комментарии. Тогда уж точно ни один питекантроп не увидит CSS кода вверху страницы.

Недостатки вложенной таблицы

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

Главное ограничение четко звучит в самом названии — «вложенная таблица». Тег style, расположенный в секции head, навеки впечатал такой CSS в HTML файл! Что же это получается? Если у меня на сайте несколько сотен страниц сделанных под единое оформление, то в каждую нужно вставить одинаковый код таблицы (возможно десятки килобайт)? Фактический объем сайта раздуется неимоверно. А какая работа мне предстоит, если я захочу, допустим, поменять на всех страницах цвет фона, даже и подумать страшно! Правда, с повсеместным распространением движков на базе шаблонов, это уже не может считаться недостатком.

Тем не менее, получаем ту же проблему, что и при встроенных стилях, только в масштабе не отдельной страницы, а всего сайта в целом!

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

Область применения

А для чего же тогда вложенные? Их удобно применять там, где стили уникальны для данной страницы и составляют с HTML единый компактный блок. Вот, например, на нашем сайте, на всех демонстрационных примерах (там, где они вынесены на отдельную страницу) используется вложенная таблица стилей. Это удобно. Пользователь открыл один файл и сразу увидел весь интересующий его код.

Еще один вариант — это критические, с точки зрения быстродействия, участки. Все-таки один файл с HTML и вложенной таблицей загрузиться быстрее, чем два (если CSS храниться отдельно и за ним придется еще раз «ходить» на сервер).

Резюме

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

Xiper