Справочник CSS v3.2

Citation preview

Влад Мержевич

Справочник по CSS

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

Браузеры Хотя большинство свойств CSS описаны достаточно давно, разработчики не всегда включали их поддержку в браузер или делали это не в полном объеме. По этой причине часто возникала ситуация, когда стандарты нельзя было применять только потому, что они не работали. К счастью, эта ситуация исправляется и современные браузеры поддерживают спецификацию CSS 2.1 практически в полном объеме, хотя еще и не до конца. Тем не менее, при создании универсальных веб-страниц, которые корректно отображаются в разных браузерах, необходимо знать, какие свойства будут работать и где, а какие нет. Для этого в таблице приведены популярные браузеры — Internet Explorer, Netscape, Opera, Safari и Firefox, а также используются следующие обозначения: Да — свойство полностью поддерживается браузером со всеми допустимыми значениями; Нет — свойство браузером не воспринимается и игнорируется; Частично — свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации; Ошибки — свойство понимается браузером, но при его работе возможно появление различных ошибок. В примечании обычно указывается, какого рода ошибки обнаруживаются в браузере.

Синтаксис Каждое свойство CSS записывается в следующем обобщенном виде: Селектор { свойство: значения; }

Селектором называют имя стиля, в котором указаны параметры форматирования, делятся они на несколько типов: селекторы тегов, идентификаторы и классы. Селекторы тегов используются для определения стилей встроенных тегов HTML. Классы применяются для создания стилей, которые можно применять к любому тегу HTML, для создания выделений или изменения стиля блока текста. Идентификаторы обычно используются совместно со скриптами, чтобы можно было управлять параметрами стиля динамически, кроме того, каждый идентификатор в пределах страницы должен быть уникальным. Далее в фигурных скобках указывается свойство CSS и через двоеточие его желаемое значение. Писать несколько свойств можно, перечисляя их через точку с запятой, либо задавая их отдельно, как показано ниже. P { color: green; background: #f0f0f0; } P { color: green; } P { background: #f0f0f0; }

В первой строке для селектора P одновременно устанавливается цвет текста и фона, а во второй — вначале задается цвет текста, а затем уже цвет фона. Поскольку селектор указан один, но свойства разные, то они будут применяться одновременно. Поэтому подобные формы записи приводят к одному результату. Если для одного селектора определяются одинаковые свойства, но с разными значениями, то использоваться будет тот, что указан в коде последним. P { color: green } P { color: red }

В строке показано изменение цвета фона у параграфа

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

При описании синтаксиса применяются следующие обозначения:    

вертикальная черта между значениями (например, fixed | scroll) указывает на логическое исключающее ИЛИ, это означает, что надо выбрать только одно значение из предложенных; двойная вертикальная черта (border-style || color) обозначает объединяющее ИЛИ (ИЛИ/И), каждое значение может использоваться самостоятельно или совместно с другими через пробел; квадратные скобки ([left | center | right]) помечают группу, из которой, как правило, выбирается одно значение, причем оно не является обязательным к использованию; два числа в фигурных скобках ({a,b}) говорят, что предшествующее им значение следует повторять не менее a, но не более b раз.

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

Наследование Наследование — это перенос правил форматирования для элементов, находящихся внутри других. Например, если для параграфа

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