Что такое каскадные таблицы стилей (CSS)

страшно подумать, но в июле этого года исполнилось всего 10 лет стандарту HTML 1.0 (который, кстати, так никогда и не был «официально» принят и остался в виде черновика для «внутреннего употребления»). За эти 10 лет HTML прошел очень большой путь, завоевал практически все компьютеры в мире и стал одним из самых известных «компьютерных языков» (все-таки отнести его к языкам программирования рука не поднимается)… И одним из весьма заметных этапов развития HTML стало появление CSS — Cascading Style Sheets или, говоря по-русски, каскадных таблиц стилей.

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

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

Первая версия CSS — CSS level 1 — принятая в 1996 и пересмотренная в 1999 году — позволяла оперировать только цветами, шрифтами, отступами и им подобными, относительно простыми и часто используемыми элементами. Принятая в 1998 году спецификация CSS level 2 добавила возможность абсолютного позиционирования элементов, создания стилей для разных типов устройств, использования собственных курсоров, расширила возможности по выбору элементов, к которым должен применяться тот или иной стиль, и многое другое. Естественно, что CSS level 2 поддерживает и таблицы стилей, созданные в CSS level 1. В настоящее время консорциум W3C активно ведет разработку стандарта CSS level 3 и CSS level 2 revision 1, которые должны учесть все возрастающие потребности вебмастеров и вебдизайнеров по созданию современных и удобных сайтов.

Следует учитывать, что каскадные таблицы стилей не полностью абстрагируют визуальное представление документа от его содержания, они только позволяет более компактно описать правила визуального представления. И если вы захотите изменить дизайн сайта, то вам все равно придется переписывать HTML-код (правда, сделать это будет проще, чем при отсутствии CSS). Значительно больший уровень абстракции можно получить, используя связку языков XML + XSL (из которых, в частности, можно генерировать HTML + CSS), но это намного сложнее и несколько выпадает из темы данной статьи.

Но хватит теории! Давайте попробуем заняться практикой…

Есть три способа описать стиль элемента в HTML-документе. Самый простой и практически не использующий преимуществ CSS способ — это указать стиль внутри тега HTML. Например, написать
<H2 STYLE=»COLOR: #AADDAA; FONT-WEIGHT: BOLD; FONT-SIZE:11pt;»>заголовок второго уровня</H2>
Единственное преимущество, которое можно получить таким образом, — это задание некоторых атрибутов текста, которые не поддерживаются тегами HTML. Зато сохраняются все недостатки HTML — указанный стиль относится только к одному тегу и для изменения внешнего вида документа вам придется изменить описание стиля в каждом теге.

Второй способ несколько лучше: надо описания стилей заключить внутри тегов <STYLE TYPE=»text/css»> и </STYLE>. Например, если вы напишете
<STYLE TYPE=»text/css»>
H2 {COLOR: #AADDAA; FONT-WEIGHT: BOLD; FONT-SIZE:11pt;}
</STYLE>
а в тексте документа укажете <H2>заголовок второго уровня</H2>, то получите тот же эффект. Однако, в отличие от предыд
ущего способа, свойства отображения применятся ко всем тегам H2 в документе. И если скажем вам потребуется изменить размер шрифта или цвет всех заголовков второго уровня, то потребуется всего лишь подправить всего одну строчку. Согласитесь, что это намного удобнее!

Однако у предыдущего способа тоже есть свой недостаток: блок STYLE вам придется скопировать в каждую страницу своего сайта. А если страниц там несколько сотен? И вам понадобится что-то поменять? Неудобно… Но можно победить и эту проблему — с помощью тега LINK. Описав требуемые стили в отдельном текстовом файле (теги STYLE указывать не требуется), вы затем можете написать в секции HEAD документа
<LINK REL=»stylesheet» TYPE=»text/css» HREF=»style.css»>
Эта команда укажет, что таблица стилей находится во внешнем файле. Таким образом, даже для очень большого сайта может использоваться всего один файл со стилями, что очень сильно облегчает редактирование. Есть еще один «хитрый» необязательный параметр тега LINK: MEDIA. Он может указывать для какого типа устройств таблица стилей предназначена, и иметь значения, например, «all» (используется по умолчанию), «handheld», «print» и некоторые другие. Следует только учесть, что (пока еще?) не все браузеры понимают таблицы стилей, подключаемые с использованием этого параметра.

В некоторых случаях бывает полезно объединить два предыдущих метода — например, если разные секции должны иметь частично разные стили (скажем, отличаться цветом фона). Внутри тега STYLE можно указать
@import url(style.css)
и тогда к стилям, описанным внутри STYLE присоединятся стили из внешнего файла.

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

Практика показывает, что таблицы стилей редко бывают больше 2-3 килобайт, даже для очень «раскрашенных» страниц. И если ваш веб-сервер умеет «на лету» сжимать страницы (в Apache, например, этим занимается mod_gzip), то такой объем будет для пользователя практически незаметен. Ну, а дальше — дело техники: пишется какая-нибудь команда, которая на сервере читает таблицу стилей из внешнего файла (все-таки один файл намного легче редактировать!) и встраивает ее содержимое в страницу, отдаваемую посетителю. В простейшем случае это может быть инструкция SSI, вроде
<!—#include file=»style.css» —>
а если ваш сайт написан на php, то можно написать, например,
<?php readfile(«style.css»); ?>