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

GoDFaTHeR 19 авг 2008, 09:51 Сообщение

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

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

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

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

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

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

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

Далее в фигурных скобках указывают имя параметра 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>, который порождает стиль всех остальных элементов веб-страницы.

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

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

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

Скачать учебник
http://adminsgetbb.ifolder.ru/7768957
+
+Все атрибуты css
  • 0
На этом сервисе можно cоздать форум бесплатно
Домены для форума ТУТ