Блочная верстка. Урок 3. Каскадные таблицы стилей.

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

Каскадная таблица стилей (CSS) может состоять из правил и, если нужно, комментариев к ним. В принципе можно вообще обойтись без комментариев, но я рекомендую писать их. Иногда, кроме комментариев к правилам, верстальщики вверху файла, содержащего таблицу стилей, пишут комментарий с указанием копирайта, контактов, лицензии и т.п., это на ваше усмотрение. Комментарии заключаются в конструкцию вида /* комментарий */.

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

В качестве селекторов могут использоваться идентификаторы, названия классов, имена тэгов и их комбинации. Селекторы, состоящие из имени идентификатора должны начинаться со знака #, из имени класса – с точки. Современные браузеры также поддерживают селекторы, состоящие из имени тэга, его атрибутов и их значений. Например, вполне допустим селектор вида h1#header[rel~="two"][title="title"]. Впрочем, такие сложные селекторы применяют достаточно редко.

Правило CSS можно представить следующей схемой:

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

• Имя свойства от его значения отделяется двоеточием.
• Разделять определения необходимо точкой с запятой.

Итак, зададим глобальное правило для оформления нашей страницы:

Универсальный селектор *, определяет применение стиля ко всем элементам веб-документа. В этом правиле мы указали, что все без исключения элементы по умолчанию должных иметь нулевую ширину полей и отступов, а также нулевую толщину рамки. Если этого не указать, то браузеры, например тот же IE, установят значения этих свойств самостоятельно, в соответствии со своими убеждениями. Лучше, позднее, для конкретных элементов добавить соответствующие правила, чем мучиться с неочевидными проблемами при позиционировании.

Значения в структурных свойствах, таких как margin, указываются по часовой стрелке, начиная с верхнего. Т.е. структура соответствует принципу TRouBLe: Top, Right ou Bottom, Left. Кроме того, здесь допущено некоторое упрощение, указано одно значение для свойств, которые, казалось бы, должны определяться четырьмя. Это допустимо, не указанные значения будут равны соответствующим вертикальным, горизонтальным или перпендикулярным значениям. Таким образом, значение ширины нижнего поля равно значению верхнего, значение левого – значению правого, а так как ширина правого поля не указана, то она будет равна ширине верхнего поля.

Вообще, числовые значения должны также содержать единицы измерения (%, px, em и т.д.), но в случае равенства нулю их разрешается не указывать. Если значение состоит из нескольких слов, например значение, определяющее имя шрифта, то оно должно быть заключено в кавычки.

Селектор второго правила задан идентификатором wrapper. Таким образом, правило применяется к элементу, тэг которого содержит атрибут id со значением wrapper. Наша страница будет иметь фиксированную ширину, равную 780 пикселям, указанную нами в свойстве width. Свойство margin, определяет, что данный элемент должен иметь следующие поля: верхнее и нижнее, шириной по 1em, значения левого и правого полей будут устанавливаться автоматически, что позволить данному блоку выровняться посередине окна браузера.

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

Так как стиль блока-обертки используется для единственного блока, правило для него было определено нами селектором, состоящим из идентификатора wrapper. Если бы мы задавали стиль для нескольких элементов, то семантически корректно было бы выбрать селектор, состоящий из имени класса или тэга.

Обратите внимание, что значение поля margin во втором правиле стиля переопределяет значения из первого. Такое поведение называется «каскадность». Именно поэтому каскадные таблицы стилей (CSS) получили такое название. Приоритет значения для свойства стиля рассчитывается в следующем порядке (от большего к меньшему):

1. Значение свойства задано с ключевым словом !important.
2. Значение свойства стиля прописано напрямую в тэге.
3. Значение указано в правиле, имеющем большее количество идентификаторов (#id), классов (.class), псевдоклассов (:pseudo) или имен тэгов в селекторе.

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