Каскадирование стилей

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

Помимо стиля браузера, существует стиль пользователя. Каждый браузер позволяет пользователю указать файл с правилами CSS, которые должны присваиваться тегам любого открываемого HTML – документа.

Также существует стиль автора, который задает верстальщик документа.

Если какое – либо CSS – свойство не было указано для данного тега в стилях автора, его значение берется из стиля пользователя, если стиль пользователя также не содержит значение для данного свойства, браузер находит значение свойства в своих стилях.

Составные селекторы

В качестве селекторов могут выступать не только отдельные теги, но и тег с определенным классом или идентификатором: тег.класс или тег#идентификатор.

В этом случае CSS – свойства применяются только к тегу с данным классом либо с данным идентификатором.

Контекстные селекторы

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

Псевдоклассы

В составе селектора могут указываться псевдоклассы, позволяющие ограничить область применения CSS – свойств только теми тегами, которые в данный момент имеют определенное состояние. Псевдокласс указывается в конце селектора после двоеточия.

тег: псевдокласс;

.класс: псевдокласс;

#идентификатор: псевдокласс;

Группировка селекторов

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

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

Возможные значения свойств CSS

Ключевые слова. Большинство свойств CSS могут применять лишь определенные значения из конечного множества возможных значений. Такие значения называются ключевыми словами. Пример: right, center, auto, solid и другие. Все значения, представляющие собой ключевые слова, пишутся без кавычек.

Числа. В качестве значения CSS – свойства может выступать обычное число. Значение в виде чисел задается без кавычек.

Размер. Правильнее указывать числовое свойство с единицей измерения. Единицы измерения бывают относительными и абсолютными.

Относительные определяют размер относительно какого-либо элемента. Величина такой единицы измерения не является постоянной величиной и может меняться в зависимости от условий (например, размер монитора).

Абсолютные единицы измерения существуют сами по себе и всегда постоянны.

К относительным единицам измерения относятся:

- em – размер относительно шрифта текущего элемента;

- ex – размер относительно высоты символа х (в нижнем регистре);

- px – размер в пикселях;

- % - размер в процентах. В этом случае размер определяется относительно родительского элемента или окна браузера.

К абсолютным единицам измерения относятся:

- in – дюйм (1 дюйм = 2,54 см);

- cm – сантиметр;

- mm – миллиметр;

- pt – пункт (1 пункт = 1/72 дюйма);

- pc – пика (1 пика = 12 пунктов).

Чаще всего при вёрстке используют следующие единицы измерения:

- px - для указания ширины, высоты и толщины элемента или его границы;

- em – для задания межстрочного интервала;

- pt – для указания размера шрифта;

- % - для задания величины относительно родительского элемента.

Единицу измерения указывают всегда, исключение составляет значение 0. Значения в виде размеров задаются без кавычек.

Цвет. Существует три способа задания цвета:

Ключевое слово, представляющее собой английское название цвета.

Шестнадцатеричный код в формате #ааббвв, где

аа – две цифра от 0 до F красного компонента цвета

бб – две цифра от 0 до F зеленого компонента цвета

вв – две цифра от 0 до F синего компонента цвета

RGB – цвет – rgb(аа, бб, вв), где

аа – две цифра от 0 до 255 красного компонента цвета

бб – две цифра от 0 до 255 зеленого компонента цвета

вв – две цифра от 0 до 255 синего компонента цвета

В данном формате вместо чисел в десятичной системе счисления можно использовать проценты. Например rgb(100%, 20%, 33%)

Адрес. Основной формат записи адреса следующий: url(“адрес”). Например: url(“img/bg_body.png”)

Вставки стиля CSS

Существует три способа вставки стиля css:

- Внешние таблицы стилей (css файл);

- Внутренние таблицы стилей (стиль в элементе head);

- Строчный стиль.

Внешние таблицы стилей отлично подходят для стилей, которые применяются к множеству страниц. С помощью внешних таблиц стилей вы можете изменить оформление всего веб-сайта, изменяя только один файл. На каждой странице сайта вы должны сделать ссылку на внешние таблицы стилей (css файл/файлы) с помощью тега < link >. Тег < link > помещается в элементе head:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Внешние таблицы стилей можно создать в любом текстовом редакторе. В этом файле не должно быть тегов html. Файл внешних стилей надо сохранить с расширением.css.

Пример

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

Внутренние таблицы стилей обычно используют в том случае, когда единственная страница сайта имеет уникальный стиль. Внутренний стиль записывается в элементе head между тегами <style>, </style>:

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Строчный стиль CSS противоречит идеологии разделения оформления и содержания, поэтому используйте его осторожно.

Для вставки строчного стиля используется атрибут style соответствующего элемента html. Атрибут style может содержать любое свойство CSS. В примере ниже показано, как изменить отступ слева и цвет текста параграфа:

<p style="color:sienna; margin-left:20px" >Это параграф.</p>

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