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

• Общин правила построения каскадны таблиц стилей
• Шрифты
• Цвет и фон
• Форматирование текста
• Блоки
• Визуальное форматирование
• Визуальные эффекты

3.1. Общин правила построения каскадны таблиц стилей

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

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

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

Таблица стилей – это набор правил, который управляет форматированием тегов в HTML-документе. Любое правило каскадных таблиц стилей состоит из двух частей: селектора и определения. Селектором может быть любой тег HTML, для которого определение задает, каким образом необходимо его форматировать. Само определение, в свою очередь, также состоит из двух частей: свойства и его значения, разделенных знаком двоеточия (:). В одном правиле можно задать несколько определений, разделенных символом точка с запятой (;).

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

Связывание документа и таблицы стилей.

Чтобы таблица стилей могла воздействовать на внешнее представление документа, браузер должен знать о ее существовании. Для этого ее необходимо связать с HTML-документом.

Существует четыре способа связывания документа и таблицы стилей:

1. Связывание – позволяет использовать одну таблицу стилей для форматирования многих страниц HTML.
2. Внедрение – позволяет задавать все правила таблицы стилей непосредственно в самом документе.
3. Импортирование – позволяет встраивать в документ таблицу стилей, расположенную на сервере.
4. Встраивание в теги документа – позволяет изменять форматирование конкретных элементов страницы.

Связывание позволяет хранить таблицу стилей в отдельном файле и присоединять ее к документам с помощью тега <link>, задаваемого в разделе head:

Связываемый файл содержит набор правил каскадных таблицей стилей, определяющих форматирование документа, и должен иметь расширение CSS.

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

При внедрении таблицы стилей в документ правила, ее составляющие, задаются в стилевом блоке, ограниченном тегами <style type="text/css"> … </style>, который должен размещаться в разделе head документа:

Для того чтобы браузеры, не поддерживающие какие-либо теги из таблицы стилей, работали корректно, следует задавать содержимое тегов, которые потенциально не обрабатываются старыми версиями браузеров, заключенным в тег комментария <! - ... -->.

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

В теге <style> можно импортировать внешнюю таблицу стилей с помощью свойства @import таблицы стилей:

Его следует задавать в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил. Значением свойства @import является URL-адрес файла таблицы стилей.

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

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

Рекомендуется избегать встраивания в теги документа определений форматирования, так как подобная техника лишает разработчика преимуществ задания таблиц стилей в отдельном файле или в головной части документа, где их можно легко и быстро откорректировать, в случае необходимости. При форматировании отдельных тегов придется просмотреть весь документ целиком, что требует достаточно большой и кропотливой работы.

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

Группирование и наследование.

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

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

можно сгруппировать и задать в виде одного правила со списком селекторов

Аналогично группируются свойства элемента, только в списке они разделяются точками с запятой (;).

можно задать в виде одного правила, сгруппировав определения:

Некоторые свойства имеют собственный синтаксис группирования, связанный с заданием значений нескольких свойств в одном. Например, предыдущий пример при использовании свойства font запишется так:

При задании таблицы стилей можно свободно комбинировать все три правила группирования для уменьшения ее размера.

В HTML некоторые элементы могут содержать другие. Как будет отображаться элемент, расположенный внутри другого элемента страницы, если для последнего задано правило форматирования, а для вложенного элемента нет? Например, пусть цвет шрифта абзаца определен как синий (p {color: blue}). Как будет отображаться выделенный элемент текста, задаваемый тегом <em>, если для него не определено правило форматирования? В подобных случаях вложенный элемент наследует правила форматирования элемента-родителя. В нашем примере выделенный элемент будет также отображаться синим цветом.

Селекторы.

Правила каскадных таблиц стилей, в которых в качестве селектора используются теги HTML, влияют на отображение всех элементов заданного типа в документе. Следующее правило отображает без подчеркивания все ссылки (тег <a>) в документе:

А что делать, если необходимо некоторые ссылки отобразить по-другому? Можно задать для них правило форматирования непосредственно в теге, а можно применить параметр class, добавленный в HTML 4.0 в качестве стандарта для всех тегов. Значением параметра class является ссылка на класс, задаваемый в таблице стилей.

Класс позволяет задать разные правила форматирования для одного элемента определенного типа или всех элементов документа. Имя класса указывается в селекторе после имени тега и отделяется от него точкой. Можно определить несколько правил форматирования для одного элемента и с помощью параметра class соответствующего тега применять разные правила форматирования в документе. Например, можно определить два класса отображения заголовка первого уровня:

В тексте документа ссылка на соответствующий класс задается в параметре class:

Имя класса в параметре class задается без лидирующей точки. Оно может быть заключено в двойные или одинарные кавычки, или задаваться вообще без кавычек.

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

HTML позволяет в качестве селектора задавать уникальное имя элемента. Для ссылок на него в документе используется параметр id. Параметр id можно применять к любому элементу документа.

Правила таблиц стилей регламентируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом #:

Далее в разделе body можно записать:

К одному документу можно присоединить несколько таблиц стилей, которые одновременно будут влиять на представление документа в окне браузера. Браузер по определенным правилам выстраивает приоритетность применения этих таблиц. Они выстраиваются неким "каскадом", по этому таблицы стилей называют "каскадные".

Использование нескольких таблиц стилей позволяет реализовать модульность, т. е. комбинировать таблицы стилей, каждая из которых отвечает за определенный этап форматирования документа. Например, в одной таблице можно определить все правила форматирования шрифтов, во второй – правила позиционирования элементов и т. д.

Но как взаимодействуют правила, определяющие форматирование одинаковых элементов и заданные в разных таблицах? Может, например, оказаться, что в связанной таблице цвет шрифта определен как черный, в импортируемой как красный, а во встроенной как синий, – какой цвет шрифта будет иметь документ, отображаемый в браузере? Подобные конфликты разрешаются с использованием принципа приоритетности разных таблиц стилей. Таблицы выстраиваются в цепочку приоритетности (от низшего к наивысшему), образуют каскад, по которому документ "прокатывается" и постепенно форматируется на основе правил таблиц стилей, образующих каскад.

Приоритетность импортируемых таблиц стилей зависит от порядка их импортирования в документ. В таблице стилей можно использовать несколько операторов @import. Каждый последующий оператор импортирует таблицу стилей с более высоким приоритетом по отношению к предыдущим, и поэтому ее правила имеют больший вес. Импортируемые таблицы стилей сами могут импортировать и перекрывать другие таблицы.

Любые правила, определенные непосредственно в самом документе, перекрывают правила импортируемых таблиц стилей. Обычно все операторы @import задаются в таблице стилей до определений правил, а это как раз и показывает, что правила самой таблицы перекрывают правила импортируемых таблиц.

Можно увеличить вес правила с помощью значения important, которое задается после значения свойства, вес которого необходимо увеличить:

Свойства форматирования элементов.

В каскадных таблицах стилей все доступные свойства форматирования элементов в документе HTML можно выделить несколько категорий:

1. Шрифт (типографские свойства шрифтов).
2. Цвет и фон (цвет текста и фона, а также картинки в качестве фона).
3. Текст (выравнивание и форматирование текста).
4. Блок (свойства форматирования блоковых элементов).
5. Визуальное форматирование (свойства, связанные с блоками отображения элементов, их позиционированием и отображением списков).