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

Определение

Вложенные таблицы стилей (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 в действии

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