Брутальное руководство по эффективному использованию CSS

Владимир Синельников

Спецвыпуск: Хакер, номер #067, стр. 067-018-3

[как это работает] Как уже было сказано, технология CSS описывает внешний вид отображаемого документа во исполнение принципа отделения контента от его представления. Для противников принципиальности поясню: а) это облегчает поддержку сайта (позволяет быстро сменить дизайн); б) упрощает структуру документа и уменьшает время загрузки за счет вынесения повторяющихся инструкций в одно правило (класс); в) повышает доступность документа за счет предусмотренной настройки внешнего вида документа с учетом возможностей различных типов устройств вывода (дисплея, принтера и т.д.) и даже под нужды конкретного пользователя.

Браузер работает с CSS следующим образом:

1 ПАРСИНГ HTML-ДОКУМЕНТА И СОЗДАНИЕ ДЕРЕВА ЭЛЕМЕНТОВ;

2 ИДЕНТИФИКАЦИЯ ЦЕЛЕВОГО ТИПА МЕДИА (УСТРОЙСТВА ОТОБРАЖЕНИЯ);

3 ПОЛУЧЕНИЕ ВСЕХ СТИЛЕЙ ДОКУМЕНТА В СООТВЕТСТВИИ С УКАЗАННЫМИ ТИПАМИ МЕДИА;

4 АННОТАЦИЯ КАЖДОГО ЭЛЕМЕНТА ПУТЕМ ПРИСВОЕНИЯ СВОЙСТВАМ ЭЛЕМЕНТОВ ЗНАЧЕНИЙ ИСХОДЯ ИЗ УКАЗАННЫХ ДЛЯ НИХ СТИЛЕЙ, А ТАКЖЕ С УЧЕТОМ НАСЛЕДОВАНИЯ РОДИТЕЛЬСКИХ;

5 ГЕНЕРАЦИЯ СТРУКТУРЫ ФОРМАТИРОВАНИЯ НА ОСНОВЕ ДЕРЕВА ДОКУМЕНТА;

6 ПЕРЕДАЧА ФОРМАТИРОВАННОГО ДОКУМЕНТА НА ВЫВОД (ДИСПЛЕЙ, НА ПЕЧАТЬ И Т.Д.).

Для web-страниц существует три типа подключения стилей, которые разграничивают по источнику:

1 АВТОРСКИЕ СТИЛИ (СОЗДАННЫЕ РАЗРАБОТЧИКАМИ САЙТА), КОТОРЫЕ, В СВОЮ ОЧЕРЕДЬ, МОГУТ ПРИМЕНЯТЬСЯ ТРЕМЯ РАЗЛИЧНЫМИ СПОСОБАМИ:

А) ВНЕШНИЕ ТАБЛИЦЫ СТИЛЕЙ.

РАСПОЛАГАЮТСЯ В ОТДЕЛЬНОМ ФАЙЛЕ *.CSS, НА КОТОРЫЙ ДАЕТСЯ ССЫЛКА В HTML-ДОКУМЕНТЕ. НАПРИМЕР:<style type="text/css" media="screen">@import url(/styles/screen.css);</style>

В) ВСТРОЕННЫЕ СТИЛИ.

КОД CSS ПОМЕЩАЕТСЯ В ТЕЛЕ HTML-ДОКУМЕНТА: <style type="text/css" media="screen">.style {font-family: Verdana,sans-serif}</style>

С) СТРОЧНЫЕ СТИЛИ, КОТОРЫЕ ПРИМЕНЯЮТ ИНДИВИДУАЛЬНО ДЛЯ КОНКРЕТНОГО ЭЛЕМЕНТА И УКАЗЫВАЮТСЯ В АТРИБУТЕ STYLE НУЖНОГО НАМ ТЕГА:

<p style="font-weight:bold">

2 ПОЛЬЗОВАТЕЛЬСКИЕ СТИЛИ.

НЕКОТОРЫЕ БРАУЗЕРЫ (НАПРИМЕР OPERA) ПОЗВОЛЯЮТ ПОЛЬЗОВАТЕЛЮ СОЗДАВАТЬ СОБСТВЕННЫЕ СТИЛИ, КОТОРЫЕ ХРАНЯТСЯ В ЛОКАЛЬНОМ CSS-ФАЙЛЕ И ИСПОЛЬЗУЮТСЯ ДЛЯ ОПРЕДЕЛЕНИЯ СТИЛЕЙ НА ВСЕХ ПРОСМАТРИВАЕМЫХ СТРАНИЦАХ. ЭТУ ВОЗМОЖНОСТЬ ОБЫЧНО ИСПОЛЬЗУЮТ ЛЮДИ С ПЛОХИМ ЗРЕНИЕМ ИЛИ С ДЕФЕКТАМИ ЦВЕТОВОГО ВОСПРИЯТИЯ.

3 СТИЛЬ БРАУЗЕРА.

«ЗАВОДСКИЕ НАСТРОЙКИ», ПРЕДУСМОТРЕННЫЕ РАЗРАБОТЧИКАМИ ДЛЯ ОПРЕДЕЛЕНИЯ ПРЕДСТАВЛЕНИЯ ЭЛЕМЕНТОВ HTML ПО УМОЛЧАНИЮ.

Пользовательские стили имеют самый высокий приоритет и позволяют переопределять авторские. Исключение составляют стили с параметром !important, который был введен специально для защиты авторских стилей от переопределения на стороне пользователя. Если ни пользователь, ни автор сайта не определили стиль для некого элемента, он будет отображен в соответствии с собственными стилями браузера. В различных браузерах они могут отличаться, поэтому не стоит полагаться на совесть производителя программы-бродилки.