Home
Css справочник- html, таблицы, шаблоны, картинки, шрифты... Prev Page Prev Page
Как пользоваться справочником
Все свойства
B
background
background-attachment
background-color
background-image
background-position
background-repeat
border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
bottom
C
clear
clip
color
content
cursor
D
display
F
float
font
font-family
font-size
font-style
font-variant
font-weight
H
height
L
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
M
margin
margin-bottom
margin-left
margin-right
margin-top
O
overflow
P
padding
padding-bottom
padding-left
padding-right
padding-top
position
Q
quotes


R
right
T
table-layout
text-align
text-decoration
text-indent
text-transform
top
V
vertical-align
visibility
W
white-space
width
word-spacing
Z
z-index
По категориям
Фон
background
background-attachment
background-color
background-image
background-position
background-repeat
Границы
border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-collapse
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
Позиционирование
bottom
height
left
position
right
top
width
z-index
Форматирование
clear
clip
display
float
overflow
vertical-align
visibility
Цвет
color
Шрифт
font
font-family
font-size
font-style
font-variant
font-weight
Текст
letter-spacing
line-height
text-align
text-decoration
text-indent
text-transform
white-space
word-spacing
Список
list-style
list-style-image
list-style-position
list-style-type
Отступы
margin
margin-bottom
margin-left
margin-right
margin-top
Поля
padding
padding-bottom
padding-left
padding-right
padding-top
Таблица
table-layout
border-collapse
Курсор
cursor
Контент
content
quotes



лестницы-спб.рф
Справочник по css

Как пользоваться справочником

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

Браузеры

Хотя большинство свойств 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 можно применять далеко не ко всем элементам веб-страницы подряд, а только к тем, с которыми они [дружатk. Большинство атрибутов работают со всеми элементами, а некоторые только с блочными или позиционированными. Определенные свойства, хотя и указано, что могут применяться ко всем элементам, не всегда приводят к какому-либо результату. Например, для изображений совершенно бессмысленно устанавливать атрибуты, которые манипулируют с текстом. Так что в каждом случае следует решать самостоятельно, когда применять параметр, а когда нет.

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

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

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function hiddenLayer() {
document.getElementById("descr").style.visibility = "hidden";
}
function showLayer() {
document.getElementById("descr").style.visibility = "visible";
}
</script>
</head>
<body>
<a href="#" onMouseOver="showLayer()" onMouseOut="hiddenLayer()"><img src="button.gif" width="98" height="33" border="0"></a>
<div id="descr" style="visibility: hidden">Данная эксклюзия является подмножеством астрациональных супремативных монотенных федоний кадонарного экстрафазория.</div>
</body>
</html>

В данном примере текст отображается при наведении курсора мыши на графическую кнопку и вновь прячется, когда курсор уводится прочь.

Справочник по CSS. Версия 2.0