Истории

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

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

.
Браузер Firefox до второй версии включительно нестабильно работает с 
позиционированными элементами, а
также не применяет after к тегу 
.
background
Краткая информация
Описание
Универсальное свойство background позволяет установить одновременно до пяти 
характеристик фона.
Значения могут идти в любом порядке, браузер сам определит, какое из них 
соответствует нужному
свойству. Для подробного ознакомления смотрите информацию о каждом свойстве 
отдельно.
Синтаксис
background: [background-attachment || background-color || background-image || 
background-position || background-repeat] |
inherit
Значения
Любые комбинации пяти значений, разделяемых между собой пробелом, определяющих 
стиль фона, в
произвольном порядке. Ни одно значение не является обязательным, поэтому 
неиспользуемые можно
опустить. inherit наследует значение у родительского элемента.
Пример









Duis te feugifacilisi. 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. Ut wisi enim ad minim veniam, quis nostrud exerci 
taion
ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te
feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.



Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1, CSS2.1
Значение по
умолчанию Зависит от использования
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML


Ссылка на
спецификацию http://www.w3.org/TR/CSS21/colors.html#propdef-background
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Результат данного примера показан ниже (рис. 1).
Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера
Объектная модель
[window.]document.getElementById("elementID").style.background
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
background-attachment
Краткая информация
Описание
Свойство background-attachment устанавливает, будет ли прокручиваться фоновое 
изображение вместе с
содержимым элемента. Изображение может быть зафиксировано и оставаться 
неподвижным, либо
перемещаться совместно с документом.
Синтаксис
background-attachment: fixed | scroll | inherit
Значения
Делает фоновое изображение элемента неподвижным.
Позволяет перемещаться фону вместе с содержимым.
Наследует значение родителя.
Пример



Пример текста





Объектная модель
[window.]document.getElementById("elementID").style.backgroundAttachment
Браузеры
В браузере Internet Explorer 6 значение fixed работает только для тегов  
или .
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1, CSS2.1
Значение по
умолчанию scroll
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML 
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/colors.html#propdef-backgroundattachment
fixed
scroll
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
background-color
Краткая информация
Описание
Определяет цвет фона элемента. Хотя это свойство не наследует свойства своего 
родителя, из-за того, что
начальное значение устанавливается прозрачным, цвет фона дочерних элементов 
совпадает с цветом
фона родительского элемента.
Синтаксис
background-color: цвет | transparent | inherit
Значения
Цвет можно задавать тремя способами.
1. По его названию
Браузеры поддерживают некоторые цвета по их названию.
2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. 
Шестнадцатеричная система, в
отличие от десятичной системы, базируется, как следует из ее названия, на числе 
16. Цифры будут
следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 
заменены латинскими буквами.
Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел 
в одно. Например,
числу 255 в десятичной системе соответствует число FF в шестнадцатеричной 
системе. Чтобы не возникало
путаницы в определении системы счисления, перед шестнадцатеричным числом ставят 
символ решетки #,
например #666999. Каждый из трех цветов — красный, зеленый и синий — может 
принимать значения от 00
до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb,
 где первые два
символа отмечают красную компоненту цвета, два средних — зеленую, а два 
последних — синюю.
Допускается использовать сокращенную форму вида #rgb, где каждый символ следует 
удваивать. Так,
запись #fe0 следует расценивать как #ffee00.
3. С помощью RGB
Можно определить цвет используя значения красной, зеленой и синей составляющей 
в десятичном
исчислении. Значение каждого из трех цветов может принимать значения от 0 до 
255. Также можно задавать
цвет в процентном отношении.
Устанавливает прозрачный фон.
Наследует значение родителя.
Пример








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



В данном примере для элементов веб-страницы применяется три различных способа 
задания фонового
цвета. Результат примера показан ни рис. 1.
Рис. 1. Применение background-color
Объектная модель
[window.]document.getElementById("elementID").style.backgroundColor
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
background-image
Краткая информация
Описание
Устанавливает фоновое изображение для элемента. Если одновременно для элемента 
задан цвет фона,
он будет показан, пока фоновая картинка не загрузится полностью. То же 
произойдет, если изображения не
доступны или их показ в браузере отключен. В случае наличия в рисунке 
прозрачных областей, через них
будет проглядывать фоновый цвет.
Синтаксис
background-image: url(путь к файлу) | none | inherit
Значения
В качестве значения используется путь к графическому файлу, который указывается 
внутри
конструкции url(). Путь к файлу при этом можно писать как в кавычках (двойных 
или
одинарных), так и без них.
Отменяет фоновое изображение для элемента.
Наследует значение родителя.
Пример








...


Объектная модель
[window.]document.getElementById("elementID").style.backgroundImage
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по
умолчанию none
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML 
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/colors.html#propdef-backgroundimage
url
none
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
background-position
Краткая информация
Описание
Задает начальное положение фонового изображения, установленного с помощью 
свойства backgroundimage.
Синтаксис
background-position: [left | center | right | проценты | значение] || [top | 
center | bottom | проценты | значение] | inherit
Значения
У свойства background-position два значения, положение по горизонтали (может 
быть — left, center, right) и
вертикали (может быть — top, center, bottom). Кроме использования ключевых слов 
положение также можно
задавать в процентах, пикселах или других единицах. Если применяются ключевые 
слова, то порядок их
следования не имеет значения, при процентной записи вначале задается положение 
рисунка по
горизонтали, а затем, через пробел, положение по вертикали. Отношение между 
используемыми
ключевыми словами и процентной записью следующее.
? top left = left top = 0% 0% (в левом верхнем углу)
? top = top center = center top = 50% 0% (по центру вверху)
? right top = top right = 100% 0% (в правом верхнем углу)
? left = left center = center left = 0% 50% (по левому краю и по центру)
? center = center center = 50% 50% (по центру)
? right = right center = center right = 100% 50% (по правому краю и по центру)
? bottom left = left bottom = 0% 100% (в левом нижнем углу)
? bottom = bottom center = center bottom = 50% 100% (по центру внизу)
? bottom right = right bottom = 100% 100% (в правом нижнем углу)
В скобках указано, где располагается фоновый рисунок относительно контейнера.
При inherit значение наследуется у родителя элемента.
Пример








...
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1, CSS2.1
Значение по
умолчанию 0% 0%
Наследуется Нет
Применяется К блочным элементам
Аналог HTML Нет
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/colors.html#propdef-backgroundposition
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0


Объектная модель
[window.]document.getElementById("elementID").style.backgroundPosition
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
background-repeat
Краткая информация
Описание
Определяет, как будет повторяться фоновое изображение, установленное с помощью 
свойства backgroundimage.
Можно установить повторение рисунка только по горизонтали, по вертикали или в 
обе стороны.
Синтаксис
background-repeat: no-repeat | repeat | repeat-x | repeat-y | inherit
Значения
Устанавливает одно фоновое изображение в элементе без его повторений, положение
которого определяется свойством background-position (по умолчанию в левом 
верхнем углу).
Фоновое изображение повторяется по горизонтали и вертикали.
Фоновый рисунок повторяется только по горизонтали.
Фоновый рисунок повторяется только по вертикали.
Наследует значение родителя.
Пример








...


Объектная модель
[window.]document.getElementById("elementID").style.backgroundRepeat
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по
умолчанию repeat
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/colors.html#propdef-backgroundrepeat
no-repeat
repeat
repeat-x
repeat-y
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
before
Краткая информация
Описание
Псевдоэлемент before применяется для отображения желаемого контента до элемента,
 к которому он
добавляется. Работает совместно со свойством content.
Для before характерны следующие особенности.
1. При добавлении before к блочному элементу, значение свойства display может 
быть только: block, inline,
none, marker. Все остальные значения будут трактоваться как block.
2. При добавлении before к встроенному элементу, display ограничен значениями 
inline и none. Все
остальные будут восприниматься как inline.
3. before наследует стиль от элемента, к которому он добавляется.
Синтаксис
Элемент:before { content: "текст" }
Значения
Нет.
Пример









Альфа
Бета
Гамма



В данном примере вместо стандартных маркеров списка с помощью псевдоэлемента 
before выводится
символ ¶. Результат примера продемонстрирован на рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Нет Да Да Да Да Ошибки Да Да Да Да Частично Частично Да
CSS CSS2
Значение по умолчанию Нет
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/selector.html#before-andafter
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Использование псевдоэлемента before в списках
Браузеры
Opera 9.2 учитывает все пробелы, как если бы они были заключены в тег 
.
Браузер Firefox до второй версии включительно нестабильно работает с 
позиционированными элементами,
а также не применяет before к тегу 
.
border
Краткая информация
Описание
Универсальное свойство border позволяет одновременно установить толщину, стиль 
и цвет границы вокруг
элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам 
определит, какое из
них соответствует нужному свойству. Для установки границы только на 
определенных сторонах элемента,
воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.
Синтаксис
border: [border-width || border-style || border-color] | inherit
Значения
Значение border-width определяет толщину границы. Для управления ее видом 
предоставляется несколько
значений border-style. Их названия и результат действия представлен на рис. 1.
Рис.1. Стили рамок
border-color устанавливает цвет границы, значение может быть в любом допустимом 
для CSS формате.
inherit наследует значение родителя.
Пример









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.



В данном примере вокруг слоя добавляется двойная граница. Результат показан ни 
рис. 2.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по умолчанию Зависит от использования
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML  | 
Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.html#propdef-border
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 2. Применение свойства border
Объектная модель
[window.]document.getElementById("elementID").style.border
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px 
отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка 
исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 
2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
Стиль границы в разных браузерах может несколько различаться при использовании 
значений groove, ridge,
inset или outset.
border-bottom
Краткая информация
Описание
Свойство позволяет одновременно установить толщину, стиль и цвет границы внизу 
элемента. Значения
могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое 
из них соответствует
нужному свойству.
Синтаксис
border-bottom: [border-width || border-style || border-color] | inherit
Значения
Значение border-width определяет толщину границы. Для управления ее видом 
предоставляется несколько
значений свойства border-style. Их названия и результат действия представлен на 
рис. 1.
Рис.1. Стили рамок
border-color устанавливает цвет границы, значение может быть в любом допустимом 
для CSS формате.
inherit наследует значение родителя.
Пример

Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по
умолчанию Зависит от использования
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML  | 
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/box.html#border-shorthandproperties
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

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

Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства border-bottom
Объектная модель
[window.]document.getElementById("elementID").style.borderBottom
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px 
отображает dotted как
dashed. При толщине 2px и выше значение dotted работает ____________корректно. 
Эта ошибка исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 
2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
Стиль границы в разных браузерах может несколько различаться при использовании 
значений groove, ridge,
inset или outset.
border-bottom-color
Краткая информация
Описание
Устанавливает цвет границы внизу элемента.
Синтаксис
border-bottom-color: цвет | transparent | inherit
Значения
Цвет можно задавать тремя способами.
1. По его названию
Браузеры поддерживают некоторые цвета по их названию.
2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. 
Шестнадцатеричная система, в
отличие от десятичной системы, базируется, как следует из ее названия, на числе 
16. Цифры будут
следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 
заменены латинскими буквами.
Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел 
в одно. Например,
числу 255 в десятичной системе соответствует число FF в шестнадцатеричной 
системе. Чтобы не возникало
путаницы в определении системы счисления, перед шестнадцатеричным числом ставят 
символ решетки #,
например #666999. Каждый из трех цветов — красный, зеленый и синий — может 
принимать значения от 00
до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb,
 где первые два
символа отмечают красную компоненту цвета, два средних — зеленую, а два 
последних — синюю.
Допускается использовать сокращенную форму вида #rgb, где каждый символ следует 
удваивать. Так,
запись #fe0 следует расценивать как #ffee00.
3. С помощью RGB
Можно определить цвет используя значения красной, зеленой и синей составляющей 
в десятичном
исчислении. Значение каждого из трех цветов может принимать значения от 0 до 
255. Также можно задавать
цвет в процентном отношении.
Устанавливает прозрачный цвет.
Наследует значение родителя.
Пример

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

Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства border-bottom-color
Объектная модель
[window.]document.getElementById("elementID").style.borderBottomColor
Браузеры
Internet Explorer 6 не поддерживает значение transparent. Браузер Internet 
Explorer до седьмой версии
включительно не поддерживает inherit.
Цвет границы в разных браузерах может несколько различаться при использовании 
значений стиля groove,
ridge, inset или outset.
border-bottom-style
Краткая информация
Описание
Устанавливает стиль границы внизу элемента.
Синтаксис
border-bottom-style: none | hidden | dotted | dashed | solid | double | groove 
| ridge | inset | outset | inherit
Значения
Линия не отображается и значение ее толщины обнуляется.
Имеет тот же эффект, что и none за исключением применения border-bottom-style к 
ячейкам
таблицы, у которой значение свойства border-collapse установлено как collapse. 
В этом
случае нижняя граница в ячейке не будет отображаться вообще.
Линия состоящая из набора точек.
Пунктирная линия, состоящая из серии коротких отрезков.
Сплошная линия.
Двойная линия.
Создает эффект вдавленной линии.
Создает эффект рельефной линии.
Псевдотрехмерная линия.
Псевдотрехмерная линия.
Наследует значение родителя.
Вид указанных стилей представлен на рис. 1.
Рис.1. Стили границ
Пример

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


Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства border-bottom-style
Объектная модель
[window.]document.getElementById("elementID").style.borderBottomStyle
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px 
отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка 
исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 
2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значения 
hidden и inherit.
Стиль границы в разных браузерах может несколько различаться при использовании 
значений groove, ridge,
inset или outset.
border-bottom-width
Краткая информация
Описание
Устанавливает толщину границы внизу элемента.
Синтаксис
border-bottom-width: значение | thin | medium | thick | inherit
Значения
Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) 
задают толщину границы внизу.
Для более точного значения, толщину можно указывать в пикселах или других 
единицах. inherit наследует
значение родителя.
Пример
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Результат данного примера показан ни рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по умолчанию medium
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML  | 
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/box.html#border-widthproperties
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Применение свойства border-bottom-width
Объектная модель
[window.]document.getElementById("elementID").style.borderBottomWidth
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px 
отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка 
исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 
2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значения 
hidden и inherit.
Толщина границы при использовании ключевых слов thin, medium и thick в разных 
браузерах может
несколько различаться.
border-collapse
Краткая информация
Описание
Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет 
роль, когда для ячеек
установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины 
(рис. 1а). Значение
collapse заставляет браузер анализировать подобные места в таблице и убирать в 
ней двойные линии
(рис. 1б). При этом между ячейками остается только одна граница, одновременно 
принадлежащая обеим
ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой 
таблицы добавляется
рамка.
Рис. 1. Вид таблицы при использовании свойства border-collapse
Синтаксис
border-collapse: collapse | separate | inherit
Значения
Линия между ячейками отображается только одна.
Вокруг каждой ячейки отображается своя собственная рамка, в местах 
соприкосновения
ячеек показываются сразу две линии.
Наследует значение родителя.
Пример


 
2003
2004
2005


Нефть
43
51
79


Золото
29
34
48


Дерево
38
57
36




Результат данного примера показан на рис. 2.
Рис. 2. Вид таблицы при использовании свойства border-collapse
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
Internet Explorer 8 ошибочно отрисовывает границу при значении hidden свойства 
border-style.
border-color
Краткая информация
Описание
Устанавливает цвет границы на разных сторонах элемента. Свойство позволяет 
задать цвет границы сразу
для всех сторон элемента или только для указанных.
Синтаксис
border-color: [цвет | transparent] {1,4} | inherit
Значения
Цвет можно задавать тремя способами.
1. По его названию
Браузеры поддерживают некоторые цвета по их названию.
2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. 
Шестнадцатеричная система, в
отличие от десятичной системы, базируется, как следует из ее названия, на числе 
16. Цифры будут
следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 
заменены латинскими буквами.
Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел 
в одно. Например,
числу 255 в десятичной системе соответствует число FF в шестнадцатеричной 
системе. Чтобы не возникало
путаницы в определении системы счисления, перед шестнадцатеричным числом ставят 
символ решетки #,
например #666999. Каждый из трех цветов — красный, зеленый и синий — может 
принимать значения от 00
до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb,
 где первые два
символа отмечают красную компоненту цвета, два средних — зеленую, а два 
последних — синюю.
Допускается использовать сокращенную форму вида #rgb, где каждый символ следует 
удваивать. Так,
запись #fe0 следует расценивать как #ffee00.
3. С помощью RGB
Можно определить цвет используя значения красной, зеленой и синей составляющей 
в десятичном
исчислении. Значение каждого из трех цветов может принимать значения от 0 до 
255. Также можно задавать
цвет в процентном отношении.
Устанавливает прозрачный цвет.
Наследует значение родителя.
Разрешается использовать одно, два, три или четыре значения, разделяя их между 
собой пробелом.
Результат зависит от количества и указан в табл. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1, CSS2.1
Значение по умолчанию Нет
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML  | 
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/box.html#propdef-bordercolor
transparent
inherit
Табл. 1. Изменение цвета в зависимости от числа значений
Число
значений
Результат
1 Цвет границы будет установлен для всех сторон элемента.
2 Первое значение устанавливает цвет верхней и нижней границы, второе — левой и 
правой.
3
Первое значение задает цвет верхней границы, второе — одновременно левой и 
правой границы, а
третье — нижней границы.
4 Поочередно устанавливается цвет верхней, правой, нижней и левой границы.
Пример
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Результат данного примера показан на рис. 1.
Рис. 1. Использование свойства border-color
Объектная модель
[window.]document.getElementById("elementID")style.borderColor
Браузеры
Internet Explorer 6 не поддерживает значение transparent. Браузер Internet 
Explorer до седьмой версии
включительно не поддерживает inherit.
Цвет границы в разных браузерах может несколько различаться при использовании 
значений стиля groove,
ridge, inset или outset.
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
border-left
Краткая информация
Описание
Свойство border-left позволяет одновременно установить толщину, стиль и цвет 
левой границы элемента.
Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит,
 какое из них
соответствует нужному свойству.
Синтаксис
border-left: [border-width || border-style || border-color] | inherit
Значения
Значение border-width определяет толщину границы. Для управления ее видом 
предоставляется несколько
значений свойства border-style. Их названия и результат действия представлен на 
рис. 1.
Рис.1. Стили рамок
border-color устанавливает цвет границы, значение может быть в любом допустимом 
для CSS формате.
inherit наследует значение родителя.
Пример

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.

Результат данного примера показан на рис. 2.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по
умолчанию Зависит от использования
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML  | 
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/box.html#border-shorthandproperties
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 2. Применение свойства border-left
Объектная модель
[window.]document.getElementById("elementID").style.borderLeft
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px 
отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка 
исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 
2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
Стиль границы в разных браузерах может несколько различаться при использовании 
значений groove, ridge,
inset или outset.
border-left-color
Краткая информация
Описание
Задает цвет границы слева от элемента.
Синтаксис
border-left-color: цвет | transparent | inherit
Значения
Цвет можно задавать тремя способами.
1. По его названию
Браузеры поддерживают некоторые цвета по их названию.
2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. 
Шестнадцатеричная система, в
отличие от десятичной системы, базируется, как следует из ее названия, на числе 
16. Цифры будут
следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 
заменены латинскими буквами.
Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел 
в одно. Например,
числу 255 в десятичной системе соответствует число FF в шестнадцатеричной 
системе. Чтобы не возникало
путаницы в определении системы счисления, перед шестнадцатеричным числом ставят 
символ решетки #,
например #666999. Каждый из трех цветов — красный, зеленый и синий — может 
принимать значения от 00
до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb,
 где первые два
символа отмечают красную компоненту цвета, два средних — зеленую, а два 
последних — синюю.
Допускается использовать сокращенную форму вида #rgb, где каждый символ следует 
удваивать. Так,
запись #fe0 следует расценивать как #ffee00.
3. С помощью RGB
Можно определить цвет используя значения красной, зеленой и синей составляющей 
в десятичном
исчислении. Значение каждого из трех цветов может принимать значения от 0 до 
255. Также можно задавать
цвет в процентном отношении.
Устанавливает прозрачный цвет.
Наследует значение родителя.
Пример

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.

Результат данного примера показан на рис. 1.
Рис. 1. Результат использования border-left-color
Объектная модель
[window.]document.getElementById("elementID").style.borderLeftColor
Браузеры
Internet Explorer 6 не поддерживает значение transparent. Браузер Internet 
Explorer до седьмой версии
включительно не поддерживает inherit.
Цвет границы в разных браузерах может несколько различаться при использовании 
значений стиля groove,
ridge, inset или outset.
border-left-style
Краткая информация
Описание
Устанавливает стиль границы слева от элемента.
Синтаксис
border-left-style: none | hidden | dotted | dashed | solid | double | groove | 
ridge | inset | outset | inherit
Значения
Линия не отображается и значение ее толщины обнуляется.
Имеет тот же эффект, что и none за исключением применения border-left-style к 
ячейкам
таблицы, у которой значение свойства border-collapse установлено как collapse. 
В этом
случае левая граница в ячейке не будет отображаться вообще.
Линия состоящая из набора точек.
Пунктирная линия, состоящая из серии коротких отрезков.
Сплошная линия.
Двойная линия.
Создает эффект вдавленной линии.
Создает эффект рельефной линии.
Псевдотрехмерная линия.
Псевдотрехмерная линия.
Наследует значение родителя.
Вид указанных стилей представлен на рис. 1.
Рис.1. Стили границ
Пример

Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1, CSS2.1
Значение по умолчанию Нет
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML  | 
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/box.html#border-styleproperties
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

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.

Результат данного примера показан ни рис. 2.
Рис. 2. Использование свойства border-left-style
Объектная модель
[window.]document.getElementById("elementID").style.borderLeftStyle
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px 
отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка 
исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 
2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значения 
hidden и inherit.
Стиль границы в разных браузерах может несколько различаться при использовании 
значений groove, ridge,
inset или outset.
border-left-width
Краткая информация
Описание
Устанавливает толщину границы слева от элемента.
Синтаксис
border-left-width: значение | thin | medium | thick | inherit
Значения
Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) 
задают толщину границы слева.
Для более точного значения, толщину можно указывать в пикселах или других 
единицах. inherit наследует
значение родителя.
Пример

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

Результат данного примера показан ни рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по умолчанию medium
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML  | 
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/box.html#border-widthproperties
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Использование свойства border-left-width
Объектная модель
[window.]document.getElementById("elementID").style.borderLeftWidth
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px 
отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка 
исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 
2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значения 
hidden и inherit.
Толщина границы при использовании ключевых слов thin, medium и thick в разных 
браузерах может
несколько различаться.
border-right
Краткая информация
Описание
Свойство border-right позволяет одновременно установить толщину, стиль и цвет 
правой границы элемента.
Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит,
 какое из них
соответствует нужному свойству.
Синтаксис
border-right: [border-width || border-style || border-color] | inherit
Значения
Значение border-width определяет толщину границы. Для управления ее видом 
предоставляется несколько
значений свойства border-style. Их названия и результат действия представлен на 
рис. 1.
Рис.1. Стили рамок
border-color устанавливает цвет границы, значение может быть в любом допустимом 
для CSS формате.
inherit наследует значение родителя.
Пример

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.

Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по
умолчанию Зависит от использования
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML  | 
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/box.html#border-shorthandproperties
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Результат данного примера показан ни рис. 2.
Рис. 2. Применение border-right
Объектная модель
[window.]document.getElementById("elementID").style.borderRight
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px 
отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка 
исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 
2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
Стиль границы в разных браузерах может несколько различаться при использовании 
значений groove, ridge,
inset или outset.
border-right-color
Краткая информация
Описание
Задает цвет границы справа от элемента.
Синтаксис
border-right-color: цвет | transparent | inherit
Значения
Цвет можно задавать тремя способами.
1. По его названию
Браузеры поддерживают некоторые цвета по их названию.
2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. 
Шестнадцатеричная система, в
отличие от десятичной системы, базируется, как следует из ее названия, на числе 
16. Цифры будут
следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 
заменены латинскими буквами.
Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел 
в одно. Например,
числу 255 в десятичной системе соответствует число FF в шестнадцатеричной 
системе. Чтобы не возникало
путаницы в определении системы счисления, перед шестнадцатеричным числом ставят 
символ решетки #,
например #666999. Каждый из трех цветов — красный, зеленый и синий — может 
принимать значения от 00
до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb,
 где первые два
символа отмечают красную компоненту цвета, два средних — зеленую, а два 
последних — синюю.
Допускается использовать сокращенную форму вида #rgb, где каждый символ следует 
удваивать. Так,
запись #fe0 следует расценивать как #ffee00.
3. С помощью RGB
Можно определить цвет используя значения красной, зеленой и синей составляющей 
в десятичном
исчислении. Значение каждого из трех цветов может принимать значения от 0 до 
255. Также можно задавать
цвет в процентном отношении.
Устанавливает прозрачный цвет.
Наследует значение родителя.
Пример

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.

Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства border-right-color
Объектная модель
[window.]document.getElementById("elementID").style.borderRightColor
Браузеры
Internet Explorer 6 не поддерживает значение transparent. Браузер Internet 
Explorer до седьмой версии
включительно не поддерживает inherit.
Цвет границы в разных браузерах может несколько различаться при использовании 
значений стиля groove,
ridge, inset или outset.
border-right-style
Краткая информация
Описание
Устанавливает стиль границы справа от элемента.
Синтаксис
border-right-style: none | hidden | dotted | dashed | solid | double | groove | 
ridge | inset | outset | inherit
Значения
Линия не отображается и значение ее толщины обнуляется.
Имеет тот же эффект, что и none за исключением применения border-right-style к 
ячейкам
таблицы, у которой значение свойства border-collapse установлено как collapse. 
В этом
случае правая граница в ячейке не будет отображаться вообще.
Линия состоящая из набора точек.
Пунктирная линия, состоящая из серии коротких отрезков.
Сплошная линия.
Двойная линия.
Создает эффект вдавленной линии.
Создает эффект рельефной линии.
Псевдотрехмерная линия.
Псевдотрехмерная линия.
Наследует значение родителя.
Вид указанных стилей представлен на рис. 1.
Рис.1. Стили границ
Пример
 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.

Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства border-right-style
Объектная модель
[window.]document.getElementById("elementID").style.borderRightStyle
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px 
отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка 
исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 
2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значения 
hidden и inherit.
Стиль границы в разных браузерах может несколько различаться при использовании 
значений groove, ridge,
inset или outset.
border-right-width
Краткая информация
Описание
Устанавливает толщину границы справа от элемента.
Синтаксис
border-right-width: значение | thin | medium | thick | inherit
Значения
Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) 
задают толщину границы
справа. Для более точного значения, толщину можно указывать в пикселах или 
других единицах. inherit
наследует значение родителя.
Пример

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.

Результат данного примера показан ни рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по умолчанию medium
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML  | 
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/box.html#border-widthproperties
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Применение свойства border-right-width
Объектная модель
[window.]document.getElementById("elementID").style.borderRightWidth
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px 
отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка 
исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 
2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значения 
hidden и inherit.
Толщина границы при использовании ключевых слов thin, medium и thick в разных 
браузерах может
несколько различаться.
border-spacing
Краткая информация
Описание
Задает расстояние между границами ячеек в таблице. border-spacing не работает в 
случае, когда для
таблицы установлено свойство border-collapse со значением collapse.
Синтаксис
border-spacing: значение1 [значение2]
Значения
Одно значение устанавливает одновременно расстояние по вертикали и горизонтали 
между границами
ячеек. Если значений два, то первое определяет горизонтальное расстояние, а 
второе — вертикальное.
Пример


1
2


3
4




Результат данного примера показан ни рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2
Значение по
умолчанию 0
Наследуется Да
Применяется К таблицам
Аналог HTML 
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/tables.html#propdef-borderspacing
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Применение свойства border-spacing
Браузеры
Если к тегу  добавлен параметр cellspacing, то при использовании 
стилевого свойства borderspacing
параметр cellspacing не принимается во внимание и его значение игнорируется. 
Исключением из
этого правила является браузер Internet Explorer до седьмой версии включительно,
 который не понимает
свойство border-spacing.
border-style
Краткая информация
Описание
Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные 
стили для разных
сторон элемента.
Синтаксис
border-style: [none | hidden | dotted | dashed | solid | double | groove | 
ridge | inset | outset] {1,4} | inherit
Значения
Для управления видом границы предоставляется несколько значений свойства 
border-style. Вид зависит от
используемого браузера и заданной толщины границы. В табл. 1 приведены названия 
стилей и получаемая
рамка при разных значениях толщины — 1, 3, 5 и 7 пикселов.
Кроме перечисленных в таблице значений используются следующие ключевые слова.
Не отображает границу и ее толщина (border-width) задается нулевой.
Имеет тот же эффект, что и none за исключением применения border-style к 
ячейкам таблицы,
у которой значение свойства border-collapse установлено как collapse. В этом 
случае вокруг
ячейки граница не будет отображаться вообще.
Наследует значение родителя.
Разрешается использовать одно, два, три или четыре значения, разделяя их между 
собой пробелом.
Эффект зависит от количества и указан в табл. 2.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML  | 
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/box.html#propdef-borderstyle
Табл. 1. Вид рамки в зависимости от стиля и толщины границы элемента
1 пиксел 3 пиксела 5 пикселов 7 пикселов
dotted dotted dotted dotted
dashed dashed dashed dashed
solid solid solid solid
double double double double
groove groove groove groove
ridge ridge ridge ridge
inset inset inset inset
outset outset outset outset
none
hidden
inherit
Табл. 2. Зависимость результата использования от числа значений
Число
Результат
Пример
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства border-style
Объектная модель
[window.]document.getElementById("elementID").style.borderStyle
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px 
отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка 
исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 
2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значения 
hidden и inherit.
Стиль границы в разных браузерах может несколько различаться при использовании 
значений groove, ridge,
inset или outset.
значений
1 Стиль границы будет задан для всех сторон элемента.
2 Первое значение устанавливает стиль верхней и нижней границы, второе — левой 
и правой.
3
Первое значение задает стиль верхней границы, второе — одновременно левой и 
правой границы,
а третье — нижней границы.
4 Поочередно устанавливается стиль верхней, правой, нижней и левой границы.
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
border-top
Краткая информация
Описание
Свойство border-top позволяет одновременно установить толщину, стиль и цвет 
границы сверху элемента.
Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит,
 какое из них
соответствует нужному свойству.
Синтаксис
border-top: [border-width || border-style || border-color] | inherit
Значения
border-width определяет толщину границы. Для управления ее видом 
предоставляется несколько значений
border-style. Их названия и результат действия представлен на рис. 1.
Рис.1. Стили рамок
border-color устанавливает цвет границы, значение может быть в любом допустимом 
для CSS формате.
inherit наследует значение родителя.
Пример

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.

Результат данного примера показан ни рис. 2.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по
умолчанию Зависит от использования
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML  | 
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/box.html#border-shorthandproperties
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 2. Применение свойства border-top
Объектная модель
[window.]document.getElementById("elementID").style.borderTop
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px 
отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка 
исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 
2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
Стиль границы в разных браузерах может несколько различаться при использовании 
значений groove, ridge,
inset или outset.
border-top-color
Краткая информация
Описание
Задает цвет границы сверху элемента.
Синтаксис
border-top-color: цвет | transparent | inherit
Значения
Цвет можно задавать тремя способами.
1. По его названию
Браузеры поддерживают некоторые цвета по их названию.
2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. 
Шестнадцатеричная система, в
отличие от десятичной системы, базируется, как следует из ее названия, на числе 
16. Цифры будут
следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 
заменены латинскими буквами.
Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел 
в одно. Например,
числу 255 в десятичной системе соответствует число FF в шестнадцатеричной 
системе. Чтобы не возникало
путаницы в определении системы счисления, перед шестнадцатеричным числом ставят 
символ решетки #,
например #666999. Каждый из трех цветов — красный, зеленый и синий — может 
принимать значения от 00
до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb,
 где первые два
символа отмечают красную компоненту цвета, два средних — зеленую, а два 
последних — синюю.
Допускается использовать сокращенную форму вида #rgb, где каждый символ следует 
удваивать. Так,
запись #fe0 следует расценивать как #ffee00.
3. С помощью RGB
Можно определить цвет используя значения красной, зеленой и синей составляющей 
в десятичном
исчислении. Значение каждого из трех цветов может принимать значения от 0 до 
255. Также можно задавать
цвет в процентном отношении.
Устанавливает прозрачный цвет.
Наследует значение родителя.
Пример
Lorem ipsum dolor sit amet
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.
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства border-top-color
Объектная модель
[window.]document.getElementById("elementID").style.borderTopColor
Браузеры
Internet Explorer 6 не поддерживает значение transparent. Браузер Internet 
Explorer до седьмой версии
включительно не поддерживает inherit.
Цвет границы в разных браузерах может несколько различаться при использовании 
значений стиля groove,
ridge, inset или outset.
border-top-style
Краткая информация
Описание
Устанавливает стиль границы сверху элемента.
Синтаксис
border-top-style: none | hidden | dotted | dashed | solid | double | groove | 
ridge | inset | outset | inherit
Значения
Линия не отображается и значение ее толщины обнуляется.
Имеет тот же эффект, что и none за исключением применения border-top-style к 
ячейкам
таблицы, у которой значение свойства border-collapse установлено как collapse. 
В этом
случае верхняя граница в ячейке не будет отображаться вообще.
Линия состоящая из набора точек.
Пунктирная линия, состоящая из серии коротких отрезков.
Сплошная линия.
Двойная линия.
Создает эффект вдавленной линии.
Создает эффект рельефной линии.
Псевдотрехмерная линия.
Псевдотрехмерная линия.
Наследует значение родителя.
Вид указанных стилей представлен на рис. 1.
Рис.1. Стили границ
Пример
Lorem ipsum dolor sit amet
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.
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства border-top-style
Объектная модель
[window.]document.getElementById("elementID").style.borderTopStyle
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px 
отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка 
исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 
2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значения 
hidden и inherit.
Стиль границы в разных браузерах может несколько различаться при использовании 
значений groove, ridge,
inset или outset.
border-top-width
Краткая информация
Описание
Устанавливает толщину границы сверху элемента.
Синтаксис
border-top-width: значение | thin | medium | thick | inherit
Значения
Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) 
задают толщину границы слева.
Для более точного значения, толщину можно указывать в пикселах или других 
единицах. inherit наследует
значение родителя.
Пример
Lorem ipsum dolor sit amet
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.
Результат данного примера показан ни рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по умолчанию medium
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML  | 
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/box.html#border-widthproperties
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Применение свойства border-top-width
Объектная модель
[window.]document.getElementById("elementID").style.borderTopWidth
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px 
отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка 
исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 
2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значения 
hidden и inherit.
Толщина границы при использовании ключевых слов thin, medium и thick в разных 
браузерах может
несколько различаться.
border-width
Краткая информация
Описание
Задает толщину границы одновременно на всех сторонах элемента или индивидуально 
для каждой
стороны. Способ изменения толщины зависит от числа значений.
Синтаксис
border-width: [значение | thin | medium | thick] {1,4} | inherit
Значения
Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) 
задают толщину границы. Для
более точного значения, толщину можно указывать в пикселах или других единицах. 
inherit наследует
значение родителя.
Разрешается использовать одно, два, три или четыре значения, разделяя их между 
собой пробелом.
Эффект ____________зависит от количества и приведен в табл. 1.
Пример
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по умолчанию medium
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML  | 
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/box.html#border-widthproperties
Табл. 1. Зависимость результата от числа значений
Число
значений
Результат
1 Толщина границы будет установлена для всех сторон элемента.
2 Первое значение устанавливает толщину верхней и нижней границы, второе — 
левой и правой.
3
Первое значение задает толщину верхней границы, второе — одновременно левой и 
правой
границы, а третье — нижней границы.
4 Поочередно устанавливается толщину верхней, правой, нижней и левой границы.
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства border-width
Объектная модель
[window.]document.getElementById("elementID").style.borderWidth
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px 
отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка 
исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 
2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значения 
hidden и inherit.
Толщина границы при использовании ключевых слов thin, medium и thick в разных 
браузерах может
несколько различаться.
bottom
Краткая информация
Описание
Устанавливает положение нижнего края содержимого элемента без учета толщины 
рамок и отступов.
Отсчет координат зависит от свойства position, оно обычно принимает значение 
relative (относительное
положение) или absolute (абсолютное положение).
При относительном позиционировании элемента, отсчет ведется от нижнего края 
исходного положения
элемента (рис. 1), а при абсолютном — относительно нижнего края окна документа 
(рис. 2). Если для
родительского элемента задано position: relative, то абсолютное 
позиционирование дочерних элементов
определяет их положение от нижнего края родителя.
Рис. 1. Значение bottom при относительном позиционирование элемента
Рис. 2. Значение bottom при абсолютном позиционирование элемента
Если одновременно задано свойство top и bottom со значениями отличными от auto, 
то свойство bottom
игнорируется.
Синтаксис
bottom: значение | проценты | auto | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, 
пикселы (px),
дюймы (in), пункты (pt) и др. Значение свойства bottom может быть и 
отрицательным, в этом случае
возможны наложения разных элементов друг на друга. При задании значения в 
процентах, положение
элемента вычисляется в зависимости от высоты родительского элемента.
Не изменяет положение элемента.
Наследует значение родителя.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2
Значение по умолчанию auto
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom
auto
inherit
Пример

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

Результат данного примера показан ни рис. 3.
Рис. 3. Применение свойства bottom
Объектная модель
[window.]document.getElementById("elementID").style.bottom
Браузеры
В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя 
одновременно задать
свойства top, left, right, bottom.
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
caption-side
Краткая информация
Описание
Определяет положение заголовка таблицы, который задается с помощью тега 










, относительно
самой таблицы. Свойство caption-side выводит заголовок до или после таблицы, а 
выравнивание текста по
правому или левому краю устанавливается через свойство text-align. Браузер 
Firefox также поддерживает
расположение заголовка слева или справа от таблицы, но эти значения не входят в 
спецификацию CSS.
Синтаксис
caption-side: top | bottom
Значения
Располагает заголовок по верхнему краю таблицы.
Заголовок располагается под таблицей.
Заголовок размещается справа от таблицы. Это значение работает только в 
браузерах
Firefox.
Заголовок размещается слева от таблицы. Это значение работает только в 
браузерах Firefox.
Пример









Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2, CSS2.1
Значение по
умолчанию top
Наследуется Да
Применяется
К 

Расклад карт

 
♠
♣
♥
♦
 или ко всем элементам, у которых значение
display установлено ка table-caption.
Аналог HTML 

Ссылка на
спецификацию http://www.w3.org/TR/CSS21/tables.html#propdef-caption-side
top
bottom
right
left
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0


Чебурашка
6
3
1
3


Крокодил Гена 
1
5
5
2


Шапокляк
3
4
6
0


Крыса Лариса 
3
1
1
8




Результат данного примера показан на рис. 1.
Рис. 1. Результат использования caption-side
Объектная модель
[window.]document.getElementById("elementID").style.captionSide
clear
Краткая информация
Описание
Устанавливает, с какой стороны элемента запрещено его обтекание другими 
элементами. Если задано
обтекание элемента с помощью свойства float, то clear отменяет его действие для 
указанных сторон.
Синтаксис
clear: none | left | right | both | inherit
Значения
Отменяет действие свойства clear, при этом обтекание элемента происходит, как 
задано с
помощью свойства float или других настроек.
Отменяет обтекание элемента одновременно с правого и левого края. Это значение
рекомендуется устанавливать, когда требуется снять обтекание элемента, но 
неизвестно
точно с какой стороны.
Отменяет обтекание с левого края элемента. При этом все другие элементы на этой 
стороне
будут опущены вниз, и располагаться под текущим элементом.
Отменяет обтекание с правой стороны элемента.
Устанавливает значение родителя.
Пример









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


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.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по умолчанию none
Наследуется Нет
Применяется К блочным и плавающим элементам
Аналог HTML 

Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.html#propdef-clear
none
both
left
right
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0


Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства clear
Объектная модель
[window.]document.getElementById("elementID").style.clear
Браузеры
В браузере Internet Explorer 6 наблюдается ошибка под названием «эффект ку-ку», 
когда элементы c clear,
соприкасающиеся с плавающими элементами (у которых задано свойство float) могут 
исчезать.
В браузере Internet Explorer 7 свойство clear не действует для элементов, у 
которых одновременно задано
float со значением, не совпадающим с clear.
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
clip
Краткая информация
Описание
Свойство clip определяет область позиционированного элемента, в которой будет 
показано его
содержимое. Все, что не помещается в эту область, будет обрезано и становится 
невидимым. На данный
момент единственно доступная форма области — прямоугольник. Все остальное 
остается только в мечтах.
clip работает только для абсолютно позиционированных элементов.
Синтаксис
clip: rect(Y1, X1, Y2, X2) | auto | inherit
Значения
В качестве значений используется расстояние от края элемента до области вырезки,
 которое задается в
единицах CSS — пикселы (px), em и др. Если край области нужно оставить без 
изменений, следует
установить auto, положение остальных значений показано на рис. 1.
Рис. 1. Значения свойства clip
Пример









Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2, CSS2.1
Значение по умолчанию auto
Наследуется Нет
Применяется К блочным элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visufx.html#propdef-clip
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
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.



Результат данного примера показан ни рис. 2.
Рис. 2. Применение clip в браузере Opera 9.23
Объектная модель
[window.]document.getElementById("elementID").style.clip
Браузеры
Internet Explorer до седьмой версии включительно работает с другой формой 
записи, при которой значения
координат разделяются между собой пробелом, а не запятой — clip: rect(40px auto 
auto 40px). Также Internet
Explorer до седьмой версии включительно не поддерживает значение inherit.
color
Краткая информация
Описание
Определяет цвет текста элемента.
Синтаксис
color: цвет | inherit
Значения
Цвет можно задавать тремя способами.
1. По его названию
Браузеры поддерживают некоторые цвета по их названию.
2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. 
Шестнадцатеричная система, в
отличие от десятичной системы, базируется, как следует из ее названия, на числе 
16. Цифры будут
следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 
заменены латинскими буквами.
Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел 
в одно. Например,
числу 255 в десятичной системе соответствует число FF в шестнадцатеричной 
системе. Чтобы не возникало
путаницы в определении системы счисления, перед шестнадцатеричным числом ставят 
символ решетки #,
например #666999. Каждый из трех цветов — красный, зеленый и синий — может 
принимать значения от 00
до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb,
 где первые два
символа отмечают красную компоненту цвета, два средних — зеленую, а два 
последних — синюю.
Допускается использовать сокращенную форму вида #rgb, где каждый символ следует 
удваивать. Так,
запись #fe0 следует расценивать как #ffee00.
3. С помощью RGB
Можно определить цвет используя значения красной, зеленой и синей составляющей 
в десятичном
исчислении. Значение каждого из трех цветов может принимать значения от 0 до 
255. Также можно задавать
цвет в процентном отношении.
Наследует значение родителя.
Пример






Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1, CSS2.1
Значение по умолчанию Зависит от настроек браузера, обычно черный цвет
Наследуется Да
Применяется Ко всем элементам
Аналог HTML


Ссылка на спецификацию http://www.w3.org/TR/CSS21/colors.html#propdef-color
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0


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.


Результат данного примера показан ни рис. 1.
Рис. 1. Использование свойства color
Объектная модель
[window.]document.getElementById("elementID").style.color
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
content
Част. — поддерживается частично.
Краткая информация
Описание
Свойство content позволяет вставлять генерируемое содержание в текст 
веб-страницы, которое
первоначально в тексте отсутствует. Применяется совместно с псевдоэлементами 
after и before, они
соответственно указывают отображать новое содержимое после или до элемента, к 
которому добавляются.
Синтаксис
content: строка | attr(параметр) | open-quote | close-quote | no-open-quote | 
no-close-quote | url | counter | normal | none |
inherit
Значения
Текст, который добавляется на веб-страницу, строка при этом должна браться в 
двойные или
одинарные кавычки. Допускается использовать юникод для вставки спецсимволов.
Спецсимволы HTML которые начинаются с амперсанда (§ например), будут
отображаться как есть, т.е. простым текстом (§, а не §).
Возвращает строку, которая является значением параметра тега указанного в 
скобках.
Например, IMG:after {content:attr(href)} добавит после изображения его адрес, т.
е. значение
параметра href. Если указанного параметра нет, то вернется пустая строка.
Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого
свойства quotes.
Вставляет закрывающую кавычку.
Отменяет добавление открывающей кавычки.
Отменяет добавление закрывающей кавычки.
Абсолютный или относительный адрес вставляемого объекта. Если указанный файл 
браузер
не может отобразить, то значение игнорируется.
Выводит значение счетчика, заданного свойством counter-reset.
Не добавляет никакое содержание.
Задается как none для псевдоэлементов before и after.
Наследует значение родителя.
Пример








Тег DEL используется
для выделения текста, который был удален в новой версии документа.


Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства content
Браузеры
Firefox до второй версии включительно и Opera до версии 9.2 включительно не 
поддерживают значение
none. Safari до версии 3.1 не поддерживает значение none и normal.
Браузер Opera начиная с седьмой версии и Safari 3, не требуют использования 
псевдоэлементов before и
after и допускают применение content ко всем элементам.
counter-increment
Краткая информация
Описание
Стилевое свойство counter-increment предназначено для увеличения значения 
счетчика приращений,
который задается свойством counter-reset. Такой счетчик подсчитывает количество 
отображений элементов
на странице и может выводиться с помощью свойства content и псевдоэлементов 
after и before. Это
позволяет создавать списки (в том числе многоуровневые), в которых нумерация и 
вид задаются через стили.
Синтаксис
counter-increment: none | inherit | идентификатор | целое число
Значения
Запрещает увеличение счетчика для текущего селектора.
Наследует значение родителя.
Задает одну или несколько переменных, для которых требуется изменить значение 
счетчика.
Переменные разделяются между собой пробелом.
Определяет значение приращения счетчика. По умолчанию оно равно 1. Допускается
использовать отрицательные и нулевые значения.
Возможные сочетания значений свойств counter-reset и counter-increment показаны 
в табл. 1.
Пример
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Нет Да Да Да Да Да Да Нет Нет Да Да Да Да
CSS CSS2
Значение по
умолчанию
none
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/generate.html#propdef-counterincrement
none
inherit
идентификатор
целое число
Табл. 1. Изменение нумерации списка
Код Результат
LI { list-style-type: none; }
OL { counter-reset: list -1; }
LI:before {
counter-increment: list;
content: counter(list) ". ";
}
Список начинается с нуля.
0, 1, 2
LI { list-style-type: none; }
OL { counter-reset: list; }
LI:before {
counter-increment: list 2;
content: counter(list) ". ";
}
Выводятся все четные числа.
2, 4, 6
LI { list-style-type: none; }
OL { counter-reset: list -1; }
LI:before {
counter-increment: list list;
content: counter(list) ". ";
}
Выводятся все нечетные числа.
1, 3, 5
LI { list-style-type: none; }
OL { counter-reset: list 9; }
LI:before {
counter-increment: list;
content: counter(list) ". ";
}
Список начинается с 10.
10, 11, 12








Теория ловли льва в пустыне
Методы инверсной кинематики
Ловля льва численными методами


Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства counter-increment
Примечание
Для элементов, у которых установлено display: none, значение счетчика не 
меняется.
counter-reset
Краткая информация
Описание
Устанавливает идентификатор, в котором будет храниться счетчик отображений 
определенного элемента, а
также начальное значение счетчика. Такой счетчик может выводиться с помощью 
свойства content и
псевдоэлементов after и before.
Синтаксис
counter-reset: none | inherit | идентификатор | целое число
Значения
Запрещает инициацию счетчика для текущего селектора.
Наследует значение родителя.
Задает одну или несколько переменных, в которых будет храниться значение 
счетчика.
Значения разделяются между собой пробелом.
Начальное значение каждого идентификатора. По умолчанию равно 0.
Пример









Пункт

Подпункт
Подпункт
Подпункт


Пункт

Подпункт
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Нет Да Да Да Да Да Да Нет Нет Да Да Да Да
CSS CSS2
Значение по
умолчанию
none
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/generate.html#propdef-counterreset
none
inherit
идентификатор
целое число
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Подпункт





Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства counter-reset
Примечание
Для элементов, у которых установлено display: none, значение счетчика не 
меняется.
cursor
Част. — поддерживается частично.
Краткая информация
Описание
Устанавливает форму курсора, когда он находится в пределах элемента. Вид 
курсора зависит от
операционной системы и установленных параметров.
Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет 
ли он
использоваться к месту. Многих пользователей подобные изменения могут ввести в 
заблуждение, когда,
например, вместо традиционной руки, появляющейся при наведении на ссылку, 
возникает нечто другое. В
большинстве случаев, лучше оставить все как есть.
Синтаксис
cursor: [url('путь к курсору')] | [ auto | crosshair | default | e-resize | 
help | move | n-resize | ne-resize | nw-resize | pointer |
progress | s-resize | se-resize | sw-resize | text | w-resize | wait | inherit 
]
Значения
Позволяет установить свой собственный курсор, для этого нужно указать путь к 
файлу, в
котором указана форма курсора, в формате CUR или ANI.
Вид курсора по умолчанию для текущего элемента.
Наследует значение родителя.
Остальные допустимые значения приведены в табл. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Да Да Да Част. Част. Част. Част. Част. Част. Част. Част. Част. Част. Част.
CSS CSS2, CSS2.1
Значение по умолчанию auto
Наследуется Да
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/ui.html#cursor-props
url
auto
inherit
Табл. 1. Вид курсора
Вид Значение Тест Пример
default ТЕСТ P {cursor:default}
crosshair ТЕСТ P {cursor:crosshair}
help ТЕСТ P {cursor:help}
move ТЕСТ P {cursor:move}
pointer ТЕСТ P {cursor:pointer}
progress ТЕСТ P {cursor:progress}
text ТЕСТ P {cursor:text}
wait ТЕСТ P {cursor:wait}
n-resize ТЕСТ P {cursor:n-resize}
ne-resize ТЕСТ P {cursor:ne-resize}
e-resize ТЕСТ P {cursor:e-resize}
В зависимости от операционной системы и ее настроек вид курсора может 
отличаться от приведенных в
таблице.
Пример








На этом тексте курсор мыши примет вид перекрестья.

СПРАВКА 1

СПРАВКА 2

СПРАВКА 3



Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства cursor
Объектная модель
[window.]document.getElementById("elementID").style.cursor
Браузеры
Некоторые браузеры поддерживают дополнительные формы курсоров. Например, 
Internet Explorer и Opera
работает со значением hand, которое является аналогом значения pointer. Кроме 
того, в браузерах IE, Safari
и Firefox будут действовать следующие значения: all-scroll, col-resize, no-drop,
 not-allowed, row-resize,
vertical-text. Учтите, что указанные значения не входят в спецификацию CSS2.1, 
но соответствуют
спецификации CSS3 (кроме hand).
Браузер Safari до версии 3.1, Opera до версии 9.6 включительно, Firefox до 
версии 3.0 включительно и
Netscape 9 не поддерживают значение url.
se-resize ТЕСТ P {cursor:se-resize}
s-resize ТЕСТ P {cursor:s-resize}
sw-resize ТЕСТ P {cursor:sw-resize}
w-resize ТЕСТ P {cursor:w-resize}
nw-resize ТЕСТ P {cursor:nw-resize}
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
direction
Краткая информация
Описание
direction предназначен для сайтов, в которых имеет значение направление текста. 
Например, при
использовании арабского алфавита чтение происходит справа налево.
Свойство direction достаточно универсально и управляет следующими 
возможностями:
? способ отображения текста в блоке;
? порядок колонок в таблице;
? позиция полосы прокрутки в блоке;
? положение последней висячей строки текстового блока при text-align: justify.
Для использования со встроенными элементами, значение свойства unicode-bidi 
должно быть задано как
embed или override.
Синтаксис
direction: ltr | rtl | inherit
Значения
Устанавливает направление слева направо.
Задает направление справа налево.
Наследует значение родителя.
Пример 1








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


Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Да Да Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2
Значение по умолчанию ltr
Наследуется Да
Применяется Ко всем элементам
Аналог HTML <тег direction="ltr | rtl"">
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/visuren.html#propdefdirection
ltr
rtl
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Результат данного примера показан на рис. 1. Обратите внимание на положение 
точки в предложении, а
также на то, что полоса прокрутки в браузере Internet Explorer отображается 
слева.
Рис. 1. Результат использования direction в браузере Internet Explorer
Пример 2










 
1999
2000
2001
2002
2003


Нефть
16
34
62
74
57


Золото
4
69
72
56
47


Дерево
7
73
79
34
86




Результат данного примера показан на рис. 2. Колонки таблицы отображается 
справа налево.
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 2. Применение direction к таблице
Браузеры
При добавлении свойства direction со значением rtl к блоку с полосой прокрутки 
(например, ),
браузер Internet Explorer, Firefox и Netscape отображают скроллинг слева, а 
Opera и Safari — справа.
display
Част — Поддерживается частично.
Краткая информация
Описание
Многоцелевое свойство, которое определяет, как элемент должен быть показан в 
документе.
Синтаксис
display: block | inline | inline-table | list-item | none | run-in | table | 
table-caption | table-cell | table-column-group | table-footergroup
| table-header-group | table-row | table-row-group
Значения
Список возможных значений этого свойства, понимаемый разными браузерами очень 
короткий — block,
inline, list-item и none. Все остальные допустимые значения поддерживаются 
браузерами выборочно. В
табл. 1 приведены некоторые популярные браузеры и их поддержка различных 
значений.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Част. Част. ? Част. Част. Част. Да Да Да Да Да Част. Част. Част.
CSS CSS2
Значение по умолчанию inline
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.html#display-prop
Табл. 1. Поддержка браузерами значений display
Значение Описание IE6 IE7 IE8
Op
8
Op
9.2
Ff
1.5
Ff 2 Ff 3
block
Элемент показывается как блочный. Применение этого значения
для встроенных элементов, например тега <SPAN>, заставляет
его вести подобно блокам — происходит перенос строк в
начале и в конце содержимого.
Да Да Да Да Да Да Да Да
inline
Элемент отображается как встроенный. Использование
блочных тегов, таких как <DIV> и <P>, автоматически создает
перенос и показывает содержимое этих тегов с новой строки.
Значение inline отменяет эту особенность, поэтому содержимое
блочных элементов начинается с того места, где окончился
предыдущий элемент.
Да Да Да Да Да Да Да Да
inlineblock
Это значение генерирует блочный элемент, который обтекается
другими элементами веб-страницы подобно встроенному
элементу. Фактически такой элемент по своему действию похож
на встраиваемые элементы (вроде тега <IMG>). При этом его
внутренняя часть форматируется как блочный элемент, а сам
элемент — как встроенный.
Да Да Да Да Да Нет Нет Да
inline-table
Определяет, что элемент является таблицей как при
использовании тега <TABLE>, но при этом таблица является
встроенным элементом и происходит ее обтекание другими
элементами, например, текстом.
Нет Нет ? Да Да Нет Нет Да
list-item Элемент выводится как блочный и добавляется маркер списка. Да Да Да 
Да Да Да Да Да
none
Временно удаляет элемент из документа. Занимаемое им место
не резервируется и веб-страница формируется так, словно
элемента и не было. Изменить значение и сделать вновь
видимым элемент можно с помощью скриптов, обращаясь к
свойствам через объектную модель. В этом случае происходит
переформатирование данных на странице с учетом вновь
добавленного элемента.
Да Да Да Да Да Да Да Да
run-in
Устанавливает элемент как блочный или встроенный в
зависимости от контекста.
Нет Нет Да Да Да Нет Нет Нет
table
Определяет, что элемент является блочной таблицей подобно
использованию тега <TABLE>. Нет Нет ? Да Да Да Да Да
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>display</title>
<style type="text/css">
.example {
border: dashed 1px #634f36; /* Параметры ________________рамки */
background: #fffff5; /* Цвет фона */
font-family: "Courier New", Courier, monospace; /* Шрифт текста */
padding: 7px; /* Поля вокруг текста */
margin: 0 0 1em; /* Отступы вокруг */
}
.exampleTitle {
border: 1px solid black; /* Параметры рамки */
border-bottom: none; /* Убираем линию снизу */
padding: 3px; /* Поля вокруг текста */
display: inline; /* Устанавливаем как встроенный элемент */
background: #efecdf; /* Цвет фона */
font-weight: bold; /* Жирное начертание */
font-size: 90%; /* Размер текста */
margin: 0; /* Убираем отступы вокруг */
white-space: nowrap; /* Отменяем переносы текста */
}
</style>
</head>
<body>
<p class="exampleTitle">Пример</p>
<p class="example">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN"><br>
<html><br>
<body><br>
<b>Формула серной кислоты:</b>
<i>H<sub><small>2</small></sub>
SO<sub><small>4</small>
</sub></i><br>
</body><br>
</html>
</p>
</body>
</html>
Результат данного примера показан ни рис. 1.
tablecaption
Задает заголовок таблицы подобно применению тега
<CAPTION>. Нет Нет ? Да Да Да Да Да
table-cell
Указывает, что элемент представляет собой ячейку таблицы
(тег <TD> или <TH>). Нет Нет ? Да Да Да Да Да
tablecolumn
Назначает элемент колонкой таблицы, словно был добавлен тег
<COL>. Нет Нет ? Нет Да Да Да Да
tablecolumngroup
Определяет, что элемент является группой одной или более
колонок таблицы, как при использовании тега <COLGROUP>. Нет Нет ? Нет Да Да Да 
Да
tablefootergroup
Используется для хранения одной или нескольких строк ячеек,
которые отображаются в самом низу таблицы. По своему
действию сходно с работой тега <TFOOT>.
Нет Нет ? Да Да Да Да Да
tableheadergroup
Элемент предназначен для хранения одной или нескольких строк
ячеек, которые представлены вверху таблицы. По своему
действию сходно с работой тега <THEAD>.
Нет Нет ? Да Да Да Да Да
table-row Элемент отображается как строка таблицы (тег <TR>). Нет Нет ? Да Да 
Да Да Да
table-rowgroup
Создает структурный блок, состоящий из нескольких строк
таблицы аналогично действию тега <TBODY>. Нет Нет ? Да Да Да Да Да
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Применение свойства display
Объектная модель
[window.]document.getElementById("elementID").style.display
Браузеры
Internet Explorer до версии 7 включительно:
? поддержка значений table-footer-group и table-header-group происходит только 
для тегов <THEAD> и
<TFOOT>;
? для элементов <LI> понимает значение block как list-item;
? значение inline-block применяется только для встроенных элементов.
Opera 9.2 и старше, а также Firefox версии 2.0 и старше:
? значение table-column применяется только для тега <COL>;
? значение table-column-group поддерживается только для тега <COLGROUP>.
empty-cells
Краткая информация
Описание
Задает отображение границ и фона в ячейке, если она пустая. При одновременном 
добавлении к таблице
свойства border-collapse со значением collapse, свойство empty-cells 
игнорируется.
Ячейка считается пустой в следующих случаях:
? нет вообще никаких символов;
? в ячейке содержится только перевод строки, символ табуляции или пробел;
? значение visibility установлено как hidden.
Добавление неразрывного пробела   воспринимается как видимое содержание, т.
е. ячейка уже будет
непустой.
Синтаксис
empty-cells: show | hide
Значения
Отображает границу вокруг ячейки и фон в ней.
Граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые,
 то строка
прячется целиком.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>empty-cells</title>
<style type="text/css">
TABLE {
border: 4px double #399; /* Граница вокруг таблицы */
}
TD {
background: #fc0; /* Цвет фона */
border: 1px solid #333; /* Граница вокруг ячеек */
empty-cells: hide; /* Прячем пустые ячейки */
padding: 5px; /* Поля в ячейках */
}
</style>
</head>
<body>
<table width="100%">
<tr>
<td>Леонардо</td>
<td>5</td>
<td>8</td>
</tr>
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Нет Да Ошибки Ошибки Ошибки Ошибки Да Да Да Да Ошибки Ошибки Да
CSS CSS2
Значение по умолчанию show
Наследуется Да
Применяется
К <TD>, <TH> или к элементам, у которых display: tablecell
Аналог HTML Нет
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/tables.html#propdef-emptycells
show
hide
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<tr>
<td>Рафаэль</td>
<td> </td>
<td>11</td>
</tr>
<tr>
<td>Микеланджело</td>
<td>24</td>
<td> </td>
</tr>
<tr>
<td>Донателло</td>
<td> </td>
<td>13</td>
</tr>
</table>
</body>
</html>
Результат данного примера в браузере Opera показан ни рис. 1. Тот же пример в 
браузере Internet Explorer
продемонстрирован на рис. 2.
Рис. 1. Вид таблицы в браузере Opera 9.62
Рис. 2. Вид таблицы в браузере Internet Explorer 7
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает свойство 
empty-cells и отображает
пустые ячейки всегда так, словно для них установлено empty-cells: hide.
Firefox версии 2 и ниже (а также Netscape) не прячет строку таблицы, если для 
всех ячеек задано emptycells:
hide и ячейки пусты.
Браузер Opera до версии 9.27 включительно не скрывает строку таблицы и для 
пустых ячеек отображает
цвет фона.
first-child
Краткая информация
Описание
Псевдокласс first-child добавляет стилевое оформление к первому дочернему 
элементу селектора, который
расположен в дереве элементов документа.
Синтаксис
тег:first-child { ... }
Значения
Нет.
Пример 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>first-child</title>
<style type="text/css">
B:first-child {
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>
<p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b>
adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat.</p>
<p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b>
exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo
consequat</b>.</p>
</body>
</html>
Результат примера показан на рис. 1. В данном примере псевдокласс first-child 
добавляется к селектору B и
устанавливает для него красный цвет текста. Хотя контейнер <B> встречается в 
первом абзаце три раза,
красным цветом будет выделено лишь первое упоминание, т.е. текст «Lorem ipsum». 
В остальных случаях
содержимое контейнера <B> отображается черным цветом. Со следующим абзацем все 
начинается снова,
поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также 
будет выделена
красным цветом.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Да Да Да Да Да Да Да Да Да Да Нет Да Да
CSS CSS1
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/selector.html#first-child
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Выделение цветом первого дочернего элемента абзаца
Пример 2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>first-child</title>
<style type="text/css">
P {
text-indent: 1em; /* Отступ первой строки */
}
P:first-child {
text-indent: 0; /* Для первого абзаца отступ убираем */
}
</style>
</head>
<body>
<p>Историю эту уже начали забывать, хотя находились горожане, которые время от 
времени
рассказывали ее вновь прибывшим в город посетителям.</p>
<p>Легенда обрастала подробностями и уже совсем не напоминала произошедшее в
действительности событие. И, тем не менее, ни один человек не решался 
заикнуться
о ней с наступлением темноты.</p>
<p>Но однажды в город вновь вошел незнакомец. Он хромал на левую ногу.</p>
</body>
</html>
Результат данного примера показан на рис. 2. По правилам типографики отступ 
первой строки для первого
абзаца текста обычно не задают, но для остальных абзацев его добавляют. С этой 
целью в примере
используется свойство text-indent со значением отступа 1em. Для изменения стиля 
первого абзаца и
установки нулевого отступа, к селектору P добавлен псевдокласс first-child.
Рис. 2. Результат использования псевдокласса first-child
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
first-letter
Краткая информация
Описание
Псевдоэлемент first-letter определяет стиль первого символа в тексте элемента, 
к которому добавляется. К
этому псевдоэлементу могут применяться только стилевые свойства, связанные со 
свойствами шрифта,
полями, отступами, границами, цветом и фоном.
Синтаксис
элемент:first-letter { ... }
Значения
Нет.
Пример 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>first-letter</title>
<style type="text/css">
P {
font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта основного текста 
*/
font-size: 90%; /* Размер шрифта */
}
P:first-letter {
font-family: "Times New Roman", Times, serif; /* Гарнитура шрифта первой буквы 
*/
font-size: 200%; /* Размер шрифта первого символа */
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>
<p>Луч фонарика высветил старые скрипучие ступени, по которым не далее
как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и 
посветила
внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую
завесу из мрака и пыли. </p>
<p>Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого
не было, и лишь на полу валялась порванная туфля Паши.</p>
</body>
</html>
Результат примера показан на рис. 1. В данном примере изменяется шрифт, размер 
и цвет первой буквы
каждого абзаца текста.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Ошибки Ошибки Да Да Да Да Да Да Ошибки Ошибки Да
CSS CSS1
Применяется К блочным элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/selector.html#first-letter
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Результат использования псевдоэлемента first-letter
Браузеры
Internet Explorer до версии 7 включительно, Firefox до версии 2.0 включительно 
и Netscape игнорируют
свойство letter-spacing, когда оно применяется к псевдоэлементу first-letter.
first-line
Краткая информация
Описание
Псевдоэлемент first-line задает стиль первой строки форматированного текста. 
Длина этой строки зависит
от многих факторов, таких как используемый шрифт, размер окна браузера, ширина 
блока, языка и т.д. В
правилах стиля допустимо использовать только свойства, относящиеся к шрифту, 
изменению цвета текста
и фона.
Синтаксис
элемент:first-line { ... }
Значения
Нет.
Пример 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>first-line</title>
<style type="text/css">
P:first-line {
color: red; /* Красный цвет текста */
font-style: italic; /* Курсивное начертание */
font-weight: bold; /* Жирное начертание */
}
</style>
</head>
<body>
<p>Олимпия 2008<br>
Основной претендент на I место это конечно же Джей Катлер, достигший наивысшего
результата за последние два года.</p>
</body>
</html>
Результат примера показан на рис. 1. В данном примере первая строка, выделенная 
с помощью тега <BR>,
изменяет свой вид за счет начертания и цвета.
Рис. 1. Результат использования псевдоэлемента first-line
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Да Да Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Применяется
К блочным элементам
К элементам, у которых значение display задано как inlineblock,
table-caption или table-cell
Аналог HTML Нет
Ссылка на
спецификацию http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
float
Краткая информация
Описание
Определяет, по какой стороне будет выравниваться элемент, при этом остальные 
элементы будут обтекать
его с других сторон. Когда значение свойства float равно none, элемент 
выводится на странице как обычно,
при этом допускается, что одна строка обтекающего текста может быть на той же 
линии, что и сам элемент.
Синтаксис
float: left | right | none | inherit
Значения
Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, 
обтекают
его по правой стороне.
Выравнивает элемент по правому краю, а все остальные элементы обтекают его по 
левой
стороне.
Обтекание элемента не задается.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>float</title>
<style type="text/css">
.layer1 {
float: left; /* Обтекание по правому краю */
background: #fd0; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
padding: 10px; /* Поля вокруг текста */
margin-right: 20px; /* Отступ справа */
width: 40%; /* Ширина блока */
}
</style>
</head>
<body>
<div class="layer1">
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.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по
умолчанию none
Наследуется Нет
Применяется
Ко всем элементам (за исключением
позиционированных)
Аналог HTML
<applet | iframe | img | object | spacer | table align="right |
left">
Ссылка на
спецификацию http://www.w3.org/TR/CSS21/visuren.html#propdef-float
left
right
none
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
</div>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства float
Объектная модель
[window.]document.getElementById("elementID").style.styleFloat
[window.]document.getElementById("elementID").style.cssFloat
Браузеры
В браузере Internet Explorer 6 наблюдается ____________ошибка с удвоением 
значения левого или правого отступа для
плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, 
который прилегает к
стороне родителя. Проблема обычно решается добавлением display: inline для 
плавающего элемента.
Также в этом браузере добавляется отступ 3px (так называемый «трехпиксельный 
баг») в направлении,
заданном значением float.
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
focus
Краткая информация
Описание
Псевдокласс focus определяет стиль для элемента получающего фокус. Например, им 
может быть
текстовое поле формы, в которое устанавливается курсор.
Синтаксис
элемент:focus { ... }
Значения
Нет.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>focus</title>
<style type="text/css">
#enter .label {
width: 80px; /* Ширина блока с текстом */
float: left; /* Расположение в одну строку с полем */
text-align: right; /* Выравнивание по правому краю */
}
#enter .form-text {
width: 240px; /* Ширина поля */
margin-left: 10px; /* Расстояние между полем и текстом */
border: 1px solid #abadb3; /* Рамка вокруг текстового поля */
padding: 2px; /* Поля вокруг текста */
}
#enter .form-item {
margin-bottom: 5px; /* Отступ снизу */
}
#enter .form-text:focus {
background: #ffe; /* Цвет фона */
border: 1px solid #29B0D9; /* Параметры рамки */
}
#enter p {
margin-left: 90px; /* Сдвиг вправо */
}
</style>
</head>
<body>
<form action="login.php" method="post" id="enter">
<div class="form-item">
<span class="label">Логин:</span>
<span class="field"><input type="text" id="login" value="" 
class="form-text"></span>
</div>
<div class="form-item">
<span class="label">Пароль:</span>
<span class="field"><input type="password" id="pass" class="form-text"></span>
</div>
<p><input type="submit" value="Войти"></p>
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2
Применяется
К элементам, которые могут получить фокус (<A>, <INPUT>,
<SELECT> и <TEXTAREA>)
Аналог HTML <тег onfocus="function()">
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudoclasses
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
</form>
</body>
</html>
Результат данного примера показан на рис. 1. При получении фокуса текстовое 
поле меняет цвет фона и
цвет границы.
Рис. 1. Результат использования псевдокласса focus
font
Краткая информация
Описание
Универсальное свойство, которое позволяет одновременно задать несколько 
характеристик шрифта и
текста.
Синтаксис
font: [font-style || font-variant || font-weight] font-size [/line-height] 
font-family | inherit
Значения
В качестве обязательных значений свойства font указывается размер шрифта и его 
семейство. Остальные
значения являются опциональными и задаются при желании. Для подробного 
ознакомления смотрите
информацию о каждом свойстве отдельно.
Наследует значение родителя.
Примеры использования
p { font: 12pt/10pt sans-serif; }
Из типографики пошла запись указывать через слэш размер шрифта и межстрочное 
расстояние
(интерлиньяж). Поэтому 12pt в данном случае означает размер основного текста в 
пунктах, а 10pt —
интерлиньяж. В качестве семейства указывается рубленый шрифт (sans-serif).
p { font: bold italic 110% serif; }
Значение bold устанавливает жирное начертание текста, а italic — курсивное. В 
данном случае их порядок
не важен, поэтому bold и italic можно поменять местами. Размер текста задается 
в процентах, а в качестве
гарнитуры используется шрифт с засечками (serif).
p { font: normal small-caps 12px/14px fantasy; }
Значение small-caps принадлежит свойству font-variant и устанавливает текст в 
виде капители (заглавные
буквы уменьшенного размера). Значение normal применяется сразу к двум 
свойствам: font-style и fontweight.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>font</title>
<style type="text/css">
.layer1 {
font: 12pt sans-serif;
}
H1 {
font: 200% serif;
}
</style>
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1, CSS2
Значение по умолчанию Зависит от использования
Наследуется Да
Применяется Ко всем элементам
Аналог HTML <I>, <B>, <FONT>
Ссылка на спецификацию http://www.w3.org/TR/CSS21/fonts.html#propdef-font
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
</head>
<body>
<div class="layer1">
<h1>Duis te feugifacilisi</h1>
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>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства font
Объектная модель
[window.]document.getElementById("elementID").style.font
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
font-family
Краткая информация
Описание
Устанавливает семейство шрифта, которое будет использоваться для оформления 
текста содержимого.
Список шрифтов может включать одно или несколько названий, разделенных запятой. 
Если в имени
шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в 
одинарные или двойные
кавычки.
Когда браузер встречает первый шрифт в списке, он проверяет его наличие на 
компьютере пользователя.
Если такого шрифта нет, берется следующее имя из списка и также анализируется 
на присутствие. Поэтому
несколько шрифтов увеличивает вероятность, что хотя бы один из них будет 
обнаружен на клиентском
компьютере. Заканчивают список обычно ключевым словом, которое описывает тип 
шрифта — serif, sansserif,
cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше 
начинать с
экзотических типов и заканчивать обобщенным именем, которое задает вид 
начертания.
Синтаксис
font-family: имя шрифта [, имя шрифта[, ...]] | inherit
Значения
Любое количество имен шрифтов разделенных запятыми. Универсальные семейства 
шрифтов:
? serif — шрифты с засечками (антиквенные), типа Times;
? sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный 
представитель — Arial;
? cursive — курсивные шрифты;
? fantasy — декоративные шрифты;
? monospace — моноширинные шрифты, ширина каждого символа в таком семействе 
одинакова
(шрифт Courier).
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>font-family</title>
<style type="text/css">
H1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
}
P {
font-family: Georgia, 'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<h1>Duis te feugifacilisi</h1>
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1, CSS2
Значение по
умолчанию
Шрифт, установленный в браузере по умолчанию. Обычно
это Times New Roman.
Наследуется Да
Применяется Ко всем элементам
Аналог HTML <font face="...">
Ссылка на
спецификацию http://www.w3.org/TR/CSS21/fonts.html#propdef-font-family
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<p>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>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства font-family
Объектная модель
[window.]document.getElementById("elementID").style.fontFamily
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
font-size
Краткая информация
Описание
Определяет размер шрифта элемента. Размер может быть установлен несколькими 
способами. Набор
констант (xx-small, x-small, small, medium, large, x-large, xx-large) задает 
размер, который называется
абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от 
настроек браузера и
операционной системы.
Другой набор констант (larger, smaller) устанавливает относительные размеры 
шрифта. Поскольку размер
унаследован от родительского элемента, эти относительные размеры применяются к 
родительскому
элементу, чтобы определить размер шрифта текущего элемента.
В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у 
родителя элемента.
Синтаксис
font-size: абсолютный размер | относительный размер | значение | проценты | 
inherit
Значения
Для задания абсолютного размера используются следующие значения: xx-small, 
x-small, small, medium,
large, x-large, xx-large. Их соответствие с размером шрифта в HTML приведено в 
табл. 1.
Относительный размер шрифта задается значениями larger и smaller.
Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта 
элемента), ex
(высота символа х), пункты (pt), пикселы (px), проценты (%) и др. За 100% 
берется размер шрифта
родительского элемента. Отрицательные значения не допускаются.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>font-size</title>
<style type="text/css">
H1 {
font-family: 'Times New Roman', Times, serif; /* Гарнитура текста */
font-size: 250%; /* Размер шрифта в процентах */
}
P {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt; /* Размер шрифта в пунктах */
}
</style>
</head>
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Да Да Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1, CSS2
Значение по умолчанию medium
Наследуется Да
Применяется Ко всем элементам
Аналог HTML <font size="...">
Ссылка на спецификацию http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size
Табл. 1. Размер шрифта в CSS и HTML
CSS xx-small x-small small medium large x-large xx-large
HTML 1 2 3 4 5 6 7
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<body>
<h1>Duis te feugifacilisi</h1>
<p>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>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства font-size
Объектная модель
[window.]document.getElementById("elementID").style.fontSize
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
font-style
Краткая информация
Описание
Определяет начертание шрифта — обычное, курсивное или наклонное. Когда для 
текста установлено
курсивное или наклонное начертание, браузер обращается к системе для поиска 
подходящего шрифта.
Если заданный шрифт не найден, браузер использует специальный алгоритм для 
имитации нужного вида
текста. Результат и качество при этом могут получиться неудовлетворительными, 
особенно при печати
документа.
Синтаксис
font-style: normal | italic | oblique | inherit
Значения
Обычное начертание текста.
Курсивное начертание.
Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и 
то же.
Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется 
путем
наклона обычных знаков вправо.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>font-style</title>
<style type="text/css">
H1 {
font-family: Verdana, Arial, Helvetica, sans-serif; /* Рубленый шрифт заголовка 
*/
}
P {
font-family: 'Times New Roman', Times, serif; /* Шрифт с засечками */
font-style: italic; /* Курсивное начертание */
}
</style>
</head>
<body>
<h1>Duis te feugifacilisi</h1>
<p>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>
</body>
</html>
Результат данного примера показан ни рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1, CSS2
Значение по умолчанию normal
Наследуется Да
Применяется Ко всем элементам
Аналог HTML <I>
Ссылка на спецификацию http://www.w3.org/TR/CSS21/fonts.html#propdef-font-style
normal
italic
oblique
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Применение свойства font-style
Объектная модель
[window.]document.getElementById("elementID").style.fontStyle
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
Браузеры текст со значением oblique всегда отображают как курсив (italic).
font-variant
Краткая информация
Описание
Определяет, как нужно представлять строчные буквы — оставить их без модификаций 
или делать их все
прописными уменьшенного размера. Такой способ изменения символов называется 
капителью.
Синтаксис
font-variant: normal | small-caps | inherit
Значения
Оставляет регистр символов исходным, заданным по умолчанию.
Модифицирует все строчные символы как заглавные уменьшенного размера, как 
показано на
рис. 1.
Наследует значение родителя
Рис. 1. Обычный текст и текст в виде капители
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>font-variant</title>
<style type="text/css">
H1 {
font-variant: small-caps; /* Устанавливаем капитель для заголовка */
}
</style>
</head>
<body>
<h1>Duis te feugifacilisi</h1>
<p>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>
</body>
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Нет Нет Да Да Да Да
CSS CSS1, CSS2
Значение по умолчанию normal
Наследуется Да
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/fonts.html#propdef-fontvariant
normal
small-caps
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства font-variant
Объектная модель
[window.]document.getElementById("elementID").style.fontVariant
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
font-weight
Краткая информация
Описание
Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с 
шагом 100.
Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, 
а сверхжирное — 900.
Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 
400, стандартный
полужирный текст — значению 700.
Синтаксис
font-weight: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 
600 | 700 | 800 | 900.
Значения
Насыщенность шрифта задается с помощью ключевых слов: bold — полужирное 
начертание, bolder —
жирное начертание; lighter — светлое начертание, normal — нормальное начертание.
 Также допустимо
использовать условные единицы от 100 до 900.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>font-weight</title>
<style type="text/css">
H1 {
font-weight: normal; /* Нормальное начертание */
}
.select {
color: maroon; /* Цвет текста */
font-weight: 600; /* Жирное начертание */
}
</style>
</head>
<body>
<h1>Duis te feugifacilisi</h1>
<p><span class="select">Lorem ipsum dolor sit amet</span>,
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>
</body>
</html>
Результат данного примера показан ни рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Да Да Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1, CSS2
Значение по умолчанию normal
Наследуется Да
Применяется Ко всем элементам
Аналог HTML <B>
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/fonts.html#propdef-fontweight
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Применение свойства font-weight
Объектная модель
[window.]document.getElementById("elementID").style.fontWeight
Браузеры
Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, 
поэтому переключаются
между значениями bold, normal и lighter. На практике же начертание в браузерах 
обычно ограничено всего
двумя вариантами: нормальное начертание и жирное начертание.
height
Краткая информация
Описание
Устанавливает высоту блочных или заменяемых элементов (к ним, например, 
относится тег <IMG>). Высота
не включает толщину границ вокруг элемента, значение отступов и полей.
Браузеры по-разному реагируют на настройки высоты элемента. Если его содержимое 
превышает
указанную высоту, то Internet Explorer и Opera проигнорируют значение свойства 
height и автоматически
подстроят высоту под контент. Браузер Netscape (а также Mozilla и Firefox) 
оставит высоту элемента
неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности 
может получиться
наложение содержимого элементов друг на друга, когда элементы в коде HTML они 
идут последовательно.
Чтобы этого не произошло, можно добавить overflow: auto к стилю элемента.
Синтаксис
height: значение | проценты | auto | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, 
пикселы (px),
дюймы (in), пункты (pt) и др. При использовании процентной записи высота 
элемента вычисляется в
зависимости от высоты родительского элемента. Если родитель явно не указан, то 
в его качестве выступает
окно браузера. auto устанавливает высоту исходя из содержимого элемента
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>height</title>
<style type="text/css">
.layer {
height: 50px; /* Высота блока */
width: 150px; /* Ширина блока */
overflow: scroll; /* Добавляем полосы прокрутки */
background: #fc0; /* Цвет фона */
padding: 7px; /* Поля вокруг текста */
border: 1px solid #333; /* Параметры рамки */
}
</style>
</head>
<body>
<div class="layer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</body>
</html>
Результат данного примера показан ни рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по умолчанию auto
Наследуется Нет
Применяется К блочным элементам
Аналог HTML
<table height="">
<img height="">
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visudet.html#propdef-height
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Применение свойства height
Объектная модель
[window.]document.getElementById("elementID").style.height
Браузеры
Браузер Internet Explorer 6 некорректно определяет height как min-height. В 
режиме несовместимости (quirk
mode) Internet Explorer до версии 8.0 включительно неправильно вычисляет высоту 
элемента, не добавляя к
ней значение отступов, полей и границ.
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
hover
Краткая информация
Описание
Определяет стиль элемента при наведении на него курсора мыши, но при этом 
элемент еще не
активирован, иными словами кнопка мыши не нажата.
Синтаксис
E:hover { ... }
Здесь E имя селектора. Если селектор не указан, то hover применяется ко всем 
элементам документа.
Значения
Нет.
Пример 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>link</title>
<style type="text/css">
a:link {
color: #0000d0; /* Цвет ссылок */
padding: 2px; /* Поля вокруг текста */
}
a:hover {
background: #786b59; /* Цвет фона под ссылкой */
color: #ffe; /* Цвет ссылки */
}
</style>
</head>
<body>
<p><a href="link1.html">Ссылка 1</a></p>
<p><a href="link2.html">Ссылка 2</a></p>
<p><a href="link3.html">Ссылка 3</a></p>
</body>
</html>
В данном примере псевдокласс hover применяется к ссылке (тегу <A>), при этом 
меняется цвет ссылки и
фона под ней. Результат примера показан на рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Да Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2
Применяется Не определено
Аналог HTML <тег onmouseover="function()">
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudoclasses
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Результат использования псевдокласса hover для ссылок
Пример 2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>hover</title>
<style type="text/css">
UL {
width: 180px; /* Ширина меню */
list-style: none; /* Для списка убираем маркеры */
margin: 0; /* Нет отступов вокруг */
padding: 0; /* Убираем поля вокруг текста */
font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
font-size: 10pt; /* Размер названий в пункте меню */
}
LI UL {
position: absolute; /* Подменю позиционируются абсолютно */
display: none; /* Скрываем подменю */
margin-left: 165px; /* Сдвигаем подменю вправо */
margin-top: -2em; /* Сдвигаем подменю вверх */
}
LI A {
display: block; /* Ссылка как блочный элемент */
padding: 5px; /* Поля вокруг надписи */
text-decoration: none; /* Подчеркивание у ссылок убираем */
color: #666; /* Цвет текста */
border: 1px solid #ccc; /* Рамка вокруг пунктов меню */
background-color: #f0f0f0; /* Цвет фона */
border-bottom: none; /* Границу снизу не проводим */
}
LI A:hover {
color: #ffe; /* Цвет текста активного пункта */
background-color: #5488af; /* Цвет фона активного пункта */
}
LI:hover UL {
display: block; /* При выделении пункта курсором мыши отображается подменю */
}
.brd {
border-bottom: 1px solid #ccc; /* Линия снизу */
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="russian.html">Русская кухня</a>
<ul>
<li><a href="linkr1.html">Бефстроганов</a></li>
<li><a href="linkr2.html">Гусь с яблоками</a></li>
<li><a href="linkr3.html">Крупеник новгородский</a></li>
<li><a href="linkr4.html" class="brd">Раки по-русски</a></li>
</ul>
</li>
<li><a href="ukrainian.html">Украинская кухня</a>
<ul>
<li><a href="linku1.html">Вареники</a></li>
<li><a href="linku2.html">Жаркое по-харьковски</a></li>
<li><a href="linku3.html">Капустняк черниговский</a></li>
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<li><a href="linku4.html" class="brd">Потапцы с помидорами</a></li>
</ul>
</li>
<li><a href="caucasus.html">Кавказская кухня</a>
<ul>
<li><a href="linkc1.html">Суп-харчо</a></li>
<li><a href="linkc2.html">Лилибдж</a></li>
<li><a href="linkc3.html">Чихиртма</a></li>
<li><a href="linkc4.html" class="brd">Шашлык</a></li>
</ul>
</li>
<li><a href="asia.html" class="brd">Кухня Средней Азии</a></li>
</ul>
</body>
</html>
В данном примере псевдокласс hover добавляется к элементу списка (тег <LI>) для 
создания
двухуровневого меню. Результат примера показан на рис. 2.
Рис. 2. Использование hover для создания меню
Браузеры
В браузере Internet Explorer до версии 6.0 включительно псевдокласс hover 
работает только для ссылок.
lang
Краткая информация
Описание
Определяет язык, который используется в документе или его фрагменте. В коде 
HTML язык
устанавливается через параметр charset тега <META>. В XML для этой цели 
применяется xml:lang.
С помощью псевдокласса lang можно задавать определенные настройки, характерные 
для разных языков,
например, вид кавычек в цитатах.
Синтаксис
Элемент:lang(язык) { ... }
Значения
В качестве языка могут выступать следующие значения: ru — русский; en — 
английский ; de — немецкий ;
fr — французский; it — итальянский и др.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>lang</title>
<style type="text/css">
P {
font-size: 150%; /* Размер текста */
}
q:lang(de) {
quotes: "\201E" "\201C"; /* Вид кавычек для немецкого языка */
}
q:lang(en) {
quotes: "\201C" "\201D"; /* Вид кавычек для английского языка */
}
q:lang(fr), q:lang(ru) { /* Вид кавычек для русского и французского языка */
quotes: "\00AB" "\00BB";
}
</style>
</head>
<body>
<p>Цитата на французском языке: <q lang="fr">Ce que femme veut, Dieu le 
veut</q>.</p>
<p>Цитата на немецком: <q lang="de">Der Mensch, versuche die Gotter nicht</q>.
</p>
<p>Цитата на английском: <q lang="en">То be or not to be</q>.</p>
</body>
</html>
Результат данного примера показан на рис. 1. Для отображения типовых кавычек в 
примере используется
стилевое свойство quotes, а само переключение языка и соответствующего вида 
кавычек происходит через
параметр lang, добавляемого к тегу <Q>.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Нет Да Да Да Да Да Да Нет Нет Да Да Да Да
CSS CSS2
Значение по умолчанию Нет
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/selector.html#lang
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Результат использования псевдокласса lang
left
Краткая информация
Описание
Для позиционированного элемента определяет расстояние от левого края 
родительского элемента, не
включая отступ, поле и ширину рамки, до левого края дочернего элемента (рис. 1).
 Отсчет координат
зависит от значения свойства position. Если оно равно absolute, в качестве 
родителя выступает окно
браузера и положение элемента определяется от его левого края. В случае 
значения relative, left
отсчитывается от левого края исходного положения элемента. Если для 
родительского элемента задано
position: relative, то абсолютное позиционирование дочерних элементов 
определяет их положение от левого
края родителя.
Рис. 1. Значение свойства left
Синтаксис
left: значение | проценты | auto | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, 
пикселы (px),
дюймы (in), пункты (pt) и др. Значение свойства left может быть и отрицательным,
 в этом случае возможны
наложения разных элементов друг на друга. При задании значения в процентах, 
положение элемента
вычисляется в зависимости от ширины родительского элемента.
Не изменяет положение элемента.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>left</title>
<style type="text/css">
.layer1 {
position: absolute; /* Абсолютное позиционирование */
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2
Значение по умолчанию auto
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.html#propdef-left
auto
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
left: 20px; /* Положение от левого края */
background: #fc3; /* Цвет фона */
margin: 7px; /* Отступы вокруг элемента */
}
.layer2 {
position: relative; /* Относительное позиционирование */
left: -12px; /* Положение от левого края */
top: 13px; /* Положение от верхнего края */
border: 1px solid black; /* Параметры рамки */
padding: 5px; /* Поля вокруг текста */
margin: 7px; /* Отступы вокруг элемента */
}
</style>
</head>
<body>
<div class="layer1">
<div class="layer2">
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>
</body>
</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства left
Объектная модель
[window.]document.getElementById("elementID").style.left
Браузеры
В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя 
одновременно задать
свойства top, left, right, bottom.
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
letter-spacing
Краткая информация
Описание
Определяет интервал между символами в пределах элемента. Браузеры обычно 
устанавливают
расстояние между символами, исходя из типа и вида шрифта, его размеров и 
настроек операционной
системы. Чтобы изменить это значение и применяется данное свойство. Допустимо 
использовать
отрицательное значение, но в этом случае надо убедиться, что сохраняется 
читабельность текста.
Синтаксис
letter-spacing: значение | normal | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, 
пикселы (px),
дюймы (in), пункты (pt) и др. Наилучший результат дает использование 
относительных единиц
основанных на размере шрифта (em и ex).
Задает интервал между символами как обычно.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>letter-spacing</title>
<style type="text/css">
P {
letter-spacing: 5px;
}
</style>
</head>
<body>
<h1>Duis te feugifacilisi</h1>
<p>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>
</body>
</html>
Результат данного примера показан ни рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1, CSS2
Значение по умолчанию normal
Наследуется Да
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/text.html#propdef-letterspacing
normal
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Применение свойства letter-spacing
Объектная модель
[window.]document.getElementById("elementID").style.letterSpacing
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
line-height
Краткая информация
Описание
Устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от 
базовой линии шрифта. При
обычных обстоятельствах расстояние между строками зависит от вида и размера 
шрифта и определяется
браузером автоматически. Отрицательное значение межстрочного расстояния не 
допускается.
Синтаксис
line-height: множитель | значение | проценты | normal | inherit
Значения
Любое число больше нуля воспринимается как множитель от размера шрифта текущего 
текста. Например,
значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений 
принимаются также
любые единицы длины, принятые в CSS — пикселы (px), дюймы (in), пункты (pt) и 
др. Разрешается
использовать процентную запись, в этом случае за 100% берется высота шрифта.
Расстояние между строк вычисляется автоматически.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>line-height</title>
<style type="text/css">
H1 {
line-height: 60%;
}
P {
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Duis te feugifacilisi</h1>
<p>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>
</body>
</html>
Результат данного примера показан ни рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1, CSS2
Значение по умолчанию normal
Наследуется Да
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/visudet.html#propdef-lineheight
normal
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Применение свойства line-height
Объектная модель
[window.]document.getElementById("elementID").style.lineHeight
Браузеры
Internet Explorer до седьмой версии неправильно вычисляет высоту строк для 
изображений и элементов
форм. Также в этом браузере не поддерживается значение inherit.
link
Краткая информация
Описание
Псевдокласс link применяется к ссылкам, которые еще не посещались пользователем,
 и задает для них
стилевое оформление.
Синтаксис
A:link { ... }
Значения
Нет.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>link</title>
<style type="text/css">
a:link {
color: #0000d0; /* Цвет ссылок */
}
a:visited {
color: #900060; /* Цвет посещенных ссылок */
}
</style>
</head>
<body>
<p><a href="task1.html">Выяснить вес нестандартного груза (камень)</a></p>
<p>Дается: стул, палка, веревка, безмен с ограничением по весу.</p>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Результат использования псевдокласса link
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Да Да Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Применяется К ссылкам (тег <A>)
Аналог HTML <body LINK="#RRGGBB">
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/selector.html#link-pseudoclasses
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
list-style
Краткая информация
Описание
Универсальное свойство, позволяющее одновременно задать стиль маркера, его 
положение, а также
изображение, которое будет использоваться в качестве маркера. Для подробного 
ознакомления смотрите
информацию о каждом свойстве list-style-type, list-style-position и 
list-style-image отдельно.
Синтаксис
list-style: list-style-type || list-style-position || list-style-image | 
inherit
Значения
Любые комбинации трех значений, разделяемых между собой пробелом, определяющих 
стиль маркеров. Ни
одно значение не является обязательным, поэтому неиспользуемые можно опустить.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>list-style</title>
<style type="text/css">
UL {
list-style: square outside; /* Квадратные маркеры */
/* Маркеры размещаются за
пределами текстового блока */
}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetuer adipiscing elit</li>
<li>Sed diem nonummy nibh euismod</li>
<li>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.</li>
</ul>
</body>
</html>
Результат данного примера показан ни рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по
умолчанию Нет
Наследуется Да
Применяется
К тегам <DD>, <DT>, <LI>, <OL> и <UL>, а также ко всем
элементам, у которых указано display: list-item
Аналог HTML <ul type> | <ol type> | <li type>
Ссылка на
спецификацию http://www.w3.org/TR/CSS21/generate.html#propdef-list-style
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Применение свойства list-style
Объектная модель
[window.]document.getElementById("elementID").style.listStyle
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
list-style-image
Краткая информация
Описание
Устанавливает адрес изображения, которое служит в качестве маркера списка. Это 
свойство наследуется,
поэтому для отдельных элементов списка для восстановления маркера используется 
значение none.
Синтаксис
list-style-image: none | url('путь к файлу') | inherit
Значения
Отменяет изображение в качестве маркера для родительского элемента.
Относительный или абсолютный путь к графическому файлу.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>list-style-image</title>
<style type="text/css">
UL {
list-style-image: url('images/book.gif');
}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetuer adipiscing elit</li>
<li>Sed diem nonummy nibh euismod</li>
<li>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.</li>
</ul>
</body>
</html>
Результат данного примера показан ни рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по
умолчанию none
Наследуется Да
Применяется
К тегам <DD>, <DT>, <LI>, <OL> и <UL>, а также ко всем
элементам, у которых указано display: list-item
Аналог HTML Нет
Ссылка на
спецификацию http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image
none
url
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Применение свойства list-style-image
Объектная модель
[window.]document.getElementById("elementID").style.listStyleImage
Браузеры
В разных браузерах расстояние между изображением и текстом может различаться.
В Internet Explorer до седьмой версии включительно не отображаются маркеры, 
если для списка добавлено
свойство float. Также в этом браузере не поддерживается значение inherit.
list-style-position
Краткая информация
Описание
Определяет, как будет размещаться маркер относительно текста. Имеется два 
значения: outside — маркер
вынесен за границу элемента списка (рис. 1) и inside — маркер обтекается 
текстом (рис. 2).
Рис. 1. Значение outside
Рис. 2. Значение inside
Синтаксис
list-style-position: inside | outside
Значения
Маркер является частью текстового блока и отображается в элементе списка.
Текст выравнивается по левому краю, а маркеры размещаются за пределами 
текстового
блока.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>list-style-position</title>
<style type="text/css">
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по
умолчанию outside
Наследуется Да
Применяется
К тегам <DD>, <DT>, <LI>, <OL> и <UL>, а также ко всем
элементам, у которых указано display: list-item
Аналог HTML Нет
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/generate.html#propdef-list-styleposition
inside
outside
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
UL {
list-style-image: url('book.gif'); /* Путь к рисунку для установки маркера */
list-style-position: inside; /* Маркер обтекается текстом */
}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetuer adipiscing elit</li>
<li>Sed diem nonummy nibh euismod</li>
<li>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.</li>
</ul>
</body>
</html>
Результат данного примера показан ни рис. 3.
Рис. 3. Применение свойства list-style-position
Объектная модель
[window.]document.getElementById("elementID").style.listStylePosition
Браузеры
В браузере Internet Explorer 6 при использовании нумерованного списка <OL> и 
значения inside свойства liststyle-
position, числа идущие с 10, начинают накладываться на текст списка.
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
list-style-type
Краткая информация
Описание
Изменяет вид маркера для каждого элемента списка. Это свойство используется 
только в случае, когда
значение list-style-image установлено как none. Маркеры различаются для 
маркированного списка (тег <UL>)
и нумерованного (тег <OL>).
Синтаксис
list-style-type: circle | disc | square | armenian | decimal | 
decimal-leading-zero | georgian | lower-alpha | lower-greek | lowerlatin
| lower-roman | upper-alpha | upper-latin | upper-roman | none | inherit
Значения
Значения зависят от того, к какому типу списка они применяются: маркированному 
или нумерованному.
Маркированный список
Маркер в виде кружка.
Маркер в виде точки.
Маркер в виде квадрата.
Нумерованный список
Традиционная армянская нумерация.
Арабские числа (1, 2, 3, 4,...).
Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,...).
Традиционная грузинская нумерация.
Строчные латинские буквы (a, b, c, d,...).
Строчные греческие буквы (?, ?, ?, ?,...).
Это значение аналогично lower-alpha.
Римские числа в нижнем регистре (i, ii, iii, iv, v,...).
Заглавные латинские буквы (A, B, C, D,...).
Это значение аналогично upper-alpha.
Римские числа в верхнем регистре (I, II, III, IV, V,...).
Отменяет маркеры для списка.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1, CSS2
Значение по
умолчанию
disc (для <UL>); decimal (для <OL>)
Наследуется Да
Применяется
К тегам <DD>, <DT>, <LI>, <OL> и <UL>, а также ко всем
элементам, у которых указано display: list-item
Аналог HTML Нет
Ссылка на
спецификацию http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-type
circle
disc
square
armenian
decimal
decimal-leading-zero
georgian
lower-alpha
lower-greek
lower-latin
lower-roman
upper-alpha
upper-latin
upper-roman
none
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>list-style-type</title>
<style type="text/css">
UL {
list-style-type: square; /* Квадратные маркеры */
}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetuer adipiscing elit</li>
<li>Sed diem nonummy nibh euismod</li>
<li>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.</li>
</ul>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства list-style-type
Объектная модель
[window.]document.getElementById("elementID").style.listStyleType
Браузеры
В браузере Internet Explorer 6 при использовании нумерованного списка <OL> и 
значения inside свойства liststyle-
position, числа идущие с 10, начинают накладываться на текст списка.
Браузер Internet Explorer до седьмой версии включительно не поддерживает 
значения armenian, decimalleading-
zero, georgian, lower-greek, lower-latin, upper-latin, inheirt. Вместо них 
выводится нумерация
арабскими числами. В этом браузере нумерация или маркеры не отображаются для 
плавающих элементов
(UL { float: left; }).
Internet Explorer 8 дополнительно понимает значение upper-greek, которое 
устанавливает нумерацию в виде
заглавных греческих букв (?, ?, ?, ?,...).
margin
Краткая информация
Описание
Устанавливает величину отступа от каждого края элемента. Отступом является 
пространство от границы
текущего элемента до внутренней границы его родительского элемента (рис. 1).
Рис. 1. Отступ от левого края элемента
Если у элемента нет родителя, отступом будет расстояние от края элемента до 
края окна браузера с
учетом того, что у самого окна по умолчанию тоже установлены отступы. Чтобы от 
них избавиться, следует
устанавливать значение margin для селектора <BODY> равное нулю.
Свойство margin позволяет задать величину отступа сразу для всех сторон 
элемента или определить ее
только для указанных сторон.
Синтаксис
margin: [значение | проценты | auto] {1,4} | inherit
Значения
Разрешается использовать одно, два, три или четыре значения, разделяя их между 
собой пробелом.
Эффект зависит от количества значений и приведен в табл. 1.
Величину отступов можно указывать в пикселах (px), процентах (%) или других 
допустимых для CSS
единицах. Значение может быть как положительным, так и отрицательным числом.
Указывает, что размер отступов будет автоматически рассчитан браузером.
Наследует значение родителя.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по умолчанию 0
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.html#propdef-margin
Табл. 1. Зависимость от числа значений
Число
значений
Результат
1 Отступы будут установлены одновременно от каждого края элемента.
2 Первое значение устанавливает отступ от верхнего и нижнего края, второе — от 
левого и правого.
3
Первое значение задает отступ от верхнего края, второе — одновременно от левого 
и правого
края, а третье — от нижнего края.
4 Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.

auto
inherit
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>margin</title>
<style type="text/css">
BODY {
margin: 0; /* Убираем отступы */
}
DIV.parent {
margin: 20%; /* Отступы вокруг элемента */
background: #fd0; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
DIV.child {
border: 3px solid #666; /* Параметры рамки */
padding: 10px; /* Поля вокруг текста */
margin: 10px; /* Отступы вокруг */
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
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>
</body>
</html>
Результат данного примера показан на рис. 2.
Рис. 2. Применение свойства margin
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Объектная модель
[window.]document.getElementById("elementID").style.margin
Браузеры
Internet Explorer 6 в режиме несовместимости (quirk mode) не поддерживает 
выравнивание блока по центру
с помощью правила margin: 0 auto. Также в этом браузере наблюдается ошибка с 
удвоением значения
левого или правого отступа для плавающих элементов, вложенных в родительские 
элементы. Удваивается
тот отступ, который прилегает к стороне родителя. Проблема обычно решается 
добавлением display: inline
для плавающего элемента.
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
margin-bottom
Краткая информация
Описание
Устанавливает величину отступа от нижнего края элемента. Отступом является 
расстояние от внешнего
края нижней границы текущего элемента до внутренней границы его родительского 
элемента (рис. 1).
Рис. 1. Отступ от нижнего края элемента
Синтаксис
margin-bottom: значение | auto | inherit
Значения
Величину нижнего отступа можно указывать в пикселах (px), процентах (%) или 
других допустимых для CSS
единицах. Значение может быть как положительным, так и отрицательным числом.
Указывает, что размер отступов будет автоматически рассчитан браузером.
Наследует ____________значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>margin-bottom</title>
<style type="text/css">
.layer1 {
background: #008B66; /* Цвет фона */
color: white; /* Цвет текста */
padding: 10px; /* Поля вокруг текста */
margin-bottom: -7px; /* Отступ снизу */
}
.layer2 {
margin-left: 40px; /* Отступ слева */
background: #ccc; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по умолчанию 0
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/box.html#propdef-marginbottom
auto
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<div class="layer1">
<big>Lorem ipsum dolor sit amet</big>
</div>
<div class="layer2">
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>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства margin-bottom
Объектная модель
[window.]document.getElementById("elementID").style.marginBottom
Браузеры
Браузер Internet Explorer 6 в некоторых случаях некорректно вычисляет значение 
отступа, заданное в
процентах.
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
margin-left
Краткая информация
Описание
Устанавливает величину отступа от левого края элемента. Отступом является 
расстояние от внешнего края
левой границы текущего элемента до внутренней границы его родительского 
элемента (рис. 1).
Рис. 1. Отступ от левого края элемента
Синтаксис
margin-left: значение | auto | inherit
Значения
Величину левого отступа можно указывать в пикселах (px), процентах (%) или 
других допустимых для CSS
единицах. Значение может быть как положительным, так и отрицательным числом.
Указывает, что размер отступов будет автоматически рассчитан браузером.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>margin-left</title>
<style type="text/css">
.layer1 {
background-color: #D36037; /* Цвет фона */
}
.layer2 {
margin-left: 20%; /* Отступ слева */
background-color: #ccc; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по умолчанию 0
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.html#propdef-margin-left
auto
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<div class="layer1">
<div class="layer2">
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>
</body>
</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства margin-left
Объектная модель
[window.]document.getElementById("elementID").style.marginLeft
Браузеры
Браузер Internet Explorer 6 удваивает значение левого или правого отступа для 
плавающих элементов,
вложенных в родительские элементы. Удваивается тот отступ, который прилегает к 
стороне родителя.
Проблема обычно решается добавлением display: inline для плавающего элемента.
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
margin-right
Краткая информация
Описание
Устанавливает величину отступа от правого края элемента. Отступом является 
расстояние от внешнего
края правой границы текущего элемента до внутренней границы его родительского 
элемента (рис. 1).
Рис. 1. Отступ от правого края элемента
Синтаксис
margin-right: значение | auto | inherit
Значения
Величину правого отступа можно указывать в пикселах (px), процентах (%) или 
других допустимых для CSS
единицах. Значение может быть как положительным, так и отрицательным числом.
Указывает, что размер отступов будет автоматически рассчитан браузером.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>margin-right</title>
<style type="text/css">
BODY {
margin-right: 25%; /* Отступ справа */
margin-left: 25%; /* Отступ слева */
}
DIV.panel {
background: #007083; /* Цвет фона */
color: white; /* Цвет текста */
padding: 10px; /* Поля вокруг текста */
text-align: justify; /* Выравнивание по ширине */
}
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по умолчанию 0
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/box.html#propdef-marginright
auto
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
</style>
</head>
<body>
<div class="panel">
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>
Результат данного примера показан ни рис. 2.
Рис. 1. Применение свойства margin-right
Объектная модель
[window.]document.getElementById("elementID").style.marginRight
Браузеры
Браузер Internet Explorer 6 удваивает значение левого или правого отступа для 
плавающих элементов,
вложенных в родительские элементы. Удваивается тот отступ, который прилегает к 
стороне родителя.
Проблема обычно решается добавлением display: inline для плавающего элемента.
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
margin-top
Краткая информация
Описание
Устанавливает величину отступа от верхнего края элемента. Отступом является 
расстояние от внешнего
края нижней границы текущего элемента до внутренней границы его родительского 
элемента (рис. 1).
Рис. 1. Отступ от верхнего края элемента
Синтаксис
margin-top: значение | auto | inherit
Значения
Величину верхнего отступа можно указывать в пикселах (px), процентах (%) или 
других допустимых для CSS
единицах. Значение может быть как положительным, так и отрицательным числом.
Указывает, что размер отступов будет автоматически рассчитан браузером.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>margin-top</title>
<style type="text/css">
DIV {
background: #fc3; /* Цвет фона */
border: 2px solid black; /* Параметры рамки */
padding: 20px; /* Поля вокруг текста */
margin-top: 20%; /* Отступ сверху */
}
</style>
</head>
<body>
<div>
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.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по умолчанию 0
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.html#propdef-margin-top
auto
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
</div>
</body>
</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства margin-top
Объектная модель
[window.]document.getElementById("elementID").style.marginTop
Браузеры
Браузер Internet Explorer 6 в некоторых случаях некорректно вычисляет значение 
отступа, заданное в
процентах.
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
max-height
Краткая информация
Описание
Устанавливает максимальную высоту элемента. Значение высоты элемента будет 
вычисляться в
зависимости от значений установленных свойств height, max-height и min-height. 
В табл. 1 показано, чем
руководствуется браузер при совместном использовании указанных стилевых свойств.

Данные из таблицы следует понимать следующим образом. Если значение высоты 
(height) больше
значения max-height, то высота элемента принимается равной значению max-height.
Синтаксис
max-height: значение | проценты | none | inherit
Значения
В качестве значений принимаются пикселы (px), проценты (%) и другие единицы 
измерения, принятые в
CSS. Отрицательные значения не допускаются.
Отменяет действие этого свойства.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>max-height</title>
<style type="text/css">
.block {
overflow: auto; /* Полоса прокрутки при необходимости */
padding: 10px; /* Поля вокруг текста */
max-height: 80px; /* Максимальная высота */
background: #ffe; /* Цвет фона */
border: 1px solid #cb2027; /* Параметры рамки */
}
.block p {
margin: 2px auto; /* Отступы в абзаце */
}
</style>
</head>
<body>
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2
Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам, кроме встроенных и таблиц
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visudet.html#min-max-heights
Табл. 1. Высота элемента
Значения свойств Ширина
min-width < height < max-height height
height < max-height height
height > max-height max-height
min-height > height > max-height min-height
min-height > height < max-height min-height
none
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<div class="block">
<p>Блокирование элемента не позволяет вообще производить с
ним каких-либо действий, в том числе выделять содержимое
текстового поля, изменять его или активизировать.
Заблокированное поле помечается обычно серым цветом</p>
<p>Некоторые браузеры позволяют выделять и копировать
содержимое заблокированного текстового поля, но все
остальные действия недоступны.</p>
</div>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Результат использования свойства max-height
Объектная модель
[window.]document.getElementById("elementID").style.maxHeight
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
max-width
Краткая информация
Описание
Устанавливает максимальную ширину элемента. Значение ширины элемента будет 
вычисляться в
зависимости от значений установленных свойств width, max-width и min-width. В 
табл. 1 показано, чем
руководствуется браузер при совместном использовании указанных стилевых свойств.

Данные из таблицы следует понимать следующим образом. Если значение ширины 
(width) больше
значения max-width, то ширина элемента принимается равной значению max-width.
Синтаксис
max-width: значение | проценты | none | inherit
Значения
В качестве значений принимаются пикселы (px), проценты (%) и другие единицы 
измерения, принятые в
CSS. Отрицательные значения не допускаются.
Отменяет действие этого свойства.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Версия сайта для КПК</title>
<style type="text/css" media="handheld">
body {
max-width: 320px; /* Максимальная ширина страницы в пикселах */
}
</style>
</head>
<body>
<h1>Текст заголовка</h1>
<p>Текст примера</p>
</body>
</html>
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2
Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам, кроме встроенных и таблиц
Аналог HTML Нет
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/visudet.html#propdef-maxwidth
Табл. 1. Ширина элемента
Значения свойств Ширина
min-width < width < max-width width
width < max-width width
width > max-width max-width
min-width > width > max-width min-width
min-width > width < max-width min-width
none
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
В данном примере ширина страницы ограничена размером 320 пикселов для всех 
наладонных устройств. К
ним относятся КПК, смартфоны и другие устройства, способные отображать 
HTML-документы.
Объектная модель
[window.]document.getElementById("elementID").style.maxWidth
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
min-height
Краткая информация
Описание
Задает минимальную высоту элемента. Значение высоты элемента будет вычисляться 
в зависимости от
установленных значений свойств height, max-height и min-height. В табл. 1 
показано, чем руководствуется
браузер при совместном использовании указанных стилевых свойств.
Данные из таблицы следует понимать следующим образом. Если значение высоты 
(height) меньше значения
min-height, то высота элемента принимается равной min-height.
Синтаксис
max-height: значение | проценты | inherit
Значения
В качестве значений принимаются пикселы (px), проценты (%) и другие единицы 
измерения, принятые в CSS.
Отрицательные значения не допускаются. inherit наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Cloverfield</title>
<style type="text/css">
#bottom {
background: #66806E url(clover_bottom.png) no-repeat 20px bottom; /* Параметры 
фона */
min-height: 80px; /* Минимальная высота */
color: #E4BC96; /* Цвет текста */
padding: 5px 5px 5px 140px; /* Поля вокруг текста */
}
#bottom p { margin: 5px 0; }
#bottom a {
color: #FFFDE0;
}
</style>
</head>
<body>
<div id="bottom">
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2
Значение по умолчанию 0
Наследуется Нет
Применяется Ко всем элементам, кроме встроенных и таблиц
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visudet.html#min-max-heights
Табл. 1. Высота элемента
Значения свойств Ширина
min-height < height < max-height height
min-height > height > max-height min-height
min-height > height < max-height min-height
min-height < height height
min-height > height min-height
min-height > max-height min-height
min-height < max-height max-height
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<p>Сайт Cloverfield</p>
<p><a href="/info/">Информация о сайте</a> <a href="/author/">Об авторе</a></p>
</div>
</body>
</html>
В данном примере, чтобы фоновое изображение не обрезалось по верхнему краю, 
задана минимальная
высота блока равная 80 пикселам. Результат примера показан на рис. 1.
Рис. 1. Высота блока, заданная с помощью min-height
Объектная модель
[window.]document.getElementById("elementID").style.minHeight
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
min-width
Краткая информация
Описание
Устанавливает минимальную ширину элемента. Если окно браузера по ширине 
становится меньше заданной
минимальной ширины элемента, то ширина элемента остается неизменной, а в окне 
появляется
горизонтальная полоса прокрутки.
Значение ширины элемента будет вычисляться в зависимости от установленных 
значений свойств width,
max-width и min-width. В табл. 1 показано, чем руководствуется браузер при 
совместном использовании
указанных стилевых свойств.
Данные из таблицы следует понимать следующим образом. Если значение ширины 
(width) меньше значения
min-width, то ширина элемента принимается равной min-width.
Синтаксис
min-width: значение | проценты | inherit
Значения
В качестве значений принимаются пикселы (px), проценты (%) и другие единицы 
измерения, принятые в CSS.
Отрицательные значения не допускаются. inherit наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Колонки без переносов</title>
<style type="text/css">
#container {
min-width: 420px; /* Минимальная ширина контейнера */
}
#col1 {
background-color: #fc0; /* Цвет фона колонки */
padding: 5px; /* Поля вокруг текста */
float: left; /* Обтекание по правому краю */
width: 150px; /* Ширина левой колонки */
}
#col2 {
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2
Значение по умолчанию 0
Наследуется Нет
Применяется Ко всем элементам, кроме встроенных и таблиц
Аналог HTML Нет
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/visudet.html#propdef-minwidth
Табл. 1. Ширина элемента
Значения свойств Ширина
min-width < width < max-width width
min-width > width > max-width min-width
min-width > width < max-width min-width
min-width < width width
min-width > width min-width
min-width > max-width min-width
min-width < max-width max-width
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
background-color: #c0c0c0; /* Цвет фона колонки */
padding: 5px; /* Поля вокруг текста */
width: 250px; /* Ширина правой колонки */
float: left; /* Обтекание по правому краю */
}
</style>
</head>
<body>
<div id="container">
<div id="col1">Колонка 1</div>
<div id="col2">Колонка 2</div>
</div>
</body>
</html>
Результат данного примера, как он отображается в браузере Opera, показан на рис.
 1. Internet Explorer 6 не
поддерживает свойство min-width, поэтому страница будет выглядеть иначе (рис. 
2).
Рис. 1. Результат использования min-width в браузере Opera
Рис. 2. Результат использования min-width в браузере Internet Explorer 6
Объектная модель
[window.]document.getElementById("elementID").style.minWidth
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
opacity
Краткая информация
Описание
Определяет уровень прозрачности элемента веб-страницы. При частичной или полной 
прозрачности через
элемент проступает фоновый рисунок или другие элементы, расположенные ниже 
полупрозрачного
объекта.
Синтаксис
opacity: значение
Значения
В качестве значения выступает число из диапазона [0.0; 1.0]. Значение 0 
соответствует полной
прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.
6 устанавливают
полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>opacity</title>
<style type="text/css">
IMG.semi {
opacity: 0.5; /* Полупрозрачность элемента */
}
</style>
</head>
<body>
<p>
<img src="igels.gif" alt="Обычный рисунок">
<img src="igels.gif" alt="Полупрозрачный рисунок" class="semi">
</p>
</body>
</html>
Результат данного примера показан на рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Нет Нет Да Да Да Да Да Да Да Да Нет Да Да
CSS CSS3
Значение по умолчанию 1
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/css3-color/#transparency
HTML 4.01 CSS 2.1 CSS 3 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Результат использования opacity
Браузеры
Internet Explorer для изменения прозрачности использует фильтры, для этого 
браузера следует записать
filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 
до 100.
outline
Краткая информация
Описание
Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину 
внешней границы на всех
четрырех сторонах элемента. В отличие от линии, задаваемой через border, 
свойство outline не влияет на
положение блока и его ширину.
Синтаксис
outline: outline-color || outline-style || outline-width | inherit
Значения
Задает цвет линии в любом допустимом для CSS формате.
Стиль линии.
Толщина границы.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>outline</title>
<style type="text/css">
.photo IMG {
padding: 20px; /* Поля вокруг изображения */
margin-right: 10px; /* Отступ справа */
outline: 1px solid #666; /* Параметры рамки */
background: #f0f0f0; /* Цвет фона */
float: left; /* Обтекание по правому краю */
}
</style>
</head>
<body>
<div class="photo">
<img src="girl.jpg" alt="Девочка с муфтой">
<img src="owl.jpg" alt="Сова">
<img src="boy.jpg" alt="Эвенкийский мальчик">
</div>
</body>
</html>
Результат данного примера показан на рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2, CSS2.1
Значение по умолчанию Нет
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/ui.html#propdef-outline
outline-color
outline-style
outline-width
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Использование свойства outline
Объектная модель
[window.]document.getElementById("elementID")style.outline
outline-color
Краткая информация
Описание
Задает цвет внешней границы элемента. В отличие от линии, задаваемой через 
border, линия через
свойство outline отображается вокруг элемента, не влияя на ширину блока или его 
положение.
Синтаксис
outline-color: invert | цвет | inherit
Значения
Автоматически задает цвет линии, исходя из фона под ней для достижения 
максимального
контраста. В CSS 2.1 браузеру разрешается игнорировать значение invert и вместо 
него
использовать цвет линии заданный свойством color.
Задает цвет линии в любом допустимом для CSS формате.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>outline-color</title>
<style type="text/css">
#block {
outline-style: dashed; /* Пунктирная граница */
outline-color: #be8b5e; /* Цвет границы */
padding: 10px; /* Поля вокруг текста */
background: #eedac8; /* Цвет фона */
}
</style>
</head>
<body>
<div id="block">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</body>
</html>
Результат примера показан на рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2, CSS2.1
Значение по умолчанию invert
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/ui.html#propdef-outline-color
invert
цвет
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Использование свойства outline-color
Объектная модель
[window.]document.getElementById("elementID")style.outlineColor
outline-style
Краткая информация
Описание
Задает стиль внешней границы элемента. В отличие от линии, задаваемой через 
border, линия через outline
отображается вокруг элемента, не влияя на ширину блока или его положение.
Синтаксис
outline-style: none | dotted | dashed | solid | double | groove | ridge | inset 
| outset | inherit
Значения
Граница не отображается. Это значение перекрывает свойство outline-width, если 
оно
присутствует.
Линия состоящая из набора точек.
Пунктирная линия, состоящая из серии коротких отрезков.
Сплошная линия.
Двойная линия.
Создает эффект вдавленной рамки.
Создает эффект рельефной границы.
Псевдотрехмерная рамка, при которой правая и нижняя граница осветляется, а 
левая и
верхняя линии затемняются.
Псевдотрехмерная рамка, при которой левая и верхяя граница имеют более светлый 
оттенок,
чем заданный цвет, а правая и нижняя линии затемняются.
Наследует значение родителя.
Вид указанных стилей представлен на рис. 1.
Рис. 1. Вид границы с разным значением стилей
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>outline-style</title>
<style type="text/css">
.noborder A {
outline-style: none; /* Убираем границу вокруг ссылок */
}
</style>
</head>
<body>
<p><a href="http://ya.ru">Яндекс</a>
<a href="http://google.ru">Google</a></p>
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2, CSS2.1
Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/ui.html#propdef-outline-style
none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<p class="noborder"><a href="http://ya.ru">Яндекс</a>
<a href="http://google.ru">Google</a></p>
</body>
</html>
Результат примера показан на рис. 2. В данном примере для браузера Firefox 
убирается пунктирная
граница вокруг ссылок, возникающая при их активации. В первом абзаце рамка еще 
будет отображаться, а
во втором абзаце она скрывается с помощью значения none свойства outline-style.
Рис. 2. Использование свойства outline-style для ссылок в Firefox
Объектная модель
[window.]document.getElementById("elementID")style.outlineStyle
outline-width
Краткая информация
Описание
Задает толщину внешней границы элемента. В отличие от свойства border-width, 
для outline-width нельзя
устанавливать границу для каждой стороны элемента индивидуально.
Чтобы outline-width работал, необходимо установить у свойства outline-style 
любое значение кроме none.
Синтаксис
outline-width: thin | medium | thick | значение | inherit
Значения
Тонкая линия. Значение в пикселах может изменяться в зависимости от браузера, 
но обычно
составляет 1 пиксел.
Линия средней толщины (3 пиксела).
Линия большой толщины (6 пикселов).
Для точной установки толщины можно использовать любые единицы размера принятые 
в
CSS.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>outline-width</title>
<style type="text/css">
#block {
outline-style: dotted; /* Пунктирная внешняя граница */
outline-width: 3px; /* Толщина внешней границы */
padding: 10px; /* Поля вокруг текста */
border: 3px dotted #000; /* Параметры рамки */
}
</style>
</head>
<body>
<div id="block">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>
</body>
</html>
Результат примера показан на рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2, CSS2.1
Значение по умолчанию medium
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/ui.html#propdef-outline-width
thin
medium
thick
значение
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Использование свойства outline-width
Объектная модель
[window.]document.getElementById("elementID")style.outlineWidth
overflow
Краткая информация
Описание
Свойство overflow управляет отображением содержания блочного элемента, если оно 
целиком не
помещается и выходит за область заданных размеров.
Синтаксис
overflow: auto | hidden | scroll | visible | inherit
Значения
Отображается все содержание элемента, даже за пределами установленной высоты и
ширины.
Отображается только область внутри элемента, остальное будет скрыто.
Всегда добавляются полосы прокрутки.
Полосы прокрутки добавляются только при необходимости.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>overflow</title>
<style type="text/css">
.layer {
overflow: scroll; /* Добавляем полосы прокрутки */
width: 300px; /* Ширина блока */
height: 150px; /* Высота блока */
padding: 5px; /* Поля вокруг текста */
border: solid 1px black; /* Параметры рамки */
}
</style>
</head>
<body>
<div class="layer">
<h2>Duis te feugifacilisi</h2>
<p>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>
Результат данного примера показан на рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2
Значение по умолчанию visible
Наследуется Нет
Применяется К блочным элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow
visible
hidden
scroll
auto
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Применение свойства oveflow
Объектная модель
[window.]document.getElementById("elementID").style.overflow
Браузеры
Браузер Internet Explorer поддерживает также свойство overflow-x, которое 
отображает полосу прокрутки по
горизонтали и overflow-y, оно отвечает за полосу прокрутки по вертикали. 
Значения те же, что и для overflow.
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
padding
Краткая информация
Описание
Устанавливает значение полей вокруг содержимого элемента. Полем называется 
расстояние от
внутреннего края рамки элемента до воображаемого прямоугольника, 
ограничивающего его содержимое
(рис. 1).
Рис. 1. Поле слева от текста
Свойство padding позволяет задать величину поля сразу для всех сторон элемента 
или определить ее
только для указанных сторон.
Синтаксис
padding: [значение | проценты] {1, 4} | inherit
Значения
Разрешается использовать одно, два, три или четыре значения, разделяя их между 
собой пробелом.
Эффект зависит от количества значений и приведен в табл. 1.
Величину полей можно указывать в пикселах (px), процентах (%) или других 
допустимых для CSS единицах.
Значение inherit указывает, что оно наследуется у родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1, CSS2.1
Значение по умолчанию 0
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.html#propdef-padding
Табл. 1. Зависимость от числа значений
Число
значений
Результат
1 Поля будут установлены одновременно от каждого края элемента.
2 Первое значение устанавливает поля от верхнего и нижнего края, второе — от 
левого и правого.
3
Первое значение задает поле от верхнего края, второе — одновременно от левого и 
правого края,
а третье — от нижнего края.
4 Поочередно устанавливается поля от верхнего, правого, нижнего и левого края.
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>padding</title>
<style type="text/css">
.layer {
background: #fc3; /* Цвет фона */
border: 2px solid black; /* Параметры рамки */
padding: 20px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div class="layer">
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>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства border-right-color
Объектная модель
[window.]document.getElementById("elementID").style.padding
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
padding-bottom
Краткая информация
Описание
Устанавливает значение поля от нижнего края содержимого элемента. Полем 
называется расстояние от
внутреннего края рамки элемента до воображаемого прямоугольника, 
ограничивающего его содержимое
(рис. 1).
Рис. 1. Поле снизу от текста
Синтаксис
padding-bottom: значение | inherit
Значения
Величину нижнего поля можно указывать в пикселах (px), процентах (%) или других 
допустимых для CSS
единицах.Значение inherit указывает, что оно наследуется у родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>padding-bottom</title>
<style type="text/css">
.layer {
background: #fc3; /* Цвет фона */
border: 2px solid #000; /* Параметры рамки */
padding-bottom: 40px; /* Поле снизу от текста */
padding-top: 40px; /* Поле сверху от текста */
text-align: center; /* Выравнивание по центру */
}
</style>
</head>
<body>
<div class="layer">
Lorem ipsum dolor sit amet
</div>
</body>
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1, CSS2.1
Значение по
умолчанию 0
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/box.html#propdef-paddingbottom
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства padding-bottom
Объектная модель
[window.]document.getElementById("elementID").style.paddingBottom
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
padding-left
Краткая информация
Описание
Устанавливает значение поля от левого края содержимого элемента. Полем 
называется расстояние от
внутреннего края рамки элемента до воображаемого прямоугольника, 
ограничивающего его содержимое
(рис. 1).
Рис. 1. Поле слева от текста
Синтаксис
padding-left: значение | проценты | inherit
Значения
Величину левого поля можно указывать в пикселах (px), процентах (%) или других 
допустимых для CSS
единицах. Значение inherit указывает, что оно наследуется у родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>padding-left</title>
<style type="text/css">
.layer {
background: #fc3; /* Цвет фона */
border: 2px solid black; /* Параметры рамки */
padding: 5px; /* Поля вокруг текста */
}
.layer P {
margin: 0; /* Убираем отступы вокруг */
padding-left: 10%; /* Поле слева */
}
</style>
</head>
<body>
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1, CSS2.1
Значение по умолчанию 0
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.html#propdef-padding-left
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<div class="layer">
<p>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>
Результат данного примера показан ни рис. 2.
Рис. 1. Применение свойства padding-left
Объектная модель
[window.]document.getElementById("elementID").style.paddingLeft
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
padding-right
Краткая информация
Описание
Устанавливает значение поля от правого края содержимого элемента. Полем 
называется расстояние от
внутреннего края рамки элемента до воображаемого прямоугольника, 
ограничивающего его содержимое
(рис. 1).
Рис. 1. Поле справа от текста
Синтаксис
padding-right: значение | inherit
Значения
Величину правого поля можно указывать в пикселах (px), процентах (%) или других 
допустимых для CSS
единицах. Значение inherit указывает, что оно наследуется у родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>padding-right</title>
<style type="text/css">
.layer {
background: #ffe url('help.gif') no-repeat top right; /* Параметры фона */
border: 2px solid black; /* Параметры рамки */
padding: 5px; /* Поля вокруг текста */
padding-right: 90px; /* Поле справа */
text-align: justify; /* Выравнивание по ширине */
}
</style>
</head>
<body>
<div class="layer">
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1, CSS2.1
Значение по умолчанию 0
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/box.html#propdef-paddingright
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
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>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства padding-right
Объектная модель
[window.]document.getElementById("elementID").style.paddingRight
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
padding-top
Краткая информация
Описание
Устанавливает значение поля от верхнего края содержимого элемента. Полем 
называется расстояние от
внутреннего края рамки элемента до воображаемого прямоугольника, 
ограничивающего его содержимое
(рис. 1).
Рис. 1. Поле сверху от текста
Синтаксис
padding-top: значение | inherit
Значения
Величину верхнего поля можно указывать в пикселах (px), процентах (%) или 
других допустимых для CSS
единицах. Значение inherit указывает, что оно наследуется у родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>padding-top</title>
<style type="text/css">
.layer {
background: #fc3; /* Цвет фона */
border-top: 5px solid #000; /* Параметры верхней линии */
border-bottom: 5px solid #000; /* Параметры нижней линии */
padding: 5px; /* Поля вокруг текста */
padding-top: 10%; /* Поле сверху */
padding-bottom: 10%; /* Поле снизу */
}
</style>
</head>
<body>
<div class="layer">
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.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1, CSS2.1
Значение по умолчанию 0
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/box.html#propdef-paddingtop
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
</div>
</body>
</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства padding-top
Объектная модель
[window.]document.getElementById("elementID").style.paddingTop
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
position
Краткая информация
Описание
Устанавливает способ позиционирования элемента относительно окна браузера или 
других объектов на
веб-странице.
Синтаксис
position: absolute | fixed | relative | static | inherit
Значения
Указывает, что элемент абсолютно позиционирован. В этом случае он не существует 
в
обычном потоке документа подобно другим элементам, которые отображаются на веб-
странице словно абсолютно позиционированного объекта и нет. Положение элемента
задается свойствами left, top, right и bottom относительно края окна браузера.
По своему действию это значение близко к absolute, но в отличие от него 
привязывается к
указанной свойствами left, top, right и bottom точке на экране и не меняет 
своего положения
при прокрутке веб-страницы. Браузеры Netscape и Firefox вообще не отображают 
полосы
прокрутки, если положение элемента задано фиксированным, и оно не помещается 
целиком
в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они 
никак не
влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данное 
значение.
Положение элемента устанавливается относительно его исходного места. Добавление
свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту 
или иную
сторону от первоначального расположения.
Элементы отображаются как обычно. Использование свойств left, top, right и 
bottom не
приводит к каким-либо результатам.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>position</title>
</head>
<body>
<div style="font-family: Times, serif; font-size: 200%">
T<span style="position: relative; top: 10px">E</span>X
и L<span style="position: relative; top: -5px; font-size: 80%">A</span>T<span
style="position: relative; top: 10px">E</span>X
</div>
</body>
</html>
Результат данного примера показан ни рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2
Значение по умолчанию static
Наследуется Да
Применяется Ко всем элементам, за исключением генерируемых
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.html#propdef-position
absolute
fixed
relative
static
inherit
HTML 4.01 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Применение свойства position
Объектная модель
[window.]document.getElementById("elementID").style.position
Браузеры
Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer 
до седьмой версии
включительно не поддерживает значение inherit.
quotes
Краткая информация
Описание
Устанавливает тип кавычек, который применяется в тексте документа. В каждом 
языке существуют свои
традиции для обозначения кавычек, свойство quotes позволяет задать вид их 
отображения по всему тексту
и установить, таким образом, его единообразное оформление. Добавление кавычек 
происходит
автоматически для содержимого контейнера <Q>, а также для текста, к которому 
применяется стилевое
свойство content со значением open-quote (открывающая кавычка) или close-quote 
(закрывающая кавычка).
Синтаксис
quotes: "левая кавычка" "правая кавычка" | none | inherit
Значения
В качестве значения используется символ текста (например, quotes: "«" "»") или 
символ юникода.
Некоторые из них перечислены в табл. 1.
Кавычки не добавляются.
Наследует значение родителя.
Пример
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2
Значение по
умолчанию
Зависит от браузера, его настроек и операционной системы.
Чаще всего используется кавычки вида "/"
Наследуется Да
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на
спецификацию http://www.w3.org/TR/CSS21/generate.html#propdef-quotes
Табл. 1. Виды кавычек
Вид
Спецкод
HTML
Юникод Описание
" " \0022
Двойная кавычка, применяется обычно в моноширинных
шрифтах, для обозначения символа дюйма, а также угловой
минуты.
' ' \0027
Апостроф. Символ угловой секунды, в латинице
применяется для обозначения мягкого знака (popalas' lisa).
« « или
«
\00ab Открывающая двойная угловая кавычка.
» » или
»
\00bb Закрывающая двойная угловая кавычка.
‘ ‘ \2018 Открывающая одинарная кавычка.
’ ’ \2019 Закрывающая одинарная кавычка.
“ “ \201c
Открывающая двойная кавычка в англоязычных текстах или
закрывающая для русского языка.
” ” \201d Закрывающая двойная кавычка в англоязычных текстах.
„ „ \201e
Открывающая двойная кавычка. Применяется в русском
языке.
none
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>quotes</title>
<style type="text/css">
Q {
font-family: Times, serif; /* Шрифт с засечками */
font-style: italic; /* Курсивное начертание текста */
color: navy; /* Синий цвет текста */
quotes: "\00ab" "\00bb"; /* Кавычки в виде двойных угловых скобок */
}
</style>
</head>
<body>
<p>Станислав Лец утверждал: <q>Чаще всего выход там, где был вход</q>.</p>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства quotes
right
Краткая информация
Описание
Для позиционированного элемента определяет расстояние от правого края 
родительского элемента, не
включая отступ, поле и ширину рамки, до правого края дочернего элемента (рис. 
1). Отсчет координат
зависит от значения свойства position. Если оно равно absolute, в качестве 
родителя выступает окно
браузера и положение элемента определяется от его правого края. В случае 
значения relative, right
отсчитывается от правого края исходного положения элемента. Если для 
родительского элемента задано
position: relative, то абсолютное позиционирование дочерних элементов 
определяет их положение от
правого края родителя.
Рис. 1. Значение свойства right
Синтаксис
right: значение | проценты | auto | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, 
пикселы (px),
дюймы (in), пункты (pt) и др. Значение свойства right может быть и 
отрицательным, в этом случае возможны
наложения разных элементов друг на друга. При задании значения в процентах, 
положение элемента
вычисляется в зависимости от ширины родительского элемента.
Не изменяет положение элемента.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>right</title>
<style type="text/css">
#leftcol {
position: absolute; /* Абсолютное позиционирование */
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2
Значение по умолчанию auto
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.html#propdef-right
auto
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
top: 20px; /* Положение от верхнего края */
left: 20px; /* Положение от левого края */
width: 100px; /* Ширина блока */
background: #fc3; /* Цвет фона */
border: 1px solid #000; /* Параметры рамки */
padding: 10px; /* Поля вокруг текста */
}
#centercol {
position: relative; /* Относительное позиционирование */
background: maroon; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
color: white; /* Цвет текста */
margin: 13px 250px 0 130px; /* Отступы вокруг блока */
}
#rightcol {
position: absolute; /* Абсолютное позиционирование */
top: 20px; /* Положение от верхнего края */
right: 20px; /* Положение от правого края */
width: 200px; /* Ширина блока */
background: #ccc; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div id="leftcol">...</div>
<div id="centercol">...</div>
<div id="rightcol">...</div>
</body>
</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства right
Объектная модель
[window.]document.getElementById("elementID").style.right
Браузеры
В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя 
одновременно задать
свойства top, left, right, bottom.
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
table-layout
Краткая информация
Описание
Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на 
ее содержимом.
Синтаксис
table-layout: auto | fixed | inherit
Значения
Браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и 
только
после этого отображает.
Ширина колонок в этом случае определяется либо с помощью тега <COL>, либо 
вычисляется
на основе первой строки. Если данные о форматировании первой строки таблицы по 
каким-
либо причинам получить невозможно, в этом случае таблица делится на колонки 
равной
ширины. При использовании этого значения, содержимое, которое не помещается в 
ячейку
указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от
используемого браузера, но в любом случае ширина ячейки меняться не будет. Для
корректной работы этого значения обязательно должна быть задана ширина таблицы.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>table-layout</title>
<style type="text/css">
TABLE {
table-layout: fixed; /* Фиксированная ширина ячеек */
}
</style>
</head>
<body>
<table width="100%" cellspacing="0" border="1">
<col width="160">
<col span="9" width="60">
<tr>
<td> </td>
<td>1995</td><td>1996</td><td>1997</td><td>1998</td>
<td>1999</td><td>2000</td><td>2001</td><td>2002</td>
<td>2003</td>
</tr>
<tr>
<td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>
<td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>
</tr>
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2
Значение по
умолчанию auto
Наследуется Нет
Применяется
К тегу <TABLE> или к элементу, у которого значение display
установлено как table или inline-table.
Аналог HTML Нет
Ссылка на
спецификацию http://www.w3.org/TR/CSS21/tables.html#propdef-table-layout
auto
fixed
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<tr>
<td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>
<td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>
</tr>
<tr>
<td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>
<td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>
</tr>
</table>
</body>
</html>
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
text-align
Краткая информация
Описание
Определяет горизонтальное выравнивание текста в пределах элемента.
Синтаксис
text-align: center | justify | left | right | inherit
Значения
Выравнивание текста по центру. Текст помещается по центру горизонтали окна 
браузера или
контейнера, где расположен текстовый блок. Строки текста словно нанизываются на
невидимую ось, которая проходит по центру веб-страницы. Подобный способ 
выравнивания
активно используется в заголовках и различных подписях, вроде подрисуночных, он 
придает
официальный и солидный вид оформлению текста. Во всех других случаях 
выравнивание по
центру применяется редко по той причине, что читать большой объем такого текста
неудобно.
Выравнивание по ширине, что означает одновременное выравнивание по левому и 
правому
краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы 
между
словами.
Выравнивание текста по левому краю. В этом случае строки текста выравнивается 
по левому
краю, а правый край располагается «лесенкой». Такой способ выравнивания 
является
наиболее популярным на сайтах, поскольку позволяет пользователю легко 
отыскивать
взглядом новую строку и комфортно читать большой текст.
Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли
антагониста предыдущему типу. А именно, строки текста равняются по правому краю,
 а
левый остается «рваным». Из-за того, что левый край не выровнен, а именно с 
него
начинается чтение новых строк, такой текст читать труднее, чем, если бы он был 
выровнен по
левому краю. Поэтому выравнивание по правому краю применяется обычно для 
коротких
заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, 
где
текст приходится читать справа налево, там возможно подобный способ 
выравнивания и
пригодится.
Не изменяет положение элемента.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>text-align</title>
<style type="text/css">
div {
border: 1px solid black; /* Параметры рамки */
padding: 5px; /* Поля вокруг текста */
margin-bottom: 5px; /* Отступ снизу */
}
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2
Значение по умолчанию left
Наследуется Да
Применяется Ко всем элементам
Аналог HTML
<center>
<p | h1 | div | table | thead | tbody | tfoot | tr | th | td align>
Ссылка на спецификацию http://www.w3.org/TR/CSS21/text.html#propdef-text-align
center
justify
left
right
auto
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
#left { text-align: left; }
#right { text-align: right; }
#center { text-align: center; }
.content {
width: 75%; /* Ширина слоя */
background: #fc0; /* Цвет фона */
}
</style>
</head>
<body>
<div id="left"><div class="content">Выравнивание по левому краю</div></div>
<div id="center"><div class="content">Выравнивание по центру</div></div>
<div id="right"><div class="content">Выравнивание по правому краю</div></div>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Выравнивание текста в браузере Opera
Браузер Internet Explorer несколько иначе трактует данный пример, чем Opera и 
Firefox, выравнивая не
только текст, но и блоки (рис. 2).
Рис. 2. Выравнивание текста в браузере Internet Explorer 6
Объектная модель
[window.]document.getElementById("elementID").style.textAlign
text-decoration
Част. — поддерживается частично.
Краткая информация
Описание
Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над 
текстом и мигания.
Одновременно можно применить более одного стиля, перечисляя значения через 
пробел.
Синтаксис
text-decoration: [ blink | line-through | overline | underline ] | none | 
inherit
Значения
Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду 
исчезает,
потом вновь появляется на прежнем месте (пример).
Создает перечеркнутый текст (пример).
Линия проходит над текстом (пример).
Устанавливает подчеркнутый текст (пример).
Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по
умолчанию.
Значение наследуется у родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>text-decoration</title>
<style type="text/css">
A {
text-decoration: none; /* Убираем подчеркивание у ссылок */
}
A:hover {
text-decoration: underline; /* Добавляем подчеркивание
при наведении курсора мыши на ссылку */
}
</style>
</head>
<body>
<p><a href="link1.html">Lorem ipsum dolor sit amet</a></p>
</body>
</html>
Объектная модель
[window.]document.getElementById("elementID").style.textDecoration
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1, CSS2
Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML <U>, <S>, <STRIKE>, <BLINK>
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/text.html#propdef-textdecoration
blink
line-through
overline
underline
none
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
[window.]document.getElementById("elementID").style.textDecorationBlink
[window.]document.getElementById("elementID").style.textDecorationLineThrough
[window.]document.getElementById("elementID").style.textDecorationNone
[window.]document.getElementById("elementID").style.textDecorationOverLine
[window.]document.getElementById("elementID").style.textDecorationUnderline
Браузеры
Браузер Internet Explorer до восьмой версии включительно, хотя и позволяет 
использовать значение blink,
текст показывает как обычно, без всякого мерцания.
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit. Линия, полученная с
помощью значения line-through, в IE7 располагается выше, чем в других браузерах.
 В IE8 эта ошибка
исправлена.
text-indent
Краткая информация
Описание
Устанавливает величину отступа первой строки блока текста (например, для 
параграфа <P>). Воздействия
на все остальные строки не оказывается. Допускается отрицательное значение для 
создания выступа
первой строки, но следует проверить, чтобы текст не выходил за пределы окна 
браузера.
Синтаксис
text-indent: значение | проценты | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, 
пикселы (px),
дюймы (in), пункты (pt) и др. При задании значения в процентах, отступ первой 
строки вычисляется в
зависимости от ширины блока. Допустимо использовать отрицательные значения, но 
при этом в разных
браузерах возможно появление ошибок.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>text-indent</title>
<style type="text/css">
P {
text-indent: 1.5em; /* Отступ первой строки */
text-align: justify; /* Выравнивание по ширине */
}
</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.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Результат данного примера показан ни рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Да Да Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1, CSS2
Значение по умолчанию 0
Наследуется Да
Применяется К блочным элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/text.html#propdef-text-indent
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Применение свойства text-indent
Объектная модель
[window.]document.getElementById("elementID").style.textIndent
text-transform
Краткая информация
Описание
Управляет преобразованием текста элемента в заглавные или прописные символы. 
Когда значение
отлично от none, регистр исходного текста будет изменен.
Синтаксис
text-transform: capitalize | lowercase | uppercase | none | inherit
Значения
Первый символ каждого слова в предложении будет заглавным. Остальные символы 
свой
вид не меняют.
Все символы текста становятся строчными (нижний регистр).
Все символы текста становятся прописными (верхний регистр).
Не меняет регистр символов.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>text-transform</title>
<style type="text/css">
H1 {
text-transform: uppercase; /* Заглавные буквы */
}
P {
text-transform: capitalize; /* Каждое слово начинается с заглавной буквы */
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>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>
</body>
</html>
Результат данного примера показан ни рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1, CSS2
Значение по умолчанию none
Наследуется Да
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/text.html#propdef-texttransform
capitalize
lowercase
uppercase
none
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Применение свойства text-transform
Объектная модель
[window.]document.getElementById("elementID").style.textTransform
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
top
Краткая информация
Описание
Для позиционированного элемента определяет расстояние от верхнего края 
родительского элемента, не
включая отступ, поле и ширину рамки, до верхнего края дочернего элемента (рис. 
1). Отсчет координат
зависит от значения свойства position. Если оно равно absolute, в качестве 
родителя выступает окно
браузера и положение элемента определяется от его верхнего края. В случае 
значения relative, top
отсчитывается от верхнего края исходного положения элемента. Если для 
родительского элемента задано
position: relative, то абсолютное позиционирование дочерних элементов 
определяет их положение от
верхнего края родителя.
Рис. 1. Значение свойства top
Синтаксис
top: значение | проценты | auto | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, 
пикселы (px),
дюймы (in), пункты (pt) и др. Значение свойства top может быть и отрицательным, 
в этом случае возможны
наложения разных элементов друг на друга. При задании значения в процентах, 
положение элемента
вычисляется в зависимости от высоты родительского элемента.
Не изменяет положение элемента.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>top</title>
<style type="text/css">
#menu {
position: absolute; /* Абсолютное позиционирование */
left: 300px; /* Положение от левого края */
top: 50px; /* Положение от верхнего края */
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS2
Значение по умолчанию auto
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-top
auto
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
width: 120px; /* Ширина блока */
background: #e0e0e0; /* Цвет фона */
border: 1px solid #000; /* Параметры рамки */
padding: 5px; /* Поля вокруг текста */
}
#content {
position: absolute; /* Абсолютное позиционирование */
left: 0; /* Положение от левого края */
top: 0; /* Положение от верхнего края */
width: 280px; /* Ширина блока */
background: #800000; /* Цвет фона */
color: white; /* Цвет текста */
padding: 5px; /* Поля вокруг текста */
padding-right: 60px; /* Отступ справа */
text-align: justify; /* Выравнивание по ширине */
}
</style>
</head>
<body>
<div id="content">
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. Duis te feugifacilisi.
</div>
<div id="menu">
Ut wisi enim ad minim veniam, quis nostrud exerci taion
ullamcorper suscipit lobortis nisl ut aliquip ex en
commodo consequat.
</div>
</body>
</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства top
Объектная модель
[window.]document.getElementById("elementID").style.top
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
Браузеры
В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя 
одновременно задать
свойства top, left, right, bottom.
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
unicode-bidi
Краткая информация
Описание
В европейских языках чтение текста происходит слева направо, в то время как 
есть языки, где текст
читается справа налево. При смешении в одном документе разных по написанию 
символов (русского с
ивритом, к примеру) в системе юникод, их направление определяется браузером из 
характеристик и
содержимого текста. Свойства unicode-bidi и direction задают, как должен 
располагаться текст
используемого языка.
Синтаксис
unicode-bidi: normal | embed | bidi-override | inherit
Значения
Браузер самостоятельно определяет, как ему следует отображать текст на основе 
символов
юникода.
Переопределяет параметры текста, располагая его, как указано в свойстве 
direction.
Аналогичен embed, но при этом также меняется порядок символов в тексте, 
подчиняясь
значению direction.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>unicode-bidi</title>
<style type="text/css">
DIV.rtl {
unicode-bidi: bidi-override; /* Меняются характеристики текста */
direction: rtl; /* Текст пишется справа налево */
}
</style>
</head>
<body>
<div class="rtl">
<p>А роза упала на лапу Азора.</p>
<p>У лип Леша нашел пилу.</p>
<p>И городу дорог огород у дороги.</p>
<p>Уж я веники не вяжу.</p>
<p>Аргентина манит негра.</p>
<p>Он дивен, палиндром — и ни морд, ни лап не видно.</p>
<p>Но невидим архангел, мороз узором лег на храм и дивен он.</p>
<p>Леша на полке клопа нашел.</p>
<p>Я не стар брат Сеня.</p>
</div>
</body>
</html>
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Нет Нет Да Да Да Да
CSS CSS2
Значение по
умолчанию normal
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/visuren.html#propdef-unicodebidi
normal
embed
bidi-override
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Результат данного примера показан на рис. 1. Поскольку используется значение 
bidi-override свойства
unicode-bidi, то порядок символов в тексте меняется на обратный. А именно на 
тот, что указан свойством
direction. Заметьте, что текст располагается по правому краю окна и читается 
справа налево, что
характерно для арабского языка.
Рис. 1. Результат использования unicode-bidi и direction
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
vertical-align
Краткая информация
Описание
Выравнивает элемент по вертикали относительно своего родителя, окружающего 
текста или ячейки
таблицы.
Синтаксис
vertical-align: baseline | bottom | middle | sub | super | text-bottom | 
text-top | top | inherit | значение | проценты
Значения
Выравнивает базовую линию текущего элемента по базовой линии родителя. Если
родительский элемент не имеет базовой линии, то за нее принимается нижняя 
граница
элемента.
Выравнивает основание текущего элемента по нижней части элемента строки,
расположенного ниже всех.
Выравнивание средней точки элемента по базовой линии родителя плюс половина 
высоты
родительского элемента.
Элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при 
этом
не меняется.
Элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта 
остается
прежним.
Нижняя граница элемента выравнивается по самому нижнему краю текущей строки.
Верхняя граница элемента выравнивается по самому высокому текстовому элементу 
текущей
строки.
Выравнивание верхнего края элемента по верху самого высокого элемента строки.
Наследует значение родителя.
В качестве значения также можно использовать проценты, пикселы или другие 
доступные единицы.
Положительное число смещает элемент вверх относительно базовой линии, в то 
время как отрицательное
число опускает его вниз. При использовании процентов, отсчет ведется от 
значения свойства line-height,
при этом 0% аналогично значению baseline.
Для выравнивания по вертикали в ячейках таблицы применяются следующие значения.
Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или 
другого
вложенного элемента.
Выравнивает по нижнему краю ячейки.
Выравнивает по середине ячейки.
Выравнивает содержимое ячейки по ее верхнему краю.
Пример
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по
умолчанию baseline
Наследуется Нет
Применяется К встроенным элементам или ячейкам таблицы.
Аналог HTML
<caption | col | colgroup | tbody | tfoot | thead | th | td | tr
valign>
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/visudet.html#propdef-verticalalign
baseline
bottom
middle
sub
super
text-bottom
text-top
top
inherit
baseline
bottom
middle
top
HTML 4.01 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>vertical-align</title>
</head>
<body>
<div style="font-family: Times, serif; font-size: 200%">
T<span style="vertical-align: sub">E</span>X и L<span
style="vertical-align: 5px; font-size: 80%">A</span>T<span
style="vertical-align: sub">E</span>X
</div>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства vertical-align
Объектная модель
[window.]document.getElementById("elementID").style.verticalAlign
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
visibility
Краткая информация
Описание
Предназначен для отображения или скрытия элемента, включая рамку вокруг него и 
фон. При скрытии
элемента, хотя он и становится не виден, место, которое элемент занимает, 
остается за ним. Если
предполагается вывод разных элементов в одно и то же место экрана, для обхода 
этой особенности
следует использовать абсолютное позиционирование или воспользоваться свойством 
display.
Синтаксис
visibility: visible | hidden | collapse | inherit
Значения
Отображает элемент как видимый.
Элемент становится невидимым или правильней сказать, полностью прозрачным, 
поскольку
он продолжает участвовать в форматировании страницы.
Если это значение применяется не к строкам или колонкам таблицы, то результат 
его
использования будет таким же, как hidden. В случае использования collapse для
содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено 
display: none.
Иными словами, заданные строки и колонки убираются, а таблица перестраивается 
по новой.
Это значение не поддерживается браузером Internet Explorer.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>visibility</title>
<script type="text/javascript">
function hiddenLayer() {
document.getElementById("descr").style.visibility = "hidden";
}
function showLayer() {
document.getElementById("descr").style.visibility = "visible";
}
</script>
</head>
<body>
<p><a href="#" onMouseOver="showLayer()" onMouseOut="hiddenLayer()"><img
src="button.gif" width="98" height="33" alt="Кнопка"></a></p>
<div id="descr" style="visibility: hidden">
Данная эксклюзия является подмножеством астрациональных
супремативных монотенных федоний кадонарного экстрафазория.</div>
</body>
</html>
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Ошибки Ошибки Да Частично Частично Да Да Да Да
CSS CSS2, CSS2.1
Значение по умолчанию visible
Наследуется Да
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visufx.
html#propdef-visibility
visible
hidden
collapse
inherit
HTML 4.01 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Объектная модель
[window.]document.getElementById("elementID").style.visibility
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit и collapse.
Браузер Safari до версии 2.0 включительно поддерживает значение collapse.
Opera до версии 9.2 включительно воспринимает значение collapse как hidden для 
всех элементов.
visited
Краткая информация
Описание
Псевдокласс visited применяется к ссылкам, уже посещенные пользователем, и 
задает для них стилевое
оформление.
Синтаксис
A:visited { ... }
Значения
Нет.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>visited</title>
<style type="text/css">
a:link {
color: #0000d0; /* Цвет ссылок */
}
a:visited {
color: #900060; /* Цвет посещенных ссылок */
}
</style>
</head>
<body>
<p><a href="link1.html">Посещенная ссылка</a></p>
<p><a href="link2.html">Непосещенная ссылка</a></p>
<p><a href="link3.html">Непосещенная ссылка</a></p>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Результат использования псевдокласса visited
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Да Да Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Применяется К ссылкам (тег <A>)
Аналог HTML <body VLINK="#RRGGBB">
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/selector.html#link-pseudoclasses
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
white-space
Част. — поддерживается частично.
Краткая информация
Описание
Свойство white-space устанавливает, как отображать пробелы между словами. В 
обычных условиях любое
количество пробелов в коде HTML показывается на веб-странице как один. 
Исключением является тег
<PRE>, помещенный в этот контейнер текст выводится со всеми пробелами, как он 
был отформатирован
пользователем. Таким образом, white-space имитирует работу тега <PRE>, но в 
отличие от него не меняет
шрифт на моноширинный.
Синтаксис
white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit
Значения
Текст в окне браузера выводится как обычно, переносы строк устанавливаются
автоматически.
Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст
отображается одной строкой; вместе с тем, добавление тега <BR> переносит текст 
на новую
строку.
Текст показывается с учетом всех пробелов и переносов, как они были добавлены
разработчиком в коде HTML. Если строка получается слишком длинной и не 
помещается в
окне браузера, то будет добавлена горизонтальная полоса прокрутки.
В тексте пробелы и переносы не учитываются, текст автоматически переносится на
следующую строку, если он не помещается в заданную область.
В тексте сохраняются все пробелы и переносы, однако если строка по ширине не
помещается в заданную область, то текст автоматически будет перенесен на 
следующую
строку.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>white-space</title>
<style type="text/css">
P.example {
border: 1px dashed #634f36; /* Параметры рамки */
background: #fffff5; /* Цвет фона */
font-family: "Courier New", Courier, monospace; /* Семейство шрифта */
padding: 7px; /* Поля вокруг текста */
margin: 0px 0px 1em; /* Отступы */
white-space: pre; /* Учитываются все пробелы и переносы */
}
P.exampleTitle {
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Част. Част. Да Част. Част. Част. Част. Да Да Да Да Част. Част. Да
CSS CSS1, CSS2
Значение по умолчанию normal
Наследуется Да
Применяется К блочным элементам
Аналог HTML <PRE>, <NOBR>
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/text.html#propdef-whitespace
normal
nowrap
pre
pre-line
pre-wrap
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
border: 1px solid black; /* Параметры рамки */
border-bottom: none; /* Убираем линию снизу */
padding: 3px; /* Поля вокруг текста */
display: inline; /* Отображать как встроенный элемент */
background: #efecdf; /* Цвет фона */
font-weight: bold; /* Жирное начертание */
font-size: 90%; /* Размер шрифта */
margin: 0px; /* Убираем отступы */
white-space: nowrap; /* Переносов в тексте нет */
}
</style>
</head>
<body>
<p class="exampleTitle">Пример</p>
<p class="example">
<html>
<body>
<b>Великая теорема Ферма</b><br>
<i>X <sup><small>n</small></sup>
+ Y <sup><small>n</small></sup> =
Z <sup><small>n</small></sup></i><br>
где n - целое число > 2
lt;/body>
</html>
</p>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства white-space
Объектная модель
[window.]document.getElementById("elementID").style.whiteSpace
Браузеры
Браузер Internet Explorer до седьмой версии включительно не поддерживает 
значения pre-line, pre-wrap и
inherit. Для <TEXTAREA> значения normal и pre ведут себя как pre-wrap, а 
значение nowrap ведет себя как
pre-line.
Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap.
 Для <TEXTAREA>
значения normal, nowrap, и pre воспринимаются как pre-wrap.
Opera до версии 9.2 не поддерживает значение pre-line. Для <TEXTAREA> значения 
normal и pre ведут себя
как pre-wrap, а значение nowrap ведет себя как pre-line.
width
Краткая информация
Описание
Устанавливает ширину блочных или заменяемых элементов (к ним, например, 
относится тег <IMG>).
Ширина не включает толщину границ вокруг элемента, значение отступов и полей.
Браузеры неодинаково работают с шириной, результат отображения зависит от 
используемого DOCTYPE. В
табл. 1 приведены возможные варианты DOCTYPE и получаемая ширина.
Синтаксис
width: значение | проценты | auto | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, 
пикселы (px),
дюймы (in), пункты (pt) и др. При использовании процентной записи ширина 
элемента вычисляется в
зависимости от ширины родительского элемента. Если родитель явно не указан, то 
в его качестве
выступает окно браузера.
Устанавливает ширину исходя из типа и содержимого элемента.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>width</title>
<style type="text/css">
.layer1 {
width: 300px; /* Ширина блока */
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по умолчанию auto
Наследуется Нет
Применяется К блочным элементам
Аналог HTML <img width>, <table width>
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visudet.html#propdef-width
Табл. 1. Действие width в браузерах
DOCTYPE Internet Explorer Firefox Opera
Не указан Если содержимое превышает
заданную ширину, то блок
изменяет свои размеры,
подстраиваясь под содержимое.
В противном случае ширина блока
равна значению width.
Во всех случаях Firefox
действует по спецификации
CSS. А именно, ширина блока
получается сложением
значений width, padding, margin
и border.
Содержимое блока, если не
помещается в заданные
размеры, отображается
поверх блока.
Ширина равна
значению width.
Содержимое блока,
если не помещается в
заданные размеры,
отображается поверх.
«Переходный»
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD
HTML 4.01
Transitional//EN">
«Строгий»
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD
HTML 4.01//EN">
Ширина формируется путем
сложения значений width, padding,
margin и border.
Содержимое блока, если не
помещается в заданные размеры,
отображается поверх.
Ширина равна
значению width плюс
padding, margin, и
border.
Содержимое блока,
если не помещается в
заданные размеры,
отображается поверх.
XHTML
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN">
auto
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
background: #fc0; /* Цвет фона */
padding: 7px; /* Поля вокруг текста */
border: 1px solid #ccc; /* Параметры рамки */
}
.layer2 {
width: 400px; /* Ширина текстового блока */
}
</style>
</head>
<body>
<div class="layer1">
<p class="layer2">Lorem ipsum dolor sit amet,consectetuer
adipiscing elit,seddiem nonummy nibh euismod tincidunt ut
lacreet dolore magna aliguam erat volutpat.</p>
</div>
</body>
</html>
Результат данного примера, как он отображается в бразере Opera показан ни рис. 
1.
Рис. 1. Ширина блока в браузере Opera
Объектная модель
[window.]document.getElementById("elementID").style.width
Браузеры
Браузер Internet Explorer 6 некорректно определяет width как min-width. В 
режиме несовместимости (quirk
mode) Internet Explorer до версии 8.0 включительно неправильно вычисляет ширину 
элемента, не добавляя
к ней значение отступов, полей и границ.
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
word-spacing
Краткая информация
Описание
Устанавливает интервал между словами. Если для текста задано выравнивание через 
text-align со
значением justify (выравнивание по ширине), то свойство word-spacing не 
действует, поскольку интервал
между словами будет установлен принудительно, чтобы строка текста была 
выровнена по правому и
левому краю.
Синтаксис
word-spacing: значение | normal | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, 
пикселы (px),
дюймы (in), пункты (pt) и др. Значение может быть и отрицательным, но следует 
проверять
работоспособность в разных браузерах. Процентная запись не применима.
Устанавливает интервал между словами как обычно.
Наследует значение родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>word-spacing</title>
<style type="text/css">
P {
word-spacing: 20px;
}
</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>
Результат данного примера показан ни рис. 1.
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
CSS CSS1
Значение по умолчанию normal
Наследуется Да
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на
спецификацию
http://www.w3.org/TR/CSS21/text.html#propdef-wordspacing
normal
inherit
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Рис. 1. Применение свойства word-spacing
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit.
z-index
Краткая информация
Описание
Любые позиционированные элементы на веб-странице могут накладываться друг на 
друга в определенном
порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый 
элемент может
находиться как ниже, так и выше других объектов веб-страницы, их размещением по 
z-оси и управляет zindex.
Это свойство работает только для элементов, у которых значение position задано 
как absolute, fixed
или relative.
Синтаксис
z-index: число | auto | inherit
Значения
В качестве значения используются целые числа (положительные, отрицательные и 
ноль). Чем больше
значение, тем выше находится элемент по сравнению с теми элементами, у которых 
оно меньше. При
равном значении z-index, на переднем плане находится тот элемент, который в 
коде HTML описан ниже.
Хотя спецификация и разрешает использовать отрицательные значения z-index, но 
такие элементы не
отображаются в браузерах Netscape и Firefox до версии 2.0 включительно.
Кроме числовых значений применяется auto — порядок элементов в этом случае 
строится автоматически,
исходя из их положения в коде HTML и принадлежности к родителю, поскольку 
дочерние элементы имеют
тот же номер, что их родительский элемент. Значение inherit указывает, что оно 
наследуется у родителя.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>z-index</title>
<style type="text/css">
#layer1, #layer2, #layer3, #layer4 {
position: relative; /* Относительное позиционирование */
}
#layer1, #layer3 {
font-size: 50px; /* Размер шрифта в пикселах */
color: #000080; /* Синий цвет текста */
}
#layer2, #layer4 {
top: -55px; /* Сдвигаем текст вверх */
left: 5px; /* Сдвигаем текст вправо */
color: #ffa500; /* Оранжевый цвет текста */
font-size:70px; /* Размер шрифта в пикселах */
}
#layer1 { z-index: 2; }
#layer2 { z-index: 1; }
#layer3 { z-index: 3; }
#layer4 { z-index: 4; }
</style>
</head>
<body>
<p>Слой 1 наверху</p>
<div id="layer1">Слой 1</div>
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Ошибки Ошибки Да
CSS CSS2
Значение по умолчанию auto
Наследуется Нет
Применяется К любым позиционированным элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<div id="layer2">Слой 2</div>
<p>Слой 4 наверху</p>
<div id="layer3">Слой 3</div>
<div id="layer4">Слой 4</div>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства z-index
Объектная модель
[window.]document.getElementById("elementID").style.zIndex
Браузеры
Список, созданный с помощью тега <SELECT>, в браузере Internet Explorer 6 
всегда отображается поверх
других элементов, несмотря на значение z-index.
Internet Explorer до седьмой версии включительно не поддерживает значение 
inherit и интерпретирует auto
как 0.
В браузере Firefox до версии 2.0 включительно отрицательное значение z-index 
располагало элемент
располагает элемент ниже фона веб-страницы и его контента.__
</pre>
		</td>
		<td align="left" class="row2s"  width="5%"> </td>
	</tr>
    <tr><td class="row3" align="left"  width="5%"> </td><td class="row3s" align="center" width="20%" valign="middle"><a href="/comp/.view-mergevich-css.txt.full.html">[Весь Текст]</a></td><td class="row3s" align="center" width="70%" valign="middle"><br><form action="" method="get">Страница: <input type="text" size="4" name="pg" value="---"> из 123 <input type="submit" value="Открыть"></form></td><td class="row3s" align="center" width="20%" valign="middle"> </td><td class="row3" align="right" width="5%"><a href="/comp/.view-mergevich-css.txt.1.html"><img border="0" src="/tpl/r.gif" alt="<<-"></a></td></tr></table>	

</body>

</html>