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

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

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

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

Браузеры

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

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

Синтаксис

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Применение

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

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

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

Пример

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

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

Обозначения

Для удобства стилевые параметры и их аргументы в справочнике различаются по цветам.

<ТЕГ> — тег. При упоминании в справочнике теги, как правило, пишутся заглавными буквами, а в коде примера обозначаются прописными.

element — стилевой параметр.

var — значение стилевого свойства или тега.

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

© 2002–2008 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru

www.htmlbook.ru


Справочник по CSS - !important

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

!important

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS2
Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/cascade.html#important-rules

Описание

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

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

  1. !important добавлен в авторский стиль — будет применяться стиль автора.
  2. !important добавлен в пользовательский стиль — будет применяться стиль пользователя.
  3. !important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль автора.
  4. !important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.

Итог от применения !important в общем случае показан в табл. 1.

Табл. 1. Результат применения !important
Стиль автора Стиль пользователя Результат
BODY {
/* Серый цвет текста */
color: silver;

/* Размер текста 8 пунктов */
font-size: 8pt
}
 BODY {
/* Черный цвет текста */
color: #000;

/* Размер текста 12 пунктов */
font-size: 12pt
}

Lorem ipsum dolor sit amet...

Будет применяться стиль автора, а именно: установлен серый цвет текста, размер шрифта 8 пунктов.
BODY {
/* Серый цвет текста */
color: silver;

/* Размер текста 8 пунктов */
font-size: 8pt
} 		BODY {
/* Черный цвет текста, повышенная важность */
color: #000 !important;

/* Размер текста 12 пунктов */
font-size: 12pt
}

Lorem ipsum dolor sit amet...

Цвет текста будет установлен пользовательским, а размер шрифта останется исходным. В итоге увидим черный текст размером 8 пунктов.
BODY {
/* Серый цвет текста */
color: silver;

/* Размер текста 8 пунктов */
font-size: 8pt
} 		BODY {
/* Черный цвет текста, повышенная важность */
color: #000 !important;

/* Размер текста 12 пунктов, повышенная важность */
font-size: 12pt !important
}

Lorem ipsum dolor sit amet...

Будут использоваться все параметры пользователя. Текст станет отображаться как черный, размер 12 пунктов.
BODY {
/* Серый цвет текста, повышенная важность */
color: silver !important;

/* Размер текста 8 пунктов, повышенная важность */
font-size: 8pt !important
} 		BODY {
/* Черный цвет текста, повышенная важность */
color: #000 !important;

/* Размер текста 12 пунктов, повышенная важность */
font-size: 12pt !important
}

Lorem ipsum dolor sit amet...

При добавлении !important в ту и другую таблицу приоритет в этом случае имеет стиль пользователя. В результате текст станет черным, а размер его увеличится до 12 пунктов.

Синтаксис

Свойство: значение !important

Аргументы

У этого атрибута нет аргументов.

Пример

<!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>important</title>
<style type="text/css">
P {
background: url('/images/mklvfkwr.gif') no-repeat !important;
}
</style>
</head>
<body>
<p>Минорная пентатоника с пониженной V ступенью также называется блюзовой пентатоникой.</p>
</body>
</html>


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

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

background

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | Зависит от используемых аргументов
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML <body bgcolor="цвет" background="URL" bgproperties="fixed">
<table | thead | tbody | tfoot | tr | th | td bgcolor="цвет" background="URL">
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/colors.html#propdef-background

Описание

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

Синтаксис

background: background-attachment || background-color || background-image || background-position || background-repeat

Аргументы

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

Пример

<!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>background</title>
<style type="text/css">
DIV {
height: 200px; /* Высота блока */
width: 200px; /* Ширина блока */
overflow: auto; /* Добавляем полосы прокрутки */
padding-left: 15px; /* Отступ от текста слева */
background:
#fc0 /* Цвет фона */
url('sample.gif') /* Путь к фоновому изображению */
repeat-y; /* Повторять фон по вертикали */
}
</style>
</head>
<body>

<div>
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.
</div>

</body>
</html>

Результат данного примера показан ниже (рис. 1).

Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера

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

[window.]document.getElementById("elementID").style.background


Справочник по CSS - background-attachment

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

background-attachment

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | scroll
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <body background="URL" bgproperties="fixed">
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment

Описание

Параметр background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.

Синтаксис

background-attachment: fixed | scroll

Аргументы

Значение fixed делает фоновое изображение элемента неподвижным, scroll — позволяет перемещаться фону вместе с содержимым.

Пример

<!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>background-attachment</title>
<style type="text/css">
BODY {
background-image: url('images/sample.gif'); /* Путь к фоновому изображению */
background-attachment: fixed; /* Фиксируем фон веб-страницы */
}
</style>
</head>
<body>

<table>
<tr>
<td style="height:2000px">
&nbsp;
</td>
</tr>
</table>

</body>
</html>

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

[window.]document.getElementById("elementID").style.backgroundAttachment

Замечание

Если фон устанавливается для слоя, то в браузере Opera и Firefox параметр background-attachment не действует, фоновый рисунок остается фиксированным, независимо от значения.


Справочник по CSS - background-color

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

background-color

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | transparent
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <body | table | thead | tbody | tfoot | th | td bgcolor="цвет">
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/colors.html#propdef-background-color

Описание

Устанавливает фоновый цвет элемента. Хотя этот параметр не наследует свойства своего родителя, из-за того, что начальное значение цвета фона устанавливается прозрачным, он совпадает с фоном текущего элемента.

Синтаксис

background-color: цвет | transparent

Аргументы

Значение цвета можно задавать тремя способами.

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. Также можно задавать цвет в процентном отношении.

Кроме значения цвета, еще один допустимый аргумент — transparent, устанавливающий прозрачный фон.

Пример

<!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>background-color</title>
<style type="text/css">
BODY {
background-color: #3366CC; /* Цвет фона веб-страницы */
}
H1 {
background-color: RGB(249, 201, 16); /* Цвет фона под заголовком */
}
P {
background-color: maroon; /* Цвет фона под текстом параграфа */
color: white; /* Цвет текста */
}
</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.</p>
</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1. Применение параметра background-color

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

[window.]document.getElementById("elementID").style.backgroundColor


Справочник по CSS - background-image

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

background-image

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <body background="URL">
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/colors.html#propdef-background-image

Описание

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

Синтаксис

background-image: url(путь к файлу) | none

Аргументы

В качестве значения используется путь к графическому файлу, который указывается внутри конструкции url(). Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них. Когда фоновое изображение не требуется, аргумент может принимать значение none.

Пример

<!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>background-image</title>
<style type="text/css">
BODY {
background-image: url('images/bg.gif'); /* Путь к фоновому изображению */
background-color: #fc0; /* Цвет фона */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>

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

[window.]document.getElementById("elementID").style.backgroundImage


Справочник по CSS - background-position

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

background-position

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | 0% 0%
Наследуется | Нет
Применяется | К блочным и заменяемым элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/colors.html#propdef-background-position

Описание

Задает начальное положение фонового изображения, установленного с помощью параметра background-image.

Синтаксис

background-position: [проценты | значение] | [left | center | right] || [top | center | bottom]

Аргументы

У этого параметра два значения, положение по горизонтали (может быть — 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% (в правом нижнем углу)

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

Пример

<!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>background-position</title>
<style type="text/css">
BODY {
background-image: url('mybg.gif'); /* Путь к фоновому рисунку */
background-position: right bottom; /* Положение фона */
background-repeat: no-repeat; /* Отменяем повторение фона */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>

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

[window.]document.getElementById("elementID").style.backgroundPosition


Справочник по CSS - background-repeat

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

background-repeat

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | repeat
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat

Описание

Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра background-image, и по какой оси. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.

Синтаксис

background-repeat: no-repeat | repeat | repeat-x | repeat-y

Аргументы

no-repeat
Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется атрибутом background-position (по умолчанию в левом верхнем углу).
repeat
Фоновое изображение повторяется по горизонтали и вертикали.
repeat-x
Фоновый рисунок повторяется только по горизонтали
repeat-y
Фоновый рисунок повторяется только по вертикали

Пример

<!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>background-repeat</title>
<style type="text/css">
BODY {
background-image: url('mybg.gif'); /* Путь к фоновому рисунку */
background-position: right bottom; /* Положение фона */
background-repeat: repeat-y; /* Повторяем фон по вертикали */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>

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

[window.]document.getElementById("elementID").style.backgroundRepeat


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

Справочник по CSS
Графика для Web

border

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | Зависит от используемых аргументов
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <img border > | <table border>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-border

Описание

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

Синтаксис

border: border-width || border-style || color

Аргументы

Значение border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений параметра border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

Аргумент 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>border</title>
<style type="text/css">
DIV.brd {
border: 4px double black; /* Параметры границы */
background: #fc3; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>

<div class="brd">
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

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

[window.]document.getElementById("elementID").style.border

Примечание

Значения dotted и dashed поддерживаются браузером Internet Explorer только начиная с версии 5.5.


Справочник по CSS - border-bottom

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

border-bottom

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | Зависит от используемых аргументов
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <img border > | <table border>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties

Описание

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

Синтаксис

border-bottom: border-width || border-style || color

Аргументы

Значение border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений параметра border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

Первые два стиля — dotted и dashed поддерживаются браузером Internet Explorer с версии 5.5.

Аргумент 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>border-bottom</title>
<style type="text/css">
.panel {
background: #ccc; /* Цвет фона */
}

.panel P.content {
padding: 5px; /* Добавляем поля */
margin: 0px; /* Убираем отступы у параграфа */
border-top: 2px dotted white; /* Параметры линии вверху */
}

.panel P.title {
font-family: sans-serif; /* Рубленый шрифт */
font-weight: bold; /* Жирное начертание */
font-size: 90%; /* Размер шрифта */
padding: 5px; /* Добавляем поля */
margin: 0px; /* Убираем отступы у параграфа */
background: maroon; /* Цвет фона */
color: white; /* Цвет текста */
border-bottom: 2px solid white; /* Параметры линии внизу */
}
</style>
</head>
<body>

<div class="panel">
<p class="title">Lorem ipsum dolor sit amet</p>
<p class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</div>

</body>
</html>

Результат данного примера показан ни рис. 2.

Рис. 2. Применение параметра border-bottom

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

[window.]document.getElementById("elementID").style.borderBottom


Справочник по CSS - border-bottom-color

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

border-bottom-color

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | Значение цвета, заданное параметром color
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <img border > | <table border>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-color-properties

Описание

Устанавливает цвет границы внизу элемента.

Синтаксис

border-bottom-color: цвет

Аргументы

Значение цвета можно задавать тремя способами.

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. Также можно задавать цвет в процентном отношении.

Пример

<!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>border-bottom-color</title>
<style type="text/css">
DIV#panel {
background: #ccc; /* Цвет фона */
}

#panel P {
padding: 5px; /* Добавляем поля */
margin: 0px; /* Убираем отступы у параграфа */
}

#panel P#title {
background: navy; /* Цвет фона */
color: white; /* Цвет текста */
border-bottom-width: 2px; /* Толщина линии внизу */
border-bottom-style: solid; /* Стиль линии внизу */
border-bottom-color: white; /* Цвет линии внизу */
}
</style>
</head>
<body>

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

</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1. Применение параметра border-bottom-color

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

[window.]document.getElementById("elementID").style.borderBottomColor


Справочник по CSS - border-bottom-style

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

border-bottom-style

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <img border > | <table border>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-style-properties

Описание

Устанавливает стиль границы внизу элемента.

Синтаксис

border-bottom-style: стиль

Аргументы

Для управления видом рамки предоставляется восемь значений параметра border-bottom-style. Их названия и результат действия представлен на рис. 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>border-bottom-style</title>
<style type="text/css">
DIV#panel {
background: #ccc; /* Цвет фона */
}

#panel P {
padding: 5px; /* Добавляем поля */
margin: 0px; /* Убираем отступы у параграфа */
}

#panel P#title {
background: navy; /* Цвет фона */
color: white; /* Цвет текста */
border-bottom-width: 2px; /* Толщина линии внизу */
border-bottom-style: solid; /* Стиль линии внизу */
border-bottom-color: white; /* Цвет линии внизу */
}
</style>
</head>
<body>

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

</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1. Применение параметра border-bottom-style

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

[window.]document.getElementById("elementID").style.borderBottomStyle


Справочник по CSS - border-bottom-width

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

border-bottom-width

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | medium
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <img border > | <table border>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-width-properties

Описание

Устанавливает толщину границы внизу элемента.

Синтаксис

border-bottom-width: thin | medium | thick | значение

Аргументы

Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (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>border-bottom-style</title>
<style type="text/css">
H1 {
border-color: #ccc; /* Цвет границы */
border-style: double; /* Стиль границы */
border-bottom-width: 7px; /* Толщина линии внизу текста */
border-right-width: 7px; /* Толщина линии справа от текста */
padding-left: 5px; /* Отступ слева от текста */
}
</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.</p>

</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1. Применение параметра border-bottom-width

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

[window.]document.getElementById("elementID").style.borderBottomWidth


Справочник по CSS - border-color

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

border-color

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | Значение цвета, заданное параметром color
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <img border> | <table border>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-border-color

Описание

Устанавливает цвет границы на разных сторонах элемента. Параметр позволяет задать цвет границы сразу на всех сторонах элемента или определить цвет границы только на указанных сторонах.

Синтаксис

border-color: color {1,4}

Аргументы

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

Табл. 1. Изменение цвета в зависимости от числа аргументов
Число аргументов | Результат
1 | Цвет рамки будет установлен для всех сторон элемента.
2 | Первый аргумент устанавливает цвет верхней и нижней границы, второй аргумент — левой и правой.
3 | Первый аргумент задает цвет верхней границы, второй — одновременно левой и правой стороны, а третий — нижней границы.
4 | Поочередно устанавливается цвет верхней, правой, нижней и левой границы.

Пример

<!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>border-color</title>
<style type="text/css">
H1 {
border-color: red white; /* Цвет границы */
border-style: solid; /* Стиль границы */
}
P {
border-color: #008a77; /* Цвет границы */
border-style: solid; /* Стиль границы */
padding: 5px; /* Поля вокруг текста */
}
</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.</p>

</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Использование атрибута border-color

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

[window.]document.getElementById("elementID")style.borderColor


Справочник по CSS - border-left

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

border-left

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | Зависит от используемых аргументов
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <img border > | <table border>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties

Описание

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

Синтаксис

border-left: border-width || border-style || color

Аргументы

Значение border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений параметра border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

Первые два стиля — dotted и dashed поддерживаются браузером Internet Explorer с версии 5.5.

Аргумент 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>border-left</title>
<style type="text/css">
DIV.line {
border-left: 2px dotted green; /* Линия слева от текста */
padding-left: 10px; /* Расстояние между линией и текстом */
margin-left: 10px; /* Расстояние от левого края до линии */
}
</style>
</head>
<body>

<div class="line">
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-left

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

[window.]document.getElementById("elementID").style.borderLeft


Справочник по CSS - border-left-color

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

border-left-color

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | Значение цвета, заданное параметром color
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <img border > | <table border>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-color-properties

Описание

Задает цвет границы слева от элемента.

Синтаксис

border-left-color: цвет

Аргументы

Значение цвета можно задавать тремя способами.

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. Также можно задавать цвет в процентном отношении.

Пример

<!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>border-left-color</title>
<style type="text/css">
DIV.line {
border-left-color: #fc0; /* Цвет линии слева */
border-left-style: solid; /* Стиль линии */
border-left-width: 7px; /* Толщина линии */
padding-left: 10px; /* Расстояние между линией и текстом */
}
</style>
</head>
<body>

<div class="line">
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>

Результат данного примера показан на рис. 1.

Рис. 1. Результат использования border-left-color

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

[window.]document.getElementById("elementID").style.borderLeftColor


Справочник по CSS - border-left-style

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

border-left-style

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <img border > | <table border>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-style-properties

Описание

Устанавливает стиль границы слева от элемента.

Синтаксис

border-left-style: стиль

Аргументы

Для управления видом рамки предоставляется восемь значений параметра border-left-style. Их названия и результат действия представлен на рис. 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>border-left-style</title>
<style type="text/css">
DIV.line {
border-left-color: red; /* Цвет линии слева */
border-left-style: double; /* Стиль линии */
border-left-width: 7px; /* Толщина линии */
padding-left: 10px; /* Расстояние между линией и текстом */
}
</style>
</head>
<body>

<div class="line">
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-left-style

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

[window.]document.getElementById("elementID").style.borderLeftStyle


Справочник по CSS - border-left-width

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

border-left-width

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | medium
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <img border > | <table border>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-width-properties

Описание

Устанавливает толщину границы слева от элемента.

Синтаксис

border-left-width: thin | medium | thick | значение

Аргументы

Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (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>border-left-width</title>
<style type="text/css">
DIV.line {
border-left-color: red; /* Цвет линии слева */
border-left-style: double; /* Стиль линии */
border-left-width: thick; /* Толщина линии */
padding-left: 10px; /* Расстояние между линией и текстом */
}
</style>
</head>
<body>

<div class="line">
<h3>Обратите внимание!</h3>
<p>В наши расчеты не входит задача взорвать весь город, поэтому будьте аккуратнее, когда начнете пересыпать ядерное топливо из мешка. Чтобы не загрязнить комнату, не забудьте положить на пол газету.</p>
</div>

</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1. Использование свойства border-left-width

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

[window.]document.getElementById("elementID").style.borderLeftWidth


Справочник по CSS - border-right

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

border-right

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | Зависит от используемых аргументов
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <img border > | <table border>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties

Описание

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

Синтаксис

border-right: border-width || border-style || color

Аргументы

Значение border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений параметра border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

Первые два стиля — dotted и dashed поддерживаются браузером Internet Explorer с версии 5.5.

Аргумент 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>border-right</title>
<style type="text/css">
DIV.line {
border-left: 1px solid red; /* Линия слева от текста */
border-right: 1px solid red; /* Линия справа от текста */
padding: 0px 10px; /* Расстояние между линией и текстом */
margin: 0px 10%; /* Отступы от края до линии */
}
</style>
</head>
<body>

<div class="line">
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

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

[window.]document.getElementById("elementID").style.borderRight


Справочник по CSS - border-right-color

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

border-right-color

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | Значение цвета, заданное параметром color
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <img border> | <table border>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-color-properties

Описание

Задает цвет границы справа от элемента.

Синтаксис

border-right-color: цвет

Аргументы

Значение цвета можно задавать тремя способами.

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. Также можно задавать цвет в процентном отношении.

Пример

<!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>border-right-color</title>
<style type="text/css">
DIV.line {
border-right-color: navy; /* Цвет линии справа */
border-right-style: dotted; /* Стиль линии */
border-right-width: 3px; /* Толщина линии */
padding-right: 10px; /* Расстояние между линией и текстом */
margin-right: 100px; /* Отступ справа */
}
</style>
</head>
<body>

<div class="line">
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>

Результат данного примера показан ни рис. 1.

Рис. 1. Применение параметра border-right-color

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

[window.]document.getElementById("elementID").style.borderRightColor


Справочник по CSS - border-right-style

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

border-right-style

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <img border > | <table border>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-style-properties

Описание

Устанавливает стиль границы справа от элемента.

Синтаксис

border-right-style: стиль

Аргументы

Для управления видом рамки предоставляется восемь значений параметра border-right-style. Их названия и результат действия представлен на рис. 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>border-right-style</title>
<style type="text/css">
DIV.line {
border-right-color: #ef40b0; /* Цвет линии справа */
border-right-style: dotted; /* Стиль линии */
border-right-width: 3px; /* Толщина линии */
border-left-color: #ef40b0; /* Цвет линии слева */
border-left-style: dotted; /* Стиль линии */
border-left-width: 3px; /* Толщина линии */
padding: 0 10px; /* Расстояние между линией и текстом */
margin: 0 50px; /* Отступы справа и слева */
}
</style>
</head>
<body>

<div class="line">
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-style

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

[window.]document.getElementById("elementID").style.borderRightStyle


Справочник по CSS - border-right-width

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

border-right-width

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | medium
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <img border > | <table border>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-width-properties

Описание

Устанавливает толщину границы справа от элемента.

Синтаксис

border-right-width: thin | medium | thick | значение

Аргументы

Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (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>border-right-width</title>
<style type="text/css">
DIV.line {
border-right-color: #c38e63; /* Цвет линии справа */
border-right-style: dashed; /* Стиль линии */
border-right-width: 2px; /* Толщина линии */
border-left-color: #c38e63; /* Цвет линии слева */
border-left-style: dashed; /* Стиль линии */
border-left-width: 2px; /* Толщина линии */
padding: 0 10px; /* Расстояние между линией и текстом */
}
</style>
</head>
<body>

<div class="line">
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>

Результат данного примера показан ни рис. 1.

Рис. 1. Применение параметра border-right-width

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

[window.]document.getElementById("elementID").style.borderRightWidth


Справочник по CSS - border-style

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

border-style

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <img border > | <table border>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-style-properties

Описание

Устанавливает стиль рамки вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.

Синтаксис

border-style: стиль

Аргументы

Для управления видом рамки предоставляется восемь значений параметра border-style. Вид рамки зависит от используемого браузера и заданной толщины границы. В табл. 1 приведены названия стилей и получаемая рамка при разных значениях толщины — 1, 3, 5 и 7 пикселов.

Табл. 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

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества аргументов и указан в табл. 2.

Табл. 2. Зависимость результата использования атрибута от числа аргументов
Число аргументов | Результат
1 | Стиль рамки будет задан для всех сторон элемента.
2 | Первый аргумент устанавливает стиль верхней и нижней границы, второй аргумент — левой и правой.
3 | Первый аргумент задает стиль верхней границы, второй — одновременно левой и правой стороны, а третий — нижней границы.
4 | Поочередно устанавливается стиль верхней, правой, нижней и левой границы.

Пример

<!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>border-style</title>
<style type="text/css">
P {
border-style: double; /* Стиль линии вокруг параграфа */
padding: 5px; /* Поля вокруг текста */
}
</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.

Рис. 1. Применение параметра border-style

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

[window.]document.getElementById("elementID").style.borderStyle


Справочник по CSS - border-top

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

border-top

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | Зависит от используемых аргументов
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <img border > | <table border>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties

Описание

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

Синтаксис

border-top: border-width || border-style || color

Аргументы

Значение border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений параметра border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

Первые два стиля — dotted и dashed поддерживаются браузером Internet Explorer с версии 5.5.

Аргумент 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>border-top</title>
<style type="text/css">
DIV.line {
border-top: 1px solid red; /* Линия сверху текста */
border-bottom: 1px solid red; /* Линия снизу текста */
padding: 5px; /* Поля вокруг текста */
}
</style>
</head>
<body>

<div class="line">
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-top

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

[window.]document.getElementById("elementID").style.borderTop


Справочник по CSS - border-top-color

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

border-top-color

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | Значение цвета, заданное параметром color
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <img border > | <table border>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-color-properties

Описание

Задает цвет границы сверху элемента.

Синтаксис

border-top-color: цвет

Аргументы

Значение цвета можно задавать тремя способами.

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. Также можно задавать цвет в процентном отношении.

Пример

<!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>border-top-color</title>
<style type="text/css">
H1 {
border-top-color: #ccc; /* Цвет линии сверху */
border-top-style: double; /* Стиль линии сверху */
border-top-width: 7px; /* Толщина линии сверху */
border-left-color: #ccc; /* Цвет линии слева */
border-left-style: solid; /* Стиль линии */
border-left-width: 2px; /* Толщина линии */
padding: 7px; /* Поля вокруг текста */
}
</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.

Рис. 1. Применение параметра border-top-color

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

[window.]document.getElementById("elementID").style.borderTopColor


Справочник по CSS - border-top-style

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

border-top-style

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <img border > | <table border>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-style-properties

Описание

Устанавливает стиль границы сверху элемента.

Синтаксис

border-top-style: стиль

Аргументы

Для управления видом рамки предоставляется восемь значений параметра border-top-style. Их названия и результат действия представлен на рис. 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>border-top-style</title>
<style type="text/css">
H1 {
border-top-color: #800000; /* Цвет линии сверху */
border-top-style: double; /* Стиль линии сверху */
border-top-width: 7px; /* Толщина линии сверху */
border-left-color: #bd0000; /* Цвет линии слева */
border-left-style: solid; /* Стиль линии */
border-left-width: 2px; /* Толщина линии */
padding: 7px; /* Поля вокруг текста */
}
</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>

Результат данного примера показан ни рис. 2.

Рис. 2. Применение параметра border-top-style

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

[window.]document.getElementById("elementID").style.borderTopStyle


Справочник по CSS - border-top-width

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

border-top-width

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | medium
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <img border > | <table border>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-width-properties

Описание

Устанавливает толщину границы сверху элемента.

Синтаксис

border-top-width: thin | medium | thick | значение

Аргументы

Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (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>border-top-width</title>
<style type="text/css">
H1 {
border-top-color: green; /* Цвет линии сверху */
border-top-style: double; /* Стиль линии сверху */
border-top-width: 7px; /* Толщина линии сверху */
border-right-color: green; /* Цвет линии слева */
border-right-style: double; /* Стиль линии */
border-right-width: 5px; /* Толщина линии */
padding: 7px; /* Поля вокруг текста */
color: #f9b61c; /* Цвет текста */
}
</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.

Рис. 1. Применение параметра border-top-width

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

[window.]document.getElementById("elementID").style.borderTopWidth


Справочник по CSS - border-width

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

border-width

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | medium
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <img border > | <table border>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#border-width-properties

Описание

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

Синтаксис

border-width: thin | medium | thick | значение

Аргументы

Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы. Для более точного значения, толщину можно указывать в пикселах или других единицах. Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества аргументов и приведен в табл. 1.

Табл. 1. Зависимость результата использования атрибута от числа аргументов
Число аргументов | Результат
1 | Толщина рамки будет установлена для всех сторон элемента.
2 | Первый аргумент устанавливает толщину верхней и нижней границы, второй аргумент — левой и правой.
3 | Первый аргумент задает толщину верхней границы, второй — одновременно левой и правой стороны, а третий — нижней границы.
4 | Поочередно устанавливается толщину верхней, правой, нижней и левой границы.

Пример

<!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>border-width</title>
<style type="text/css">
P {
border-style: double; /* Стиль рамки вокруг параграфа */
border-width: 3px 7px 7px 4px; /* Толщина границы */
padding: 7px; /* Поля вокруг текста */
}
</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.

Рис. 1. Применение параметра border-width

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

[window.]document.getElementById("elementID").style.borderWidth


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

Справочник по CSS
Графика для Web

bottom

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS2
Значение по умолчанию | auto
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom

Описание

Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от параметра position, он обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).

При относительном позиционировании элемента, отсчет ведется от нижнего края исходного положения элемента (рис. 1), а при абсолютном — относительно нижнего края окна документа (рис. 2).

Рис. 1. Значение параметра bottom при относительном позиционирование элемента

Рис. 1. Значение параметра bottom при относительном позиционирование элемента

Рис. 2. Значение параметра bottom при абсолютном позиционирование элемента

Рис. 2. Значение параметра bottom при абсолютном позиционирование элемента

Синтаксис

bottom: значение | проценты | auto

Аргументы

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение параметра bottom может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента. Аргумент 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>bottom</title>
<style type="text/css">
#layer {
bottom: 20px; /* Расстояние от нижнего края окна браузера */
position: absolute; /* Абсолютное позиционирование */
background: #f0f0f0; /* Цвет фона */
padding: 7px; /* Поля вокруг текста */
border: solid 1px black; /* Параметры рамки */
}
</style>
</head>
<body>

<div id="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>

Результат данного примера показан ни рис. 3.

Рис. 3. Применение параметра bottom

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

[window.]document.getElementById("elementID").style.bottom


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

Справочник по CSS
Графика для Web

clear

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | none
Наследуется | Нет
Применяется | К блочным и плавающим элементам
Аналог HTML | <br clear=left | right | all>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visuren.html#propdef-clear

Описание

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

Синтаксис

clear: both | left | none | right

Аргументы

both
Отменяет обтекание элемента одновременно с правого и левого края. Этот аргумент рекомендуется установить, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.
left
Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
right
Отменяет обтекание с правой стороны элемента.
none
Отменяет действие данного свойства и обтекание элемента происходит, как задано с помощью параметра float или других настроек.

Пример

<!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>clear</title>
<style type="text/css">
#layer {
float: left; /* Обтекание блока по правому краю */
background: #fd0; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
padding: 10px; /* Поля вокруг текста */
width: 40%; /* Ширина блока */
}
</style>
</head>
<body>

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

<div style="clear: left"></div>

<p>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.</p>

</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1. Применение параметра clear

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

[window.]document.getElementById("elementID").style.clear


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

Справочник по CSS
Графика для Web

clip

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Ошибки | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS2
Значение по умолчанию | auto
Наследуется | Нет
Применяется | К блочным и заменяемым элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visufx.html#propdef-clip

Описание

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

Синтаксис

clip: rect(Y1, X1, Y2, X2) | auto

Аргументы

В качестве аргументов используется расстояние от края элемента до области вырезки, которое задается в единицах CSS — пикселы (px), проценты (%) и др. Если край области нужно оставить без изменений, следует поставить параметр auto, положение остальных значений показано на рис. 1.

Рис. 1. Значения параметра clip

Рис. 1. Значения параметра clip

Пример

<!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>clip</title>
<style type="text/css">
#layer {
position: absolute; /* Абсолютное позиционирование */
clip: rect(40px, auto, auto, 40px); /* Прячем часть текста */
width: 200px; /* Ширина блока */
color: white; /* Цвет текста */
background: #7f4c3e; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>

<div id="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.

Рис. 2. Применение параметра clip в браузере Opera 9.23

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

[window.]document.getElementById("elementID").style.clip

Примечание

Браузер Opera 7 (в версии 8 и старше иначе) скрывает только содержимое блочного элемента, а фон и рамку оставляет неизменной. На рис. 3 показан результат приведенного примера в браузере Opera 7.

Рис. 3. Использование параметра clip в браузере Opera 7

Другие браузеры отображают пример по иному. Так, браузер Firefox скрывает не только текст, но также фон и рамку, как показано на рис. 4.

Рис. 4. Использование параметра clip в браузере Firefox


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

Справочник по CSS
Графика для Web

color

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | Зависит от настроек браузера, обычно черный цвет
Наследуется | Да
Применяется | Ко всем элементам
Аналог HTML <body text="цвет">
<font color="цвет">
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/colors.html#propdef-color

Описание

Определяет цвет текста элемента.

Синтаксис

color: значение

Аргументы

Значение цвета можно задавать тремя способами.

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. Также можно задавать цвет в процентном отношении.

Пример

<!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>color</title>
<style type="text/css">
.letter {
color: red; /* Цвет символа */
font-size: 200%; /* Размер шрифта */
}

P {
color: RGB(49, 151, 116); /* Цвет текста */
}
</style>
</head>
<body>

<p><span class="letter">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
<p><span class="letter">U</span>t wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1. Использование атрибута color

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

[window.]document.getElementById("elementID").style.color


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

Справочник по CSS
Графика для Web

content

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Нет | Нет | Нет | Част. | Част. | Да | Да | Да | Да | Да | Част. | Да | Да | Да

Част. — поддерживается частично.

Краткая информация

CSS | CSS2
Значение по умолчанию | Пустая строка
Наследуется | Нет
Применяется | К псевдоэлементам before и after
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/generate.html#content

Описание

Атрибут content позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует. Применяется совместно с псевдоэлементами after и before, они соответственно указывают отображать новое содержимое после или до элемента, к которому добавляются.

Синтаксис

content: строка | attr(атрибут) | open-quote | close-quote | no-open-quote | no-close-quote | url }

Аргументы

Строка
Текст, который добавляется на веб-страницу, строка при этом должна браться в двойные или одинарные кавычки. Допускается использовать юникод для вставки спецсимволов. Спецсимволы HTML которые начинаются с амперсанда (&sect; например), будут отображаться как есть, т.е. простым текстом (&sect;, а не §).
attr(атрибут)

Возвращает строку, которая является значением атрибута указанного в скобках. Например, IMG:after{content:attr(href)} добавит после изображения его адрес, т.е. значение параметра href. Если указанного атрибута нет, то вернется пустая строка.

open-quote
Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого параметра quotes.
close-quote
Вставляет закрывающую кавычку, тип которой устанавливается с помощью стилевого параметра quotes.
no-open-quotes
Открывающая кавычка не вставляется в то место, где она должна быть добавлена. Например, тег <Q> автоматически добавляет кавычки к содержащему внутри него тексту.
no-close-quote
Отменяет добавление закрывающей кавычки.
url
Абсолютный или относительный адрес вставляемого объекта. Если указанный файл браузер не может отобразить, то значение игнорируется.

Пример

<!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>content</title>
<style type="text/css">
SPAN.tag {
color: navy; /* Цвет текста */
font-family: monospace; /* Моношириный шрифт */
quotes: "<" ">"; /* Устанавливаем вид кавычек */
}

SPAN.tag:before {
content: open-quote; /* Добавляем перед текстом открывающую кавычку */
}

SPAN.tag:after {
content: close-quote; /* Добавляем после текста закрывающую кавычку */
}
</style>
</head>
<body>

<p>Тег <span class="tag">DEL</span> используется для выделения текста, который был удален в новой версии документа.</p>

</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1. Применение параметра content

Примечание

Браузер Opera начиная с седьмой версии, не требует использования псевдоэлементов before и after и допускает применение content ко всем элементам.


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

Справочник по CSS
Графика для Web

cursor

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Част. | Част. | Част. | Да | Част. | Част. | Да | Да

Част. — поддерживается частично.

Краткая информация

CSS | CSS2
Значение по умолчанию | auto
Наследуется | Да
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/ui.html#cursor-props

Описание

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

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

Синтаксис

cursor: 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 || url('путь к курсору')

Аргументы

auto — вид курсора по умолчанию для текущего элемента;
url — позволяет установить свой собственный курсор, для этого нужно указать путь к файлу, в котором указана форма курсора, в формате CUR или ANI. Данный параметр не работает в браузере Opera, Safari, Mozilla и Firefox 1.0. Остальные допустимые аргументы приведены в табл. 1.

Табл. 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}
 | 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}

В зависимости от операционной системы и ее настроек вид курсора может отличаться от приведенных в таблице.

Пример

<!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>cursor</title>
<style type="text/css">
.cross { cursor: crosshair; }
.help { cursor: help; }
</style>
</head>
<body>

<p class="cross">На этом тексте курсор мыши примет вид перекрестья.</p>
<p>
<a href="help1.htm" class="help">СПРАВКА 1</a><br>
<a href="help2.htm" class="help">СПРАВКА 2</a><br>
<a href="help3.htm" class="help">СПРАВКА 3</a>
</p>

</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1. Применение параметра cursor

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

[window.]document.getElementById("elementID").style.cursor

Примечание

Некоторые браузеры поддерживают дополнительные формы курсоров. Например, Internet Explorer работает со значением hand, которое является аналогом значения pointer. Кроме того, только в этом браузере будут действовать следующие аргументы: all-scroll, col-resize, no-drop, not-allowed, row-resize, vertical-text.


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

Справочник по CSS
Графика для Web

display

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.5 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Част. | Част. | Част. | Част. | Част. | Част. | Част. | Да | Да | Да | Част. | Част. | Част. | Част.

Част — Поддерживается частично.

Краткая информация

CSS | CSS2
Значение по умолчанию | inline
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visuren.html#display-prop

Описание

Многоцелевой атрибут, который определяет, как элемент должен быть показан в документе.

Синтаксис

display: block | inline | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-footer-group | table-header-group | table-row | table-row-group

Аргументы

Список возможных значений этого атрибута, понимаемый разными браузерами очень короткий — block, inline, list-item и none. Все остальные допустимые аргументы поддерживаются браузерами выборочно. В табл. 1 приведены некоторые популярные браузеры и их поддержка различных свойств.

Табл. 1. Поддержка браузерами значений свойства display
Аргумент | Описание | IE 6 | IE 7 | Opera 8 | Opera 9.5 | Firefox 1.0 | Firefox 2 | Firefox 3
block | Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <SPAN>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого. | Да | Да | Да | Да | Да | Да | Да
inline | Элемент отображается как встроенный. Использование блочных тегов, таких как <DIV> и <P>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Аргумент inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент. | Да | Да | Да | Да | Да | Да | Да
inline-block | Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <IMG>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный. | Да | Да | Да | Да | Нет | Нет | Да
inline-table | Определяет, что элемент является таблицей как при использовании тега <TABLE>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом. | Нет | Нет | Да | Да | Нет | Нет | Да
list-item | Элемент выводится как блочный и добавляется маркер списка. | Да | Да | Да | Да | Да | Да | Да
none | Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение параметра и сделать его вновь видимым можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происхоит переформатирование данных на странице с учетом вновь добавленного элемента. | Да | Да | Да | Да | Да | Да | Да
run-in | Устанавливает элемент как блочный или встроенный в зависимости от контекста. | Нет | Нет | Да | Да | Нет | Нет | Нет
table | Определяет, что элемент является блочной таблицей подобно использованию тега <TABLE>. | Нет | Нет | Да | Да | Да | Да | Да
table-caption | Задает заголовок таблицы подобно применению тега <CAPTION>. | Нет | Нет | Да | Да | Да | Да | Да
table-cell | Указывает, что элемент представляет собой ячейку таблицы (тег <TD> или <TH>). | Нет | Нет | Да | Да | Да | Да | Да
table-column | Назначает элемент колонкой таблицы, словно был добавлен тег <COL>. | Нет | Нет | Нет | Да | Да | Да | Да
table-column-group | Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <COLGROUP>. | Нет | Нет | Нет | Да | Да | Да | Да
table-footer-group | Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега <TFOOT>. | Нет | Нет | Да | Да | Да | Да | Да
table-header-group | Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <THEAD>. | Нет | Нет | Да | Да | Да | Да | Да
table-row | Элемент отображается как строка таблицы (тег <TR>). | Нет | Нет | Да | Да | Да | Да | Да
table-row-group | Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <TBODY>. | Нет | Нет | Да | Да | Да | Да | Да

Пример

<!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: 0px 0px 1em; /* Отступы вокруг */
}

.exampleTitle {
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">
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;<br>
&lt;html&gt;<br>
&lt;body&gt;<br>
&lt;b&gt;Формула серной кислоты:&lt;/b&gt;
&lt;i&gt;H&lt;sub&gt;&lt;small&gt;2&lt;/small&gt;&lt;/sub&gt;
SO&lt;sub&gt;&lt;small&gt;4&lt;/small&gt;
&lt;/sub&gt;&lt;/i&gt;<br>
&lt;/body&gt;<br>
&lt;/html&gt;
</p>

</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1. Применение параметра display

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

[window.]document.getElementById("elementID").style.display


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

Справочник по CSS
Графика для Web

float

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 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

Описание

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

Синтаксис

float: left | right | none

Аргументы

left
Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, огибают его по правой стороне.
right
Выравнивает элемент по правому краю, а все остальные элементы огибают его по левой стороне.
none
Обтекание элемента не задается.

Пример

<!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.
</div>

</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1. Применение параметра float

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

[window.]document.getElementById("elementID").style.styleFloat
[window.]document.getElementById("elementID").style.cssFloat


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

Справочник по CSS
Блог Волотко Дмитрия

font

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | Зависит от используемых аргументов
Наследуется | Да
Применяется | Ко всем элементам
Аналог HTML | <I>, <B>, <FONT>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/fonts.html#propdef-font

Описание

Универсальный параметр, который позволяет установить одновременно несколько атрибутов стиля шрифта.

Синтаксис

font: [font-style || font-variant || font-weight] font-size [/line-height] font-family

Аргументы

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

Примеры использования

p { font: 12pt/10pt sans-serif; }

Из типографики пошла запись указывать через слэш размер шрифта и межстрочное расстояние (интерлиньяж). Поэтому 12pt в данном случае означает размер основного текста в пунктах, а 10pt — интерлиньяж. В качестве семейства указывается рубленый шрифт (sans-serif).

p { font: bold italic 110% serif; }

Аргумент bold устанавливает жирное начертание текста, а italic — курсивное. В данном случае порядок этих значений не важен, поэтому их можно поменять местами. Размер текста задается в процентах, а в качестве гарнитуры используется шрифт с засечками (serif).

p { font: normal small-caps 12px/14px fantasy; }

Значение small-caps принадлежит параметру font-variant и устанавливает текст в виде капители (заглавные буквы уменьшенного размера). Аргумент normal применяется сразу к двум свойствам: font-style и font-weight.

Пример

<!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>
</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


Справочник по CSS - font-family

Справочник по CSS
Графика для Web

font-family

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | Шрифт, установленный в браузере по умолчанию. Обычно это Times New Roman.
Наследуется | Да
Применяется | Ко всем элементам
Аналог HTML | <font face="...">
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/fonts.html#propdef-font-family

Описание

Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.

Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.

Синтаксис

font-family: имя шрифта [, имя шрифта[, ...]]

Аргументы

Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:
serif — шрифты с засечками (антиквенные), типа Times;
sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
cursive — курсивные шрифты;
fantasy — декоративные шрифты;
monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова.

Пример

<!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>
<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


Справочник по CSS - font-size

Справочник по CSS
Блог Волотко Дмитрия

font-size

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | medium
Наследуется | Да
Применяется | Ко всем элементам
Аналог HTML | <font size="...">
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size

Описание

Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задают размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

Другой набор констант (larger, smaller) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.

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

Синтаксис

font-size: абсолютный размер | относительный размер | значение | проценты

Аргументы

Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large. Соответствие этих аргументов с размером шрифта в HTML приведено в табл. 1.

Табл. 1. Размер шрифта в CSS и HTML
CSS | xx-small | x-small | small | medium | large | x-large | xx-large |
HTML | 1 |  | 2 | 3 | 4 | 5 | 6 | 7

Относительный размер шрифта задается аргументами 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>
<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

Примечание

Задание размера шрифта font-size: medium приведет к различным размерам шрифта в браузерах Internet Explorer и Netscape (Firefox).


Справочник по CSS - font-style

Справочник по CSS
Блог Волотко Дмитрия

font-style

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS2
Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам
Аналог HTML | <I>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/fonts.html#propdef-font-style

Описание

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

Синтаксис

font-style: normal | italic | oblique

Аргументы

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

Пример

<!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.

Рис. 1. Применение параметра font-style

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

[window.]document.getElementById("elementID").style.fontStyle

Примечание

В браузере Internet Explorer шрифт со значением italic и oblique всегда показывается как курсив.


Справочник по CSS - font-variant

Справочник по CSS
Блог Волотко Дмитрия

font-variant

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/fonts.html#propdef-font-variant

Описание

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

Синтаксис

font-variant: normal | small-caps

Аргументы

normal
Оставляет регистр символов исходным, заданным по умолчанию.
small-caps
Модифицирует все строчные символы как заглавные уменьшенного размера, как показано на рис. 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>
</html>

Результат данного примера показан ни рис. 2.

Рис. 2. Применение параметра font-variant

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

[window.]document.getElementById("elementID").style.fontVariant


Справочник по CSS - font-weight

Справочник по CSS
Графика для Web

font-weight

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам
Аналог HTML | <B>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/fonts.html#propdef-font-weight

Описание

Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700. Другие аргументы (bolder и lighter) позволяют менять жирность текста относительно насыщенности родительского элемента.

Синтаксис

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.

Рис. 1. Применение параметра font-weight

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

[window.]document.getElementById("elementID").style.fontWeight

Примечание

Браузер не всегда может адекватно показать требуемую насыщенность шрифта, это зависит от размеров текста и вида шрифта.


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

Справочник по CSS
Блог Волотко Дмитрия

height

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | auto
Наследуется | Нет
Применяется | Ко всем элементам, за исключением встроенных незаменяемых элементов, колонкам и группам таблицы
Аналог HTML <table height="">
<img height="">
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visudet.html#propdef-height

Описание

Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег <IMG>). Высота не включает толщину границ вокруг элемента, значение отступов и полей.

Браузеры по-разному реагируют на настройки высоты элемента. Если его содержимое превышает указанную высоту, то Internet Explorer и Opera проигнорируют значение параметра height и автоматически подстроят высоту под контент. Браузер Netscape (а также Mozilla и Firefox) оставит высоту элемента неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML они идут последовательно. Чтобы этого не произошло, можно добавить свойство overflow: auto к стилю элемента.

Синтаксис

height: значение | проценты | auto

Аргументы

В качестве значений принимаются любые единицы длины, принятые в 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.

Рис. 1. Применение параметра height

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

[window.]document.getElementById("elementID").style.height


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

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

left

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS2
Значение по умолчанию | auto
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visuren.html#propdef-left

Описание

Для позиционированного элемента определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента (рис. 1). Отсчет координат зависит от значения параметра position. Если его аргумент равен absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его левого края. В случае значения relative, аргумент left отсчитывается от левого края исходного положения элемента.

Рис. 1. Значение параметра left

Рис. 1. Значение параметра left

Синтаксис

left: значение | проценты | auto

Аргументы

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение параметра left может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от ширины родительского элемента. Аргумент 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>left</title>
<style type="text/css">
.layer1 {
position: absolute; /* Абсолютное позиционирование */
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


Справочник по CSS - letter-spacing

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

letter-spacing

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/text.html#propdef-letter-spacing

Описание

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

Синтаксис

letter-spacing: значение | normal

Аргументы

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Наилучший результат дает использование относительных единиц основанных на размере шрифта (em и ex). Аргумент normal задает интервал между символами как обычно.

Пример

<!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.

Рис. 1. Применение параметра letter-spacing

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

[window.]document.getElementById("elementID").style.letterSpacing


Справочник по CSS - line-height

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

line-height

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height

Описание

Устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически. Отрицательное значение межстрочного расстояния не допускается.

Синтаксис

line-height: normal | множитель | значение | проценты

Аргументы

Значение normal заставляет браузер вычислять расстояние между строк автоматически. Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 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.

Рис. 1. Применение параметра line-height

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

[window.]document.getElementById("elementID").style.lineHeight


Справочник по CSS - list-style

Справочник по CSS
Блог Волотко Дмитрия

list-style

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS2
Значение по умолчанию | disc (для <UL>); decimal (для <OL>)
Наследуется | Да
Применяется | К тегам <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

Описание

Атрибут, позволяющий одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера. Для более подробного ознакомления с аргументами, смотрите свойства каждого параметра list-style-type, list-style-position и list-style-image отдельно.

Синтаксис

list-style: list-style-type || list-style-position || list-style-image

Аргументы

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

Пример

<!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.

Рис. 1. Применение параметра list-style

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

[window.]document.getElementById("elementID").style.listStyle


Справочник по CSS - list-style-image

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

list-style-image

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 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.

Синтаксис

list-style-image: none | url('путь к файлу')

Аргументы

В качестве значения используется относительный или абсолютный путь к графическому файлу. Аргумент none отменяет изображение в качестве маркера для родительского элемента.

Пример

<!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.

Рис. 1. Применение параметра list-style-image

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

[window.]document.getElementById("elementID").style.listStyleImage

Примечание

В разных браузерах расстояние между изображением и текстом может различаться.


Справочник по CSS - list-style-position

Справочник по CSS
Блог Волотко Дмитрия

list-style-position

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 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-style-position

Описание

Определяет, как будет размещаться маркер относительно текста. Имеется два значения: outside — маркер вынесен за границу элемента списка (рис. 1) и inside — маркер обтекается текстом (рис. 2).

Рис. 1. Значение outside

Рис. 2. Значение inside

Синтаксис

list-style-position: inside | outside

Аргументы

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">
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 параметра list-style-position, числа идущие с 10, начинают накладываться на текст списка.


Справочник по CSS - list-style-type

Справочник по CSS
Блог Волотко Дмитрия

list-style-type

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Ошибки | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | 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

Описание

Изменяет вид маркера для каждого элемента списка. Этот атрибут используется только в случае, когда значение свойства list-style-image установлено как none. Маркеры различаются для маркированного списка (тег <UL>) и нумерованного (тег <OL>).

Синтаксис

list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

Аргументы

Для маркированного списка используются аргументы circle, disc, square. Для нумерованного списка: decimal, lower-alpha, lower-roman, upper-alpha, upper-roman. Аргумент none устанавливает тип маркера, как у родительского элемента. Вид маркеров приведен в табл. 1.

Табл. 1. Типы маркеров
Тип | Пример
disc
circle
square
decimal | 1, 2, 3, ...
lower-roman | i, ii, iii, ...
upper-roman | I, II, III, ...
lower-alpha | a, b, c, ...
upper-alpha | A, B, C, ...

Пример

<!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-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 параметра list-style-position, числа идущие с 10, начинают накладываться на текст списка.


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

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

margin

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-margin

Описание

Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от левого края элемента

Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с учетом того, что у самого окна по умолчанию тоже установлены отступы. Чтобы от них избавиться, следует устанавливать значение margin для селектора <BODY> равное нулю.

Параметр margin позволяет задать величину отступа сразу для всех сторон элемента или определить ее только для указанных сторон.

Синтаксис

margin: значение | auto {1,4}

Аргументы

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества аргументов и приведен в табл. 1.

Табл. 1. Зависимость от числа аргументов
Число аргументов | Результат
1 | Отступы будут установлены для всех сторон элемента.
2 | Первый аргумент устанавливает отступ от верхнего и нижнего края, второй аргумент — от левого и правого.
3 | Первый аргумент задает отступ от верхнего края, второй — одновременно от левого и правого края, а третий — от нижнего края.
4 | Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.

Величину отступов можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент 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>margin</title>
<style type="text/css">
BODY {
margin: 0px; /* Убираем отступы */
}

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

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

[window.]document.getElementById("elementID").style.margin


Справочник по CSS - margin-bottom

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

margin-bottom

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-margin-bottom

Описание

Устанавливает величину отступа от нижнего края элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от нижнего края элемента

Рис. 1. Отступ от нижнего края элемента

Синтаксис

margin-bottom: значение | auto

Аргументы

Величину нижнего отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент 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>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>

<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


Справочник по CSS - margin-left

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

margin-left

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-margin-left

Описание

Устанавливает величину отступа от левого края элемента. Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от левого края элемента

Рис. 1. Отступ от левого края элемента

Синтаксис

margin-left: значение | auto

Аргументы

Величину левого отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент 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>margin-left</title>
<style type="text/css">
.layer1 {
background-color: #D36037; /* Цвет фона */
}

.layer2 {
margin-left: 20%; /* Отступ слева */
background-color: #ccc; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
</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. Применение параметра margin-left

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

[window.]document.getElementById("elementID").style.marginLeft


Справочник по CSS - margin-right

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

margin-right

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-margin-right

Описание

Устанавливает величину отступа от правого края элемента. Отступом является расстояние от внешнего края правой границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от правого края элемента

Рис. 1. Отступ от правого края элемента

Синтаксис

margin-right: значение | auto

Аргументы

Величину правого отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент 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>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; /* Выравнивание по ширине */
}
</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


Справочник по CSS - margin-top

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

margin-top

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-margin-top

Описание

Устанавливает величину отступа от верхнего края элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от верхнего края элемента

Рис. 1. Отступ от верхнего края элемента

Синтаксис

margin-top: значение | auto

Аргументы

Величину верхнего отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент 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>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.
</div>

</body>
</html>

Результат данного примера показан ни рис. 2.

Рис. 2. Применение параметра margin-top

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

[window.]document.getElementById("elementID").style.marginTop


Справочник по CSS - max-width

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

max-height

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Нет | Нет | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS2
Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам, кроме встроенных и таблиц
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visudet.html#min-max-heights

Описание

Устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных параметров height, max-height и min-height. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных свойств.

Табл. 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

Данные из таблицы следует понимать следующим образом. Если значение высоты (height) больше значения max-height, то высота элемента принимается равной значению max-height.

Синтаксис

max-height: значение | none

Аргументы

В качестве значений принимаются пикселы (px) и проценты (%). Значение none убирает все ограничения на высоту.

Пример

<!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>
<div class="block">
<p>Блокирование элемента не позволяет вообще производить с ним каких-либо действий, в том числе выделять содержимое текстового поля, изменять его или активизировать. Заблокированное поле помечается обычно серым цветом</p>
<p>Некоторые браузеры позволяют выделять и копировать содержимое заблокированного текстового поля, но все остальные действия недоступны.</p>
</div>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Результат использования свойства max-height

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

[window.]document.getElementById("elementID").style.maxHeight


Справочник по CSS - max-width

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

max-width

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Нет | Нет | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS2
Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам, кроме встроенных и таблиц
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visudet.html#propdef-max-width

Описание

Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от установленных параметров width, max-width и min-width. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных свойств.

Табл. 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

Данные из таблицы следует понимать следующим образом. Если значение ширины (width) больше значения max-width, то ширина элемента принимается равной значению max-width.

Синтаксис

max-width: значение | none

Аргументы

В качестве значений принимаются пикселы (px) и проценты (%). Значение none убирает все ограничения на ширину.

Пример

<!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>

В данном примере ширина страницы ограничена размером 320 пикселов для всех наладонных устройств. К ним относятся КПК, смартфоны и другие устройства, способные отображать HTML-документы.

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

[window.]document.getElementById("elementID").style.maxWidth


Справочник по CSS - max-width

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

min-height

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Нет | Нет | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS2
Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам, кроме встроенных и таблиц
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visudet.html#min-max-heights

Описание

Задает минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных параметров height, max-height и min-height. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных свойств.

Табл. 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

Данные из таблицы следует понимать следующим образом. Если значение высоты (height) меньше значения min-height, то высота элемента принимается равной min-height.

Синтаксис

max-height: значение | none

Аргументы

В качестве значений принимаются пикселы (px) и проценты (%). Значение none убирает все ограничения на высоту.

Пример

<!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">
<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


Справочник по CSS - min-width

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

min-width

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Нет | Нет | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS2
Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам, кроме встроенных и таблиц
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visudet.html#propdef-min-width

Описание

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

Значение ширины элемента будет вычисляться в зависимости от установленных параметров width, max-width и min-width. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных свойств.

Табл. 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

Данные из таблицы следует понимать следующим образом. Если значение ширины (width) меньше значения min-width, то ширина элемента принимается равной min-width.

Синтаксис

min-width: значение | none

Аргументы

В качестве значений принимаются пикселы (px) и проценты (%). Значение none убирает все ограничения на ширину.

Пример

<!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 {
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


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

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

opacity

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Нет | Нет | Нет | Да | Да | Да | Да | Да | Да | Да | Нет | Нет | Да | Да

Краткая информация

CSS | CSS3
Значение по умолчанию | 1
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/css3-color/#transparency

Описание

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

Синтаксис

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.

Рис. 1. Результат использования opacity

Примечание

Internet Explorer для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где аргумент opacity может принимать значение от 0 до 100.


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

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

overflow

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS2
Значение по умолчанию | visible
Наследуется | Нет
Применяется | К блочным и заменяемым элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow

Описание

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

Синтаксис

overflow: auto | hidden | scroll | visible

Аргументы

visible
Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
hidden
Отображается только область внутри элемента, остальное будет обрезано.
scroll
Всегда добавляются полосы прокрутки.
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>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.

Рис. 1. Применение параметра oveflow

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

[window.]document.getElementById("elementID").style.overflow

Примечание

Браузер Internet Explorer поддерживает также параметр overflow-x, который отображает полосу прокрутки по горизонтали и overflow-y, он отвечает за полосу прокрутки по вертикали. Аргументы те же, что и для overflow.


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

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

padding

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | Нет
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-padding

Описание

Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле слева от текста

Рис. 1. Поле слева от текста

Параметр padding позволяет задать величину поля сразу для всех сторон элемента или определить ее только для указанных сторон.

Синтаксис

padding: значение | auto {1, 4}

Аргументы

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества аргументов и приведен в табл. 1.

Табл. 1. Зависимость от числа аргументов
Число аргументов | Результат
1 | Поля будут установлены для всех сторон содержимого элемента.
2 | Первый аргумент устанавливает поле от верхнего и нижнего края содержимого, второй аргумент — от левого и правого.
3 | Первый аргумент задает поле от верхнего края содержимого, второй — одновременно от левого и правого края, а третий — от нижнего края.
4 | Поочередно устанавливаются поля от верхнего, правого, нижнего и левого края содержимого.

Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Аргумент 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>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


Справочник по CSS - padding-bottom

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

padding-bottom

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-padding-bottom

Описание

Устанавливает значение поля от нижнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле снизу от текста

Рис. 1. Поле снизу от текста

Синтаксис

padding-bottom: значение | auto

Аргументы

Величину нижнего поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Аргумент 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>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>
</html>

Результат данного примера показан ни рис. 2.

Рис. 2. Применение параметра padding-bottom

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

[window.]document.getElementById("elementID").style.paddingBottom


Справочник по CSS - padding-left

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

padding-left

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-padding-left

Описание

Устанавливает значение поля от левого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле слева от текста

Рис. 1. Поле слева от текста

Синтаксис

padding-left: значение | auto

Аргументы

Величину левого поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Аргумент 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>padding-left</title>
<style type="text/css">
.layer {
background: #fc3; /* Цвет фона */
border: 2px solid black; /* Параметры рамки */
padding: 5px; /* Поля вокруг текста */
}

.layer P {
margin: 0px; /* Убираем отступы вокруг */
padding-left: 10%; /* Поле слева */
}
</style>
</head>
<body>

<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


Справочник по CSS - padding-right

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

padding-right

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-padding-right

Описание

Устанавливает значение поля от правого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле справа от текста

Рис. 1. Поле справа от текста

Синтаксис

padding-right: значение | auto

Аргументы

Величину правого поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Аргумент 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>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">
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


Справочник по CSS - padding-top

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

padding-top

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | 0
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/box.html#propdef-padding-top

Описание

Устанавливает значение поля от верхнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле сверху от текста

Рис. 1. Поле сверху от текста

Синтаксис

padding-top: значение | auto

Аргументы

Величину верхнего поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Аргумент 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>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.
</div>

</body>
</html>

Результат данного примера показан ни рис. 2.

Рис. 2. Применение параметра padding-top

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

[window.]document.getElementById("elementID").style.paddingTop


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

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

position

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Част. | Част. | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Част. — Поддерживается частично.

Краткая информация

CSS | CSS2
Значение по умолчанию | static
Наследуется | Да
Применяется | Ко всем элементам, за исключением генерируемых
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visuren.html#propdef-position

Описание

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

Синтаксис

position: absolute | fixed | relative | static

Аргументы

absolute
Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.
fixed

По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данный аргумент.

relative
Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.
static
Элементы отображаются как обычно. Использование параметров 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>
<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.

Рис. 1. Применение параметра position

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

[window.]document.getElementById("elementID").style.position

Примечание

Браузер Internet Explorer 7 поддерживает значение position: fixed только в «строгом» режиме (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">).


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

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

quotes

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Нет | Нет | Нет | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS2
Значение по умолчанию | Зависит от браузера, его настроек и операционной системы. Чаще всего используется кавычки вида "/"
Наследуется | Да
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/generate.html#propdef-quotes

Описание

Устанавливает тип кавычек, который применяется в тексте документа. В каждом языке существуют свои традиции для обозначения кавычек, параметр quotes позволяет задать вид их отображения по всему тексту и установить, таким образом, его единообразное оформление. Добавление кавычек происходит автоматически для содержимого контейнера <Q>, а также для текста, к которому применяется стилевой параметр content со значением open-quote (открывающая кавычка) или close-quote (закрывающая кавычка).

Синтаксис

quotes: "левая кавычка" "правая кавычка"

Аргументы

В качестве значения используется символ текста (например, quotes: “«” “»”) или символ юникода. Некоторые из них перечислены в табл. 1.

Табл. 1. Виды кавычек
Вид | Спецкод HTML | Юникод | Описание
" | &#34; | \0022 | Двойная кавычка, применяется обычно в моноширинных шрифтах, для обозначения символа дюйма, а также угловой минуты.
' | &#39; | \0027 | Апостроф. Символ угловой секунды, в латинице применяется для обозначения мягкого знака (popalas’ lisa).
« | &#171; или &laquo; | \00ab | Открывающая двойная угловая кавычка.
» | &#187; или &raquo; | \00bb | Закрывающая двойная угловая кавычка.
‘ | &#8216; | \2018 | Открывающая одинарная кавычка.
’ | &#8217; | \2019 | Закрывающая одинарная кавычка.
“ | &#8220; | \201c | Открывающая двойная кавычка в англоязычных текстах или закрывающая для русского языка.
” | &#8221; | \201d | Закрывающая двойная кавычка в англоязычных текстах.
„ | &#8222; | \201e | Открывающая двойная кавычка. Применяется в русском языке.

Пример

<!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


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

Справочник по CSS
Блог Волотко Дмитрия

right

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS2
Значение по умолчанию | auto
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visuren.html#propdef-right

Описание

Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента (рис. 1). Отсчет координат зависит от значения параметра position. Если его аргумент равен absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его правого края. В случае значения relative, аргумент right отсчитывается от правого края исходного положения элемента.

Рис. 1. Значение параметра right

Рис. 1. Значение параметра right

Синтаксис

right: значение | проценты | auto

Аргументы

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение параметра right может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от ширины родительского элемента. Аргумент 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>right</title>
<style type="text/css">
#leftcol {
position: absolute; /* Абсолютное позиционирование */
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 0px 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


Справочник по CSS - table-layout

Справочник по CSS
Блог Волотко Дмитрия

table-layout

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS2
Значение по умолчанию | auto
Наследуется | Нет
Применяется | К тегу <TABLE> или к элементу, у которого свойство display установлено как table или inline-table.
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/tables.html#propdef-table-layout

Описание

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

Синтаксис

table-layout: auto | fixed

Аргументы

auto
Браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и только после этого отображает.
fixed
Значение повышает производительность построения таблиц. Ширина колонок в этом случае определяется либо с помощью тега <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>&nbsp;</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>
<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>


Справочник по CSS - text-align

Справочник по CSS
Блог Волотко Дмитрия

text-align

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 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

Описание

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

Синтаксис

text-align: center | justify | left | right

Аргументы

center
Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.
justify
Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.
left
Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
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>text-align</title>
<style type="text/css">
div {
border: 1px solid black; /* Параметры рамки */
padding: 5px; /* Поля вокруг текста */
margin-bottom: 5px; /* Отступ снизу */
}
#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

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

[window.]document.getElementById("elementID").style.textAlign


Справочник по CSS - text-decoration

Справочник по CSS
Блог Волотко Дмитрия

text-decoration

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Част. | Част. | Част. | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Част. — поддерживается частично.

Краткая информация

CSS | CSS1
Значение по умолчанию | none
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | <U>, <S>, <STRIKE>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration

Описание

Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

Синтаксис

text-decoration: blink | line-through | overline | underline | none

Аргументы

blink
Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте (пример).
line-through
Создает перечеркнутый текст (пример).
overline
Линия проходит над текстом (пример).
underline
Устанавливает подчеркнутый текст (пример).
none
Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.

Пример

<!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
[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, текст показывает как обычно, без всякого мерцания.

Согласно спецификации CSS, если для элемента задан вид форматирования, а для его наследника нет, все равно свойства родителя будут передаваться его вложенным элементам. Так, если используется подчеркнутый параграф, а внутри него расположен неподчеркнутый элемент, выделяющий слово другим цветом, все слова в параграфе будут подчеркнуты, включая и выделенные другим цветом слова. Для браузера Netscape 6, однако, установка text-decoration: none уберет все эффекты, независимо от оформления родительского элемента. Вдобавок, Netscape 6 не распространяет оформление родительского элемента на дочерние, а переносит только подчеркивание.


Справочник по CSS - text-indent

Справочник по CSS
Блог Волотко Дмитрия

text-indent

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | 0
Наследуется | Да
Применяется | К блочным элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/text.html#propdef-text-indent

Описание

Устанавливает величину отступа первой строки блока текста (например, для параграфа <P>). Воздействия на все остальные строки не оказывается. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера.

Синтаксис

text-indent: значение | проценты

Аргументы

В качестве значений принимаются любые единицы длины, принятые в 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.

Рис. 1. Применение параметра text-indent

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

[window.]document.getElementById("elementID").style.textIndent


Справочник по CSS - text-transform

Справочник по CSS
Блог Волотко Дмитрия

text-transform

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | none
Наследуется | Да
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

Описание

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

Синтаксис

text-transform: capitalize | lowercase | uppercase | none

Аргументы

capitalize
Каждое слово в предложении будет начинаться с заглавного символа.
lowercase
Все символы текста становятся строчными (нижний регистр).
uppercase
Все символы текста становятся прописными (верхний регистр).

Пример

<!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.

Рис. 1. Применение параметра text-transform

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

[window.]document.getElementById("elementID").style.textTransform


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

Справочник по CSS
Блог Волотко Дмитрия

top

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS2
Значение по умолчанию | auto
Наследуется | Нет
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-top

Описание

Для позиционированного элемента определяет расстояние от верхнего края родительского элемента, не включая отступ, поле и ширину рамки, до верхнего края дочернего элемента (рис. 1). Отсчет координат зависит от значения параметра position. Если его аргумент равен absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края. В случае значения relative, аргумент top отсчитывается от верхнего края исходного положения элемента.

Рис. 1. Значение параметра top

Рис. 1. Значение параметра top

Синтаксис

top: значение | проценты | auto

Аргументы

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение параметра top может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента. Аргумент 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>top</title>
<style type="text/css">
#menu {
position: absolute; /* Абсолютное позиционирование */
left: 300px; /* Положение от левого края */
top: 50px; /* Положение от верхнего края */
width: 120px; /* Ширина блока */
background: #e0e0e0; /* Цвет фона */
border: 1px solid #000; /* Параметры рамки */
padding: 5px; /* Поля вокруг текста */
}
#content {
position: absolute; /* Абсолютное позиционирование */
left: 0px; /* Положение от левого края */
top: 0px; /* Положение от верхнего края */
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


Справочник по CSS - vertical-align

Справочник по CSS
Блог Волотко Дмитрия

vertical-align

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 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-vertical-align

Описание

Выравнивает элемент по вертикали относительно своего родителя или окружающего текста.

Синтаксис

vertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top | top | значение | проценты

Аргументы

baseline
Выравнивает базовую линию текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента.
bottom
Выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех.
middle
Выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента.
sub
Элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется.
super
Элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним.
text-bottom
Нижняя граница элемента выравнивается по самому нижнему краю текущей строки.
text-top
Верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки.
top
Выравнивание верхнего края элемента по верху самого высокого элемента строки.

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


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

Справочник по CSS
Блог Волотко Дмитрия

visibility

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Част. | Част. | Част. | Да | Да | Да | Да | Да | Да | Да | Част. | Да | Да | Да

Част. — поддерживается частично.

Краткая информация

CSS | CSS2
Значение по умолчанию | visible
Наследуется | Да
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility

Описание

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

Синтаксис

visibility: visible | hidden | collapse

Аргументы

visible
Отображает элемент как видимый.
hidden
Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы.
collapse

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

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

[window.]document.getElementById("elementID").style.visibility

Примечание

Аргумент collapse браузер Mozilla поддерживает только с версии 1.8а. Internet Explorer это значение игнорирует полностью.


Справочник по CSS - white-space

Справочник по CSS
Блог Волотко Дмитрия

white-space

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Част. | Част. | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Част. — поддерживается частично.

Краткая информация

CSS | CSS1
Значение по умолчанию | normal
Наследуется | Да
Применяется | К блочным элементам
Аналог HTML | <PRE>, <NOBR>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/text.html#propdef-white-space

Описание

Параметр white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является тег <PRE>, помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу тега <PRE>, но в отличие от него не меняет шрифт на моноширинный.

Синтаксис

white-space: normal | nowrap | pre

Аргументы

normal
Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
nowrap
Переносы строк в коде HTML игнорируются, весь текст отображается одной строкой,
вместе с тем, добавление тега <BR> переносит текст на новую строку.
pre
Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде 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 {
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">
&lt;html&gt;
&lt;body&gt;
&lt;b&gt;Великая теорема Ферма&lt;/b&gt;&lt;br&gt;
&lt;i&gt;X &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;
+ Y &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt; =
Z &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;&lt;/i&gt;&lt;br&gt;
где n - целое число &gt; 2
&lt;/body&gt;
&lt;/html&gt;
</p>

</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1. Применение параметра white-space

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

[window.]document.getElementById("elementID").style.whiteSpace

Примечание

Браузер Internet Explorer 6 и младше не поддерживает аргумент pre. Internet Explorer 7 понимает значение pre только в «строгом» режиме (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">).

Браузер Opera 9 и Firefox 3 также работают со значением pre-wrap, при котором сохраняются все пробелы и переносы. Однако если текст по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку.


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

Справочник по CSS
Блог Волотко Дмитрия

width

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | auto
Наследуется | Нет
Применяется | Ко всем элементам, за исключением встроенных незаменяемых элементов, колонкам и группам таблицы.
Аналог HTML | <im width>, <table width>
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visudet.html#propdef-width

Описание

Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег <IMG>). Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

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

Табл. 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">

Синтаксис

width: значение | проценты | auto

Аргументы

В качестве значений принимаются любые единицы длины, принятые в 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>width</title>
<style type="text/css">
.layer1 {
width: 300px; /* Ширина блока */
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. Этот же пример Internet Explorer демонстрирует иначе (рис. 2).

Рис. 1. Ширина блока в браузере Opera

Рис. 1. Ширина блока в браузере Internet Explorer

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

[window.]document.getElementById("elementID").style.width


Справочник по CSS - word-spacing

Справочник по CSS
Блог Волотко Дмитрия

word-spacing

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | normal
Наследуется | Да
Применяется | Ко всем элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/text.html#propdef-word-spacing

Описание

Устанавливает интервал между словами. Если установлен параметр выравнивания justify, то атрибут word-spacing не действует, поскольку интервал между словами будет установлен принудительно, чтобы строка текста была выровнена по правому и левому краю.

Синтаксис

word-spacing: значение | normal

Аргументы

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение параметра может быть и отрицательным, но следует проверять работоспособность в разных браузерах. Процентная запись не применима. Аргумент normal устанавливает интервал между словами как обычно.

Пример

<!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.

Рис. 1. Применение параметра word-spacing


Справочник по CSS - z-index

Справочник по CSS
Блог Волотко Дмитрия

z-index

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS2
Значение по умолчанию | auto
Наследуется | Нет
Применяется | К любым позиционированным элементам
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index

Описание

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет атрибут z-index.

Синтаксис

z-index: число | auto

Аргументы

В качестве аргумента допустимо использовать положительное или отрицательно целое число, а также ноль. Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже. Хотя спецификация и разрешает использовать отрицательные значения z-index, но такие элементы не отображаются в браузерах Netscape, Mozilla и Firefox.

Кроме числовых значений применяется auto — порядок элементов в этом случае строится автоматически, исходя из их положения в коде 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>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>
<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.

Только начиная с версии 5.5, Internet Explorer допускает применение атрибута z-index к фреймам (тег <FRAME>) и плавающим фреймам (<IFRAME>).

Firefox 3 корректно понимает отрицательное значение z-index.


Справочник по CSS - border-collapse

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

border-collapse

Браузер | Internet Explorer |  |  | Netscape |  | Opera |  |  | Safari |  | Mozilla | Firefox
Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да

Краткая информация

CSS | CSS1
Значение по умолчанию | separate
Наследуется | Нет
Применяется | К тегу <TABLE> или к элементам, у которых значение свойство display установлено как table или inline-table
Аналог HTML | Нет
Ссылка на спецификацию | http://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse

Описание

Устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Добавление значения collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.

Рис. 1а | Рис. 1б
а | б

Рис. 1. Вид таблицы при использовании атрибута border-collapase

Синтаксис

border-collapse: collapse | separate

Аргументы

collapse
Линия между ячейками отображается только одна.
separate
Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.

Пример

<!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>border-collapse</title>
<style type="text/css">
TABLE {
width: 300px; /* Ширина таблицы */
border: 4px double black; /* Рамка вокруг таблицы */
border-collapse: collapse; /* Отображать только одинарные линии */
}

TH {
text-align: left; /* Выравнивание по левому краю */
background: #ccc; /* Цвет фона ячеек */
padding: 5px; /* Поля вокруг содержимого ячеек */
border: 1px solid black; /* Граница вокруг ячеек */
}

TD {
padding: 5px; /* Поля вокруг содержимого ячеек */
border: 1px solid black; /* Граница вокруг ячеек */
}
</style>
</head>
<body>

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

</body>
</html>

Результат данного примера показан ни рис. 2.

Рис. 2. Вид таблицы при использовании параметра border-collapse