Каскадные таблицы стилей

Уже изученных нами основ HTML вполне достаточно, чтобы понять простую истину: описание необходимых элементов языка разметки гипертекста — чрезвычайно сложное и утомительное занятие. Представьте себе, что разрабатываемая вами web-страничка содержит десять абзацев текста, которые необходимо расположить по всей ширине окна браузера, и двадцать иллюстраций, которые нужно выровнять по центру экрана. Это означает, что вы должны будете десять раз записать в коде html-документа теги <Р ALIGN="JUSTIFY"></P> и двадцать раз употребить теги <CENTER> </CENTER> либо столько же раз указывать атрибут ALIGN="CENTER" в директиве <IMG>. А если вы формируете на экране сложную таблицу, каждая из пятидесяти ячеек которой должна иметь высоту ровно 20 пикселов? Представляете, сколько раз вам придется специфицировать атрибут HEIGHT, чтобы получить требуемую высоту ячеек в браузерах всех типов? Копирование команд через буфер обмена и использование WYSIWYG-редакторов в данной ситуации обычно не облегчает задачу, поскольку в первом случае вам, скорее всего, надоест щелкать мышью прежде, чем все необходимые директивы будут помещены в соответствующие строки кода, а во втором случае сгенерированный программой код все равно потребует длительного и тщательного редактирования.

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

Выход нашелся достаточно быстро. Программисты компании-разработчика стандарта HTML, консорциума W3C, задумались: а нельзя ли описать все параметры используемых в коде web-страниц тегов один раз, да так, чтобы больше такой необходимости до момента окончания разработки каждого нового ресурса Интернета не возникало? Оказалось, что можно. Для этого и был создан новый стандарт CSS (Cascading Style Sheets — Каскадные таблицы стилей).

CSS в отличие от HTML использует несколько иной алгоритм описания элементов web-страниц. Один раз, указав свойства каждого элемента в текстовом файле с расширением .сss и назначив им свойства стиля, вы можете затем подключить этот файл к html-документу, заставив клиентский браузер считывать значения параметров каждого компонента web-страницы уже оттуда. Более того, поскольку стили описываются вами в отдельном файле, вы можете подключить его к неограниченному количеству различных документов, раз и навсегда отказавшись от необходимости назначать свойства каждому конкретному объекту. Чрезвычайно удобно, не так ли? Есть и еще одно неоспоримое преимущество использования CSS перед традиционным способом подготовки web-страниц, которое кажется неочевидным на первый взгляд: для того чтобы изменить стиль оформления какого-либо элемента всех web-страниц вашего сайта, достаточно немного подправить всего одну строку кода в одном файле. Теперь, полагаю, вы убедились в том, что метод описания стилей с помощью CSS является оптимальным для web-дизайна. Осталось только выяснить, как применить все эти преимущества на практике.

Селекторы

Параметры и директивы CSS описываются по принятым в данном стандарте правилам в специальном файле с расширением .сss. Общий синтаксис записи стилей всех элементов HTML в таком файле выглядит следующим образом:

НАЗВАНИЕ ЭЛЕМЕНТА {свойство: значение}

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

H1 {color: blue; font-size: 20pt;}

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