Каскадируемые таблицы стилей

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

Если вы думаете, что воплощение единого стиля сдерживает творческое начало в Web-дизайне, то, вероятно, не знакомы с каскадируемыми таблицами стилей (Cascading Style Sheets, CSS) и их «старшим братом» – связанным CSS-файлом. С помощью этих инструментов вы сможете выдерживать единый стиль для всего узла, а основные усилия сосредоточить совершенствовании своего творения.

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

Меньше, быстрее, лучше

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

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

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

В таблице стилей можно задать начертание, размер, цвет, фон, границы, отступы и десятки других более экзотических атрибутов. Многие теги HTML опираются на отношения «родитель-потомок», инструкции таблиц стилей также поддерживают подобные отношения. Если вы задаете цвет морской волны для обычного текста, а затем применяете тег <em> или <strong> к выделенному фрагменту, наклонный или полужирный текст также будет голубым. Конечно, вы всегда можете отформатировать текст с курсивом так, чтобы он был желтым или мерцающим, либо задать для него оба атрибута сразу – но станете ли вы это делать?

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

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

Улучшенный контроль над начертанием

Внимательные пользователи могут высмеять подобные утопические взгляды на кибервселенную. Почему? Даже если, например, вы применили для форматирования узла шрифт Eras Ultra, у скольких посетителей вашего узла он будет установлен? Большинство увидят обычный шрифт с засечками, заданный по умолчанию. Однако, вы можете добиться того, чтобы посетители увидели ваши страницы с таким шрифтом, который будет хорошо согласован с общим стилем – достаточно привести несколько вариантов шрифтов.

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

Здесь пойдет текст...

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

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

Ответ заключается в том, чтобы использовать таблицу стилей – это позволит описывать форматирование только один раз. Синтаксис исходного текста в этом случае слегка иной:

P {font-family: Verdana, «Futura Md BT»,  «Eras Book», «Zurich BT», Tahoma, CastleT;  sans-serif}  

С CSS каждый абзац основного текста страницы будет отформатирован именно так, как вы хотите, причем без какого-либо избыточного кода.

Глобализация

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

Чтобы связать страницу с внешней таблицей стилей, вместо заголовка страницы Web создайте описания в виде обычного текстового файла. Синтаксис идентичен; для создания первого файла можете воспользоваться вырезанием и вставкой. Затем на каждой странице, в которой должны использоваться таблицы стилей, нужно поместить следующую команду:

Как назвать файл – решайте сами. Начиная с этого момента, любые изменения, внесенные в style.css, будут распространены «каскадом» на все файлы вашего узла.

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

«Каскадные» тонкости

Если старые браузеры (Internet Explorer версии ниже 3 и Navigator менее 4) совсем не поддерживают стилей, то теперь вопрос значительно осложняется тем, что современные браузеры поддерживают стили различным образом. Браузеры от Netscape отображают элементы не так, как Internet Explorer, и различия иногда оказываются не столь уж безобидными. Это особенно заметно при интерпретации более экзотических опций, реализованных CSS – таких как позиционирование, слои, кадрирование и фоновые эффекты – которые браузеры поддерживают по-разному.

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

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

Почти три десятилетия назад певица и актриса Джули Эндрюс сказала: «Дисциплина – это такое ограничение, которое делает меня свободным». Это высказывание великолепно характеризует и роль таблиц стилей. Когда вы получите возможность точно контролировать форматы отображения, то сможете сосредоточиться на творческой стороне Web-дизайна и достижении максимальной эффективности при передаче содержания узла посетителям.

ИСТОЧНИКИ

Неофициальный «дом» CSS: учебники, справочники, статьи и ссылки www.w3.org/Style/CSS
Таблица совместимости браузеров: Обширная информация о том, какие элементы работают, а какие нет, в различных версиях браузеров http://webreview.com/pub/Style_Sheets
CSS Pointers Group: попурри из множества полезной информации http://css.nu
Webmonkey: учебник по таблицам стилей http://hotwired.lycos.com/webmonkey/98/15/indexOa.html
Web Workshop: руководство пользователя по таблицам стилей http://msdn.microsoft.com/workshop/author/css/css.asp
WebReference.com: узел-справочник вебмастера www.webreference.com/dev/style