Определение

Вложенные таблицы стилей (Cascading Style Sheet — CSS) — это простой механизм, позволяющий добавлять HTML-документам информацию об их форматировании, определяющую такие параметры, как шрифты, цвета, позиционирование, отступы и т.п. Язык CSS понятен даже неспециалисту и позволяет определять стили в терминах, принятых всею отраслью настольных издательских систем.

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

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

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

Представьте, сколько тегов HTML нужно для создания заголовка Уровня 1 (H1), который определяет шрифт выводимого текста, а также описание тегов, указывающих, что этот текст должен быть темно-красного цвета на синем фоне, выделен курсивом и подчеркнут, с повторяющимся горизонтальным изображением и бордюром вокруг всей этой конструкции. И отступ должен быть только над этим прямоугольником, но не после него. HTML требует создания таблицы для оформления такого рода стиля, а также соответствующих тегов, управляющих цветом шифра, гарнитурой шрифта и подчеркиванием. Однако параметры заполнения ячейки применяются как к верхней, так и в нижней части ячейки, поэтому необходимо определить спецификации для каждого поля.

CSS — это альтернатива запутанной разметке HTML-тегов

Со своей стороны, CSS позволяет осуществлять полный контроль внешним представлением страницы, причем в этом случае не требуется многочисленных тегов и нет необходимости помещать элемент полностью в таблицу. Вот текст CSS, соответствующий приведенному выше примеру: H1 {color: maroon; font: italic 1em Times, serif; text-decoration: underline; background: blue url (titlebg.png) repeat-x; border: 1px solid red; margin-bottom: 0; padding: 5px;}.

Предположим, что автор решил отказаться от синего фона вообще, тогда он буквально несколькими нажатиями клавиш может поменять фон на зеленый или желтый или выбрать в качестве фона любое изображение. Хотите добавить тот же самый стиль к заголовкам Уровня 2 на странице? Просто скопируйте строку с H1, заменив в ней H1 на H2. Теперь представьте, сколько текста придется вводить, чтобы сделать то же самое на HTML.

Авторами CSS являются Хакон Вьюм Лай, директор по технологиям норвежской компании Opera Software, и Берт Бос, технический эксперт консорциума World Wide Web Consortium.

Лай и Бос создали CSS, используя при разработке кроссплатформенной архитектуры предельно простые коды, которые точно документированы и открыто опубликованы.

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

Но гибкость механизма таблиц стилей этим не ограничивается.

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

Вопросы остаются

Использование таблиц стилей не избавляет от всех проблем. Существуют определенные ограничения, особенно в версиях браузеров, созданные до появления технологии CSS. Первые варианты поддержки CSS, реализованные в версиях Netscape Navigator 4.x и Internet Explorer 3.x компании Microsoft, изобиловали ошибками, были неполными и противоречивыми. Многие из этих проблем были устранены в версиях Internet Explorer 4.x и 5.x, в механизме рендеринга Netscape Gecko и Opera 3.6. Фактически, их автор Эрик Мейер использовал Gecko вместе с Internet Explorer 4.5 и 5.0 для Macintosh для создания иллюстраций к своей книге «Вложенные таблицы стилей» (Cascading Style Sheets, O?Reilly & Associates, 2000).

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


CSS в действии

Примеры по-настоящему элегантной реализации Web-ресурса, выполненной с использованием CSS, можно найти на сайте компании Buttenpapierfabrik Gmund GmbH (www.gmund.com), немецкого производителя специальных сортов бумаги. Правда, исходный текст программы, описывающий этот сайт, выглядит устрашающе, но результаты применения механизма вложенных таблиц стилей стоят потраченного времени и усилий.

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

Джой-Лин Блейк

На сайте компании Gmund GmbH представлены примеры реализации Web-ресурса, выполненной с использованием CSS

Поделитесь материалом с коллегами и друзьями