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

3.1. Синтаксис CSS

Таблицы стилей (cascading style sheets) являются одним из самых эффективных нововведений HTML 4. Они позволяют изменять свойства элементов в соответствии с желаниями разработчика страницы или изменять вид страницы уже после загрузки и отображения броузером.
В общем случае шаблон таблицы стилей выглядит так:
элемент.имя_стиля {свойство1: значение; свойство2: значение; ...}
Правила синтаксиса:
— определения именованных стилей записываются в фигурных скобках;
— возможен перенос определения на новую строку;
— определения стилей не зависят от регистра;
— имя стиля отделяется от параметра двоеточием;
— параметры не должны заключаться в кавычки (например, для задания цвета фона допустимо следующее определение: background: aliceblue;);
— в некоторых случаях однотипные и не противоречащие друг другу параметры можно объединять при помощи знака «плюс». Например, для одновременного создания эффекта подчеркивания и надчеркивания допустима такая конструкция:
text-decoration: underline + overline;
— стили отделяются друг от друга точкой с запятой;
— существуют стили, для которых одновременно указывают несколько разнотипных параметров;
— внутри определения стилей комментарии записываются между конструкцией /* и */;
— в некоторых случаях необходимо указывать единицы измерения.
В тех случаях, когда значение свойства задается числовой величиной, могут быть использованы определенные единицы измерения.
Единицы длины:
cm — сантиметр;
in — дюйм (2,54 см);
mm — миллиметр;
pc — пика (1/6 дюйма);
pt — пункт (1/72 дюйма);
px — пиксел;
em — размер относительно размера шрифта текущего элемента.
Единицы времени:
ms — миллисекунда;
s — секунда;
Hz — герц;
kHz — килогерц.
Угловые величины:
deg — градус;
grad — град;
rad — радиан.
Величины, заданные в процентах, обозначаются знаком %.
В результате для определенного элемента определяется набор свойств (ассортимент которых весьма значителен). Тем самым снимаются ограничения HTML, а для дизайнера (автора страницы) открывается широкое поле деятельности.
Те свойства элементов, которые не заданы явно, принимают значения по умолчанию.
Одна из важнейших черт стилевого оформления заключается в том, что преобразованию подвергаются все элементы, заключенные внутри элемента с заданным стилем. Так, определив некоторый стиль для элемента BODY, вы присваиваете его всему содержимому Web-страницы. По аналогии с объектно-ориентированными языками программирования это качество называется наследованием.
В соответствии с правилами HTML, чтобы броузер получил информацию, какой язык определения стилей использован, необходимо включить в заголовок документа (элемент HEAD) мета-определение:
<META http-equiv="Content-Style-Type" content="text/css">
В настоящее время существуют две спецификации (CSS1 и CSS2), в которых перечислены свойства элементов. Эти свойства очень похожи на атрибуты, но есть два различия: свойств намного больше и правила синтаксиса несколько другие. Перечень свойств приведен ниже.
Простейшим способом определения стиля является задание его непосредственно для выбранного элемента, например:
<P style="font-size: 12pt; font-style: italic; color: maroon">
Здесь для абзаца выбран размер шрифта, курсив и цвет букв. В отличие от атрибутов имя свойства и значение разделяется двоеточием, а свойства отделяются друг от друга точкой с запятой. Для переопределения свойств элемента использован стандартный атрибут style. Он может использоваться со многими элементами.

Предыдущий раздел | Следующий раздел