background

Описание
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.
Синтаксис
background: background-attachment || background-color || background-image || background-position || background-repeat
Аргументы
Любые комбинации пяти значений, определяющих стиль фона, в произвольном порядке. Значения разделяются между собой пробелом. Ни один аргумент не является обязательным, поэтому неиспользуемые значения можно опустить.
Значение по умолчанию
Нет.
Пример
BODY { background: url(bg.gif ) repeat fixed }
P { background: #C0C0C0 }

Применяется
Ко всем элементам.

background-attachment

Параметр background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.
Синтаксис
background-attachment: fixed | scroll
Аргументы
Значение fixed делает фоновое изображение элемента неподвижным, scroll — позволяет перемещаться фону вместе с содержимым.
Значение по умолчанию
scroll
Пример
BODY { background-image: url(images/bg.gif);background-attachment: fixed }

Применяется
Ко всем элементам.

background-color

Устанавливает фоновый цвет элемента. Хотя этот параметр не наследует свойства своего родителя, из-за того, что начальное значение цвета фона устанавливается прозрачным, он совпадает с фоном текущего элемента.
Синтаксис
background-color: цвет
Аргументы
Значение цвета может задаваться по его названию, шестнадцатеричному значению, либо с помощью RGB. Кроме значения цвета, еще один допустимый аргумент — transparent, устанавливающий прозрачный фон.
Значение по умолчанию
transparent
Пример
BODY { background-color: #3366CC }
P { background-color: yellow }
P { background-color: #98560F }
P { background-color: RGB(249, 231, 16) }

Применяется
Ко всем элементам.

background-image

Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображение не доступно или отключен их показ в браузере. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет.
Синтаксис
background-image: url(путь к файлу) | none
Аргументы
В качестве значения используется путь к графическому файлу, который указывается внутри конструкции url(). Либо аргумент может принимать значение none, когда фоновое изображение не требуется.
Значение по умолчанию
none
Пример
BODY { background-image: url(images/bg.gif) }

Применяется
Ко всем элементам.

background-position

Задает положение левого верхнего угла фонового изображения, установленного с помощью параметра background-image.
Синтаксис
background-position: [проценты | значение] | [left | center | right] || [top | center | bottom]
Аргументы
У этого параметра два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Положение можно, также, задавать в процентах, пикселях или других единицах.
Значение по умолчанию
0%
Пример
BODY { background-image: url(mybg.gif); background-position: right bottom }

Применяется
Ко всем элементам.

background-repeat

Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра background-image, и по какой оси. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.
Синтаксис
background-repeat: no-repeat | repeat | repeat-x | repeat-y
Аргументы
Значение no-repeat устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется атрибутом background-position (по умолчанию в левом верхнем углу). Другими допустимыми значениями являются repeat (повторяемость по вертикали и горизонтали), repeat-x (по горизонтали), repeat-y (по вертикали).
Значение по умолчанию
repeat
Пример
BODY { background-image: url(mybg.gif); background-repeat: repeat-y }

Применяется
Ко всем элементам.

border

Параметр позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту. Для установки рамки только на определенных сторонах элемента, воспользуйтесь параметрами border-top, border-bottom, border-left, border-right.
Синтаксис
border: border-width || border-style || color
Применяется
Ко всем элементам.

border-bottom

Параметр позволяет одновременно установить толщину, стиль и цвет границы внизу элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
Синтаксис
border-bottom: border-width || border-style || color
Применяется
Ко всем элементам.

border-bottom-color

Устанавливает цвет границы внизу элемента.
Синтаксис
border-bottom-color: цвет
Аргументы
Значение цвета может задаваться по его названию, шестнадцатеричному значению, либо с помощью RGB. Кроме значения цвета, еще один допустимый аргумент — transparent, устанавливающий прозрачный фон. Пример
P { border-bottom-color: red }
P { border-bottom-color: # 4B3A6E }

Применяется
Ко всем элементам.

border-bottom-style

Устанавливает стиль границы внизу элемента.
Синтаксис
border-bottom-style: стиль Пример
P { border-bottom-style: double }

Применяется
Ко всем элементам.

border-bottom-width

Устанавливает толщину границы внизу элемента.
Синтаксис
border-bottom-width: thin | medium | thick | значение
Аргументы
Три переменные — thin, medium и thick задают толщину границы внизу. Для более точного значения, толщину можно указывать в пикселях или других единицах.
Значение по умолчанию
medium (IE); 0 (NN). Пример
H1 { border-bottom-width: 2px }

Применяется
Ко всем элементам.

border-collapse

Устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Значение collapse заставляет браузер убирать в таблице двойные линии. Устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, в таком случае в месте стыка ячеек получится линия двойной толщины. Добавление значения collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии. При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
Синтаксис
border-collapse: inherit | collapse | separate
Аргументы
inherit — свойства наследуются у родителя элемента. Этот аргумент поддерживается только в браузерах Netscape 7 и Opera 7.
collapse — линия между ячейками отображается как одна.
separate — вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.
Значение по умолчанию
separate Пример
<html>
<head>
<style type="text/css">
TABLE { width: 300px; border: 4px double black; border-collapse: collapse }
TH { text-align: left; background: #ccc; padding: 5px; border: 1px solid black }
TD { padding: 5px; border: 1px solid black }
</style>
</head>
<body>

<table cellspacing=0>
<tr>
<th> </th>
<th>2003</th>
<th>2004</th>
<th>2005</th>
</tr>
<tr>
<td>Нефть</td>
<td>43</td>
<td>51</td>
<td>79</td>
</tr>
<tr>
<td>Золото</td>
<td>29</td>
<td>34</td>
<td>48</td>
</tr>
<tr>
<td>Дерево</td>
<td>38</td>
<td>57</td>
<td>36</td>
</tr>
</table>

</body>
</html>

Применяется
К тегу TABLE или к элементам, у которых значение свойства display установлено как table или inline-table.

border-color

Устанавливает цвет границы на разных сторонах элемента. Параметр позволяет задать цвет границы сразу на всех сторонах элемента или определить цвет границы только на указанных сторонах.
Синтаксис
border-color: color {1,4}
Аргументы
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества аргументов и приведен в сводной таблице. Число аргументов Результат
1 Цвет рамки будет установлен для всех сторон элемента.
2 Первый аргумент устанавливает цвет верхней и нижней границы, второй аргумент — левой и правой.
3 Первый аргумент задает цвет верхней границы, второй — одновременно левой и правой стороны, а третий — нижней границы.
4 Поочередно устанавливается цвет верхней, правой, нижней и левой границы.

Значение по умолчанию
Значение цвета, заданное параметром color. Пример
P { border-color: red rgb(0,0,255) red }
DIV { border-color: #008A77 }

Применяется
Ко всем элементам.

border-left

Параметр позволяет одновременно установить толщину, стиль и цвет левой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
Синтаксис
border-left: border-width || border-style || color Пример
<html>
<body>

<div style="border-left: 1px solid black; padding-left: 10px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

Применяется
Ко всем элементам.

border-left-color

Параметр позволяет одновременно установить толщину, стиль и цвет левой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
Синтаксис
border-left: border-width || border-style || color Пример
P { border-left: 1px solid #bd0ef6 }

Применяется
Ко всем элементам.

border-left-style

Устанавливает стиль границы левой стороны элемента.
Синтаксис
border-left-style: стиль Пример
P { border-left-style: groove }

Применяется
Ко всем элементам.

border-left-width

Устанавливает толщину границы левой стороны элемента.
Синтаксис
border-left-width: thin | medium | thick | значение
Аргументы
Три переменные — thin, medium и thick задают толщину границы. Для более точного значения, толщину можно указывать в пикселях или других единицах.
Значение по умолчанию
medium (IE); 0 (NN). Пример
H1 { border-left-width: 2px }

Применяется
Ко всем элементам.

border-right

Параметр позволяет одновременно установить толщину, стиль и цвет границы с правой стороны элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
Синтаксис
border-right: border-width || border-style || color

Пример
<html>
<body>

<div style="border-right: 1px solid black; padding-left: 10px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

<body>
</html>

Применяется
Ко всем элементам.

border-right-color

Устанавливает цвет границы правой стороны элемента.
Синтаксис
border-right-color: цвет
Аргументы
Значение цвета может задаваться по его названию, шестнадцатеричному значению, либо с помощью RGB. Кроме значения цвета, еще один допустимый аргумент — transparent, устанавливающий прозрачный фон. Пример
P { border-right-color: red }
P { border-right-color: # 4B3A6E }

Применяется
Ко всем элементам.

border-right-style

Устанавливает стиль границы правой стороны элемента.
Синтаксис
border-right-style: стиль Пример
P { border-right-style: solid }

Применяется
Ко всем элементам.

border-right-width

Устанавливает толщину границы правой стороны элемента.
Синтаксис
border-right-width: thin | medium | thick | значение
Аргументы
Три переменные — thin, medium и thick задают толщину границы. Для более точного значения, толщину можно указывать в пикселях или других единицах.
Значение по умолчанию
medium (IE); 0 (NN). Пример
H1 { border-right-width: 2px }

Применяется
Ко всем элементам.

border-style

Устанавливает стиль рамки вокруг элемента.
Синтаксис
border-style: стиль
Значение по умолчанию
Нет. Пример
<html>
<head>
<style type="text/css">
P { border-style: double }
</style>
</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

</body>
</html>

Применяется
Ко всем элементам.

border-top
Параметр позволяет одновременно установить толщину, стиль и цвет границы сверху элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
Синтаксис
border-top: border-width || border-style || color Пример
<html>
<body>

<div style="border-top: 2px solid black; background: #fc3; padding: 10px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

<body>
</html>

Применяется
Ко всем элементам.

border-top-color

Устанавливает цвет границы сверху элемента.
Синтаксис
border-top-color: цвет
Аргументы
Значение цвета может задаваться по его названию, шестнадцатеричному значению, либо с помощью RGB. Кроме значения цвета, еще один допустимый аргумент — transparent, устанавливающий прозрачный фон. Пример
P { border-top-color: red }
P { border-top-color: # 4B3A6E }

Применяется
Ко всем элементам.

border-top-style

Устанавливает стиль границы верхней части элемента.
Синтаксис
border-top-style: стиль Пример
P { border-top-style: dotted }

Применяется
Ко всем элементам.

border-top-width

Устанавливает толщину границы верхней части элемента.
Синтаксис
border-top-width: thin | medium | thick | значение
Аргументы
Три переменные — thin, medium и thick задают толщину границы. Для более точного значения, толщину можно указывать в пикселях или других единицах.
Значение по умолчанию
medium (IE); 0 (NN). Пример
H1 { border-top-width: 2px }

Применяется
Ко всем элементам.
border-width

Задает толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны. Способ изменения толщины зависит от числа аргументов.
Синтаксис
border-width: thin | medium | thick | значение Пример
<html>
<head>
<style type="text/css">
P { border-style: double; border-width: 3px 7px 7px 4px; padding: 7px }
</style>
<body>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

</body>
</html>

Применяется
Ко всем элементам.

bottom

Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от параметра position, он обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).
Синтаксис
bottom: значение | проценты | auto
Аргументы
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Значение параметра bottom может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента. Аргумент auto не изменяет положение элемента. Значение по умолчанию
auto
Наследование
Значения, присвоенные данному параметру, не наследуются. Пример
<html>
<body>

<div style="bottom: 100px; position: absolute; background: #f0f0f0; padding: 10px: border: solid 1px black">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</div>

</body>
</html>

Применяется
Ко всем элементам.

clear

Параметр устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено обтекание элемента с помощью параметра float, свойство clear отменяет его действие для указанных сторон.
Синтаксис
clear: both | left | none | right
Аргументы
Значение both отменяет обтекание элемента одновременно с правого и левого края. Этот аргумент рекомендуется установить, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.
left — отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
right — отменяет обтекание с правой стороны элемента.
none — отменяет действие данного свойства и обтекание элемента происходит, как задано с помощью параметра float или других настроек.
Значение по умолчанию
none Пример
<html>
<body>

<div style="float: left; background: #fd0; border: solid 1px black; padding: 10px; width: 40%">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
<div style="clear: left">
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
</div>

</body>
</html>

clip

Параметр clip определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственно доступная форма области — прямоугольник. Все остальное остается только в мечтах. Параметр clip работает только для абсолютно позиционированных элементов.
Синтаксис
clip: rect(сверху справа снизу слева) | auto
Аргументы
В качестве аргументов используется расстояние от края элемента до области вырезки. Если край области нужно оставить без изменений, следует поставить параметр auto.
Значение по умолчанию
auto Пример
<html>
<body>

<div style="position: absolute; clip: rect(20px auto auto 20px); width: 200px; color: white; background: #7F4C3E; border: solid 1px black">
<p style="padding: 10px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

color

Определяет цвет текста элемента.
Синтаксис
color: значение
Значение по умолчанию
black Пример
<html>
<body>

<p><span style="color: red">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat.</p>
<p style="color: RGB(49, 151, 116)"><span style="color: #f00">Ut</span> wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

cursor

Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.
Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной руки, появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все как есть.
Синтаксис
cursor: auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | s-resize | se-resize | sw-resize | text | w-resize | wait || url('путь к курсору')
Аргументы
auto — вид курсора по умолчанию для текущего элемента;
url — позволяет установить свой собственный курсор, для этого нужно указать путь к файлу, в котором указана форма курсора, в формате CUR. Данный параметр работает только в браузере Internet Explorer 6.

Пример
<html>
<head>
<style type="text/css">
.cross { cursor: crosshair }
.help { cursor: help }
</style>
</head>
<body>
<b>
<span class="cross">На этом тексте курсор мыши примет вид перекрестья.</span>
<br> <a href="help1.htm" class=help>СПРАВКА 1 </a><br>
<a href="help2.htm" class=help>СПРАВКА 2</a><br>
<a href="help3.htm" class=help>СПРАВКА 3</a>
</b>
</body>
</html>

Применяется
Ко всем элементам.

display

Многоцелевой атрибут, который определяет, должен ли элемент быть показан в документе. Отличается от похожего на него по действию параметра visible тем, что display не резервирует пустое пространство под элементом, а временно удаляет его из документа. Благодаря этому свойству, параметр display часто применяют для создания раскрывающегося списка, когда требуется, чтобы один текст заменял собой другой при нажатии на ссылку.
Синтаксис
CSS1 — display: block | inline | list-item | none
CSS2 — display: block | compact | inline | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
Значение по умолчанию
inline Пример
<html>
<body>

Duis te feugifacilisi.

<div style="display: inline">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<div style="display: none">Скрытое поле</div>

</body>
</html>

Применяется
Ко всем элементам.

float

Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение параметра float равно none, элемент выводится на странице как обычно, самое большое — одна строка обтекающего текста может быть на той же линии, что и сам элемент.
Синтаксис
float: left | right | none
Аргументы
left — выравнивает элемент по левому краю, а все остальные элементы, вроде текста, огибают его по правой стороне.
right — выравнивает элемент по правому краю, а все остальные элементы огибают его по левой стороне.
none — обтекание элемента не задается.
Значение по умолчанию
none Пример
<html>
<body>

<div style="float: left; background: #fd0; border: solid 1px black; padding: 10px; width: 40%">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
<div>
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.
</div>

</body>
</html>

Добавлено (13-Мар-08, 23:27)
---------------------------------------------
Базовые понятия

Разработка простых таблиц стилей является довольно простым
занятием. Разработчик должен иметь базовые знания по HTML и по полиграфической
терминологии. Например для определения цвета элементов 'H1' как синий,
достаточно сказать:

H1 { color: blue }

Приведенный пример является простым правилом CSS. Правило
состоит из двух основных частей: селектора ('H1') и определения ('color: blue').
Определение в свою очередь тоже состоит из двух частей: свойства ('color') и
значения ('blue'). В то время, как приведенный пример пытается повлиять только
на одно из свойств, необходимых для построения HTML документа, он уже является
таблицей стилей. Скомбинированный с другими таблицами стилей (одним из
фундаментальных свойств CSS является комбинирование таблиц стилей) он будет
определять конечный вид всего документа.

Селектор является связью между HTML документом и таблицей
стилей, полный набор типов элементов содержит все возможные селекторы. Типы
элементов определены в спецификации HTML [2].

Cвойство 'color' является одним из порядка 50 свойств,
которые определяют вид HTML документа. Список свойств и их возможных значений
определяется в данной спецификации.

Авторам HTML необходимо определять свою таблицу стилей только
в том случае, если они хотят предложить специфический стиль для своих
документов. Каждый UA должен иметь таблицу стилей по умолчанию, которая
представляет документы в приемлемом, но может быть достаточно простом виде. П
приложении А приведена примерная таблица стилей для представления HTML
документов так, как это предлагается в спецификации HTML 2.0 [3].

Формальная грамматика языка CSS1 определена в приложении B.

1.1 Включение в HTML

Для того, чтобы таблица стилей влияла на вид документа, UA
должен знать о ее существовании. Спецификация HTML [2] определяет способы
включения таблиц стилей в HTML. Поэтому данный раздел является информативным, а
не нормативным:

<HTML>
<HEAD>
<TITLE>title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="http://footballmpeg.ru/cool" TITLE="Cool">
<STYLE TYPE="text/css">
@import url(http://footballmpeg.ru/basic);
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Headline is blue</H1>
<P STYLE="color: green">While the paragraph is green.
</BODY>
</HTML>

Данный пример демонстрирует четыре способа объединения стиля
с HTML: используя элемент 'LINK' для связи с внешней таблицей стилей, используя
элемент 'STYLE' внутри элемента 'HEAD', импортируя таблицу стилей с помощью
нотации CSS '@import' и используя атрибут 'STYLE' в элементе внутри секции 'BODY'.
Последний способ смешивает стиль с содержимым и поэтому теряет соответствующие
достоинства традиционных таблиц стилей.

Элемент 'LINK' ссылается на альтернативную таблицу стилей,
которую может выбрать читатель, в то время как импортируемые таблицы стилей
автоматически объединяются с остальной частью таблицы стилей.

Традиционно UA игнорировали неизвестные теги. Как результат
старые UA будут игнорировать элемент 'STYLE', но его содержимое будет считаться,
как часть тела документа и будет отображаться в документе. В течение переходного
периода содержимое элемента 'STYLE' можно "прятать", используя комментарии SGML:

<STYLE TYPE="text/css"><!--
H1 { color: green }
--></STYLE>

В связи с тем, что элемент 'STYLE' определен, как "CDATA" в
DTD [2], интерпретаторы SGML не будут считать таблицу стилей комментарием,
который надо удалить.

1.2 Группирование

Для уменьшения размера таблицы стилей можно группировать
селекторы в разделенные запятыми списки:

H1, H2, H3 { font-family: helvetica }

Точно также можно группировать определения:

H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}

В дополнение к этому некоторые свойства имеют собственный
синтаксис группировки:

H1 { font: bold 12pt/14pt helvetica }

что эквивалентно предыдущему примеру.
1.3 Наследование

В первом примере цвет элементов 'H1' был установлен в синий.
Представьте, что есть элемент 'H1' с элементом <EM> внутри:

<H1>The headline <EM>is</EM> important!</H1>

Если для элемента 'EM' не было определено никакого цвета, то
Emированный "is" унаследует цвет родительского элемента, т.е. он также будет
отображен синим цветом. Другие свойства стиля также наследуются, например 'font-family'
и 'font-size'.

Для определения свойства стиля по умолчанию для документа,
можно задать это свойство у элемента, от которого наследуются все остальные
видимые элементы. В HTML документах элемент 'BODY' выполняет эту функцию:

BODY {
color: black;
background: url(texture.gif) white;
}

Этот пример сработает даже если автор опустил тэг 'BODY' (что
является допустимым) благодаря тому, что браузер вставит пропущенный тэг.
Предыдущий пример устанавливает цвет текста в черный, а фон - содержащий
картинку. Фон будет белым в том случае, если картинка будет недоступна. (См.
подробности в главе 5.3)

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

Часто значение свойства указывается в процентах от другого свойства:
P { font-size: 10pt }
P { line-height: 120% } /* relative to 'font-size', i.e. 12pt */

Для любого свойства, значения которого могут указываться в
процентах, определено свойство на которое оно ссылается. Дочерние элементы 'P'
унаследуют вычисленное а не процентное значение 'line-height' (12pt).

1.4 Класс в качестве селектора

Для увеличения гибкости контроля над элементами, в HTML
добавлен новый атрибут [2] 'CLASS'. Все элементы внутри элемента 'BODY' могут
быть классифицированы, а на класс можно сослаться через таблицу стилей:

<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
H1.pastoral { color: #00FF00 }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=pastoral>Way too green</H1>
</BODY>
</HTML>

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

Можно адресовать все элементы одного класса опустив имя тэга
в селекторе:

.pastoral { color: green } /* all элементы with CLASS pastoral */

Для каждого селектора можно определить только один класс. 'P.pastoral.marine'
таким образом является неправильным селектором в CSS1. (Контекстные селекторы,
описанные ниже, могут определять один класс для одного простого селектора).

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

1.5 ID в качестве селектора

HTML [2] также теперь определяет атрибут 'ID', который
гарантированно имеет уникальное значение в документе. Таким образом он имеет
особое значение, как селектор таблицы стилей, и может адресоваться с помощью
'#':

#z98y { letter-spacing: 0.3em }
H1#z98y { letter-spacing: 0.5em }

<P ID=z98y>Wide text</P>

В приведенном примере первый селектор соответствует элементу
'P' благодаря 'ID' атрибута. Второй селектор определяет как тип элемента ('H1'),
так и значение ID, и, поэтому, не соответствует элементу 'P'.

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

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

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

H1 { color: blue }
EM { color: red }

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

H1 EM { color: red }

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

UL LI { font-size: small } UL UL LI { font-size: x-small }

В этом случае первый селектор соответствует элементам 'LI' в
как минимум одним предком 'UL'. Второй селектор соответствует подмножеству
первого, т.е. элементы 'LI' с как минимум двумя предками 'UL'. Конфликт
разрешается тем, что второй селектор является более специфичным в связи с более
длинной маской поиска. См. подробнее о порядке каскадирования (раздел 3.2).

Контекстные селекторы могут содержать тип элемента, атрибуты
CLASS, атрибуты ID или их комбинацию:

DIV P { font: small sans-serif }
.reddish H1 { color: red }
#x78y CODE { background: blue }
DIV.sidenote H1 { font-size: large }

Первый селектор соответствует элементам 'P', которые среди
предков имеют 'DIV'. Второй селектор соответствует всем элементам 'H1' которые
имеют предка класса 'reddish'. Третий селектор соответствует всем элементам 'CODE',
которые являются наследниками элемента с 'ID=x78y'. Четвертый селектор
соответствует всем элементам 'H1', которые имеют предка 'DIV' с классом 'sidenote'.

Можно группировать несколько контекстных селекторов:
H1 B, H2 B, H1 EM, H2 EM { color: red }

что эквивалентно:
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }

1.7 Комментарии

Текстовые комментарии в таблицах стилей оформляются так же
как и в языке Си [7]:

EM { color: red } /* red, really red!! */

Комментарии не могут вкладываться друг в друга. Для
обработчика CSS1 комментарий эквивалентен пробелу.

По материалам wwwmaster-css.ru