Справочник по CSS (ЦСС)

Справочник по CSS (ЦСС) содержит подробное описание основных стилевых параметров с примерами их использования. Каждый параметр включает таблицу браузеров, в которой показано, насколько данный атрибут поддерживается тем или иным браузером. Приводится синтаксис использования стилевого атрибута, список аргументов и объектная модель. В большинстве случаев результаты примеров иллюстрируются рисунками, что позволяет наглядно понять, как действует тот или иной атрибут.

Браузеры

Хотя большинство свойств CSS (ЦСС) описаны дастаткова давно, разработчики не всегда включали их поддержку в браузер или делали это не в полном объеме. По этой причине часто возникала ситуация, когда стандарты нельзя было применять по той причине, что они просто не работали. К счастью, эта ситуация исправляется и современные браузеры поддерживают спецификацию CSS (ЦСС) практически в полном объеме, хотя еще и не до конца. Тем не менее, при создании универсальных web-страниц, которые корректно отображаются в разных браузерах, необходимо знать, какие параметры будут работать и где, а какие нет. Для этого в таблице приведены популярные браузеры — Internet Эксплорер, Нетscape, Опера, Safari, Mozilla и Файер фох, а также используются следующие обозначения:

Да — параметр полностью поддерживается браузером со всеми допустимыми аргументами;
Нет — атрибут браузером не воспринимается и игнорируется;
Частично — параметр поддерживается лишь частично, например, не все допустимые аргументы действуют или атрибут применяется не ко всем элементам, которые указаны в спецификации;
Ошибки — свойство понимается браузером, но при его работе возможно появление различных Errors. В примечании к описанию свойства обычно указывается, какого рода ошибки обнаруживаются в браузере.

Синтаксис

Каждое свойство CSS (ЦСС) записывается в следующем обобщенном виде:

Селектор { свойство1: аргументы; свойство1: аргументы }

Селектором называют имя стиля, в котором указаны параметры форматирования, делятся они на несколько типов: селекторы тегов, идентификаторы и классы.

Селекторы тегов используются для определения стилей встроенных тегов ШТМЛ. Классы применяются для разработки стилей, которые можно применять к любому тегу ШТМЛ, для разработки выделений или изменения стиля блока контента. Идентификаторы обычно используются совместно со скриптами чтобы можно было управлять параметрами стиля динамически, кроме того, каждый идентификатор в пределах страницы должен быть уникальным.

Далее в фигурных скобках указывают имя атрибута CSS (ЦСС), а после двоеточия его желаемое значение. Писать несколько параметров можно, перечисляя их через точку с запятой, либо задавая отдельно каждый параметр, как показано ниже.

P { color: green; background: #f0f0f0 }
P { color: green }
P { background: #f0f0f0 }

В первой строке для селектора P одновременно устанавливается цвет контента и фона, а во второй — вначале задается цвет контента, а затем уже цвет фона. Поскольку селектор указан один, а свойства разные, то они будут применяться одновременно. Поэтому приведенные формы записи параметров приводят к одному результату.

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

P { color: green }
P { color: red }

В строке показано изменение цвета фона у параграфа P. Вначале задается зеленый цвет, а затем красный, который и будет применен к контенту.

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

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

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

Значение по умолчанию

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

Наследование

Наследование — это перенос правил форматирования для элементов, находящихся внутри других. Например, если для параграфа <P> задан красный цвет контента, а для курсива <I>, который находится внутри параграфа, нет, то в этом случае вложенный элемент наследует свойства своего родителя и курсивный контент также будет красным.

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

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

Применение

Свойства CSS (ЦСС) можно применять далеко не ко всем элементам web-страницы подряд, а только к тем, с которыми они <дружат>. Большинство атрибутов работают со всеми элементами, а некоторые только с блочными или позиционированными. Определенные свойства, хотя и указано, что могут применяться ко всем элементам, не всегда приводят к какому-либо результату. Например, для рисунков совершенно бессмысленно устанавливать атрибуты, которые манипулируют с контентом. Так что в каждом случае следует решать самостоятельно, когда применять параметр, а когда нет.

Объектная модель

Для динамического изменения свойств элемента через JavaScript, необходимо знать, как к нему обращаться. Зная имя объекта и желаемое свойство, можно указать его новое значение без перезагрузки web-страницы. Так, для сокрытия и отображения элемента применяется атрибут visibility, а объектная модель для управления его значением — document.getElementById("elementID").style.visibility. Указывая вместо elementID свой идентификатор элемента, заданный параметром id, получаем механизм для динамического скрывания некоторого содержимого.

Последняя версия справочника 3.2 от 16.02.2009.

Что нового?

• добавлен раздел с селекторами;
• обновлена таблица браузеров с учетом поведения Internet Explorer 8 RC1;
• к каждому свойству добавлены возможные ошибки с этим свойством в популярных браузерах;
• расширен список возможных значений у стилевых свойств;
• исправлены мелкие ошибки в описаниях;

Вы можете приобрести платную версию справочника по CSS (ЦСС), которая имеет ряд преимуществ по сравнению со своим бесплатно распространяемым аналогом, который можно скачать во вкладке «Скачать».

Преимущества

• Отсутствует реклама, которая имеется в бесплатной версии и онлайн-версии справочников.
• Все свойства упорядочены по алфавиту и по категориям.
• Список браузеров содержит актуальные версии, в том числе: Internet Эксплорер 8 (RC1), Опера 9.5, Safari 3.1, Файер фох 3.
• Приведен список хаков для различных браузеров.
• Указаны селекторы и их поведение в браузерах.
• Содержит список псевдоклассов и псевдоэлементов.
• Включен полнофункциональный поиск.
• Для каждого параметра указаны ошибки, возникающие в браузере.
• Бесплатное обновление.

Формат справочника CHM, ШТМЛ и PDF.