На этом шаге мы рассмотрим общие положения создания и использования каскадных таблиц стилей.
Каскадные таблицы стилей представляют собой простую технологию определения и присоединения стилей к документам HTML. Стиль, говоря житейским языком, - это все то, что определяет внешний вид документа HTML - при его отображении в окне браузера: шрифты и цвета заголовков разных уровней, шрифт и разрядка основного текста, задаваемого в тэге абзаца <P>, и т.д. Стиль задается по определенным правилам, о которых, собственно говоря, и пойдет речь, а таблица стилей - набор правил отображения, применяемых в документе, к которому присоединена соответствующая таблица стилей. Таблица стилей - это шаблон, который управляет форматированием тэгов HTML в Web-документе. Если вы работали с текстовым редактором Microsoft Word, то концепция таблицы стилей напомнит вам концепцию стилевых файлов этого редактора: изменить внешний вид документа HTML можно простым изменением присоединенных к нему стилей. Точно также изменить внешний вид документа HTML можно простым изменением присоединенной к нему таблицы стилей.
Почему в название таблиц стилей включено определение "каскадные"? Дело в том, что здесь разрешено использовать несколько таблиц стилей для управления форматированием одного документа HTML, а браузер по определенным правилам выстраивает приоритетность применения этих таблиц. Они выстраиваются неким "каскадом", по которому и "прокатывается" документ.
Для разработки таблицы стилей достаточно немного ориентироваться в языке HTML и быть знакомым с базовой терминологией настольных издательских систем. Как отмечалось выше, таблица стилей представляет собой набор правил форматирования элементов HTML. Эти правила достаточно просты и легко запоминаемы. Например, если необходимо, чтобы в документе все заголовки первого уровня отображались синим цветом и шрифтом с кеглем (размером) 16 пунктов, то в таблице следует задать правило:
H1 {color: blue; font-size: 16pt}
Любое правило каскадных таблиц стилей состоит из двух частей: селектора и определения. Селектором может быть любой тэг HTML, для которого определение задает, каким образом необходимо его форматировать. Само определение, в свою очередь, также состоит из двух частей: свойства и его значения, разделенных знаком двоеточия (:). Назначение свойства очевидно из его названия. В приведенном правиле селектором является элемент H1, а определение, записанное в фигурных скобках, задает значения двух свойств заголовка первого уровня: цвет шрифта (свойство color) определен как синий (значение blue) и размер шрифта (свойство font-size) определен в 16 пунктов (значение 16pt). В одном правиле можно задать несколько определений, разделенных символом точка с запятой (;), как это демонстрируется в приведенном примере.
Созданная только что таблица стилей влияет на форматирование элемента определенного типа: заголовок первого уровня. Ее комбинация с другими таблицами стилей определяет окончательное представление документа при его просмотре в окне браузера.
Замечание. Синтаксис правил каскадных таблиц стилей не чувствителен к регистру. Селекторы, свойства и их значения можно задавать как строчными (маленькими), так и прописными (большими) буквами, или в смешанном порядке. Однако каскадные таблицы стилей чувствительны к синтаксису задания правил и правильности названий свойств, значений и селекторов. Любая грамматическая ошибка приводит к тому, что правило пропускается анализатором браузера, и никакого предупреждающего сообщения не появляется!
Авторы страниц HTML должны создавать свои таблицы стилей, только если они хотят придать документу вид, отличный от вида, предоставляемого умалчиваемой таблицей стилей браузера.
На следующем шаге мы рассмотрим встраивание таблиц стилей в документ.
