![При описании синтаксиса применяются следующие обозначения:
вертикальная черта между значениями (например, 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//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Скрипт</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>](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-3-320.jpg)
![Браузеры
Селекторы
Браузер Internet Explorer Opera Safari Firefox
Netscape
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
* Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да
.class Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да Да
#id Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да
E Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Да Да
EF Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да Да
E>F Нет Нет Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да
E+F Нет Нет Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да
E[параметр] Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Да Да
E[параметр =
Нет Нет Да Да Да Да Да Да Ошибки Да Ошибки Да Да Да Да Да
"значение"]
E[параметр ~=
Нет Нет Да Да Да Да Да Да Ошибки Да Ошибки Да Да Да Да Да
"значение"]
E[параметр |=
Нет Нет Да Да Да Да Да Да Ошибки Да Ошибки Да Да Да Да Да
"значение"]
E[параметр ^=
Нет Нет Да Да Да Да Да Да Ошибки Да Ошибки Да Да Да Да Да
"значение"]
E[параметр $=
Нет Нет Да Да Да Да Да Да Ошибки Да Ошибки Да Да Да Да Да
"значение"]
E[параметр *=
Нет Нет Да Да Да Да Да Да Ошибки Да Ошибки Да Да Да Да Да
"значение"]
@-правила
Браузер Internet Explorer Netscape Opera Safari Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
@charset Ошибки Ошибки Ошибки Да Нет Нет Нет Нет Да Да Нет Нет Нет Да Да Да
@import Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да
@font-face Част. Част. Част. Част. Нет Нет Нет Нет Нет Нет Нет Нет Да Нет Нет Нет
@media Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да
@page Нет Нет Нет Да Нет Нет Нет Нет Да Да Нет Нет Нет Нет Нет Нет
Псевдоэлементы
Браузер Internet Explorer Netscape Opera Safari Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
:after Нет Нет Нет Да Да Да Да Да Ошибки Да Да Да Да Част. Част. Да
:before Нет Нет Нет Да Да Да Да Да Ошибки Да Да Да Да Част. Част. Да
:first-letter Ошибки Ошибки Ошибки Да Ошибки Ошибки Да Да Да Да Да Да Да Ошибки Ошибки Да
:first-line Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да
Псевдоклассы
Браузер Internet Explorer Netscape Opera Safari Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
:active Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да
:first-child Нет Нет Да Да Да Да Да Да Да Да Да Да Да Нет Да Да
:focus Нет Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Да
:hover Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да Да
:lang Нет Нет Нет Да Да Да Да Да Да Да Нет Нет Да Да Да Да
:link Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-5-320.jpg)
![В данном примере зеленый цвет фона у блока будет установлен только для браузера Internet Explorer версии
семь и ниже. В остальных браузерах цвет фона будет оранжевым.
Условные комментарии
Работает: IE5 IE5.5 IE6 IE7 IE8
Не работает: Opera Safari Firefox
Любой текст в коде HTML можно закомментировать и при этом он никак не будет отображаться на веб-странице.
Для этого его следует поместить между элементами <!-- и -->. Браузер Internet Explorer кроме того
поддерживает специальный синтаксис, в задачу которого входит интерпретировать код, если перед нами Internet
Explorer. Остальные браузеры при этом видят обычный комментарий и не отображают его.
<!--[if IE]>
Код для браузера Internet Explorer
<![endif]-->
Внутри квадратных скобок допустимо использовать следующие ключевые слова:
IE — любая версия браузера Internet Explorer;
IE 5 — Internet Explorer 5;
IE 5.5 — Internet Explorer 5.5;
IE 6 — Internet Explorer 6;
IE 7 — Internet Explorer 7;
IE 8 — Internet Explorer 8;
lt — номер версии браузера меньше указанной;
gt — номер версии больше указанной;
lte — номер версии меньше или равен указанной;
gte — номер версии браузера больше или равен указанной.
Поскольку указанные элементы можно писать только внутри контейнера <BODY>, то следует добавить тег
<STYLE>, как показано в примере 5.
Пример 5
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Хаки</title>
<style type="text/css">
DIV {
color: orange; /* Для всех браузеров, кроме IE */
}
</style>
</head>
<body>
<!--[if gt IE 5.5]>
<style type="text/css">
DIV {
color: green; /* Для браузера Internet Explorer версии 5.5 и старше */
}
</style>
<![endif]-->
<div>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</body>
</html>
@media all and (min-width)
Работает: Opera Safari
Не работает: IE Firefox
Правило @media используется для определения стиля, предназначенного только для определенных устройств.
Конструкцию @media all понимают все браузеры, но Opera и Safari также поддерживают @media all and (min-
width) — правило, появившееся в CSS3. Соответственно, помещая желаемые стилевые свойства внутрь этого
правила, получим стиль, работающий только в браузерах Opera и Safari.
Пример 6
HTML 4.01 CSS 2.1 CSS 3 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-12-320.jpg)
![Селекторы параметров
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Да Да Да Да Да Да Да Да Да Да Да Да Да
Описание
Многие теги различаются по своему действию в зависимости от того, какие в них используются параметры. Например, тег
<INPUT> может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счет изменения значение
параметра type. При этом добавление правил стиля к селектору INPUT применит стиль одновременно ко всем созданным с
помощью этого тега элементам. Чтобы гибко управлять стилем подобных элементов, в CSS введены селекторы
параметров (называемые также селекторы атрибутов). Они позволяют установить стиль тега по присутствию
определенного параметра или его значения.
Простой селектор параметра
Описание
Устанавливает стиль для элемента, если задан специфичный параметр тега. Его значение в данном случае не важно.
Синтаксис
[параметр] { Описание правил стиля }
E[параметр] { Описание правил стиля }
Стиль применяется к тем тегам, внутри которых добавлен указанный параметр. Пробел между именем селектора и
квадратными скобками не допускается.
Пример 1
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Селекторы параметров</title>
<style type="text/css">
Q {
font-style: italic; /* Курсивное начертание */
quotes: "00AB" "00BB"; /* Меняем вид кавычек в цитате */
}
Q[title] {
color: maroon; /* Цвет текста */
}
</style>
</head>
<body>
<p>Продолжая известный закон Мерфи, который гласит: <q>Если неприятность
может случиться, то она обязательно случится</q>, можем ввести свое наблюдение:
<q title="Из законов Фергюссона-Мержевича">После того, как веб-страница
будет корректно отображаться в одном браузере, выяснится,
что она неправильно показывается в другом</q>.</p>
</body>
</html>
Результат примера показан на рис. 1.
Рис. 1. Изменение стиля элемента в зависимости от применения параметра title
В данном примере меняется цвет текста внутри контейнера <Q>, когда к нему добавляется параметр title. Обратите
внимание, что для селектора Q[title] нет нужды повторять стилевые свойства, поскольку они наследуются от селектора
Q. Браузер IE7 не добавляет кавычки к тексту, только изменяет его цвет.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-21-320.jpg)
![Параметр со значением
Описание
Устанавливает стиль для элемента в том случае, если задано определенное значение специфичного параметра.
Синтаксис
[параметр="значение"] { Описание правил стиля }
E[параметр="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем тегам, которые содержат указанное значение параметра. А во втором —
только к определенным селекторам.
Пример 2
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Селекторы параметров</title>
<style type="text/css">
A[target="_blank"] {
background: url(blank.png) 0 6px no-repeat; /* Параметры фонового рисунка */
padding-left: 15px; /* Смещаем текст вправо */
}
</style>
</head>
<body>
<p><a href="link1.html">Обычная ссылка</a> |
<a href="link2" target="_blank">Ссылка в новом окне</a></p>
</body>
</html>
Результат примера показан ниже (рис. 2).
Рис. 2. Изменение стиля элемента в зависимости от значения параметра target
В данном примере рисунок к ссылке добавляется с помощью свойства background. В его функции входит создание
повторяющейся фоновой картинки, но повторение фона можно отменить через значение no-repeat, что в итоге даст
единственное изображение.
Значение параметра начинается с определенного текста
Описание
Устанавливает стиль для элемента в том случае, если значение параметра тега начинается с указанного текста.
Синтаксис
[параметр^="значение"] { Описание правил стиля }
E[параметр^="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам, у которых значение параметра начинаются с указанного текста. А
во втором — только к определенным селекторам. Использование кавычек не обязательно.
Пример 3
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Селекторы параметров</title>
<style type="text/css">
A[href^="http://"] {](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-22-320.jpg)
![font-weight: bold /* Жирное начертание */
}
</style>
</head>
<body>
<p><a href="link1.html">Обычная ссылка</a> |
<a href="http://htmlbook.ru" target="_blank">Внешняя
ссылка на сайт htmlbook.ru</a></p>
</body>
</html>
Результат примера показан ниже (рис. 3).
Рис. 3. Изменение стиля для внешних ссылок
В данном примере внешние ссылки выделяются жирным начертанием. Внешние ссылки характеризуются добавлением к
адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние
ссылки начинаются с ключевого слова http://, его и добавляем к селектору A, как показано в примере.
Значение параметра оканчивается определенным текстом
Описание
Устанавливает стиль для элемента в том случае, если значение параметра оканчивается указанным текстом.
Синтаксис
[параметр$="значение"] { Описание правил стиля }
E[параметр$="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам у которых значение параметра завершается заданным текстом. А
во втором — только к определенным селекторам.
Пример 4
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!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">
A[href$=".ru"] { /* Если ссылка заканчивается на .ru */
background: url('ru.png') no-repeat 0 6px; /* Добавляем фоновый рисунок */
padding-left: 12px; /* Смещаем текст вправо */
}
A[href$=".com"] { /* Если ссылка заканчивается на .com */
background: url('com.png') no-repeat 0 6px;
padding-left: 12px;
}
</style>
</head>
<body>
<p><a href="http://www.yandex.com">Yandex.Com</a> |
<a href="http://www.yandex.ru">Yandex.Ru</a></p>
</body>
</html>
В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с
помощью стилей добавляется своя фоновая картинка (рис. 4). Стилевые свойства будут добавляться только для тех
ссылок, параметр href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена слэш
(http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль
применяться уже не будет.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-23-320.jpg)
![Рис. 4. Добавление картинки к ссылкам
Значение параметра содержит указанный текст
Описание
Возможны варианты, когда стиль следует применить к тегу с определенным параметром, при этом частью его значения
является некоторый текст. При этом точно не известно, в каком месте значения включен данный текст — в начале,
середине или конце. В подобном случае следует использовать конструкцию *=.
Синтаксис
[параметр*="значение"] { Описание правил стиля }
E[параметр*="значение"] { Описание правил стиля }
Пример 5
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Селекторы параметров</title>
<style type="text/css">
[href*="htmlbook"] {
background: yellow; /* Желтый цвет фона */
}
</style>
</head>
<body>
<p><a href="http://www.htmlbook.ru/html/">Теги HTML</a> |
<a href="http://stepbystep.htmlbook.ru">Шаг за шагом</a> |
<a href="http://webimg.ru">Графика для Веб</a></p>
</body>
</html>
Результат данного примера показан на рис. 5. В примере показано изменение стиля ссылок, в параметре href которых
встречается слово «htmlbook».
Рис. 5. Изменение стиля для ссылок, в адресе которых встречается «htmlbook»
Одно из нескольких значений параметра
Описание
Некоторые значения параметров могут перечисляться через пробел, например имена классов. Чтобы задать стиль при
наличии в списке требуемого значения требуется использовать конструкцию ~=.
Синтаксис
[параметр~="значение"] { Описание правил стиля }
E[параметр~="значение"] { Описание правил стиля }
Стиль применяется в том случае, если у параметра имеется указанное значение или оно входит в список значений,
разделяемых пробелом.
Пример 6
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-24-320.jpg)
![<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Блок</title>
<style type="text/css">
[class~="block"] h3 { color: green; }
</style>
</head>
<body>
<div class="block tag">
<h3>Заголовок</h3>
</div>
</body>
</html>
В данном примере зеленый цвет текста применяется к селектору H3, если имя класса у слоя задано как block. Отметим, что
аналогичный результат можно получить, если использовать конструкцию *= вместо ~=.
Дефис в значении параметра
Описание
В именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создавать значащие
значения параметров id и class.
Синтаксис
[параметр|="значение"] { Описание правил стиля }
E[параметр|="значение"] { Описание правил стиля }
Стиль применяется к элементам, у которых параметр начинается с указанного значения или с фрагмента значения, после
которого идет дефис.
Пример 7
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Блок</title>
<style type="text/css">
DIV[class|="block"] {
background: #306589; /* Цвет фона */
color: #acdb4c; /* Цвет текста */
padding: 5px; /* Поля */
}
DIV[class|="block"] A {
color: #fff; /* Цвет ссылок */
}
</style>
</head>
<body>
<div class="block-menu-therm">
<h2>Термины</h2>
<div class="content">
<ul class="menu">
<li><a href="t1.html">Буквица</a></li>
<li><a href="t2.html">Выворотка</a></li>
<li><a href="t3.html">Выключка</a></li>
<li><a href="t4.html">Интерлиньяж</a></li>
<li><a href="t5.html">Капитель</a></li>
<li><a href="t6.html">Начертание</a></li>
<li><a href="t7.html">Отбивка</a></li>
</ul>
</div>
</div>
</body>
</html>
В данном примере имя класса задано как block-menu-therm, поэтому в стилях используется конструкция |="block",
поскольку значение начинается именно с этого слова и в значении встречаются дефисы.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-25-320.jpg)
![@import
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
Краткая информация
CSS CSS2
Значение по умолчанию all
Ссылка на спецификацию http://www.w3.org/TR/CSS21/cascade.html#at-import
Описание
Правило @import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу.
Синтаксис
@import url("имя файла") [типы носителей];
@import "имя файла" [типы носителей];
В качестве типа носителя выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1
перечислены некоторые из них.
Табл. 1. Типы носителей и их описание
Тип Описание
all Все типы. Это значение используется по умолчанию.
Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда,
aural
например, можно отнести речевые браузеры.
braille Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
handheld Наладонные компьютеры и аналогичные им аппараты.
print Печатающие устройства вроде принтера.
projection Проектор.
screen Экран монитора.
tv Телевизор.
Использование типов носителей совместно с импортом файла дает возможность указывать стиль только для
определенных устройств.
Значения
В качестве значения используется путь к стилевому файлу, который указывается внутри необязательной
конструкции url(). Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Импорт стиля</title>
<style type="text/css">
@import "/style/main.css" screen; /* Стиль для вывода результата на монитор */
@import "/style/palm.css" handheld, print; /* Стиль для печати */
</style>
</head>
<body>
<p>...</p>
</body>
</html>
Браузеры
Браузер Internet Explorer до седьмой версии включительно не поддерживает типы носителей при импорте
стилевого файла. Более того, при добавлении типа носителя стилевой файл вообще не загружается.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-32-320.jpg)
![@media
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Да Да Да Да Да Да Да Да Да Да Да Да Да Да
Краткая информация
CSS CSS2
Значение по умолчанию all
Ссылка на спецификацию http://www.w3.org/TR/CSS21/cascade.html#at-import
Описание
Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль. В
качестве типов выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1
перечислены некоторые из них.
Табл. 1. Типы носителей и их описание
Тип Описание
all Все типы. Это значение используется по умолчанию.
Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда,
aural
например, можно отнести речевые браузеры.
braille Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
handheld Наладонные компьютеры и аналогичные им аппараты.
print Печатающие устройства вроде принтера.
projection Проектор.
screen Экран монитора.
tv Телевизор.
Синтаксис
@media тип1 [, тип2] {
Описание стиля
}
Значения
После ключевого слова @media идет один или несколько типов носителя, перечисленных в табл. 1; если их
больше одного, то они разделяются между собой запятой. После чего следуют обязательные фигурные
скобки, внутри которых идет обычное описание стилевых правил.
Пример 1
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>@media</title>
<style type="text/css">
@media screen { /* Стиль для отображения в браузере */
BODY {
font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт */
font-size: 90%; /* Размер шрифта */
color: #000080; /* Цвет текста */
}
H1 {
background: #faf0e6; /* Цвет фона под текстом */
border: 2px dashed #800000; /* Рамка вокруг заголовка */
color: #a0522d; /* Цвет текста */
padding: 7px; /* Поля вокруг текста */
}
H2 {
color: #556b2f; /* Цвет текста */
margin: 0; /* Убираем отступы */
}](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-33-320.jpg)
![@page
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Нет Да Нет Нет Нет Да Да Нет Нет Нет Нет Нет Нет
Краткая информация
CSS CSS2
Значение по умолчанию Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS2/page.html#page-box
Описание
Правило @page позволяет задать значение полей при печати документа или для страниц, у которых тип
носителя задан как print.
Синтаксис
@page [ { :left | :right | :first } ] { Значения отступов }
Значения
Для установки полей на странице используется универсальное свойство margin или его производные — margin-
top, margin-right, margin-bottom и margin-left, задающие соответственно отступ сверху, справа, снизу и слева.
Отрицательное значение допускается, но часть страницы может оказаться «отрезанной». Свойства border и
padding не применимы.
Ключевое слово :left позволяет задать поля для всех левых страниц, :right — для всех правых, а :first — для
первой страницы.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>@page</title>
<style type="text/css">
@media print { /* Стиль для печати */
BODY {
font-family: Times, 'Times New Roman', serif; /* Шрифт с засечками */
}
H1, H2, P {
color: #000; /* Черный цвет текста */
}
}
@page :first {
margin: 1cm; /* Отступы для первой страницы */
}
@page :left {
margin: 1cm 3cm 1cm 1.5cm; /* Отступы для всех левых страниц */
}
@page :right {
margin: 1cm 3cm 1cm 1.5cm; /* Отступы для всех правых страниц */
}
</style>
</head>
<body>
<h1>Метод ловли льва в пустыне</h1>
<h2>Метод последовательного перебора</h2>
<p>Пусть лев имеет габаритные размеры LxWxH, где L — длина льва от кончика носа
до кисточки хвоста, W — ширина льва, а H — его высота. После чего пустыню разбиваем на
ряд элементарных прямоугольников, размер которых совпадает с шириной и длиной льва.
Учитывая, что лев может находиться не строго на заданном участке, а одновременно на
двух из них, клетку для ловли следует делать повышенной площади, а именно 2Lx2W.
Благодаря этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина
льва или, что хуже, только его хвост.</p>
<p>Далее последовательно накрываем каждый из размеченных прямоугольников пустыни
клеткой и проверяем, пойман лев или нет. Как только лев окажется в клетке, процедура
поимки считается завершенной.</p>
</body>
</html>](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-36-320.jpg)
![background
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
Краткая информация
CSS CSS1, CSS2.1
Значение по
Зависит от использования
умолчанию
Наследуется Нет
Применяется Ко всем элементам
<body bgcolor="цвет" background="URL" bgproperties="fixed">
Аналог HTML <table | thead | tbody | tfoot | tr | th | td bgcolor="цвет"
background="URL">
Ссылка на
http://www.w3.org/TR/CSS21/colors.html#propdef-background
спецификацию
Описание
Универсальное свойство background позволяет установить одновременно до пяти характеристик фона.
Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному
свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно.
Синтаксис
background: [background-attachment || background-color || background-image || background-position || background-repeat] |
inherit
Значения
Любые комбинации пяти значений, разделяемых между собой пробелом, определяющих стиль фона, в
произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно
опустить. inherit наследует значение у родительского элемента.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>background</title>
<style type="text/css">
DIV {
height: 200px; /* Высота блока */
width: 200px; /* Ширина блока */
overflow: auto; /* Добавляем полосы прокрутки */
padding-left: 15px; /* Отступ от текста слева */
background: #fc0 url('images/sample.png') 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>](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-40-320.jpg)
![Результат данного примера показан ниже (рис. 1).
Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера
Объектная модель
[window.]document.getElementById("elementID").style.background
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-41-320.jpg)
![background-attachment
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да
Краткая информация
CSS CSS1, CSS2.1
Значение по
scroll
умолчанию
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML <body background="URL" bgproperties="fixed">
Ссылка на http://www.w3.org/TR/CSS21/colors.html#propdef-background-
спецификацию attachment
Описание
Свойство background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с
содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо
перемещаться совместно с документом.
Синтаксис
background-attachment: fixed | scroll | inherit
Значения
fixed Делает фоновое изображение элемента неподвижным.
scroll Позволяет перемещаться фону вместе с содержимым.
inherit Наследует значение родителя.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!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">
Пример текста
</td>
</tr>
</table>
</body>
</html>
Объектная модель
[window.]document.getElementById("elementID").style.backgroundAttachment
Браузеры
В браузере Internet Explorer 6 значение fixed работает только для тегов <BODY> или <HTML>.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-42-320.jpg)
![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
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-44-320.jpg)
![background-image
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
Краткая информация
CSS CSS1
Значение по
none
умолчанию
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML <body background="URL">
Ссылка на http://www.w3.org/TR/CSS21/colors.html#propdef-background-
спецификацию image
Описание
Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона,
он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не
доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них
будет проглядывать фоновый цвет.
Синтаксис
background-image: url(путь к файлу) | none | inherit
Значения
url В качестве значения используется путь к графическому файлу, который указывается внутри
конструкции url(). Путь к файлу при этом можно писать как в кавычках (двойных или
одинарных), так и без них.
none Отменяет фоновое изображение для элемента.
inherit Наследует значение родителя.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!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
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-45-320.jpg)
![background-position
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
Краткая информация
CSS CSS1, CSS2.1
Значение по
0% 0%
умолчанию
Наследуется Нет
Применяется К блочным элементам
Аналог HTML Нет
Ссылка на http://www.w3.org/TR/CSS21/colors.html#propdef-background-
спецификацию position
Описание
Задает начальное положение фонового изображения, установленного с помощью свойства background-
image.
Синтаксис
background-position: [left | center | right | проценты | значение] || [top | center | bottom | проценты | значение] | inherit
Значения
У свойства background-position два значения, положение по горизонтали (может быть — left, center, right) и
вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно
задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их
следования не имеет значения, при процентной записи вначале задается положение рисунка по
горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми
ключевыми словами и процентной записью следующее.
top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)
В скобках указано, где располагается фоновый рисунок относительно контейнера.
При inherit значение наследуется у родителя элемента.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>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>](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-46-320.jpg)
![</body>
</html>
Объектная модель
[window.]document.getElementById("elementID").style.backgroundPosition
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-47-320.jpg)
![background-repeat
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
Краткая информация
CSS CSS1
Значение по
repeat
умолчанию
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на http://www.w3.org/TR/CSS21/colors.html#propdef-background-
спецификацию repeat
Описание
Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-
image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.
Синтаксис
background-repeat: no-repeat | repeat | repeat-x | repeat-y | inherit
Значения
no-repeat Устанавливает одно фоновое изображение в элементе без его повторений, положение
которого определяется свойством background-position (по умолчанию в левом верхнем углу).
repeat Фоновое изображение повторяется по горизонтали и вертикали.
repeat-x Фоновый рисунок повторяется только по горизонтали.
repeat-y Фоновый рисунок повторяется только по вертикали.
inherit Наследует значение родителя.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!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
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-48-320.jpg)
![border
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
Краткая информация
CSS CSS1
Значение по умолчанию Зависит от использования
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML <img border > | <table border>
Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.html#propdef-border
Описание
Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг
элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из
них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента,
воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.
Синтаксис
border: [border-width || border-style || border-color] | inherit
Значения
Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько
значений border-style. Их названия и результат действия представлен на рис. 1.
Рис.1. Стили рамок
border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
inherit наследует значение родителя.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>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.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-51-320.jpg)
![Рис. 2. Применение свойства border
Объектная модель
[window.]document.getElementById("elementID").style.border
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge,
inset или outset.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-52-320.jpg)
![border-bottom
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
Краткая информация
CSS CSS1
Значение по
Зависит от использования
умолчанию
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML <img border > | <table border>
Ссылка на http://www.w3.org/TR/CSS21/box.html#border-shorthand-
спецификацию properties
Описание
Свойство позволяет одновременно установить толщину, стиль и цвет границы внизу элемента. Значения
могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует
нужному свойству.
Синтаксис
border-bottom: [border-width || border-style || border-color] | inherit
Значения
Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько
значений свойства border-style. Их названия и результат действия представлен на рис. 1.
Рис.1. Стили рамок
border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
inherit наследует значение родителя.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>border-bottom</title>
<style type="text/css">
.panel {
background: #ccc; /* Цвет фона */
}
.panel P.content {
padding: 5px; /* Добавляем поля */
margin: 0; /* Убираем отступы у параграфа */
border-top: 2px dotted white; /* Параметры линии вверху */
}
.panel P.title {
font-family: sans-serif; /* Рубленый шрифт */
font-weight: bold; /* Жирное начертание */
font-size: 90%; /* Размер шрифта */
padding: 5px; /* Добавляем поля */
margin: 0; /* Убираем отступы у параграфа */
background: maroon; /* Цвет фона */
color: white; /* Цвет текста */
border-bottom: 2px solid white; /* Параметры линии внизу */
}
</style>
</head>
<body>](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-53-320.jpg)
![<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
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge,
inset или outset.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-54-320.jpg)
![}
#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
Браузеры
Internet Explorer 6 не поддерживает значение transparent. Браузер Internet Explorer до седьмой версии
включительно не поддерживает inherit.
Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove,
ridge, inset или outset.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-56-320.jpg)
![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
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значения hidden и inherit.
Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge,
inset или outset.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-58-320.jpg)
![Рис. 1. Применение свойства border-bottom-width
Объектная модель
[window.]document.getElementById("elementID").style.borderBottomWidth
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значения hidden и inherit.
Толщина границы при использовании ключевых слов thin, medium и thick в разных браузерах может
несколько различаться.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-60-320.jpg)
![border-color
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
Краткая информация
CSS CSS1, CSS2.1
Значение по умолчанию Нет
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML <img border> | <table border>
Ссылка на http://www.w3.org/TR/CSS21/box.html#propdef-border-
спецификацию color
Описание
Устанавливает цвет границы на разных сторонах элемента. Свойство позволяет задать цвет границы сразу
для всех сторон элемента или только для указанных.
Синтаксис
border-color: [цвет | transparent] {1,4} | inherit
Значения
Цвет можно задавать тремя способами.
1. По его названию
Браузеры поддерживают некоторые цвета по их названию.
2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в
отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут
следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами.
Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например,
числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало
путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #,
например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00
до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два
символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.
Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так,
запись #fe0 следует расценивать как #ffee00.
3. С помощью RGB
Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном
исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать
цвет в процентном отношении.
transparent Устанавливает прозрачный цвет.
inherit Наследует значение родителя.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.
Результат зависит от количества и указан в табл. 1.
Табл. 1. Изменение цвета в зависимости от числа значений
Число
Результат
значений
1 Цвет границы будет установлен для всех сторон элемента.
2 Первое значение устанавливает цвет верхней и нижней границы, второе — левой и правой.
Первое значение задает цвет верхней границы, второе — одновременно левой и правой границы, а
3
третье — нижней границы.
4 Поочередно устанавливается цвет верхней, правой, нижней и левой границы.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-63-320.jpg)
![Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>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
Браузеры
Internet Explorer 6 не поддерживает значение transparent. Браузер Internet Explorer до седьмой версии
включительно не поддерживает inherit.
Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove,
ridge, inset или outset.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-64-320.jpg)
![border-left
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
Краткая информация
CSS CSS1
Значение по
Зависит от использования
умолчанию
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML <img border > | <table border>
Ссылка на http://www.w3.org/TR/CSS21/box.html#border-shorthand-
спецификацию properties
Описание
Свойство border-left позволяет одновременно установить толщину, стиль и цвет левой границы элемента.
Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них
соответствует нужному свойству.
Синтаксис
border-left: [border-width || border-style || border-color] | inherit
Значения
Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько
значений свойства border-style. Их названия и результат действия представлен на рис. 1.
Рис.1. Стили рамок
border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
inherit наследует значение родителя.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>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.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-65-320.jpg)
![Рис. 2. Применение свойства border-left
Объектная модель
[window.]document.getElementById("elementID").style.borderLeft
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge,
inset или outset.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-66-320.jpg)
![</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
Браузеры
Internet Explorer 6 не поддерживает значение transparent. Браузер Internet Explorer до седьмой версии
включительно не поддерживает inherit.
Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove,
ridge, inset или outset.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-68-320.jpg)
![<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
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значения hidden и inherit.
Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge,
inset или outset.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-70-320.jpg)
![Рис. 1. Использование свойства border-left-width
Объектная модель
[window.]document.getElementById("elementID").style.borderLeftWidth
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значения hidden и inherit.
Толщина границы при использовании ключевых слов thin, medium и thick в разных браузерах может
несколько различаться.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-72-320.jpg)
![border-right
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
Краткая информация
CSS CSS1
Значение по
Зависит от использования
умолчанию
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML <img border > | <table border>
Ссылка на http://www.w3.org/TR/CSS21/box.html#border-shorthand-
спецификацию properties
Описание
Свойство border-right позволяет одновременно установить толщину, стиль и цвет правой границы элемента.
Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них
соответствует нужному свойству.
Синтаксис
border-right: [border-width || border-style || border-color] | inherit
Значения
Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько
значений свойства border-style. Их названия и результат действия представлен на рис. 1.
Рис.1. Стили рамок
border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
inherit наследует значение родителя.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>border-right</title>
<style type="text/css">
DIV.line {
border-left: 1px solid red; /* Линия слева от текста */
border-right: 1px solid red; /* Линия справа от текста */
padding: 0 10px; /* Расстояние между линией и текстом */
margin: 0 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>](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-73-320.jpg)
![Результат данного примера показан ни рис. 2.
Рис. 2. Применение border-right
Объектная модель
[window.]document.getElementById("elementID").style.borderRight
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge,
inset или outset.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-74-320.jpg)
![}
</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
Браузеры
Internet Explorer 6 не поддерживает значение transparent. Браузер Internet Explorer до седьмой версии
включительно не поддерживает inherit.
Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove,
ridge, inset или outset.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-76-320.jpg)
![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
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значения hidden и inherit.
Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge,
inset или outset.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-78-320.jpg)
![Рис. 1. Применение свойства border-right-width
Объектная модель
[window.]document.getElementById("elementID").style.borderRightWidth
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значения hidden и inherit.
Толщина границы при использовании ключевых слов thin, medium и thick в разных браузерах может
несколько различаться.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-80-320.jpg)
![border-spacing
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да
Краткая информация
CSS CSS2
Значение по
0
умолчанию
Наследуется Да
Применяется К таблицам
Аналог HTML <table cellspacing="...">
Ссылка на http://www.w3.org/TR/CSS21/tables.html#propdef-border-
спецификацию spacing
Описание
Задает расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для
таблицы установлено свойство border-collapse со значением collapse.
Синтаксис
border-spacing: значение1 [значение2]
Значения
Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами
ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!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-spacing</title>
<style type="text/css">
table {
border: 4px double #333; /* Рамка вокруг таблицы */
border-collapse: separate; /* Способ отображения границы */
width: 100%; /* Ширина таблицы */
border-spacing: 7px 11px; /* Расстояние между ячейками */
}
td {
padding: 5px; /* Поля вокруг текста */
border: 1px solid #a52a2a; /* Граница вокруг ячеек */
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>
</body>
</html>
Результат данного примера показан ни рис. 1.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-81-320.jpg)
![border-style
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
Краткая информация
CSS CSS1
Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML <img border > | <table border>
Ссылка на http://www.w3.org/TR/CSS21/box.html#propdef-border-
спецификацию style
Описание
Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных
сторон элемента.
Синтаксис
border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} | inherit
Значения
Для управления видом границы предоставляется несколько значений свойства 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
Кроме перечисленных в таблице значений используются следующие ключевые слова.
none Не отображает границу и ее толщина (border-width) задается нулевой.
hidden Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы,
у которой значение свойства border-collapse установлено как collapse. В этом случае вокруг
ячейки граница не будет отображаться вообще.
inherit Наследует значение родителя.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.
Эффект зависит от количества и указан в табл. 2.
Табл. 2. Зависимость результата использования от числа значений
Результат
Число](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-83-320.jpg)
![значений
1 Стиль границы будет задан для всех сторон элемента.
2 Первое значение устанавливает стиль верхней и нижней границы, второе — левой и правой.
Первое значение задает стиль верхней границы, второе — одновременно левой и правой границы,
3
а третье — нижней границы.
4 Поочередно устанавливается стиль верхней, правой, нижней и левой границы.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!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
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значения hidden и inherit.
Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge,
inset или outset.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-84-320.jpg)
![border-top
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
Краткая информация
CSS CSS1
Значение по
Зависит от использования
умолчанию
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML <img border > | <table border>
Ссылка на http://www.w3.org/TR/CSS21/box.html#border-shorthand-
спецификацию properties
Описание
Свойство border-top позволяет одновременно установить толщину, стиль и цвет границы сверху элемента.
Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них
соответствует нужному свойству.
Синтаксис
border-top: [border-width || border-style || border-color] | inherit
Значения
border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений
border-style. Их названия и результат действия представлен на рис. 1.
Рис.1. Стили рамок
border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
inherit наследует значение родителя.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>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.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-85-320.jpg)
![Рис. 2. Применение свойства border-top
Объектная модель
[window.]document.getElementById("elementID").style.borderTop
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge,
inset или outset.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-86-320.jpg)
![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
Браузеры
Internet Explorer 6 не поддерживает значение transparent. Браузер Internet Explorer до седьмой версии
включительно не поддерживает inherit.
Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove,
ridge, inset или outset.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-88-320.jpg)
![}
</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
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значения hidden и inherit.
Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge,
inset или outset.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-90-320.jpg)
![Рис. 1. Применение свойства border-top-width
Объектная модель
[window.]document.getElementById("elementID").style.borderTopW idth
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значения hidden и inherit.
Толщина границы при использовании ключевых слов thin, medium и thick в разных браузерах может
несколько различаться.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-92-320.jpg)
![border-width
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да
Краткая информация
CSS CSS1
Значение по умолчанию medium
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML <img border > | <table border>
Ссылка на http://www.w3.org/TR/CSS21/box.html#border-width-
спецификацию properties
Описание
Задает толщину границы одновременно на всех сторонах элемента или индивидуально для каждой
стороны. Способ изменения толщины зависит от числа значений.
Синтаксис
border-width: [значение | thin | medium | thick] {1,4} | inherit
Значения
Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы. Для
более точного значения, толщину можно указывать в пикселах или других единицах. inherit наследует
значение родителя.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.
Эффект зависит от количества и приведен в табл. 1.
Табл. 1. Зависимость результата от числа значений
Число
Результат
значений
1 Толщина границы будет установлена для всех сторон элемента.
2 Первое значение устанавливает толщину верхней и нижней границы, второе — левой и правой.
Первое значение задает толщину верхней границы, второе — одновременно левой и правой
3
границы, а третье — нижней границы.
4 Поочередно устанавливается толщину верхней, правой, нижней и левой границы.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!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>](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-93-320.jpg)
![Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства border-width
Объектная модель
[window.]document.getElementById("elementID").style.borderWidth
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как
dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но
только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7
значение dotted превращается в dashed.
Internet Explorer до седьмой версии включительно не поддерживает значения hidden и inherit.
Толщина границы при использовании ключевых слов thin, medium и thick в разных браузерах может
несколько различаться.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-94-320.jpg)
![Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>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
Браузеры
В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя одновременно задать
свойства top, left, right, bottom.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-96-320.jpg)
![</tr>
<tr>
<td>Чебурашка</td>
<td>6</td><td>3</td>
<td>1</td><td>3</td>
</tr>
<tr>
<td>Крокодил Гена </td>
<td>1</td><td>5</td>
<td>5</td><td>2</td>
</tr>
<tr>
<td>Шапокляк</td>
<td>3</td>
<td>4</td>
<td>6</td>
<td>0</td>
</tr>
<tr>
<td>Крыса Лариса </td>
<td>3</td>
<td>1</td>
<td>1</td>
<td>8</td>
</tr>
</table>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Результат использования caption-side
Объектная модель
[window.]document.getElementById("elementID").style.captionSide](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-98-320.jpg)
![</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства clear
Объектная модель
[window.]document.getElementById("elementID").style.clear
Браузеры
В браузере Internet Explorer 6 наблюдается ошибка под названием «эффект ку-ку», когда элементы c clear,
соприкасающиеся с плавающими элементами (у которых задано свойство float) могут исчезать.
В браузере Internet Explorer 7 свойство clear не действует для элементов, у которых одновременно задано
float со значением, не совпадающим с clear.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-100-320.jpg)
![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
Браузеры
Internet Explorer до седьмой версии включительно работает с другой формой записи, при которой значения
координат разделяются между собой пробелом, а не запятой — clip: rect(40px auto auto 40px). Также Internet
Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-102-320.jpg)
![</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
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-104-320.jpg)
![cursor
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Да Да Да Част. Част. Част. Част. Част. Част. Част. Част. Част. Част. Част.
Част. — поддерживается частично.
Краткая информация
CSS CSS2, CSS2.1
Значение по умолчанию auto
Наследуется Да
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/ui.html#cursor-props
Описание
Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от
операционной системы и установленных параметров.
Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он
использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда,
например, вместо традиционной руки, появляющейся при наведении на ссылку, возникает нечто другое. В
большинстве случаев, лучше оставить все как есть.
Синтаксис
cursor: [url('путь к курсору')] | [ auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer |
progress | s-resize | se-resize | sw-resize | text | w-resize | wait | inherit ]
Значения
url Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу, в
котором указана форма курсора, в формате CUR или ANI.
auto Вид курсора по умолчанию для текущего элемента.
inherit Наследует значение родителя.
Остальные допустимые значения приведены в табл. 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}](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-111-320.jpg)
![se-resize ТЕСТ P {cursor:se-resize}
s-resize ТЕСТ P {cursor:s-resize}
sw-resize ТЕСТ P {cursor:sw-resize}
w-resize ТЕСТ P {cursor:w-resize}
nw-resize ТЕСТ P {cursor:nw-resize}
В зависимости от операционной системы и ее настроек вид курсора может отличаться от приведенных в
таблице.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!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 и Opera
работает со значением hand, которое является аналогом значения pointer. Кроме того, в браузерах IE, Safari
и Firefox будут действовать следующие значения: all-scroll, col-resize, no-drop, not-allowed, row-resize,
vertical-text. Учтите, что указанные значения не входят в спецификацию CSS2.1, но соответствуют
спецификации CSS3 (кроме hand).
Браузер Safari до версии 3.1, Opera до версии 9.6 включительно, Firefox до версии 3.0 включительно и
Netscape 9 не поддерживают значение url.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-112-320.jpg)
![Рис. 1. Применение свойства display
Объектная модель
[window.]document.getElementById("elementID").style.display
Браузеры
Internet Explorer до версии 7 включительно:
поддержка значений table-footer-group и table-header-group происходит только для тегов <THEAD> и
<TFOOT>;
для элементов <LI> понимает значение block как list-item;
значение inline-block применяется только для встроенных элементов.
Opera 9.2 и старше, а также Firefox версии 2.0 и старше:
значение table-column применяется только для тега <COL>;
значение table-column-group поддерживается только для тега <COLGROUP>.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-118-320.jpg)
![</div>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства float
Объектная модель
[window.]document.getElementById("elementID").style.styleFloat
[window.]document.getElementById("elementID").style.cssFloat
Браузеры
В браузере Internet Explorer 6 наблюдается ошибка с удвоением значения левого или правого отступа для
плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к
стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента.
Также в этом браузере добавляется отступ 3px (так называемый «трехпиксельный баг») в направлении,
заданном значением float.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-127-320.jpg)
![font
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
Краткая информация
CSS CSS1, CSS2
Значение по умолчанию Зависит от использования
Наследуется Да
Применяется Ко всем элементам
Аналог HTML <I>, <B>, <FONT>
Ссылка на спецификацию http://www.w3.org/TR/CSS21/fonts.html#propdef-font
Описание
Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и
текста.
Синтаксис
font: [font-style || font-variant || font-weight] font-size [/line-height] font-family | inherit
Значения
В качестве обязательных значений свойства font указывается размер шрифта и его семейство. Остальные
значения являются опциональными и задаются при желании. Для подробного ознакомления смотрите
информацию о каждом свойстве отдельно.
inherit Наследует значение родителя.
Примеры использования
p { font: 12pt/10pt sans-serif; }
Из типографики пошла запись указывать через слэш размер шрифта и межстрочное расстояние
(интерлиньяж). Поэтому 12pt в данном случае означает размер основного текста в пунктах, а 10pt —
интерлиньяж. В качестве семейства указывается рубленый шрифт (sans-serif).
p { font: bold italic 110% serif; }
Значение bold устанавливает жирное начертание текста, а italic — курсивное. В данном случае их порядок
не важен, поэтому bold и italic можно поменять местами. Размер текста задается в процентах, а в качестве
гарнитуры используется шрифт с засечками (serif).
p { font: normal small-caps 12px/14px fantasy; }
Значение small-caps принадлежит свойству font-variant и устанавливает текст в виде капители (заглавные
буквы уменьшенного размера). Значение normal применяется сразу к двум свойствам: font-style и font-
weight.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>font</title>
<style type="text/css">
.layer1 {
font: 12pt sans-serif;
}
H1 {
font: 200% serif;
}
</style>](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-130-320.jpg)
![</head>
<body>
<div class="layer1">
<h1>Duis te feugifacilisi</h1>
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te
feugat nulla facilisi.
</div>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства font
Объектная модель
[window.]document.getElementById("elementID").style.font
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-131-320.jpg)
![font-family
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
Краткая информация
CSS CSS1, CSS2
Значение по Шрифт, установленный в браузере по умолчанию. Обычно
умолчанию это Times New Roman.
Наследуется Да
Применяется Ко всем элементам
Аналог HTML <font face="...">
Ссылка на
http://www.w3.org/TR/CSS21/fonts.html#propdef-font-family
спецификацию
Описание
Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого.
Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени
шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные
кавычки.
Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя.
Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому
несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском
компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-
serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с
экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.
Синтаксис
font-family: имя шрифта [, имя шрифта[, ...]] | inherit
Значения
Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:
serif — шрифты с засечками (антиквенные), типа Times;
sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
cursive — курсивные шрифты;
fantasy — декоративные шрифты;
monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова
(шрифт Courier).
inherit Наследует значение родителя.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>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>](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-132-320.jpg)
![<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства font-family
Объектная модель
[window.]document.getElementById("elementID").style.fontFamily
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-133-320.jpg)
![<body>
<h1>Duis te feugifacilisi</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства font-size
Объектная модель
[window.]document.getElementById("elementID").style.fontSize
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-135-320.jpg)
![Рис. 1. Применение свойства font-style
Объектная модель
[window.]document.getElementById("elementID").style.fontStyle
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
Браузеры текст со значением oblique всегда отображают как курсив (italic).](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-137-320.jpg)
![</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства font-variant
Объектная модель
[window.]document.getElementById("elementID").style.fontVariant
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-139-320.jpg)
![Рис. 1. Применение свойства font-weight
Объектная модель
[window.]document.getElementById("elementID").style.fontW eight
Браузеры
Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются
между значениями bold, normal и lighter. На практике же начертание в браузерах обычно ограничено всего
двумя вариантами: нормальное начертание и жирное начертание.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-141-320.jpg)
![Рис. 1. Применение свойства height
Объектная модель
[window.]document.getElementById("elementID").style.height
Браузеры
Браузер Internet Explorer 6 некорректно определяет height как min-height. В режиме несовместимости (quirk
mode) Internet Explorer до версии 8.0 включительно неправильно вычисляет высоту элемента, не добавляя к
ней значение отступов, полей и границ.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-143-320.jpg)
![left: 20px; /* Положение от левого края */
background: #fc3; /* Цвет фона */
margin: 7px; /* Отступы вокруг элемента */
}
.layer2 {
position: relative; /* Относительное позиционирование */
left: -12px; /* Положение от левого края */
top: 13px; /* Положение от верхнего края */
border: 1px solid black; /* Параметры рамки */
padding: 5px; /* Поля вокруг текста */
margin: 7px; /* Отступы вокруг элемента */
}
</style>
</head>
<body>
<div class="layer1">
<div class="layer2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства left
Объектная модель
[window.]document.getElementById("elementID").style.left
Браузеры
В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя одновременно задать
свойства top, left, right, bottom.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-150-320.jpg)
![Рис. 1. Применение свойства letter-spacing
Объектная модель
[window.]document.getElementById("elementID").style.letterSpacing
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-152-320.jpg)
![Рис. 1. Применение свойства line-height
Объектная модель
[window.]document.getElementById("elementID").style.lineHeight
Браузеры
Internet Explorer до седьмой версии неправильно вычисляет высоту строк для изображений и элементов
форм. Также в этом браузере не поддерживается значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-154-320.jpg)
![Рис. 1. Применение свойства list-style
Объектная модель
[window.]document.getElementById("elementID").style.listStyle
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-157-320.jpg)
![Рис. 1. Применение свойства list-style-image
Объектная модель
[window.]document.getElementById("elementID").style.listStyleImage
Браузеры
В разных браузерах расстояние между изображением и текстом может различаться.
В Internet Explorer до седьмой версии включительно не отображаются маркеры, если для списка добавлено
свойство float. Также в этом браузере не поддерживается значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-159-320.jpg)
![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, начинают накладываться на текст списка.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-161-320.jpg)
![<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, начинают накладываться на текст списка.
Браузер Internet Explorer до седьмой версии включительно не поддерживает значения armenian, decimal-
leading-zero, georgian, lower-greek, lower-latin, upper-latin, inheirt. Вместо них выводится нумерация
арабскими числами. В этом браузере нумерация или маркеры не отображаются для плавающих элементов
(UL { float: left; }).
Internet Explorer 8 дополнительно понимает значение upper-greek, которое устанавливает нумерацию в виде
заглавных греческих букв (Α, Β, Γ, Δ,...).](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-163-320.jpg)
![margin
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да
Краткая информация
CSS CSS1
Значение по умолчанию 0
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.html#propdef-margin
Описание
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы
текущего элемента до внутренней границы его родительского элемента (рис. 1).
Рис. 1. Отступ от левого края элемента
Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с
учетом того, что у самого окна по умолчанию тоже установлены отступы. Чтобы от них избавиться, следует
устанавливать значение margin для селектора <BODY> равное нулю.
Свойство margin позволяет задать величину отступа сразу для всех сторон элемента или определить ее
только для указанных сторон.
Синтаксис
margin: [значение | проценты | auto] {1,4} | inherit
Значения
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.
Эффект зависит от количества значений и приведен в табл. 1.
Табл. 1. Зависимость от числа значений
Число
Результат
значений
1 Отступы будут установлены одновременно от каждого края элемента.
2 Первое значение устанавливает отступ от верхнего и нижнего края, второе — от левого и правого.
Первое значение задает отступ от верхнего края, второе — одновременно от левого и правого
3
края, а третье — от нижнего края.
4 Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.
Величину отступов можно указывать в пикселах (px), процентах (%) или других допустимых для CSS
единицах. Значение может быть как положительным, так и отрицательным числом.
auto Указывает, что размер отступов будет автоматически рассчитан браузером.
inherit Наследует значение родителя.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-164-320.jpg)
![Объектная модель
[window.]document.getElementById("elementID").style.margin
Браузеры
Internet Explorer 6 в режиме несовместимости (quirk mode) не поддерживает выравнивание блока по центру
с помощью правила margin: 0 auto. Также в этом браузере наблюдается ошибка с удвоением значения
левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается
тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline
для плавающего элемента.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-166-320.jpg)
![<div class="layer1">
<big>Lorem ipsum dolor sit amet</big>
</div>
<div class="layer2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
</div>
</body>
</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства margin-bottom
Объектная модель
[window.]document.getElementById("elementID").style.marginBottom
Браузеры
Браузер Internet Explorer 6 в некоторых случаях некорректно вычисляет значение отступа, заданное в
процентах.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-168-320.jpg)
![<div class="layer1">
<div class="layer2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства margin-left
Объектная модель
[window.]document.getElementById("elementID").style.marginLeft
Браузеры
Браузер Internet Explorer 6 удваивает значение левого или правого отступа для плавающих элементов,
вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя.
Проблема обычно решается добавлением display: inline для плавающего элемента.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-170-320.jpg)
![</style>
</head>
<body>
<div class="panel">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
</div>
</body>
</html>
Результат данного примера показан ни рис. 2.
Рис. 1. Применение свойства margin-right
Объектная модель
[window.]document.getElementById("elementID").style.marginRight
Браузеры
Браузер Internet Explorer 6 удваивает значение левого или правого отступа для плавающих элементов,
вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя.
Проблема обычно решается добавлением display: inline для плавающего элемента.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-172-320.jpg)
![</div>
</body>
</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства margin-top
Объектная модель
[window.]document.getElementById("elementID").style.marginTop
Браузеры
Браузер Internet Explorer 6 в некоторых случаях некорректно вычисляет значение отступа, заданное в
процентах.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-174-320.jpg)
![<div class="block">
<p>Блокирование элемента не позволяет вообще производить с
ним каких-либо действий, в том числе выделять содержимое
текстового поля, изменять его или активизировать.
Заблокированное поле помечается обычно серым цветом</p>
<p>Некоторые браузеры позволяют выделять и копировать
содержимое заблокированного текстового поля, но все
остальные действия недоступны.</p>
</div>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Результат использования свойства max-height
Объектная модель
[window.]document.getElementById("elementID").style.maxHeight
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-176-320.jpg)
![В данном примере ширина страницы ограничена размером 320 пикселов для всех наладонных устройств. К
ним относятся КПК, смартфоны и другие устройства, способные отображать HTML-документы.
Объектная модель
[window.]document.getElementById("elementID").style.maxWidth
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-178-320.jpg)
![<p>Сайт Cloverfield</p>
<p><a href="/info/">Информация о сайте</a> <a href="/author/">Об авторе</a></p>
</div>
</body>
</html>
В данном примере, чтобы фоновое изображение не обрезалось по верхнему краю, задана минимальная
высота блока равная 80 пикселам. Результат примера показан на рис. 1.
Рис. 1. Высота блока, заданная с помощью min-height
Объектная модель
[window.]document.getElementById("elementID").style.minHeight
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-180-320.jpg)
![background-color: #c0c0c0; /* Цвет фона колонки */
padding: 5px; /* Поля вокруг текста */
width: 250px; /* Ширина правой колонки */
float: left; /* Обтекание по правому краю */
}
</style>
</head>
<body>
<div id="container">
<div id="col1">Колонка 1</div>
<div id="col2">Колонка 2</div>
</div>
</body>
</html>
Результат данного примера, как он отображается в браузере Opera, показан на рис. 1. Internet Explorer 6 не
поддерживает свойство min-width, поэтому страница будет выглядеть иначе (рис. 2).
Рис. 1. Результат использования min-width в браузере Opera
Рис. 2. Результат использования min-width в браузере Internet Explorer 6
Объектная модель
[window.]document.getElementById("elementID").style.minWidth
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-182-320.jpg)
![opacity
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Нет Нет Нет Да Да Да Да Да Да Да Да Нет Да Да
Краткая информация
CSS CSS3
Значение по умолчанию 1
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/css3-color/#transparency
Описание
Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через
элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного
объекта.
Синтаксис
opacity: значение
Значения
В качестве значения выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной
прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают
полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.
Пример
HTML 4.01 CSS 2.1 CSS 3 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!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.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-183-320.jpg)
![Рис. 1. Использование свойства outline
Объектная модель
[window.]document.getElementById("elementID")style.outline](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-186-320.jpg)
![Рис. 1. Использование свойства outline-color
Объектная модель
[window.]document.getElementById("elementID")style.outlineColor](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-188-320.jpg)
![<p class="noborder"><a href="http://ya.ru">Яндекс</a>
<a href="http://google.ru">Google</a></p>
</body>
</html>
Результат примера показан на рис. 2. В данном примере для браузера Firefox убирается пунктирная
граница вокруг ссылок, возникающая при их активации. В первом абзаце рамка еще будет отображаться, а
во втором абзаце она скрывается с помощью значения none свойства outline-style.
Рис. 2. Использование свойства outline-style для ссылок в Firefox
Объектная модель
[window.]document.getElementById("elementID")style.outlineStyle](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-190-320.jpg)
![Рис. 1. Использование свойства outline-width
Объектная модель
[window.]document.getElementById("elementID")style.outlineW idth](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-192-320.jpg)
![Рис. 1. Применение свойства oveflow
Объектная модель
[window.]document.getElementById("elementID").style.overflow
Браузеры
Браузер Internet Explorer поддерживает также свойство overflow-x, которое отображает полосу прокрутки по
горизонтали и overflow-y, оно отвечает за полосу прокрутки по вертикали. Значения те же, что и для overflow.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-194-320.jpg)
![padding
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да
Краткая информация
CSS CSS1, CSS2.1
Значение по умолчанию 0
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.html#propdef-padding
Описание
Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от
внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое
(рис. 1).
Рис. 1. Поле слева от текста
Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить ее
только для указанных сторон.
Синтаксис
padding: [значение | проценты] {1, 4} | inherit
Значения
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.
Эффект зависит от количества значений и приведен в табл. 1.
Табл. 1. Зависимость от числа значений
Число
Результат
значений
1 Поля будут установлены одновременно от каждого края элемента.
2 Первое значение устанавливает поля от верхнего и нижнего края, второе — от левого и правого.
Первое значение задает поле от верхнего края, второе — одновременно от левого и правого края,
3
а третье — от нижнего края.
4 Поочередно устанавливается поля от верхнего, правого, нижнего и левого края.
Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах.
Значение inherit указывает, что оно наследуется у родителя.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-195-320.jpg)
![<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>padding</title>
<style type="text/css">
.layer {
background: #fc3; /* Цвет фона */
border: 2px solid black; /* Параметры рамки */
padding: 20px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div class="layer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
</div>
</body>
</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства border-right-color
Объектная модель
[window.]document.getElementById("elementID").style.padding
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-196-320.jpg)
![</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства padding-bottom
Объектная модель
[window.]document.getElementById("elementID").style.paddingBottom
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-198-320.jpg)
![<div class="layer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Результат данного примера показан ни рис. 2.
Рис. 1. Применение свойства padding-left
Объектная модель
[window.]document.getElementById("elementID").style.paddingLeft
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-200-320.jpg)
![Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diem nonummy nibh euismod tincidunt ut lacreet dolore magna
aliguam erat volutpat. Ut wisis enim ad minim veniam, quis
nostrud exerci tution ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
</div>
</body>
</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства padding-right
Объектная модель
[window.]document.getElementById("elementID").style.paddingRight
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-202-320.jpg)
![</div>
</body>
</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства padding-top
Объектная модель
[window.]document.getElementById("elementID").style.paddingTop
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-204-320.jpg)
![Рис. 1. Применение свойства position
Объектная модель
[window.]document.getElementById("elementID").style.position
Браузеры
Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer до седьмой версии
включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-206-320.jpg)
![top: 20px; /* Положение от верхнего края */
left: 20px; /* Положение от левого края */
width: 100px; /* Ширина блока */
background: #fc3; /* Цвет фона */
border: 1px solid #000; /* Параметры рамки */
padding: 10px; /* Поля вокруг текста */
}
#centercol {
position: relative; /* Относительное позиционирование */
background: maroon; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
color: white; /* Цвет текста */
margin: 13px 250px 0 130px; /* Отступы вокруг блока */
}
#rightcol {
position: absolute; /* Абсолютное позиционирование */
top: 20px; /* Положение от верхнего края */
right: 20px; /* Положение от правого края */
width: 200px; /* Ширина блока */
background: #ccc; /* Цвет фона */
border: 1px solid black; /* Параметры рамки */
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div id="leftcol">...</div>
<div id="centercol">...</div>
<div id="rightcol">...</div>
</body>
</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства right
Объектная модель
[window.]document.getElementById("elementID").style.right
Браузеры
В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя одновременно задать
свойства top, left, right, bottom.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-210-320.jpg)
![#left { text-align: left; }
#right { text-align: right; }
#center { text-align: center; }
.content {
width: 75%; /* Ширина слоя */
background: #fc0; /* Цвет фона */
}
</style>
</head>
<body>
<div id="left"><div class="content">Выравнивание по левому краю</div></div>
<div id="center"><div class="content">Выравнивание по центру</div></div>
<div id="right"><div class="content">Выравнивание по правому краю</div></div>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Выравнивание текста в браузере Opera
Браузер Internet Explorer несколько иначе трактует данный пример, чем Opera и Firefox, выравнивая не
только текст, но и блоки (рис. 2).
Рис. 2. Выравнивание текста в браузере Internet Explorer 6
Объектная модель
[window.]document.getElementById("elementID").style.textAlign](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-214-320.jpg)
![text-decoration
Internet Explorer Netscape Opera Safari Firefox
6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да
Част. — поддерживается частично.
Краткая информация
CSS CSS1, CSS2
Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML <U>, <S>, <STRIKE>, <BLINK>
Ссылка на http://www.w3.org/TR/CSS21/text.html#propdef-text-
спецификацию decoration
Описание
Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания.
Одновременно можно применить более одного стиля, перечисляя значения через пробел.
Синтаксис
text-decoration: [ blink | line-through | overline | underline ] | none | inherit
Значения
blink Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает,
потом вновь появляется на прежнем месте (пример).
line-through Создает перечеркнутый текст (пример).
overline Линия проходит над текстом (пример).
underline Устанавливает подчеркнутый текст (пример).
none Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по
умолчанию.
inherit Значение наследуется у родителя.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!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](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-215-320.jpg)
![[window.]document.getElementById("elementID").style.textDecorationBlink
[window.]document.getElementById("elementID").style.textDecorationLineThrough
[window.]document.getElementById("elementID").style.textDecorationNone
[window.]document.getElementById("elementID").style.textDecorationOverLine
[window.]document.getElementById("elementID").style.textDecorationUnderline
Браузеры
Браузер Internet Explorer до восьмой версии включительно, хотя и позволяет использовать значение blink,
текст показывает как обычно, без всякого мерцания.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit. Линия, полученная с
помощью значения line-through, в IE7 располагается выше, чем в других браузерах. В IE8 эта ошибка
исправлена.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-216-320.jpg)
![Рис. 1. Применение свойства text-indent
Объектная модель
[window.]document.getElementById("elementID").style.textIndent](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-218-320.jpg)
![Рис. 1. Применение свойства text-transform
Объектная модель
[window.]document.getElementById("elementID").style.textTransform
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-220-320.jpg)
![width: 120px; /* Ширина блока */
background: #e0e0e0; /* Цвет фона */
border: 1px solid #000; /* Параметры рамки */
padding: 5px; /* Поля вокруг текста */
}
#content {
position: absolute; /* Абсолютное позиционирование */
left: 0; /* Положение от левого края */
top: 0; /* Положение от верхнего края */
width: 280px; /* Ширина блока */
background: #800000; /* Цвет фона */
color: white; /* Цвет текста */
padding: 5px; /* Поля вокруг текста */
padding-right: 60px; /* Отступ справа */
text-align: justify; /* Выравнивание по ширине */
}
</style>
</head>
<body>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diem nonummy nibh euismod tincidunt ut lacreet dolore magna
aliguam erat volutpat. Ut wisis enim ad minim veniam, quis
nostrud exerci tution ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis te feugifacilisi.
</div>
<div id="menu">
Ut wisi enim ad minim veniam, quis nostrud exerci taion
ullamcorper suscipit lobortis nisl ut aliquip ex en
commodo consequat.
</div>
</body>
</html>
Результат данного примера показан ни рис. 2.
Рис. 2. Применение свойства top
Объектная модель
[window.]document.getElementById("elementID").style.top
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
Браузеры
В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя одновременно задать
свойства top, left, right, bottom.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-222-320.jpg)
![<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>vertical-align</title>
</head>
<body>
<div style="font-family: Times, serif; font-size: 200%">
T<span style="vertical-align: sub">E</span>X и L<span
style="vertical-align: 5px; font-size: 80%">A</span>T<span
style="vertical-align: sub">E</span>X
</div>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства vertical-align
Объектная модель
[window.]document.getElementById("elementID").style.verticalAlign
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-226-320.jpg)
![Объектная модель
[window.]document.getElementById("elementID").style.visibility
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit и collapse.
Браузер Safari до версии 2.0 включительно поддерживает значение collapse.
Opera до версии 9.2 включительно воспринимает значение collapse как hidden для всех элементов.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-228-320.jpg)
![border: 1px solid black; /* Параметры рамки */
border-bottom: none; /* Убираем линию снизу */
padding: 3px; /* Поля вокруг текста */
display: inline; /* Отображать как встроенный элемент */
background: #efecdf; /* Цвет фона */
font-weight: bold; /* Жирное начертание */
font-size: 90%; /* Размер шрифта */
margin: 0px; /* Убираем отступы */
white-space: nowrap; /* Переносов в тексте нет */
}
</style>
</head>
<body>
<p class="exampleTitle">Пример</p>
<p class="example">
<html>
<body>
<b>Великая теорема Ферма</b><br>
<i>X <sup><small>n</small></sup>
+ Y <sup><small>n</small></sup> =
Z <sup><small>n</small></sup></i><br>
где n - целое число > 2
lt;/body>
</html>
</p>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства white-space
Объектная модель
[window.]document.getElementById("elementID").style.whiteSpace
Браузеры
Браузер Internet Explorer до седьмой версии включительно не поддерживает значения pre-line, pre-wrap и
inherit. Для <TEXTAREA> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как
pre-line.
Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap. Для <TEXTAREA>
значения normal, nowrap, и pre воспринимаются как pre-wrap.
Opera до версии 9.2 не поддерживает значение pre-line. Для <TEXTAREA> значения normal и pre ведут себя
как pre-wrap, а значение nowrap ведет себя как pre-line.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-231-320.jpg)
![background: #fc0; /* Цвет фона */
padding: 7px; /* Поля вокруг текста */
border: 1px solid #ccc; /* Параметры рамки */
}
.layer2 {
width: 400px; /* Ширина текстового блока */
}
</style>
</head>
<body>
<div class="layer1">
<p class="layer2">Lorem ipsum dolor sit amet,consectetuer
adipiscing elit,seddiem nonummy nibh euismod tincidunt ut
lacreet dolore magna aliguam erat volutpat.</p>
</div>
</body>
</html>
Результат данного примера, как он отображается в бразере Opera показан ни рис. 1.
Рис. 1. Ширина блока в браузере Opera
Объектная модель
[window.]document.getElementById("elementID").style.width
Браузеры
Браузер Internet Explorer 6 некорректно определяет width как min-width. В режиме несовместимости (quirk
mode) Internet Explorer до версии 8.0 включительно неправильно вычисляет ширину элемента, не добавляя
к ней значение отступов, полей и границ.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-233-320.jpg)
![<div id="layer2">Слой 2</div>
<p>Слой 4 наверху</p>
<div id="layer3">Слой 3</div>
<div id="layer4">Слой 4</div>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение свойства z-index
Объектная модель
[window.]document.getElementById("elementID").style.zIndex
Браузеры
Список, созданный с помощью тега <SELECT>, в браузере Internet Explorer 6 всегда отображается поверх
других элементов, несмотря на значение z-index.
Internet Explorer до седьмой версии включительно не поддерживает значение inherit и интерпретирует auto
как 0.
В браузере Firefox до версии 2.0 включительно отрицательное значение z-index располагало элемент
располагает элемент ниже фона веб-страницы и его контента.](https://image.slidesharecdn.com/css-120422172002-phpapp01/85/css-237-320.jpg)
влад мержевич. справочник по css.
- 1. Влад Мержевич Справочник по CSS
- 2. Как пользоваться справочником Описание каждого стилевого свойства происходит по одному шаблону, содержит таблицу браузеров с номерами версий, которые поддерживают указанное свойство, синтаксис написания, допустимые значения, наследование и к каким элементам свойство применяется. Каждое свойство иллюстрируется примером, который показывает область его применения. В большинстве случаев приводится рисунок, демонстрирующий результат примера, что позволяет наглядно понять, как действует то или иное свойство CSS. Браузеры Хотя большинство свойств CSS описаны достаточно давно, разработчики не всегда включали их поддержку в браузер или делали это не в полном объеме. По этой причине часто возникала ситуация, когда стандарты нельзя было применять только потому, что они не работали. К счастью, эта ситуация исправляется и современные браузеры поддерживают спецификацию CSS 2.1 практически в полном объеме, хотя еще и не до конца. Тем не менее, при создании универсальных веб-страниц, которые корректно отображаются в разных браузерах, необходимо знать, какие свойства будут работать и где, а какие нет. Для этого в таблице приведены популярные браузеры — Internet Explorer, Netscape, Opera, Safari и Firefox, а также используются следующие обозначения: Да — свойство полностью поддерживается браузером со всеми допустимыми значениями; Нет — свойство браузером не воспринимается и игнорируется; Частично — свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации; Ошибки — свойство понимается браузером, но при его работе возможно появление различных ошибок. В примечании обычно указывается, какого рода ошибки обнаруживаются в браузере. Синтаксис Каждое свойство CSS записывается в следующем обобщенном виде: Селектор { свойство: значения; } Селектором называют имя стиля, в котором указаны параметры форматирования, делятся они на несколько типов: селекторы тегов, идентификаторы и классы. Селекторы тегов используются для определения стилей встроенных тегов HTML. Классы применяются для создания стилей, которые можно применять к любому тегу HTML, для создания выделений или изменения стиля блока текста. Идентификаторы обычно используются совместно со скриптами, чтобы можно было управлять параметрами стиля динамически, кроме того, каждый идентификатор в пределах страницы должен быть уникальным. Далее в фигурных скобках указывается свойство CSS и через двоеточие его желаемое значение. Писать несколько свойств можно, перечисляя их через точку с запятой, либо задавая их отдельно, как показано ниже. P { color: green; background: #f0f0f0; } P { color: green; } P { background: #f0f0f0; } В первой строке для селектора P одновременно устанавливается цвет текста и фона, а во второй — вначале задается цвет текста, а затем уже цвет фона. Поскольку селектор указан один, но свойства разные, то они будут применяться одновременно. Поэтому подобные формы записи приводят к одному результату. Если для одного селектора определяются одинаковые свойства, но с разными значениями, то использоваться будет тот, что указан в коде последним. P { color: green } P { color: red } В строке показано изменение цвета фона у параграфа <P>. Вначале задается зеленый цвет, а затем красный, который и будет применен к тексту. Любые свойства CSS, а также их значения нечувствительны к регистру, поэтому их можно набирать как заглавными, так и строчными символами. Но при этом их традиционно всегда пишут маленькими буквами.
- 3. При описании синтаксиса применяются следующие обозначения: вертикальная черта между значениями (например, 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//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Скрипт</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>
- 4. <div id="descr" style="visibility: hidden"> Данная эксклюзия является подмножеством астрациональных супремативных монотенных федоний кадонарного экстрафазория. </div> </body> </html> В данном примере текст отображается при наведении курсора мыши на графическую кнопку и вновь прячется, когда курсор уводится прочь. Обозначения Для удобства стилевые свойства и их значения в справочнике различаются по цветам. <BLOCKQUOTE> — тег. При упоминании в справочнике теги, как правило, пишутся заглавными буквами, а в коде примера обозначаются прописными. border-bottom — стилевое свойство, параметр тега или выделение. left — значение свойства или параметра тега.
- 5. Браузеры Селекторы Браузер Internet Explorer Opera Safari Firefox Netscape Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 * Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да .class Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да Да #id Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да E Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Да Да EF Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да Да E>F Нет Нет Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да E+F Нет Нет Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да E[параметр] Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Да Да E[параметр = Нет Нет Да Да Да Да Да Да Ошибки Да Ошибки Да Да Да Да Да "значение"] E[параметр ~= Нет Нет Да Да Да Да Да Да Ошибки Да Ошибки Да Да Да Да Да "значение"] E[параметр |= Нет Нет Да Да Да Да Да Да Ошибки Да Ошибки Да Да Да Да Да "значение"] E[параметр ^= Нет Нет Да Да Да Да Да Да Ошибки Да Ошибки Да Да Да Да Да "значение"] E[параметр $= Нет Нет Да Да Да Да Да Да Ошибки Да Ошибки Да Да Да Да Да "значение"] E[параметр *= Нет Нет Да Да Да Да Да Да Ошибки Да Ошибки Да Да Да Да Да "значение"] @-правила Браузер Internet Explorer Netscape Opera Safari Firefox Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 @charset Ошибки Ошибки Ошибки Да Нет Нет Нет Нет Да Да Нет Нет Нет Да Да Да @import Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да @font-face Част. Част. Част. Част. Нет Нет Нет Нет Нет Нет Нет Нет Да Нет Нет Нет @media Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да @page Нет Нет Нет Да Нет Нет Нет Нет Да Да Нет Нет Нет Нет Нет Нет Псевдоэлементы Браузер Internet Explorer Netscape Opera Safari Firefox Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 :after Нет Нет Нет Да Да Да Да Да Ошибки Да Да Да Да Част. Част. Да :before Нет Нет Нет Да Да Да Да Да Ошибки Да Да Да Да Част. Част. Да :first-letter Ошибки Ошибки Ошибки Да Ошибки Ошибки Да Да Да Да Да Да Да Ошибки Ошибки Да :first-line Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Псевдоклассы Браузер Internet Explorer Netscape Opera Safari Firefox Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 :active Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да :first-child Нет Нет Да Да Да Да Да Да Да Да Да Да Да Нет Да Да :focus Нет Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Да :hover Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да Да :lang Нет Нет Нет Да Да Да Да Да Да Да Нет Нет Да Да Да Да :link Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да
- 6. :visited Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Фон Браузер Internet Explorer Netscape Opera Safari Firefox Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 background Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да background-attachment Ошибки Ошибки Част. Да Да Да Да Да Да Да Да Да Да Да Да Да background-color Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да background-image Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да background-position Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да background-repeat Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да opacity Нет Нет Нет Нет Да Да Да Да Да Да Да Да Да Нет Да Да Границы Браузер Internet Explorer Netscape Opera Safari Firefox Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 border Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да border-bottom Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да border-bottom-color Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да border-bottom-style Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да border-bottom-width Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да border-collapse Част. Част. Част. Ошибки Да Да Да Да Да Да Да Да Да Да Да Да border-color Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да border-left Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да border-left-color Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да border-left-style Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да border-left-width Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да border-right Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да border-right-color Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да border-right-style Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да border-right-width Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да border-style Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да border-top Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да border-top-color Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да border-top-style Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да border-top-width Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да border-width Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да outline Нет Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Да outline-color Нет Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Да outline-style Нет Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Да outline-width Нет Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Да Позиционирование Браузер Internet Explorer Netscape Opera Safari Firefox Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 bottom Ошибки Ошибки Част. Да Да Да Да Да Да Да Да Да Да Да Да Да height Ошибки Ошибки Част. Да Да Да Да Да Да Да Да Да Да Да Да Да left Ошибки Ошибки Част. Да Да Да Да Да Да Да Да Да Да Да Да Да max-height Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Да Да max-width Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Да Да min-height Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Да Да min-width Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Да Да
- 7. position Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Да Да right Ошибки Ошибки Част. Да Да Да Да Да Да Да Да Да Да Да Да Да top Ошибки Ошибки Част. Да Да Да Да Да Да Да Да Да Да Да Да Да width Ошибки Ошибки Част. Да Да Да Да Да Да Да Да Да Да Да Да Да z-index Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да Форматирование Браузер Internet Explorer Opera Safari Firefox Netscape Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 clear Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да clip Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да display Част. Част. Част. ? Част. Част. Част. Част. Да Да Да Да Да Част. Част. Част. float Ошибки Ошибки Част. Да Да Да Да Да Да Да Да Да Да Да Да Да overflow Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да vertical- Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да align visibility Част. Част. Част. Да Да Да Ошибки Ошибки Ошибки Да Част. Част. Да Да Да Да Цвет Браузер Internet Explorer Netscape Opera Safari Firefox Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 color Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да Шрифт Браузер Internet Explorer Netscape Opera Safari Firefox Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 font Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да font-family Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да font-size Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да font-style Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да font-variant Част. Част. Част. Да Да Да Да Да Да Да Нет Нет Да Да Да Да font-weight Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Текст Браузер Internet Explorer Netscape Opera Safari Firefox Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 direction Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да letter-spacing Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да line-height Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да text-align Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да text-decoration Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да text-indent Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да text-transform Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да unicode-bidi Част. Част. Част. Да Да Да Да Да Да Да Нет Нет Да Да Да Да white-space Част. Част. Част. Да Част. Част. Част. Част. Част. Да Да Да Да Част. Част. Да word-spacing Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да Список Браузер Internet Explorer Netscape Opera Safari Firefox Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 list-style Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да
- 8. list-style-image Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да list-style-position Ошибки Ошибки Част. Да Да Да Да Да Да Да Да Да Да Да Да Да list-style-type Ошибки Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да Отступы Браузер Internet Explorer Netscape Opera Safari Firefox Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 margin Ошибки Ошибки Част. Да Да Да Да Да Да Да Да Да Да Да Да Да margin-bottom Ошибки Ошибки Част. Да Да Да Да Да Да Да Да Да Да Да Да Да margin-left Ошибки Ошибки Част. Да Да Да Да Да Да Да Да Да Да Да Да Да margin-right Ошибки Ошибки Част. Да Да Да Да Да Да Да Да Да Да Да Да Да margin-top Ошибки Ошибки Част. Да Да Да Да Да Да Да Да Да Да Да Да Да Поля Браузер Internet Explorer Netscape Opera Safari Firefox Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 padding Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да padding-bottom Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да padding-left Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да padding-right Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да padding-top Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да Таблица Браузер Internet Explorer Netscape Opera Safari Firefox Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 border- Част. Част. Част. Ошибки Да Да Да Да Да Да Да Да Да Да Да Да collapse caption- Нет Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Да side empty- Нет Нет Нет Да Ошибки Ошибки Ошибки Ошибки Ошибки Да Да Да Да Ошибки Ошибки Да cells table- Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Да Да layout Курсор Браузер Internet Explorer Netscape Opera Safari Firefox Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 cursor Ошибки Да Да Да Част. Част. Част. Част. Част. Част. Част. Част. Част. Част. Част. Част. Контент Браузер Internet Explorer Netscape Opera Safari Firefox Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 content Нет Нет Нет Да Част. Част. Част. Част. Част. Да Част. Част. Да Част. Част. Да counter-increment Нет Нет Нет Да Да Да Да Да Да Да Нет Нет Да Да Да Да counter-reset Нет Нет Нет Да Да Да Да Да Да Да Нет Нет Да Да Да Да quotes Нет Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Да Примечания Все сведения относительно IE8 относятся к версии RC1 (Release Candidate), вышедшей в декабре 2008 года. Официальная поддержка браузера Netscape Navigator закончилась 1 марта 2008 года.
- 9. Netscape базируется на том же ядре Gecko, что и браузер Firefox, поэтому поддержка стилевых свойств у них одинакова.
- 10. Хаки Хаком называется набор приемов, направленных на то, чтобы для одного браузера задать стиль определенного элемента, который бы отличался от стиля для других браузеров. В первую очередь хаки предназначены для устранения существующих ошибок в браузере и создания так называемой кроссбраузерной верстки, когда один и тот же документ одинаково и без ошибок отображается в разных браузерах. Использование !important Работает: IE5 IE5.5 IE6 Не работает: IE7 IE8 Opera Safari Firefox Описание При добавлении !important к значению стилевого свойства его важность повышается. Если переопределить значение того же свойства без !important, оно будет игнорироваться браузерами. Но только не в Intenet Explorer версии 6 и ниже. Пример 1 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Хаки</title> <style type="text/css"> #hack { background: orange !important; /* Оранжевый цвет */ background: green; /* Зеленый цвет */ padding: 10px; color: #fff; } </style> </head> <body> <div id="hack">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</div> </body> </html> В данном примере в браузере Internet Explorer 6 цвет фона блока будет зеленым, в остальных браузерах — оранжевым. Символ подчеркивания перед свойством Работает: IE5 IE5.5 IE6 Не работает: IE7 IE8 Opera Safari Firefox Описание Если перед стилевым свойством добавить символ подчеркивания, то он будет пониматься только браузером Internet Explorer до 6 версии включительно. Пример 2 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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"> #hack { background: orange; /* Оранжевый цвет */ _background: green; /* Зеленый цвет */ color: #fff; padding: 10px; } </style> </head> <body> <div id="hack"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna
- 11. aliguam erat volutpat. </div> </body> </html> В данном примере в браузере Internet Explorer 6 цвет фона блока будет зеленым, в остальных браузерах — оранжевым. Комбинация * html Работает: IE5 IE5.5 IE6 Не работает: IE7 IE8 Opera Safari Firefox Для обозначения любого элемента в CSS используется символ звездочки (*), который называется универсальным селектором. Его понимают все браузеры, но вот сочетание * HTML — только один Internet Explorer до 6 версии включительно. Добавляя эту комбинацию перед селектором, получим стиль, который работает только в одном браузере. Пример 3 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Хаки</title> <style type="text/css"> * HTML DIV P { color: olive; /* Для браузера Internet Explorer */ } DIV P { color: red; /* Для остальных браузеров */ } </style> </head> <body> <div><p>Lorem ipsum dolor sit amet...</p></div> </body> </html> В данном примере в браузере Internet Explorer версии 6 и ниже текст отображается оливковым цветом, а в остальных браузерах — красным. Универсальный селектор Работает: IE5 IE5.5 IE6 IE7 Не работает: IE8 Opera Safari Firefox Добавление символа звездочки (*) перед именем стилевого свойства противоречит спецификации CSS, но понимается браузером Internet Explorer до версии 7 включительно. Соответственно, свойства со звездочкой впереди будут работать только в этом семействе браузеров. Пример 4 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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"> #hack { background: orange; /* Оранжевый цвет (для IE8 и всех остальных браузеров) */ *background: green; /* Зеленый цвет (для браузера IE7 и ниже) */ color: #fff; padding: 10px; } </style> </head> <body> <div id="hack">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</div> </body> </html>
- 12. В данном примере зеленый цвет фона у блока будет установлен только для браузера Internet Explorer версии семь и ниже. В остальных браузерах цвет фона будет оранжевым. Условные комментарии Работает: IE5 IE5.5 IE6 IE7 IE8 Не работает: Opera Safari Firefox Любой текст в коде HTML можно закомментировать и при этом он никак не будет отображаться на веб-странице. Для этого его следует поместить между элементами <!-- и -->. Браузер Internet Explorer кроме того поддерживает специальный синтаксис, в задачу которого входит интерпретировать код, если перед нами Internet Explorer. Остальные браузеры при этом видят обычный комментарий и не отображают его. <!--[if IE]> Код для браузера Internet Explorer <![endif]--> Внутри квадратных скобок допустимо использовать следующие ключевые слова: IE — любая версия браузера Internet Explorer; IE 5 — Internet Explorer 5; IE 5.5 — Internet Explorer 5.5; IE 6 — Internet Explorer 6; IE 7 — Internet Explorer 7; IE 8 — Internet Explorer 8; lt — номер версии браузера меньше указанной; gt — номер версии больше указанной; lte — номер версии меньше или равен указанной; gte — номер версии браузера больше или равен указанной. Поскольку указанные элементы можно писать только внутри контейнера <BODY>, то следует добавить тег <STYLE>, как показано в примере 5. Пример 5 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Хаки</title> <style type="text/css"> DIV { color: orange; /* Для всех браузеров, кроме IE */ } </style> </head> <body> <!--[if gt IE 5.5]> <style type="text/css"> DIV { color: green; /* Для браузера Internet Explorer версии 5.5 и старше */ } </style> <![endif]--> <div> <p>Lorem ipsum dolor sit amet...</p> </div> </body> </html> @media all and (min-width) Работает: Opera Safari Не работает: IE Firefox Правило @media используется для определения стиля, предназначенного только для определенных устройств. Конструкцию @media all понимают все браузеры, но Opera и Safari также поддерживают @media all and (min- width) — правило, появившееся в CSS3. Соответственно, помещая желаемые стилевые свойства внутрь этого правила, получим стиль, работающий только в браузерах Opera и Safari. Пример 6 HTML 4.01 CSS 2.1 CSS 3 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
- 13. <!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"> DIV { background: orange; /* Для браузеров IE и Firefox */ } @media all and (min-width) { DIV { background: green; /* Для Opera и Safari */ } } </style> </head> <body> <div>Lorem ipsum dolor sit amet...</div> </body> </html> В данном примере в браузере Opera и Safari цвет блока отображается зеленым, в то время как Internet Explorer и Firefox покажут его оранжевым. Псевдокласс root Работает: Firefox Safari Opera 9.50 и старше Не работает: IE Opera 9.40 и младше Псевдокласс root применяется к элементам верхнего уровня (называемых корневыми) и поддерживается CSS3. Конструкция HTML:root или *:root понимается браузерами Firefox, Safari и Opera начиная с версии 9.50, поэтому, используя контекстные селекторы в стилях (*:root селектор), получим стиль, работающий только в указанных браузерах. Пример 7 HTML 4.01 CSS 2.1 CSS 3 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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"> HTML:root DIV { background: green; /* Для Firefox и Safari */ padding: 10px; } DIV { background: orange; /* Для IE и Opera */ } </style> </head> <body> <div>Lorem ipsum dolor sit amet...</div> </body> </html> Данный код проходит валидацию как CSS3, но не CSS2.1. Псевдокласс first-child Работает: Opera 9.40 и младше Не работает: IE Firefox Safari Opera 9.50 и старше Псевдокласс first-child применяется к первому дочернему элементу. Хотя этот псевдокласс понимают многие браузеры, но конструкция HTML: first-child работает только в Опере. Пример 8 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Хаки</title>
- 14. <style type="text/css"> HTML:first-child DIV { background: green; /* Для браузера Opera */ padding: 10px; } DIV { background: orange; /* Для IE, Firefox и Safari */ padding: 10px; } </style> </head> <body> <div>Lorem ipsum dolor sit amet...</div> </body> </html> В данном примере показано, как только для браузера Opera 9.40 и младше задать зеленый цвет фона у блока, в то время как для остальных браузеров он будет оранжевым.
- 15. Универсальный селектор Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Описание Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае поможет универсальный селектор, который соответствует любому элементу веб-страницы. Синтаксис * { Описание правил стиля } Для обозначения универсального селектора применяется символ звездочки (*). В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Универсальный селектор</title> <style type="text/css"> * { margin: 0; padding: 0; /* Убираем отступы и поля для всех элементов */ } </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> Браузеры Браузер Internet Explorer до шестой версии включительно понимает конструкцию * html, что нелогично, поскольку тег <HTML> является тегом верхнего уровня и выше него никаких элементов быть не может. Эта ошибка иногда применяется, чтобы создать стиль только для IE6, например конструкция * html body { … } будет добавлять стиль для селектора BODY только в IE6 и не работает в других браузерах. В браузере Internet Explorer 7 при добавлении универсального селектора перед именем селектора без пробелов, он воспринимается как контекстный селектор. Так, запись *body работает только в IE7 и игнорируется другими браузерами.
- 16. Селекторы тегов Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Да Да Да Да Да Да Да Да Да Да Да Да Да Описание В качестве селектора может выступать любой тег HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и др. Синтаксис E { Описание правил стиля } Здесь E имя произвольного тега. Следует понимать, что хотя стиль можно применить к любому тегу, результат будет заметен только для тегов, которые непосредственно отображаются в контейнере <BODY>. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Селекторы тегов</title> <style type="text/css"> P { text-align: justify; /* Выравнивание по ширине */ color: green; /* Зеленый цвет текста */ } </style> </head> <body> <p>Более эффективным способом ловли льва в пустыне является метод золотого сечения. При его использовании пустыня делится на две неравные части, размер которых подчиняется правилу золотого сечения.</p> </body> </html> В данном примере изменяется цвет текста и выравнивание текста параграфа. Стиль будет применяться только к тексту, который располагается внутри контейнера <P> (рис. 1). Рис. 1. Применение стиля к селектору P Браузеры Internet Explorer до шестой версии включительно не поддерживает тег <ABBR>, поэтому любое добавление стиля к селектору ABBR игнорируется.
- 17. Контекстные селекторы Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Да Описание При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте. Например, задать стиль для тега <B> только когда он располагается внутри контейнера <P>. Таким образом можно одновременно установить стиль для отдельного тега, а также для тега, который находится внутри другого. Синтаксис E F { Описание правил стиля } Здесь E это родительский тег, а F — тег, расположенный в контейнере <E>. В этом случае стиль будет применяться к тегу <F>, когда соблюдается следующий код <E><F></F></E>. Не обязательно должно быть два тега, допускается произвольный уровень вложения. При этом конструкция может записываться так: div div ul li {...}. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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"> P B { font-family: Times, serif; /* Семейство шрифта */ font-weight: bold; /* Жирное начертание */ color: navy; /* Синий цвет текста */ } </style> </head> <body> <div><b>Жирное начертание текста</b></div> <p><b>Одновременно жирное начертание текста и выделенное цветом</b></p> </body> </html> В данном примере показано обычное применение тега <B> и этого же тега, когда он вложен внутрь абзаца <P>. При этом меняется цвет и шрифт текста, как показано на рис. 1. Рис. 1. Использование контекстных селекторов Браузеры В браузере Internet Explorer версии 6 и ниже не работает комбинация контекстных селекторов и псевдокласса hover. Например, стиль для селекторов P B:hover или A:hover SPAN применяться не будет.
- 18. Дочерние селекторы Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Описание Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Какой элемент выступает родителем, а какой его потомком легко выяснить с помощью дерева элементов — так называется структура отношений тегов документа между собой (рис. 1). Рис. 1. Дерево элементов На рис. 1 в удобном виде представлена вложенность элементов и их иерархия. Здесь дочерним элементом по отношению к тегу <DIV> выступает тег <P>. Вместе с тем тег <STRONG> не является дочерним для тега <DIV>, поскольку он расположен в контейнере <P>. Синтаксис E > F { Описание правил стиля } Стиль применяется к элементу F, только когда он является дочерним для элемента E. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Дочерние селекторы</title> <style type="text/css"> UL#menu { margin: 0; padding: 0; /* Убираем отступы */ } UL#menu > LI { list-style: none; /* Убираем маркеры списка */ width: 100px; /* Ширина элемента в пикселах */ background: #b3d9d2; /* Цвет фона */ color: #333; /* Цвет текста */ padding: 5px; /* Поля вокруг текста */ font-family: Arial, sans-serif; /* Рубленый шрифт */ font-size: 90%; /* Размер шрифта */ font-weight: bold; /* Жирное начертание */ float: left; /* Располагаем элементы по горизонтали */ } LI > UL { list-style: none; /* Убираем маркеры списка */ margin: 0; padding: 0; /* Убираем отступы вокруг элементов списка */ border-bottom: 1px solid #666; /* Граница внизу */ padding-top: 5px; /* Добавляем отступ сверху */ } LI > A { display: block; /* Ссылки отображаются в виде блока */ font-weight: normal; /* Нормальное начертание текста */ font-size: 90%; /* Размер шрифта */
- 19. background: #fff; /* Цвет фона */ border: 1px solid #666; /* Параметры рамки */ border-bottom: none; /* Убираем границу снизу */ padding: 5px; /* Поля вокруг текста */ } </style> </head> <body> <ul id="menu"> <li>Правка <ul> <li><a href="undo.html">Отменить</a></li> <li><a href="cut.html">Вырезать</a></li> <li><a href="copy.html">Копировать</a></li> <li><a href="paste.html">Вставить</a></li> </ul> </li> <li>Начертание <ul> <li><a href="bold.html">Жирное</a></li> <li><a href="italic.html">Курсивное</a></li> <li><a href="underline.html">Подчеркнутое</a></li> </ul> </li> <li>Размер <ul> <li><a href="small.html">Маленький</a></li> <li><a href="normal.html">Нормальный</a></li> <li><a href="middle.html">Средний</a></li> <li><a href="big.html">Большой</a></li> </ul> </li> </ul> </body> </html> В данном примере дочерние селекторы требуются, чтобы разделить стиль элементов списка верхнего уровня и вложенные списки, которые выполняют разные задачи, поэтому стиль для них не должен пересекаться. Результат примера показан на рис. 2. Рис. 2. Использование дочерних селекторов Браузеры Браузер Internet Explorer 7 не применяет стиль, если между селекторами располагается комментарий (LI > /* больше */ A).
- 20. Соседние селекторы Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Описание Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Синтаксис E + F { Описание правил стиля } Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами E и F. Пробелы вокруг плюса не обязательны. Стиль при такой записи применяется к элементу F, но только в том случае, если он является соседним для элемента E и следует сразу после него. Рассмотрим несколько примеров. <p>Lorem ipsum <b>dolor</b> sit amet.</p> Тег <B> является дочерним по отношению к тегу <P>, поскольку он находится внутри этого контейнера. Соответственно <P> выступает в качестве родителя <B>. <p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p> Теги <VAR> и <B> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера <P>, не влияет на их отношение. <p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p> Соседними здесь являются теги <B> и <I>, а также <I> и <TT>. При этом <B> и <TT> к соседним элементам не относятся из-за того, что между ними расположен контейнер <I>. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Соседние селекторы</title> <style type="text/css"> B + I { color: red; /* Красный цвет текста */ } </style> </head> <body> <p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, <i>consectetuer</i> adipiscing elit.</p> </body> </html> Браузеры Браузер Internet Explorer 7 не применяет стиль, если между селекторами располагается комментарий (B + /* плюс */ I).
- 21. Селекторы параметров Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Да Да Да Да Да Да Да Да Да Да Да Да Да Описание Многие теги различаются по своему действию в зависимости от того, какие в них используются параметры. Например, тег <INPUT> может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счет изменения значение параметра type. При этом добавление правил стиля к селектору INPUT применит стиль одновременно ко всем созданным с помощью этого тега элементам. Чтобы гибко управлять стилем подобных элементов, в CSS введены селекторы параметров (называемые также селекторы атрибутов). Они позволяют установить стиль тега по присутствию определенного параметра или его значения. Простой селектор параметра Описание Устанавливает стиль для элемента, если задан специфичный параметр тега. Его значение в данном случае не важно. Синтаксис [параметр] { Описание правил стиля } E[параметр] { Описание правил стиля } Стиль применяется к тем тегам, внутри которых добавлен указанный параметр. Пробел между именем селектора и квадратными скобками не допускается. Пример 1 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Селекторы параметров</title> <style type="text/css"> Q { font-style: italic; /* Курсивное начертание */ quotes: "00AB" "00BB"; /* Меняем вид кавычек в цитате */ } Q[title] { color: maroon; /* Цвет текста */ } </style> </head> <body> <p>Продолжая известный закон Мерфи, который гласит: <q>Если неприятность может случиться, то она обязательно случится</q>, можем ввести свое наблюдение: <q title="Из законов Фергюссона-Мержевича">После того, как веб-страница будет корректно отображаться в одном браузере, выяснится, что она неправильно показывается в другом</q>.</p> </body> </html> Результат примера показан на рис. 1. Рис. 1. Изменение стиля элемента в зависимости от применения параметра title В данном примере меняется цвет текста внутри контейнера <Q>, когда к нему добавляется параметр title. Обратите внимание, что для селектора Q[title] нет нужды повторять стилевые свойства, поскольку они наследуются от селектора Q. Браузер IE7 не добавляет кавычки к тексту, только изменяет его цвет.
- 22. Параметр со значением Описание Устанавливает стиль для элемента в том случае, если задано определенное значение специфичного параметра. Синтаксис [параметр="значение"] { Описание правил стиля } E[параметр="значение"] { Описание правил стиля } В первом случае стиль применяется ко всем тегам, которые содержат указанное значение параметра. А во втором — только к определенным селекторам. Пример 2 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Селекторы параметров</title> <style type="text/css"> A[target="_blank"] { background: url(blank.png) 0 6px no-repeat; /* Параметры фонового рисунка */ padding-left: 15px; /* Смещаем текст вправо */ } </style> </head> <body> <p><a href="link1.html">Обычная ссылка</a> | <a href="link2" target="_blank">Ссылка в новом окне</a></p> </body> </html> Результат примера показан ниже (рис. 2). Рис. 2. Изменение стиля элемента в зависимости от значения параметра target В данном примере рисунок к ссылке добавляется с помощью свойства background. В его функции входит создание повторяющейся фоновой картинки, но повторение фона можно отменить через значение no-repeat, что в итоге даст единственное изображение. Значение параметра начинается с определенного текста Описание Устанавливает стиль для элемента в том случае, если значение параметра тега начинается с указанного текста. Синтаксис [параметр^="значение"] { Описание правил стиля } E[параметр^="значение"] { Описание правил стиля } В первом случае стиль применяется ко всем элементам, у которых значение параметра начинаются с указанного текста. А во втором — только к определенным селекторам. Использование кавычек не обязательно. Пример 3 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Селекторы параметров</title> <style type="text/css"> A[href^="http://"] {
- 23. font-weight: bold /* Жирное начертание */ } </style> </head> <body> <p><a href="link1.html">Обычная ссылка</a> | <a href="http://htmlbook.ru" target="_blank">Внешняя ссылка на сайт htmlbook.ru</a></p> </body> </html> Результат примера показан ниже (рис. 3). Рис. 3. Изменение стиля для внешних ссылок В данном примере внешние ссылки выделяются жирным начертанием. Внешние ссылки характеризуются добавлением к адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http://, его и добавляем к селектору A, как показано в примере. Значение параметра оканчивается определенным текстом Описание Устанавливает стиль для элемента в том случае, если значение параметра оканчивается указанным текстом. Синтаксис [параметр$="значение"] { Описание правил стиля } E[параметр$="значение"] { Описание правил стиля } В первом случае стиль применяется ко всем элементам у которых значение параметра завершается заданным текстом. А во втором — только к определенным селекторам. Пример 4 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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"> A[href$=".ru"] { /* Если ссылка заканчивается на .ru */ background: url('ru.png') no-repeat 0 6px; /* Добавляем фоновый рисунок */ padding-left: 12px; /* Смещаем текст вправо */ } A[href$=".com"] { /* Если ссылка заканчивается на .com */ background: url('com.png') no-repeat 0 6px; padding-left: 12px; } </style> </head> <body> <p><a href="http://www.yandex.com">Yandex.Com</a> | <a href="http://www.yandex.ru">Yandex.Ru</a></p> </body> </html> В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 4). Стилевые свойства будут добавляться только для тех ссылок, параметр href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться уже не будет.
- 24. Рис. 4. Добавление картинки к ссылкам Значение параметра содержит указанный текст Описание Возможны варианты, когда стиль следует применить к тегу с определенным параметром, при этом частью его значения является некоторый текст. При этом точно не известно, в каком месте значения включен данный текст — в начале, середине или конце. В подобном случае следует использовать конструкцию *=. Синтаксис [параметр*="значение"] { Описание правил стиля } E[параметр*="значение"] { Описание правил стиля } Пример 5 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Селекторы параметров</title> <style type="text/css"> [href*="htmlbook"] { background: yellow; /* Желтый цвет фона */ } </style> </head> <body> <p><a href="http://www.htmlbook.ru/html/">Теги HTML</a> | <a href="http://stepbystep.htmlbook.ru">Шаг за шагом</a> | <a href="http://webimg.ru">Графика для Веб</a></p> </body> </html> Результат данного примера показан на рис. 5. В примере показано изменение стиля ссылок, в параметре href которых встречается слово «htmlbook». Рис. 5. Изменение стиля для ссылок, в адресе которых встречается «htmlbook» Одно из нескольких значений параметра Описание Некоторые значения параметров могут перечисляться через пробел, например имена классов. Чтобы задать стиль при наличии в списке требуемого значения требуется использовать конструкцию ~=. Синтаксис [параметр~="значение"] { Описание правил стиля } E[параметр~="значение"] { Описание правил стиля } Стиль применяется в том случае, если у параметра имеется указанное значение или оно входит в список значений, разделяемых пробелом. Пример 6 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- 25. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Блок</title> <style type="text/css"> [class~="block"] h3 { color: green; } </style> </head> <body> <div class="block tag"> <h3>Заголовок</h3> </div> </body> </html> В данном примере зеленый цвет текста применяется к селектору H3, если имя класса у слоя задано как block. Отметим, что аналогичный результат можно получить, если использовать конструкцию *= вместо ~=. Дефис в значении параметра Описание В именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создавать значащие значения параметров id и class. Синтаксис [параметр|="значение"] { Описание правил стиля } E[параметр|="значение"] { Описание правил стиля } Стиль применяется к элементам, у которых параметр начинается с указанного значения или с фрагмента значения, после которого идет дефис. Пример 7 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Блок</title> <style type="text/css"> DIV[class|="block"] { background: #306589; /* Цвет фона */ color: #acdb4c; /* Цвет текста */ padding: 5px; /* Поля */ } DIV[class|="block"] A { color: #fff; /* Цвет ссылок */ } </style> </head> <body> <div class="block-menu-therm"> <h2>Термины</h2> <div class="content"> <ul class="menu"> <li><a href="t1.html">Буквица</a></li> <li><a href="t2.html">Выворотка</a></li> <li><a href="t3.html">Выключка</a></li> <li><a href="t4.html">Интерлиньяж</a></li> <li><a href="t5.html">Капитель</a></li> <li><a href="t6.html">Начертание</a></li> <li><a href="t7.html">Отбивка</a></li> </ul> </div> </div> </body> </html> В данном примере имя класса задано как block-menu-therm, поэтому в стилях используется конструкция |="block", поскольку значение начинается именно с этого слова и в значении встречаются дефисы.
- 26. !important Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Да Да Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2 Значение по умолчанию Нет Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/cascade.html#important-rules Описание Играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает, то !important позволяет повысить приоритет стиля. При использовании пользовательской таблицы стилей или одновременном применении разного стиля автора и пользователя к одному и тому же селектору, браузер руководствуется следующим алгоритмом. 1. !important добавлен в авторский стиль — будет применяться стиль автора. 2. !important добавлен в пользовательский стиль — будет применяться стиль пользователя. 3. !important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль автора. 4. !important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя. Итог от применения !important в общем случае показан в табл. 1. Табл. 1. Результат применения !important Стиль автора Стиль пользователя Результат BODY { BODY { Lorem ipsum dolor sit amet... /* Серый цвет текста */ /* Черный цвет текста */ color: silver; color: #000; Будет применяться стиль автора, а именно: установлен серый цвет текста, размер шрифта 8 пунктов. /* Размер текста 8 /* Размер текста 12 пунктов */ пунктов */ font-size: 8pt font-size: 12pt } } BODY { Lorem ipsum dolor sit amet... BODY { /* Черный цвет текста, /* Серый цвет текста */ повышенная важность */ Цвет текста будет установлен пользовательским, а размер color: silver; шрифта останется исходным. В итоге увидим черный текст color: #000 !important; размером 8 пунктов. /* Размер текста 8 /* Размер текста 12 пунктов */ пунктов */ font-size: 8pt font-size: 12pt } } BODY { BODY { /* Серый цвет текста */ /* Черный цвет текста, Lorem ipsum dolor sit amet... color: silver; повышенная важность */ color: #000 !important; Будут использоваться все стилевые свойства пользователя. /* Размер текста 8 Текст станет отображаться как черный, размер 12 пунктов. пунктов */ /* Размер текста 12 font-size: 8pt пунктов, повышенная } важность */ font-size: 12pt !important } BODY { BODY { Lorem ipsum dolor sit amet... /* Серый цвет текста, /* Черный цвет текста, повышенная важность повышенная важность */ При добавлении !important в ту и другую таблицу приоритет в */ color: #000 !important; этом случае имеет стиль пользователя. В результате текст color: silver !important; станет черным, а размер его увеличится до 12 пунктов. /* Размер текста 12 /* Размер текста 8 пунктов, повышенная пунктов, повышенная важность */
- 27. важность */ font-size: 12pt !important font-size: 8pt !important } } В браузере Internet Explorer подключение стиля пользователя делается через меню Сервис > Свойство обозревателя > Оформление , как показано на рис. 1. Рис. 1. Подключение стиля пользователя в браузере Internet Explorer В браузере Opera аналогичное действие происходит через команду Инструменты > Настройки > Вкладка «Дополнительно» > Содержимое > Кнопка «Параметры стиля» (рис. 2).
- 28. Рис. 2. Подключение стиля пользователя в браузере Opera Синтаксис Свойство: значение !important Значения У этого свойства нет значений. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>important</title> <style type="text/css"> P { background: url('images/tune1.png') no-repeat !important; min-height: 112px; /* Минимальная высота */ padding-left: 65px; /* Поле слева от текста */ } P { background: url('images/tune2.png') no-repeat; } </style> </head> <body> <p>Минорная пентатоника с пониженной V ступенью также называется блюзовой пентатоникой.</p> </body> </html>
- 29. В данном примере для одного селектора задается одно и то же свойство с разными значениями. Но поскольку к первому селектору добавляется !important, то его стиль и будет применяться на странице. Браузеры При добавлении !important к значению стилевого свойства его важность повышается. Если переопределить значение того же свойства без !important, он будет игнорироваться браузерами. Но только не в Intenet Explorer версии 6 и ниже.
- 30. @charset Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Нет Нет Нет Да Да Нет Нет Нет Да Да Да Краткая информация CSS CSS2 Значение по умолчанию UTF-8 Ссылка на спецификацию http://www.w3.org/TR/CSS21/syndata.html#charset Описание Команда @charset применяется для задания кодировки внешнего CSS-файла. Это имеет значение в том случае, если в CSS-файле используются символы национального алфавита. Для внешней таблицы стилей браузер последовательно просматривает следующие пункты для определения кодировки таблицы стилей: 1. кодировка, которую отдает сервер; 2. правило @charset; 3. параметр charset тега <LINK>; 4. кодировка, установленная в документе через метатег (<meta http-equiv="Content-Type" content="text/html; charset=utf-8">). Приведенный список имеет четко выраженную иерархию — чем выше находится пункт, тем выше его приоритет. Если ни один из пунктов не найден, будет установлена кодировка UTF-8. Синтаксис @charset "кодировка"; Значения Для русского языка обычно указывается кодировка windows-1251 или utf-8. Значение кодировки обязательно должно быть взято в кавычки. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 3.0 @charset "windows-1251"; body { font: 11pt Arial, Helvetica, sans-serif; margin: 0; color: #000; } p.new:after { content: " Новье!"; } Браузеры В браузере Internet Explorer до седьмой версии включительно название кодировки допускается писать без кавычек, что противоречит спецификации CSS.
- 31. @font-face Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Частично Нет Нет Нет Нет Нет Нет Нет Да Нет Нет Нет Краткая информация CSS CSS2, CSS3 Значение по умолчанию Нет Ссылка на спецификацию http://www.w3.org/TR/CSS2/fonts.html#font-descriptions Описание Правило @font-face позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на компьютер пользователя. Синтаксис @font-face { параметры шрифта } Значения Внутри конструкции @font-face может находиться набор свойств для изменения параметров шрифта (font-family, font-size, font-style и др.), а также ссылка на шрифтовой файл. Ссылка записывается в виде src: url(URI), где URI — относительный или абсолютный путь к файлу. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>@font-face</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style type="text/css"> @font-face { font-family: Pompadur; /* Имя шрифта */ src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */ } P { font-family: Pompadur; } </style> </head> <body> <p>Протяженность варьирует дорийский микрохроматический интервал, но если бы песен было раз в пять меньше, было бы лучше для всех.</p> </body> </html> Результат данного примера показан на рис. 1. Рис. 1. Собственный шрифт на странице Браузеры Браузер Internet Explorer до седьмой версии включительно поддерживает только шрифты формата EOT (Embedded OpenType).
- 32. @import Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2 Значение по умолчанию all Ссылка на спецификацию http://www.w3.org/TR/CSS21/cascade.html#at-import Описание Правило @import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу. Синтаксис @import url("имя файла") [типы носителей]; @import "имя файла" [типы носителей]; В качестве типа носителя выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1 перечислены некоторые из них. Табл. 1. Типы носителей и их описание Тип Описание all Все типы. Это значение используется по умолчанию. Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, aural например, можно отнести речевые браузеры. braille Устройства, основанные на системе Брайля, которые предназначены для слепых людей. handheld Наладонные компьютеры и аналогичные им аппараты. print Печатающие устройства вроде принтера. projection Проектор. screen Экран монитора. tv Телевизор. Использование типов носителей совместно с импортом файла дает возможность указывать стиль только для определенных устройств. Значения В качестве значения используется путь к стилевому файлу, который указывается внутри необязательной конструкции url(). Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Импорт стиля</title> <style type="text/css"> @import "/style/main.css" screen; /* Стиль для вывода результата на монитор */ @import "/style/palm.css" handheld, print; /* Стиль для печати */ </style> </head> <body> <p>...</p> </body> </html> Браузеры Браузер Internet Explorer до седьмой версии включительно не поддерживает типы носителей при импорте стилевого файла. Более того, при добавлении типа носителя стилевой файл вообще не загружается.
- 33. @media Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Да Да Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2 Значение по умолчанию all Ссылка на спецификацию http://www.w3.org/TR/CSS21/cascade.html#at-import Описание Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1 перечислены некоторые из них. Табл. 1. Типы носителей и их описание Тип Описание all Все типы. Это значение используется по умолчанию. Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, aural например, можно отнести речевые браузеры. braille Устройства, основанные на системе Брайля, которые предназначены для слепых людей. handheld Наладонные компьютеры и аналогичные им аппараты. print Печатающие устройства вроде принтера. projection Проектор. screen Экран монитора. tv Телевизор. Синтаксис @media тип1 [, тип2] { Описание стиля } Значения После ключевого слова @media идет один или несколько типов носителя, перечисленных в табл. 1; если их больше одного, то они разделяются между собой запятой. После чего следуют обязательные фигурные скобки, внутри которых идет обычное описание стилевых правил. Пример 1 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>@media</title> <style type="text/css"> @media screen { /* Стиль для отображения в браузере */ BODY { font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт */ font-size: 90%; /* Размер шрифта */ color: #000080; /* Цвет текста */ } H1 { background: #faf0e6; /* Цвет фона под текстом */ border: 2px dashed #800000; /* Рамка вокруг заголовка */ color: #a0522d; /* Цвет текста */ padding: 7px; /* Поля вокруг текста */ } H2 { color: #556b2f; /* Цвет текста */ margin: 0; /* Убираем отступы */ }
- 34. P { margin-top: 0.5em; /* Отступ сверху */ } } @media print { /* Стиль для печати */ BODY { font-family: Times, 'Times New Roman', serif; /* Шрифт с засечками */ } H1, H2, P { color: #000; /* Черный цвет текста */ } } </style> </head> <body> <h1>Метод ловли льва в пустыне</h1> <h2>Метод последовательного перебора</h2> <p>Пусть лев имеет габаритные размеры LxWxH, где L — длина льва от кончика носа до кисточки хвоста, W — ширина льва, а H — его высота. После чего пустыню разбиваем на ряд элементарных прямоугольников, размер которых совпадает с шириной и длиной льва. Учитывая, что лев может находиться не строго на заданном участке, а одновременно на двух из них, клетку для ловли следует делать повышенной площади, а именно 2Lx2W. Благодаря этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина льва или, что хуже, только его хвост.</p> <p>Далее последовательно накрываем каждый из размеченных прямоугольников пустыни клеткой и проверяем, пойман лев или нет. Как только лев окажется в клетке, процедура поимки считается завершенной.</p> </body> </html> В данном примере вводится два стиля — один для изменения вида элементов при их обычном отображении в браузере, а второй — при выводе страницы на печать. При этом облик документа для разных носителей может сильно различаться между собой, например, как это показано на рис. 1 и рис. 2. Рис. 1. Страница для отображения в окне браузера
- 35. Рис. 2. Страница, предназначенная для печати Просмотреть документ, у которого CSS установлен как тип print можно, если распечатать определенную страницу. Или пойти на хитрость и временно заменить слово print на screen, чтобы отобразить итог в браузере. Именно так был получен рис. 2. Команда @media применяется в основном для формирования одного стилевого файла, который разбит на блоки по типу устройств. Иногда же имеет смысл создать несколько разных CSS-файлов — один для печати, другой для отображения в браузере — и подключать их к документу по мере необходимости. В подобном случае следует воспользоваться тегом <LINK> с параметром media, значением которого выступают те же типы, перечисленные в табл. 1. Пример 2 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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>@media</title> <link media="print, handheld" rel="stylesheet" href="print.css" type="text/css"> <link media="screen" rel="stylesheet" href="main.css" type="text/css"> </head> <body> <p>...</p> </body> </html> В данном примере используются две таблицы связанных стилей, одна для отображения в браузере, а вторая — для печати документа и его просмотре на КПК. Хотя на страницу загружаются одновременно два разных стиля, применяются они только для определенных устройств.
- 36. @page Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Нет Да Нет Нет Нет Да Да Нет Нет Нет Нет Нет Нет Краткая информация CSS CSS2 Значение по умолчанию Нет Ссылка на спецификацию http://www.w3.org/TR/CSS2/page.html#page-box Описание Правило @page позволяет задать значение полей при печати документа или для страниц, у которых тип носителя задан как print. Синтаксис @page [ { :left | :right | :first } ] { Значения отступов } Значения Для установки полей на странице используется универсальное свойство margin или его производные — margin- top, margin-right, margin-bottom и margin-left, задающие соответственно отступ сверху, справа, снизу и слева. Отрицательное значение допускается, но часть страницы может оказаться «отрезанной». Свойства border и padding не применимы. Ключевое слово :left позволяет задать поля для всех левых страниц, :right — для всех правых, а :first — для первой страницы. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>@page</title> <style type="text/css"> @media print { /* Стиль для печати */ BODY { font-family: Times, 'Times New Roman', serif; /* Шрифт с засечками */ } H1, H2, P { color: #000; /* Черный цвет текста */ } } @page :first { margin: 1cm; /* Отступы для первой страницы */ } @page :left { margin: 1cm 3cm 1cm 1.5cm; /* Отступы для всех левых страниц */ } @page :right { margin: 1cm 3cm 1cm 1.5cm; /* Отступы для всех правых страниц */ } </style> </head> <body> <h1>Метод ловли льва в пустыне</h1> <h2>Метод последовательного перебора</h2> <p>Пусть лев имеет габаритные размеры LxWxH, где L — длина льва от кончика носа до кисточки хвоста, W — ширина льва, а H — его высота. После чего пустыню разбиваем на ряд элементарных прямоугольников, размер которых совпадает с шириной и длиной льва. Учитывая, что лев может находиться не строго на заданном участке, а одновременно на двух из них, клетку для ловли следует делать повышенной площади, а именно 2Lx2W. Благодаря этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина льва или, что хуже, только его хвост.</p> <p>Далее последовательно накрываем каждый из размеченных прямоугольников пустыни клеткой и проверяем, пойман лев или нет. Как только лев окажется в клетке, процедура поимки считается завершенной.</p> </body> </html>
- 37. active Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Да Да Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Применяется К ссылкам (тег <A>) Аналог HTML <body ALINK="#RRGGBB"> Ссылка на http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo- спецификацию classes Описание Псевдокласс active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее. Синтаксис A:active { ... } Значения Нет. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>link</title> <style type="text/css"> a:link { color: #0000d0; /* Цвет ссылок */ } a:visited { color: #900060; /* Цвет посещенных ссылок */ } a:active { color: #f00; /* Цвет активной ссылки */ } </style> </head> <body> <p><a href="task1.html">Вычислить число оборотов двигателя в минуту</a></p> <p>Дается: линейка, часы с секундной стрелкой, лист бумаги, нитка, карандаш, ножницы.</p> </body> </html> В данном примере задается цвет обычных, посещеных и активных ссылок. Результат примера показан на рис. 1. Рис. 1. Результат использования псевдокласса active
- 38. after Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Нет Да Да Да Да Ошибки Да Да Да Да Частично Частично Да Краткая информация CSS CSS2 Значение по умолчанию Нет Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/selector.html#before-and- спецификацию after Описание Псевдоэлемент, который используется для вывода желаемого контента после элемента, к которому он добавляется. Псевдоэлемент after работает совместно со свойством content. Для after характерны следующие особенности. 1. При добавлении after к блочному элементу, значение свойства display может быть только: block, inline, none, marker. Все остальные значения будут трактоваться как block. 2. При добавлении after к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline. Синтаксис Элемент:after { content: "текст" } Значения Нет. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>after</title> <style type="text/css"> p.new:after { content: "Новьё!"; /* Добавляемый текст */ color: #333; /* Цвет текста */ background-color: #fc0; /* Цвет фона */ font-size: 90%; /* Размер шрифта */ padding: 2px; /* Поля вокруг текста */ } </style> </head> <body> <h2>Истории</h2> <p class="new">История о том, как необходимо было сделать могилу, ее начали копать, а потом закапывать, и что из этого получилось.</p> <p>История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось.</p> </body> </html> В данном примере в конце текстового абзаца, помеченного классом new, выводится определенный текст для привлечения внимания. Результат примера показан на рис. 1.
- 39. Рис. 1. Результат использования псевдоэлемента after Браузеры Opera 9.2 учитывает все пробелы, как если бы они были заключены в тег <PRE>. Браузер Firefox до второй версии включительно нестабильно работает с позиционированными элементами, а также не применяет after к тегу <FIELDSET>.
- 40. background Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2.1 Значение по Зависит от использования умолчанию Наследуется Нет Применяется Ко всем элементам <body bgcolor="цвет" background="URL" bgproperties="fixed"> Аналог HTML <table | thead | tbody | tfoot | tr | th | td bgcolor="цвет" background="URL"> Ссылка на http://www.w3.org/TR/CSS21/colors.html#propdef-background спецификацию Описание Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. Синтаксис background: [background-attachment || background-color || background-image || background-position || background-repeat] | inherit Значения Любые комбинации пяти значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить. inherit наследует значение у родительского элемента. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <title>background</title> <style type="text/css"> DIV { height: 200px; /* Высота блока */ width: 200px; /* Ширина блока */ overflow: auto; /* Добавляем полосы прокрутки */ padding-left: 15px; /* Отступ от текста слева */ background: #fc0 url('images/sample.png') 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>
- 41. Результат данного примера показан ниже (рис. 1). Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера Объектная модель [window.]document.getElementById("elementID").style.background Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 42. background-attachment Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2.1 Значение по scroll умолчанию Наследуется Нет Применяется Ко всем элементам Аналог HTML <body background="URL" bgproperties="fixed"> Ссылка на http://www.w3.org/TR/CSS21/colors.html#propdef-background- спецификацию attachment Описание Свойство background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом. Синтаксис background-attachment: fixed | scroll | inherit Значения fixed Делает фоновое изображение элемента неподвижным. scroll Позволяет перемещаться фону вместе с содержимым. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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"> Пример текста </td> </tr> </table> </body> </html> Объектная модель [window.]document.getElementById("elementID").style.backgroundAttachment Браузеры В браузере Internet Explorer 6 значение fixed работает только для тегов <BODY> или <HTML>. Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 43. background-color Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по transparent умолчанию Наследуется Нет Применяется Ко всем элементам Аналог HTML <body | table | thead | tbody | tfoot | th | td bgcolor="цвет"> Ссылка на http://www.w3.org/TR/CSS21/colors.html#propdef-background- спецификацию color Описание Определяет цвет фона элемента. Хотя это свойство не наследует свойства своего родителя, из-за того, что начальное значение устанавливается прозрачным, цвет фона дочерних элементов совпадает с цветом фона родительского элемента. Синтаксис background-color: цвет | transparent | inherit Значения Цвет можно задавать тремя способами. 1. По его названию Браузеры поддерживают некоторые цвета по их названию. 2. По шестнадцатеричному значению Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00. 3. С помощью RGB Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении. transparent Устанавливает прозрачный фон. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>background-color</title> <style type="text/css"> BODY { background-color: #3366CC; /* Цвет фона веб-страницы */ }
- 44. 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 Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 45. background-image Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по none умолчанию Наследуется Нет Применяется Ко всем элементам Аналог HTML <body background="URL"> Ссылка на http://www.w3.org/TR/CSS21/colors.html#propdef-background- спецификацию image Описание Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет. Синтаксис background-image: url(путь к файлу) | none | inherit Значения url В качестве значения используется путь к графическому файлу, который указывается внутри конструкции url(). Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них. none Отменяет фоновое изображение для элемента. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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 Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 46. background-position Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2.1 Значение по 0% 0% умолчанию Наследуется Нет Применяется К блочным элементам Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/colors.html#propdef-background- спецификацию position Описание Задает начальное положение фонового изображения, установленного с помощью свойства background- image. Синтаксис background-position: [left | center | right | проценты | значение] || [top | center | bottom | проценты | значение] | inherit Значения У свойства background-position два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее. top left = left top = 0% 0% (в левом верхнем углу) top = top center = center top = 50% 0% (по центру вверху) right top = top right = 100% 0% (в правом верхнем углу) left = left center = center left = 0% 50% (по левому краю и по центру) center = center center = 50% 50% (по центру) right = right center = center right = 100% 50% (по правому краю и по центру) bottom left = left bottom = 0% 100% (в левом нижнем углу) bottom = bottom center = center bottom = 50% 100% (по центру внизу) bottom right = right bottom = 100% 100% (в правом нижнем углу) В скобках указано, где располагается фоновый рисунок относительно контейнера. При inherit значение наследуется у родителя элемента. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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>
- 47. </body> </html> Объектная модель [window.]document.getElementById("elementID").style.backgroundPosition Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 48. background-repeat Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по repeat умолчанию Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/colors.html#propdef-background- спецификацию repeat Описание Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background- image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. Синтаксис background-repeat: no-repeat | repeat | repeat-x | repeat-y | inherit Значения no-repeat Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу). repeat Фоновое изображение повторяется по горизонтали и вертикали. repeat-x Фоновый рисунок повторяется только по горизонтали. repeat-y Фоновый рисунок повторяется только по вертикали. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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 Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 49. before Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Нет Да Да Да Да Ошибки Да Да Да Да Частично Частично Да Краткая информация CSS CSS2 Значение по умолчанию Нет Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/selector.html#before-and- спецификацию after Описание Псевдоэлемент before применяется для отображения желаемого контента до элемента, к которому он добавляется. Работает совместно со свойством content. Для before характерны следующие особенности. 1. При добавлении before к блочному элементу, значение свойства display может быть только: block, inline, none, marker. Все остальные значения будут трактоваться как block. 2. При добавлении before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline. 3. before наследует стиль от элемента, к которому он добавляется. Синтаксис Элемент:before { content: "текст" } Значения Нет. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>before</title> <style type="text/css"> li:before { content: "¶ "; /* Добавляем желаемый символ перед элементом списка */ } li { list-style: none; /* Убираем исходные маркеры */ } </style> </head> <body> <ul> <li>Альфа</li> <li>Бета</li> <li>Гамма</li> </ul> </body> </html> В данном примере вместо стандартных маркеров списка с помощью псевдоэлемента before выводится символ ¶. Результат примера продемонстрирован на рис. 1.
- 50. Рис. 1. Использование псевдоэлемента before в списках Браузеры Opera 9.2 учитывает все пробелы, как если бы они были заключены в тег <PRE>. Браузер Firefox до второй версии включительно нестабильно работает с позиционированными элементами, а также не применяет before к тегу <FIELDSET>.
- 51. border Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по умолчанию Зависит от использования Наследуется Нет Применяется Ко всем элементам Аналог HTML <img border > | <table border> Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.html#propdef-border Описание Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right. Синтаксис border: [border-width || border-style || border-color] | inherit Значения Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style. Их названия и результат действия представлен на рис. 1. Рис.1. Стили рамок border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате. inherit наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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.
- 52. Рис. 2. Применение свойства border Объектная модель [window.]document.getElementById("elementID").style.border Браузеры Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed. Internet Explorer до седьмой версии включительно не поддерживает значение inherit. Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.
- 53. border-bottom Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по Зависит от использования умолчанию Наследуется Нет Применяется Ко всем элементам Аналог HTML <img border > | <table border> Ссылка на http://www.w3.org/TR/CSS21/box.html#border-shorthand- спецификацию properties Описание Свойство позволяет одновременно установить толщину, стиль и цвет границы внизу элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Синтаксис border-bottom: [border-width || border-style || border-color] | inherit Значения Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений свойства border-style. Их названия и результат действия представлен на рис. 1. Рис.1. Стили рамок border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате. inherit наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>border-bottom</title> <style type="text/css"> .panel { background: #ccc; /* Цвет фона */ } .panel P.content { padding: 5px; /* Добавляем поля */ margin: 0; /* Убираем отступы у параграфа */ border-top: 2px dotted white; /* Параметры линии вверху */ } .panel P.title { font-family: sans-serif; /* Рубленый шрифт */ font-weight: bold; /* Жирное начертание */ font-size: 90%; /* Размер шрифта */ padding: 5px; /* Добавляем поля */ margin: 0; /* Убираем отступы у параграфа */ background: maroon; /* Цвет фона */ color: white; /* Цвет текста */ border-bottom: 2px solid white; /* Параметры линии внизу */ } </style> </head> <body>
- 54. <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 Браузеры Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed. Internet Explorer до седьмой версии включительно не поддерживает значение inherit. Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.
- 55. border-bottom-color Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2.1 Значение по умолчанию Значение цвета, заданное через color Наследуется Нет Применяется Ко всем элементам Аналог HTML <img border > | <table border> Ссылка на http://www.w3.org/TR/CSS21/box.html#border-color- спецификацию properties Описание Устанавливает цвет границы внизу элемента. Синтаксис border-bottom-color: цвет | transparent | inherit Значения Цвет можно задавать тремя способами. 1. По его названию Браузеры поддерживают некоторые цвета по их названию. 2. По шестнадцатеричному значению Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00. 3. С помощью RGB Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении. transparent Устанавливает прозрачный цвет. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>border-bottom-color</title> <style type="text/css"> DIV#panel { background: #ccc; /* Цвет фона */ } #panel P { padding: 5px; /* Добавляем поля */ margin: 0; /* Убираем отступы у параграфа */
- 56. } #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 Браузеры Internet Explorer 6 не поддерживает значение transparent. Браузер Internet Explorer до седьмой версии включительно не поддерживает inherit. Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.
- 57. border-bottom-style Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2.1 Значение по умолчанию Нет Наследуется Нет Применяется Ко всем элементам Аналог HTML <img border > | <table border> Ссылка на http://www.w3.org/TR/CSS21/box.html#border-style- спецификацию properties Описание Устанавливает стиль границы внизу элемента. Синтаксис border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit Значения none Линия не отображается и значение ее толщины обнуляется. hidden Имеет тот же эффект, что и none за исключением применения border-bottom-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае нижняя граница в ячейке не будет отображаться вообще. dotted Линия состоящая из набора точек. dashed Пунктирная линия, состоящая из серии коротких отрезков. solid Сплошная линия. double Двойная линия. groove Создает эффект вдавленной линии. ridge Создает эффект рельефной линии. inset Псевдотрехмерная линия. outset Псевдотрехмерная линия. inherit Наследует значение родителя. Вид указанных стилей представлен на рис. 1. Рис.1. Стили границ Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>border-bottom-style</title> <style type="text/css"> DIV#panel { background: #ccc; /* Цвет фона */ } #panel P { padding: 5px; /* Добавляем поля */ margin: 0; /* Убираем отступы у параграфа */ } #panel P#title {
- 58. 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 Браузеры Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed. Internet Explorer до седьмой версии включительно не поддерживает значения hidden и inherit. Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.
- 59. border-bottom-width Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по умолчанию medium Наследуется Нет Применяется Ко всем элементам Аналог HTML <img border > | <table border> Ссылка на http://www.w3.org/TR/CSS21/box.html#border-width- спецификацию properties Описание Устанавливает толщину границы внизу элемента. Синтаксис border-bottom-width: значение | thin | medium | thick | inherit Значения Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы внизу. Для более точного значения, толщину можно указывать в пикселах или других единицах. inherit наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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.
- 60. Рис. 1. Применение свойства border-bottom-width Объектная модель [window.]document.getElementById("elementID").style.borderBottomWidth Браузеры Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed. Internet Explorer до седьмой версии включительно не поддерживает значения hidden и inherit. Толщина границы при использовании ключевых слов thin, medium и thick в разных браузерах может несколько различаться.
- 61. border-collapse Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Ошибки Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2.1 Значение по separate умолчанию Наследуется Нет К тегу <TABLE> или к элементам, у которых значение display Применяется установлено как table или inline-table Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse спецификацию Описание Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка. а б Рис. 1. Вид таблицы при использовании свойства border-collapse Синтаксис border-collapse: collapse | separate | inherit Значения collapse Линия между ячейками отображается только одна. separate Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>border-collapse</title> <style type="text/css"> TABLE { width: 300px; /* Ширина таблицы */ border: 4px double black; /* Рамка вокруг таблицы */ border-collapse: collapse; /* Отображать только одинарные линии */ } TH { text-align: left; /* Выравнивание по левому краю */
- 62. background: #ccc; /* Цвет фона ячеек */ padding: 5px; /* Поля вокруг содержимого ячеек */ border: 1px solid black; /* Граница вокруг ячеек */ } TD { padding: 5px; /* Поля вокруг содержимого ячеек */ border: 1px solid black; /* Граница вокруг ячеек */ } </style> </head> <body> <table cellspacing="0"> <tr> <th> </th><th>2003</th> <th>2004</th><th>2005</th> </tr> <tr> <td>Нефть</td><td>43</td> <td>51</td><td>79</td> </tr> <tr> <td>Золото</td><td>29</td> <td>34</td><td>48</td> </tr> <tr> <td>Дерево</td><td>38</td> <td>57</td><td>36</td> </tr> </table> </body> </html> Результат данного примера показан на рис. 2. Рис. 2. Вид таблицы при использовании свойства border-collapse Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit. Internet Explorer 8 ошибочно отрисовывает границу при значении hidden свойства border-style.
- 63. border-color Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2.1 Значение по умолчанию Нет Наследуется Нет Применяется Ко всем элементам Аналог HTML <img border> | <table border> Ссылка на http://www.w3.org/TR/CSS21/box.html#propdef-border- спецификацию color Описание Устанавливает цвет границы на разных сторонах элемента. Свойство позволяет задать цвет границы сразу для всех сторон элемента или только для указанных. Синтаксис border-color: [цвет | transparent] {1,4} | inherit Значения Цвет можно задавать тремя способами. 1. По его названию Браузеры поддерживают некоторые цвета по их названию. 2. По шестнадцатеричному значению Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00. 3. С помощью RGB Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении. transparent Устанавливает прозрачный цвет. inherit Наследует значение родителя. Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Результат зависит от количества и указан в табл. 1. Табл. 1. Изменение цвета в зависимости от числа значений Число Результат значений 1 Цвет границы будет установлен для всех сторон элемента. 2 Первое значение устанавливает цвет верхней и нижней границы, второе — левой и правой. Первое значение задает цвет верхней границы, второе — одновременно левой и правой границы, а 3 третье — нижней границы. 4 Поочередно устанавливается цвет верхней, правой, нижней и левой границы.
- 64. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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 Браузеры Internet Explorer 6 не поддерживает значение transparent. Браузер Internet Explorer до седьмой версии включительно не поддерживает inherit. Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.
- 65. border-left Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по Зависит от использования умолчанию Наследуется Нет Применяется Ко всем элементам Аналог HTML <img border > | <table border> Ссылка на http://www.w3.org/TR/CSS21/box.html#border-shorthand- спецификацию properties Описание Свойство border-left позволяет одновременно установить толщину, стиль и цвет левой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Синтаксис border-left: [border-width || border-style || border-color] | inherit Значения Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений свойства border-style. Их названия и результат действия представлен на рис. 1. Рис.1. Стили рамок border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате. inherit наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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.
- 66. Рис. 2. Применение свойства border-left Объектная модель [window.]document.getElementById("elementID").style.borderLeft Браузеры Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed. Internet Explorer до седьмой версии включительно не поддерживает значение inherit. Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.
- 67. border-left-color Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2.1 Значение по умолчанию Нет Наследуется Нет Применяется Ко всем элементам Аналог HTML <img border > | <table border> Ссылка на http://www.w3.org/TR/CSS21/box.html#border-color- спецификацию properties Описание Задает цвет границы слева от элемента. Синтаксис border-left-color: цвет | transparent | inherit Значения Цвет можно задавать тремя способами. 1. По его названию Браузеры поддерживают некоторые цвета по их названию. 2. По шестнадцатеричному значению Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00. 3. С помощью RGB Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении. transparent Устанавливает прозрачный цвет. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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; /* Расстояние между линией и текстом */ }
- 68. </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 Браузеры Internet Explorer 6 не поддерживает значение transparent. Браузер Internet Explorer до седьмой версии включительно не поддерживает inherit. Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.
- 69. border-left-style Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2.1 Значение по умолчанию Нет Наследуется Нет Применяется Ко всем элементам Аналог HTML <img border > | <table border> Ссылка на http://www.w3.org/TR/CSS21/box.html#border-style- спецификацию properties Описание Устанавливает стиль границы слева от элемента. Синтаксис border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit Значения none Линия не отображается и значение ее толщины обнуляется. hidden Имеет тот же эффект, что и none за исключением применения border-left-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае левая граница в ячейке не будет отображаться вообще. dotted Линия состоящая из набора точек. dashed Пунктирная линия, состоящая из серии коротких отрезков. solid Сплошная линия. double Двойная линия. groove Создает эффект вдавленной линии. ridge Создает эффект рельефной линии. inset Псевдотрехмерная линия. outset Псевдотрехмерная линия. inherit Наследует значение родителя. Вид указанных стилей представлен на рис. 1. Рис.1. Стили границ Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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>
- 70. <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 Браузеры Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed. Internet Explorer до седьмой версии включительно не поддерживает значения hidden и inherit. Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.
- 71. border-left-width Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по умолчанию medium Наследуется Нет Применяется Ко всем элементам Аналог HTML <img border > | <table border> Ссылка на http://www.w3.org/TR/CSS21/box.html#border-width- спецификацию properties Описание Устанавливает толщину границы слева от элемента. Синтаксис border-left-width: значение | thin | medium | thick | inherit Значения Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы слева. Для более точного значения, толщину можно указывать в пикселах или других единицах. inherit наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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.
- 72. Рис. 1. Использование свойства border-left-width Объектная модель [window.]document.getElementById("elementID").style.borderLeftWidth Браузеры Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed. Internet Explorer до седьмой версии включительно не поддерживает значения hidden и inherit. Толщина границы при использовании ключевых слов thin, medium и thick в разных браузерах может несколько различаться.
- 73. border-right Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по Зависит от использования умолчанию Наследуется Нет Применяется Ко всем элементам Аналог HTML <img border > | <table border> Ссылка на http://www.w3.org/TR/CSS21/box.html#border-shorthand- спецификацию properties Описание Свойство border-right позволяет одновременно установить толщину, стиль и цвет правой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Синтаксис border-right: [border-width || border-style || border-color] | inherit Значения Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений свойства border-style. Их названия и результат действия представлен на рис. 1. Рис.1. Стили рамок border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате. inherit наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>border-right</title> <style type="text/css"> DIV.line { border-left: 1px solid red; /* Линия слева от текста */ border-right: 1px solid red; /* Линия справа от текста */ padding: 0 10px; /* Расстояние между линией и текстом */ margin: 0 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>
- 74. Результат данного примера показан ни рис. 2. Рис. 2. Применение border-right Объектная модель [window.]document.getElementById("elementID").style.borderRight Браузеры Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed. Internet Explorer до седьмой версии включительно не поддерживает значение inherit. Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.
- 75. border-right-color Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2.1 Значение по умолчанию Нет Наследуется Нет Применяется Ко всем элементам Аналог HTML <img border> | <table border> Ссылка на http://www.w3.org/TR/CSS21/box.html#border-color- спецификацию properties Описание Задает цвет границы справа от элемента. Синтаксис border-right-color: цвет | transparent | inherit Значения Цвет можно задавать тремя способами. 1. По его названию Браузеры поддерживают некоторые цвета по их названию. 2. По шестнадцатеричному значению Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00. 3. С помощью RGB Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении. transparent Устанавливает прозрачный цвет. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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; /* Отступ справа */
- 76. } </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 Браузеры Internet Explorer 6 не поддерживает значение transparent. Браузер Internet Explorer до седьмой версии включительно не поддерживает inherit. Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.
- 77. border-right-style Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2.1 Значение по умолчанию Нет Наследуется Нет Применяется Ко всем элементам Аналог HTML <img border > | <table border> Ссылка на http://www.w3.org/TR/CSS21/box.html#border-style- спецификацию properties Описание Устанавливает стиль границы справа от элемента. Синтаксис border-right-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit Значения none Линия не отображается и значение ее толщины обнуляется. hidden Имеет тот же эффект, что и none за исключением применения border-right-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае правая граница в ячейке не будет отображаться вообще. dotted Линия состоящая из набора точек. dashed Пунктирная линия, состоящая из серии коротких отрезков. solid Сплошная линия. double Двойная линия. groove Создает эффект вдавленной линии. ridge Создает эффект рельефной линии. inset Псевдотрехмерная линия. outset Псевдотрехмерная линия. inherit Наследует значение родителя. Вид указанных стилей представлен на рис. 1. Рис.1. Стили границ Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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; /* Расстояние между линией и текстом */
- 78. 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 Браузеры Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed. Internet Explorer до седьмой версии включительно не поддерживает значения hidden и inherit. Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.
- 79. border-right-width Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по умолчанию medium Наследуется Нет Применяется Ко всем элементам Аналог HTML <img border > | <table border> Ссылка на http://www.w3.org/TR/CSS21/box.html#border-width- спецификацию properties Описание Устанавливает толщину границы справа от элемента. Синтаксис border-right-width: значение | thin | medium | thick | inherit Значения Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы справа. Для более точного значения, толщину можно указывать в пикселах или других единицах. inherit наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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.
- 80. Рис. 1. Применение свойства border-right-width Объектная модель [window.]document.getElementById("elementID").style.borderRightWidth Браузеры Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed. Internet Explorer до седьмой версии включительно не поддерживает значения hidden и inherit. Толщина границы при использовании ключевых слов thin, medium и thick в разных браузерах может несколько различаться.
- 81. border-spacing Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2 Значение по 0 умолчанию Наследуется Да Применяется К таблицам Аналог HTML <table cellspacing="..."> Ссылка на http://www.w3.org/TR/CSS21/tables.html#propdef-border- спецификацию spacing Описание Задает расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse. Синтаксис border-spacing: значение1 [значение2] Значения Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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-spacing</title> <style type="text/css"> table { border: 4px double #333; /* Рамка вокруг таблицы */ border-collapse: separate; /* Способ отображения границы */ width: 100%; /* Ширина таблицы */ border-spacing: 7px 11px; /* Расстояние между ячейками */ } td { padding: 5px; /* Поля вокруг текста */ border: 1px solid #a52a2a; /* Граница вокруг ячеек */ } </style> </head> <body> <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> </body> </html> Результат данного примера показан ни рис. 1.
- 82. Рис. 1. Применение свойства border-spacing Браузеры Если к тегу <TABLE> добавлен параметр cellspacing, то при использовании стилевого свойства border- spacing параметр cellspacing не принимается во внимание и его значение игнорируется. Исключением из этого правила является браузер Internet Explorer до седьмой версии включительно, который не понимает свойство border-spacing.
- 83. border-style Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по умолчанию none Наследуется Нет Применяется Ко всем элементам Аналог HTML <img border > | <table border> Ссылка на http://www.w3.org/TR/CSS21/box.html#propdef-border- спецификацию style Описание Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента. Синтаксис border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} | inherit Значения Для управления видом границы предоставляется несколько значений свойства 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 Кроме перечисленных в таблице значений используются следующие ключевые слова. none Не отображает границу и ее толщина (border-width) задается нулевой. hidden Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае вокруг ячейки граница не будет отображаться вообще. inherit Наследует значение родителя. Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и указан в табл. 2. Табл. 2. Зависимость результата использования от числа значений Результат Число
- 84. значений 1 Стиль границы будет задан для всех сторон элемента. 2 Первое значение устанавливает стиль верхней и нижней границы, второе — левой и правой. Первое значение задает стиль верхней границы, второе — одновременно левой и правой границы, 3 а третье — нижней границы. 4 Поочередно устанавливается стиль верхней, правой, нижней и левой границы. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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 Браузеры Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed. Internet Explorer до седьмой версии включительно не поддерживает значения hidden и inherit. Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.
- 85. border-top Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по Зависит от использования умолчанию Наследуется Нет Применяется Ко всем элементам Аналог HTML <img border > | <table border> Ссылка на http://www.w3.org/TR/CSS21/box.html#border-shorthand- спецификацию properties Описание Свойство border-top позволяет одновременно установить толщину, стиль и цвет границы сверху элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Синтаксис border-top: [border-width || border-style || border-color] | inherit Значения border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style. Их названия и результат действия представлен на рис. 1. Рис.1. Стили рамок border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате. inherit наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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.
- 86. Рис. 2. Применение свойства border-top Объектная модель [window.]document.getElementById("elementID").style.borderTop Браузеры Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed. Internet Explorer до седьмой версии включительно не поддерживает значение inherit. Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.
- 87. border-top-color Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2.1 Значение по умолчанию Нет Наследуется Нет Применяется Ко всем элементам Аналог HTML <img border > | <table border> Ссылка на http://www.w3.org/TR/CSS21/box.html#border-color- спецификацию properties Описание Задает цвет границы сверху элемента. Синтаксис border-top-color: цвет | transparent | inherit Значения Цвет можно задавать тремя способами. 1. По его названию Браузеры поддерживают некоторые цвета по их названию. 2. По шестнадцатеричному значению Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00. 3. С помощью RGB Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении. transparent Устанавливает прозрачный цвет. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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; /* Стиль линии */
- 88. 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 Браузеры Internet Explorer 6 не поддерживает значение transparent. Браузер Internet Explorer до седьмой версии включительно не поддерживает inherit. Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.
- 89. border-top-style Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2.1 Значение по умолчанию Нет Наследуется Нет Применяется Ко всем элементам Аналог HTML <img border > | <table border> Ссылка на http://www.w3.org/TR/CSS21/box.html#border-style- спецификацию properties Описание Устанавливает стиль границы сверху элемента. Синтаксис border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit Значения none Линия не отображается и значение ее толщины обнуляется. hidden Имеет тот же эффект, что и none за исключением применения border-top-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае верхняя граница в ячейке не будет отображаться вообще. dotted Линия состоящая из набора точек. dashed Пунктирная линия, состоящая из серии коротких отрезков. solid Сплошная линия. double Двойная линия. groove Создает эффект вдавленной линии. ridge Создает эффект рельефной линии. inset Псевдотрехмерная линия. outset Псевдотрехмерная линия. inherit Наследует значение родителя. Вид указанных стилей представлен на рис. 1. Рис.1. Стили границ Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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; /* Поля вокруг текста */
- 90. } </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 Браузеры Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed. Internet Explorer до седьмой версии включительно не поддерживает значения hidden и inherit. Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.
- 91. border-top-width Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по умолчанию medium Наследуется Нет Применяется Ко всем элементам Аналог HTML <img border > | <table border> Ссылка на http://www.w3.org/TR/CSS21/box.html#border-width- спецификацию properties Описание Устанавливает толщину границы сверху элемента. Синтаксис border-top-width: значение | thin | medium | thick | inherit Значения Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы слева. Для более точного значения, толщину можно указывать в пикселах или других единицах. inherit наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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.
- 92. Рис. 1. Применение свойства border-top-width Объектная модель [window.]document.getElementById("elementID").style.borderTopW idth Браузеры Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed. Internet Explorer до седьмой версии включительно не поддерживает значения hidden и inherit. Толщина границы при использовании ключевых слов thin, medium и thick в разных браузерах может несколько различаться.
- 93. border-width Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по умолчанию medium Наследуется Нет Применяется Ко всем элементам Аналог HTML <img border > | <table border> Ссылка на http://www.w3.org/TR/CSS21/box.html#border-width- спецификацию properties Описание Задает толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны. Способ изменения толщины зависит от числа значений. Синтаксис border-width: [значение | thin | medium | thick] {1,4} | inherit Значения Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы. Для более точного значения, толщину можно указывать в пикселах или других единицах. inherit наследует значение родителя. Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и приведен в табл. 1. Табл. 1. Зависимость результата от числа значений Число Результат значений 1 Толщина границы будет установлена для всех сторон элемента. 2 Первое значение устанавливает толщину верхней и нижней границы, второе — левой и правой. Первое значение задает толщину верхней границы, второе — одновременно левой и правой 3 границы, а третье — нижней границы. 4 Поочередно устанавливается толщину верхней, правой, нижней и левой границы. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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>
- 94. Результат данного примера показан ни рис. 1. Рис. 1. Применение свойства border-width Объектная модель [window.]document.getElementById("elementID").style.borderWidth Браузеры Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed. Internet Explorer до седьмой версии включительно не поддерживает значения hidden и inherit. Толщина границы при использовании ключевых слов thin, medium и thick в разных браузерах может несколько различаться.
- 95. bottom Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2 Значение по умолчанию auto Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom Описание Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от свойства position, оно обычно принимает значение relative (относительное положение) или absolute (абсолютное положение). При относительном позиционировании элемента, отсчет ведется от нижнего края исходного положения элемента (рис. 1), а при абсолютном — относительно нижнего края окна документа (рис. 2). Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от нижнего края родителя. Рис. 1. Значение bottom при относительном позиционирование элемента Рис. 2. Значение bottom при абсолютном позиционирование элемента Если одновременно задано свойство top и bottom со значениями отличными от auto, то свойство bottom игнорируется. Синтаксис bottom: значение | проценты | auto | inherit Значения В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства bottom может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента. auto Не изменяет положение элемента. inherit Наследует значение родителя.
- 96. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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 Браузеры В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя одновременно задать свойства top, left, right, bottom. Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 97. caption-side Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2, CSS2.1 Значение по top умолчанию Наследуется Да К <CAPTION> или ко всем элементам, у которых значение Применяется display установлено ка table-caption. Аналог HTML <caption align="top | bottom"> Ссылка на http://www.w3.org/TR/CSS21/tables.html#propdef-caption-side спецификацию Описание Определяет положение заголовка таблицы, который задается с помощью тега <CAPTION>, относительно самой таблицы. Свойство caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через свойство text-align. Браузер Firefox также поддерживает расположение заголовка слева или справа от таблицы, но эти значения не входят в спецификацию CSS. Синтаксис caption-side: top | bottom Значения top Располагает заголовок по верхнему краю таблицы. bottom Заголовок располагается под таблицей. right Заголовок размещается справа от таблицы. Это значение работает только в браузерах Firefox. left Заголовок размещается слева от таблицы. Это значение работает только в браузерах Firefox. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Расположение заголовка</title> <style type="text/css"> table { width: 350px; /* Ширина таблицы */ border-collapse: collapse; /* Убираем двойную рамку между ячейками */ } td { border: 1px solid green; /* Параметры границы */ padding: 5px; /* Поля в ячейке */ } caption { caption-side: bottom; /* Заголовок под таблицей */ } </style> </head> <body> <table> <caption>Расклад карт</caption> <tr> <td> </td> <td>♠</td> <td>♣</td> <td>♥</td> <td>♦</td>
- 98. </tr> <tr> <td>Чебурашка</td> <td>6</td><td>3</td> <td>1</td><td>3</td> </tr> <tr> <td>Крокодил Гена </td> <td>1</td><td>5</td> <td>5</td><td>2</td> </tr> <tr> <td>Шапокляк</td> <td>3</td> <td>4</td> <td>6</td> <td>0</td> </tr> <tr> <td>Крыса Лариса </td> <td>3</td> <td>1</td> <td>1</td> <td>8</td> </tr> </table> </body> </html> Результат данного примера показан на рис. 1. Рис. 1. Результат использования caption-side Объектная модель [window.]document.getElementById("elementID").style.captionSide
- 99. clear Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по умолчанию none Наследуется Нет Применяется К блочным и плавающим элементам Аналог HTML <br clear=none | left | right | all> Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.html#propdef-clear Описание Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон. Синтаксис clear: none | left | right | both | inherit Значения none Отменяет действие свойства clear, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек. both Отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны. left Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом. right Отменяет обтекание с правой стороны элемента. inherit Устанавливает значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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>
- 100. </body> </html> Результат данного примера показан ни рис. 1. Рис. 1. Применение свойства clear Объектная модель [window.]document.getElementById("elementID").style.clear Браузеры В браузере Internet Explorer 6 наблюдается ошибка под названием «эффект ку-ку», когда элементы c clear, соприкасающиеся с плавающими элементами (у которых задано свойство float) могут исчезать. В браузере Internet Explorer 7 свойство clear не действует для элементов, у которых одновременно задано float со значением, не совпадающим с clear. Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 101. clip Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2, CSS2.1 Значение по умолчанию auto Наследуется Нет Применяется К блочным элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/visufx.html#propdef-clip Описание Свойство clip определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственно доступная форма области — прямоугольник. Все остальное остается только в мечтах. clip работает только для абсолютно позиционированных элементов. Синтаксис clip: rect(Y1, X1, Y2, X2) | auto | inherit Значения В качестве значений используется расстояние от края элемента до области вырезки, которое задается в единицах CSS — пикселы (px), em и др. Если край области нужно оставить без изменений, следует установить auto, положение остальных значений показано на рис. 1. Рис. 1. Значения свойства clip Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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
- 102. 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 Браузеры Internet Explorer до седьмой версии включительно работает с другой формой записи, при которой значения координат разделяются между собой пробелом, а не запятой — clip: rect(40px auto auto 40px). Также Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 103. color Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2.1 Значение по умолчанию Зависит от настроек браузера, обычно черный цвет Наследуется Да Применяется Ко всем элементам <body text="цвет"> Аналог HTML <font color="цвет"> Ссылка на спецификацию http://www.w3.org/TR/CSS21/colors.html#propdef-color Описание Определяет цвет текста элемента. Синтаксис color: цвет | inherit Значения Цвет можно задавать тремя способами. 1. По его названию Браузеры поддерживают некоторые цвета по их названию. 2. По шестнадцатеричному значению Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00. 3. С помощью RGB Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>color</title> <style type="text/css"> .letter { color: red; /* Цвет символа */ font-size: 200%; /* Размер шрифта */ } P { color: RGB(49, 151, 116); /* Цвет текста */ } </style>
- 104. </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 Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 105. content Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Нет Да Част. Част. Част. Част. Да Част. Част. Да Част. Част. Да Част. — поддерживается частично. Краткая информация CSS CSS2, CSS2.1 Значение по умолчанию Пустая строка Наследуется Нет Применяется К псевдоэлементам 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 | counter | normal | none | inherit Значения Строка Текст, который добавляется на веб-страницу, строка при этом должна браться в двойные или одинарные кавычки. Допускается использовать юникод для вставки спецсимволов. Спецсимволы HTML которые начинаются с амперсанда (§ например), будут отображаться как есть, т.е. простым текстом (§, а не §). attr(параметр) Возвращает строку, которая является значением параметра тега указанного в скобках. Например, IMG:after {content:attr(href)} добавит после изображения его адрес, т.е. значение параметра href. Если указанного параметра нет, то вернется пустая строка. open-quote Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого свойства quotes. close-quote Вставляет закрывающую кавычку. no-open-quotes Отменяет добавление открывающей кавычки. no-close-quote Отменяет добавление закрывающей кавычки. url Абсолютный или относительный адрес вставляемого объекта. Если указанный файл браузер не может отобразить, то значение игнорируется. counter Выводит значение счетчика, заданного свойством counter-reset. none Не добавляет никакое содержание. normal Задается как none для псевдоэлементов before и after. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>content</title> <style type="text/css"> SPAN.tag { color: navy; /* Цвет текста */ font-family: monospace; /* Моношириный шрифт */ quotes: "<" ">"; /* Устанавливаем вид кавычек */ }
- 106. 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 Браузеры Firefox до второй версии включительно и Opera до версии 9.2 включительно не поддерживают значение none. Safari до версии 3.1 не поддерживает значение none и normal. Браузер Opera начиная с седьмой версии и Safari 3, не требуют использования псевдоэлементов before и after и допускают применение content ко всем элементам.
- 107. counter-increment Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Нет Да Да Да Да Да Да Нет Нет Да Да Да Да Краткая информация CSS CSS2 Значение по none умолчанию Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/generate.html#propdef-counter- спецификацию increment Описание Стилевое свойство counter-increment предназначено для увеличения значения счетчика приращений, который задается свойством counter-reset. Такой счетчик подсчитывает количество отображений элементов на странице и может выводиться с помощью свойства content и псевдоэлементов after и before. Это позволяет создавать списки (в том числе многоуровневые), в которых нумерация и вид задаются через стили. Синтаксис counter-increment: none | inherit | идентификатор | целое число Значения none Запрещает увеличение счетчика для текущего селектора. inherit Наследует значение родителя. идентификатор Задает одну или несколько переменных, для которых требуется изменить значение счетчика. Переменные разделяются между собой пробелом. целое число Определяет значение приращения счетчика. По умолчанию оно равно 1. Допускается использовать отрицательные и нулевые значения. Возможные сочетания значений свойств counter-reset и counter-increment показаны в табл. 1. Табл. 1. Изменение нумерации списка Код Результат LI { list-style-type: none; } OL { counter-reset: list -1; } LI:before { Список начинается с нуля. counter-increment: list; content: counter(list) ". "; 0, 1, 2 } LI { list-style-type: none; } OL { counter-reset: list; } LI:before { Выводятся все четные числа. counter-increment: list 2; content: counter(list) ". "; 2, 4, 6 } LI { list-style-type: none; } OL { counter-reset: list -1; } LI:before { Выводятся все нечетные числа. counter-increment: list list; content: counter(list) ". "; 1, 3, 5 } LI { list-style-type: none; } OL { counter-reset: list 9; } LI:before { Список начинается с 10. counter-increment: list; content: counter(list) ". "; 10, 11, 12 } Пример
- 108. <!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>counter-increment</title> <style type="text/css"> BODY { counter-reset: heading; /* Инициируем счетчик */ } H2:before { counter-increment: heading; /* Указываем идентификатор счетчика */ content: "Глава " counter(heading) ". "; /* Выводим текст перед содержимым тега <H2> */ } </style> </head> <body> <h2>Теория ловли льва в пустыне</h2> <h2>Методы инверсной кинематики</h2> <h2>Ловля льва численными методами</h2> </body> </html> Результат данного примера показан ни рис. 1. Рис. 1. Применение свойства counter-increment Примечание Для элементов, у которых установлено display: none, значение счетчика не меняется.
- 109. counter-reset Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Нет Да Да Да Да Да Да Нет Нет Да Да Да Да Краткая информация CSS CSS2 Значение по none умолчанию Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/generate.html#propdef-counter- спецификацию reset Описание Устанавливает идентификатор, в котором будет храниться счетчик отображений определенного элемента, а также начальное значение счетчика. Такой счетчик может выводиться с помощью свойства content и псевдоэлементов after и before. Синтаксис counter-reset: none | inherit | идентификатор | целое число Значения none Запрещает инициацию счетчика для текущего селектора. inherit Наследует значение родителя. идентификатор Задает одну или несколько переменных, в которых будет храниться значение счетчика. Значения разделяются между собой пробелом. целое число Начальное значение каждого идентификатора. По умолчанию равно 0. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>counter-reset</title> <style type="text/css"> LI { list-style-type: none; } /* Убираем исходную нумерацию у списка */ OL { counter-reset: list1; } /* Инициируем счетчик */ OL LI:before { counter-increment: list1; /* Увеличиваем значение счетчика */ content: counter(list1) ". "; /* Выводим число */ } OL OL { counter-reset: list2; } /* Инициируем счетчик вложенного списка */ OL OL LI:before { counter-increment: list2; /* Увеличиваем значение счетчика вложенного списка */ content: counter(list1) "." counter(list2) ". "; /* Выводим число */ } </style> </head> <body> <ol> <li>Пункт <ol> <li>Подпункт</li> <li>Подпункт</li> <li>Подпункт</li> </ol> </li> <li>Пункт <ol> <li>Подпункт</li>
- 110. <li>Подпункт</li> </ol> </li> </ol> </body> </html> Результат данного примера показан ни рис. 1. Рис. 1. Применение свойства counter-reset Примечание Для элементов, у которых установлено display: none, значение счетчика не меняется.
- 111. cursor Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Да Да Да Част. Част. Част. Част. Част. Част. Част. Част. Част. Част. Част. Част. — поддерживается частично. Краткая информация CSS CSS2, CSS2.1 Значение по умолчанию auto Наследуется Да Применяется Ко всем элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/ui.html#cursor-props Описание Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров. Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной руки, появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все как есть. Синтаксис cursor: [url('путь к курсору')] | [ auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait | inherit ] Значения url Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу, в котором указана форма курсора, в формате CUR или ANI. auto Вид курсора по умолчанию для текущего элемента. inherit Наследует значение родителя. Остальные допустимые значения приведены в табл. 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}
- 112. se-resize ТЕСТ P {cursor:se-resize} s-resize ТЕСТ P {cursor:s-resize} sw-resize ТЕСТ P {cursor:sw-resize} w-resize ТЕСТ P {cursor:w-resize} nw-resize ТЕСТ P {cursor:nw-resize} В зависимости от операционной системы и ее настроек вид курсора может отличаться от приведенных в таблице. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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 и Opera работает со значением hand, которое является аналогом значения pointer. Кроме того, в браузерах IE, Safari и Firefox будут действовать следующие значения: all-scroll, col-resize, no-drop, not-allowed, row-resize, vertical-text. Учтите, что указанные значения не входят в спецификацию CSS2.1, но соответствуют спецификации CSS3 (кроме hand). Браузер Safari до версии 3.1, Opera до версии 9.6 включительно, Firefox до версии 3.0 включительно и Netscape 9 не поддерживают значение url.
- 113. direction Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Да Да Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2 Значение по умолчанию ltr Наследуется Да Применяется Ко всем элементам Аналог HTML <тег direction="ltr | rtl""> Ссылка на http://www.w3.org/TR/CSS21/visuren.html#propdef- спецификацию direction Описание direction предназначен для сайтов, в которых имеет значение направление текста. Например, при использовании арабского алфавита чтение происходит справа налево. Свойство direction достаточно универсально и управляет следующими возможностями: способ отображения текста в блоке; порядок колонок в таблице; позиция полосы прокрутки в блоке; положение последней висячей строки текстового блока при text-align: justify. Для использования со встроенными элементами, значение свойства unicode-bidi должно быть задано как embed или override. Синтаксис direction: ltr | rtl | inherit Значения ltr Устанавливает направление слева направо. rtl Задает направление справа налево. inherit Наследует значение родителя. Пример 1 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>direction</title> <style type="text/css"> DIV.rtl { direction: rtl; /* Направление */ width: 200px; /* Ширина блока */ height: 150px; /* Высота блока */ overflow: scroll; /* Полоса прокрутки */ text-align: left; /* Выравнивание по левому краю */ padding: 5px; /* Поля вокруг текста */ border: 1px solid #000; /* Параметры рамки */ } </style> </head> <body> <div class="rtl">Велосипед уже изобрели, различные приемы верстки тоже. Так что больше знакомься с мировым опытом по части верстки и тебе не придется тратить время на разработку того, что всем давно известно.</div> </body> </html>
- 114. Результат данного примера показан на рис. 1. Обратите внимание на положение точки в предложении, а также на то, что полоса прокрутки в браузере Internet Explorer отображается слева. Рис. 1. Результат использования direction в браузере Internet Explorer Пример 2 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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>direction</title> <style type="text/css"> TABLE { direction: rtl; /* Колонки идут справа налево */ width: 100%; /* Ширина таблицы */ } </style> </head> <body> <table cellspacing="0" border="1"> <tr> <td> </td><td>1999</td><td>2000</td> <td>2001</td><td>2002</td><td>2003</td> </tr> <tr> <td>Нефть</td><td>16</td><td>34</td> <td>62</td><td>74</td><td>57</td> </tr> <tr> <td>Золото</td><td>4</td><td>69</td> <td>72</td><td>56</td><td>47</td> </tr> <tr> <td>Дерево</td><td>7</td><td>73</td> <td>79</td><td>34</td><td>86</td> </tr> </table> </body> </html> Результат данного примера показан на рис. 2. Колонки таблицы отображается справа налево.
- 115. Рис. 2. Применение direction к таблице Браузеры При добавлении свойства direction со значением rtl к блоку с полосой прокрутки (например, <TEXTAREA>), браузер Internet Explorer, Firefox и Netscape отображают скроллинг слева, а Opera и Safari — справа.
- 116. display Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Част. Част. ? Част. Част. Част. Да Да Да Да Да Част. Част. Част. Част — Поддерживается частично. Краткая информация CSS CSS2 Значение по умолчанию inline Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.html#display-prop Описание Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе. Синтаксис 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 Op Op Ff Значение Описание IE6 IE7 IE8 Ff 2 Ff 3 8 9.2 1.5 Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <SPAN>, заставляет block Да Да Да Да Да Да Да Да его вести подобно блокам — происходит перенос строк в начале и в конце содержимого. Элемент отображается как встроенный. Использование блочных тегов, таких как <DIV> и <P>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. inline Да Да Да Да Да Да Да Да Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент. Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному inline- элементу. Фактически такой элемент по своему действию похож Да Да Да Да Да Нет Нет Да block на встраиваемые элементы (вроде тега <IMG>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный. Определяет, что элемент является таблицей как при использовании тега <TABLE>, но при этом таблица является inline-table Нет Нет ? Да Да Нет Нет Да встроенным элементом и происходит ее обтекание другими элементами, например, текстом. list-item Элемент выводится как блочный и добавляется маркер списка. Да Да Да Да Да Да Да Да Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь none видимым элемент можно с помощью скриптов, обращаясь к Да Да Да Да Да Да Да Да свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента. Устанавливает элемент как блочный или встроенный в run-in Нет Нет Да Да Да Нет Нет Нет зависимости от контекста. Определяет, что элемент является блочной таблицей подобно table Нет Нет ? Да Да Да Да Да использованию тега <TABLE>.
- 117. table- Задает заголовок таблицы подобно применению тега Нет Нет ? Да Да Да Да Да caption <CAPTION>. Указывает, что элемент представляет собой ячейку таблицы table-cell Нет Нет ? Да Да Да Да Да (тег <TD> или <TH>). table- Назначает элемент колонкой таблицы, словно был добавлен тег Нет Нет ? Нет Да Да Да Да column <COL>. table- Определяет, что элемент является группой одной или более column- Нет Нет ? Нет Да Да Да Да колонок таблицы, как при использовании тега <COLGROUP>. group table- Используется для хранения одной или нескольких строк ячеек, footer- которые отображаются в самом низу таблицы. По своему Нет Нет ? Да Да Да Да Да group действию сходно с работой тега <TFOOT>. table- Элемент предназначен для хранения одной или нескольких строк header- ячеек, которые представлены вверху таблицы. По своему Нет Нет ? Да Да Да Да Да group действию сходно с работой тега <THEAD>. table-row Элемент отображается как строка таблицы (тег <TR>). Нет Нет ? Да Да Да Да Да table-row- Создает структурный блок, состоящий из нескольких строк Нет Нет ? Да Да Да Да Да group таблицы аналогично действию тега <TBODY>. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>display</title> <style type="text/css"> .example { border: dashed 1px #634f36; /* Параметры рамки */ background: #fffff5; /* Цвет фона */ font-family: "Courier New", Courier, monospace; /* Шрифт текста */ padding: 7px; /* Поля вокруг текста */ margin: 0 0 1em; /* Отступы вокруг */ } .exampleTitle { border: 1px solid black; /* Параметры рамки */ border-bottom: none; /* Убираем линию снизу */ padding: 3px; /* Поля вокруг текста */ display: inline; /* Устанавливаем как встроенный элемент */ background: #efecdf; /* Цвет фона */ font-weight: bold; /* Жирное начертание */ font-size: 90%; /* Размер текста */ margin: 0; /* Убираем отступы вокруг */ white-space: nowrap; /* Отменяем переносы текста */ } </style> </head> <body> <p class="exampleTitle">Пример</p> <p class="example"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br> <html><br> <body><br> <b>Формула серной кислоты:</b> <i>H<sub><small>2</small></sub> SO<sub><small>4</small> </sub></i><br> </body><br> </html> </p> </body> </html> Результат данного примера показан ни рис. 1.
- 118. Рис. 1. Применение свойства display Объектная модель [window.]document.getElementById("elementID").style.display Браузеры Internet Explorer до версии 7 включительно: поддержка значений table-footer-group и table-header-group происходит только для тегов <THEAD> и <TFOOT>; для элементов <LI> понимает значение block как list-item; значение inline-block применяется только для встроенных элементов. Opera 9.2 и старше, а также Firefox версии 2.0 и старше: значение table-column применяется только для тега <COL>; значение table-column-group поддерживается только для тега <COLGROUP>.
- 119. empty-cells Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Нет Да Ошибки Ошибки Ошибки Ошибки Да Да Да Да Ошибки Ошибки Да Краткая информация CSS CSS2 Значение по умолчанию show Наследуется Да К <TD>, <TH> или к элементам, у которых display: table- Применяется cell Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/tables.html#propdef-empty- спецификацию cells Описание Задает отображение границ и фона в ячейке, если она пустая. При одновременном добавлении к таблице свойства border-collapse со значением collapse, свойство empty-cells игнорируется. Ячейка считается пустой в следующих случаях: нет вообще никаких символов; в ячейке содержится только перевод строки, символ табуляции или пробел; значение visibility установлено как hidden. Добавление неразрывного пробела воспринимается как видимое содержание, т.е. ячейка уже будет непустой. Синтаксис empty-cells: show | hide Значения show Отображает границу вокруг ячейки и фон в ней. hide Граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>empty-cells</title> <style type="text/css"> TABLE { border: 4px double #399; /* Граница вокруг таблицы */ } TD { background: #fc0; /* Цвет фона */ border: 1px solid #333; /* Граница вокруг ячеек */ empty-cells: hide; /* Прячем пустые ячейки */ padding: 5px; /* Поля в ячейках */ } </style> </head> <body> <table width="100%"> <tr> <td>Леонардо</td> <td>5</td> <td>8</td> </tr>
- 120. <tr> <td>Рафаэль</td> <td> </td> <td>11</td> </tr> <tr> <td>Микеланджело</td> <td>24</td> <td> </td> </tr> <tr> <td>Донателло</td> <td> </td> <td>13</td> </tr> </table> </body> </html> Результат данного примера в браузере Opera показан ни рис. 1. Тот же пример в браузере Internet Explorer продемонстрирован на рис. 2. Рис. 1. Вид таблицы в браузере Opera 9.62 Рис. 2. Вид таблицы в браузере Internet Explorer 7 Браузеры Internet Explorer до седьмой версии включительно не поддерживает свойство empty-cells и отображает пустые ячейки всегда так, словно для них установлено empty-cells: hide. Firefox версии 2 и ниже (а также Netscape) не прячет строку таблицы, если для всех ячеек задано empty- cells: hide и ячейки пусты. Браузер Opera до версии 9.27 включительно не скрывает строку таблицы и для пустых ячеек отображает цвет фона.
- 121. first-child Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Да Да Да Да Да Да Да Да Да Да Нет Да Да Краткая информация CSS CSS1 Применяется Ко всем элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/selector.html#first-child Описание Псевдокласс first-child добавляет стилевое оформление к первому дочернему элементу селектора, который расположен в дереве элементов документа. Синтаксис тег:first-child { ... } Значения Нет. Пример 1 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>first-child</title> <style type="text/css"> B:first-child { color: red; /* Красный цвет текста */ } </style> </head> <body> <p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b> adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b> exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo consequat</b>.</p> </body> </html> Результат примера показан на рис. 1. В данном примере псевдокласс first-child добавляется к селектору B и устанавливает для него красный цвет текста. Хотя контейнер <B> встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т.е. текст «Lorem ipsum». В остальных случаях содержимое контейнера <B> отображается черным цветом. Со следующим абзацем все начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.
- 122. Рис. 1. Выделение цветом первого дочернего элемента абзаца Пример 2 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>first-child</title> <style type="text/css"> P { text-indent: 1em; /* Отступ первой строки */ } P:first-child { text-indent: 0; /* Для первого абзаца отступ убираем */ } </style> </head> <body> <p>Историю эту уже начали забывать, хотя находились горожане, которые время от времени рассказывали ее вновь прибывшим в город посетителям.</p> <p>Легенда обрастала подробностями и уже совсем не напоминала произошедшее в действительности событие. И, тем не менее, ни один человек не решался заикнуться о ней с наступлением темноты.</p> <p>Но однажды в город вновь вошел незнакомец. Он хромал на левую ногу.</p> </body> </html> Результат данного примера показан на рис. 2. По правилам типографики отступ первой строки для первого абзаца текста обычно не задают, но для остальных абзацев его добавляют. С этой целью в примере используется свойство text-indent со значением отступа 1em. Для изменения стиля первого абзаца и установки нулевого отступа, к селектору P добавлен псевдокласс first-child. Рис. 2. Результат использования псевдокласса first-child
- 123. first-letter Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Ошибки Ошибки Да Да Да Да Да Да Ошибки Ошибки Да Краткая информация CSS CSS1 Применяется К блочным элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/selector.html#first-letter Описание Псевдоэлемент first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном. Синтаксис элемент:first-letter { ... } Значения Нет. Пример 1 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>first-letter</title> <style type="text/css"> P { font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта основного текста */ font-size: 90%; /* Размер шрифта */ } P:first-letter { font-family: "Times New Roman", Times, serif; /* Гарнитура шрифта первой буквы */ font-size: 200%; /* Размер шрифта первого символа */ color: red; /* Красный цвет текста */ } </style> </head> <body> <p>Луч фонарика высветил старые скрипучие ступени, по которым не далее как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака и пыли. </p> <p>Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши.</p> </body> </html> Результат примера показан на рис. 1. В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста.
- 124. Рис. 1. Результат использования псевдоэлемента first-letter Браузеры Internet Explorer до версии 7 включительно, Firefox до версии 2.0 включительно и Netscape игнорируют свойство letter-spacing, когда оно применяется к псевдоэлементу first-letter.
- 125. first-line Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Да Да Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 К блочным элементам Применяется К элементам, у которых значение display задано как inline- block, table-caption или table-cell Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo спецификацию Описание Псевдоэлемент first-line задает стиль первой строки форматированного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д. В правилах стиля допустимо использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона. Синтаксис элемент:first-line { ... } Значения Нет. Пример 1 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>first-line</title> <style type="text/css"> P:first-line { color: red; /* Красный цвет текста */ font-style: italic; /* Курсивное начертание */ font-weight: bold; /* Жирное начертание */ } </style> </head> <body> <p>Олимпия 2008<br> Основной претендент на I место это конечно же Джей Катлер, достигший наивысшего результата за последние два года.</p> </body> </html> Результат примера показан на рис. 1. В данном примере первая строка, выделенная с помощью тега <BR>, изменяет свой вид за счет начертания и цвета. Рис. 1. Результат использования псевдоэлемента first-line
- 126. float Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по none умолчанию Наследуется Нет Ко всем элементам (за исключением Применяется позиционированных) <applet | iframe | img | object | spacer | table align="right | Аналог HTML left"> Ссылка на http://www.w3.org/TR/CSS21/visuren.html#propdef-float спецификацию Описание Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент. Синтаксис float: left | right | none | inherit Значения left Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне. right Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне. none Обтекание элемента не задается. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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.
- 127. </div> </body> </html> Результат данного примера показан ни рис. 1. Рис. 1. Применение свойства float Объектная модель [window.]document.getElementById("elementID").style.styleFloat [window.]document.getElementById("elementID").style.cssFloat Браузеры В браузере Internet Explorer 6 наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента. Также в этом браузере добавляется отступ 3px (так называемый «трехпиксельный баг») в направлении, заданном значением float. Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 128. focus Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2 К элементам, которые могут получить фокус (<A>, <INPUT>, Применяется <SELECT> и <TEXTAREA>) Аналог HTML <тег onfocus="function()"> Ссылка на http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo- спецификацию classes Описание Псевдокласс focus определяет стиль для элемента получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор. Синтаксис элемент:focus { ... } Значения Нет. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>focus</title> <style type="text/css"> #enter .label { width: 80px; /* Ширина блока с текстом */ float: left; /* Расположение в одну строку с полем */ text-align: right; /* Выравнивание по правому краю */ } #enter .form-text { width: 240px; /* Ширина поля */ margin-left: 10px; /* Расстояние между полем и текстом */ border: 1px solid #abadb3; /* Рамка вокруг текстового поля */ padding: 2px; /* Поля вокруг текста */ } #enter .form-item { margin-bottom: 5px; /* Отступ снизу */ } #enter .form-text:focus { background: #ffe; /* Цвет фона */ border: 1px solid #29B0D9; /* Параметры рамки */ } #enter p { margin-left: 90px; /* Сдвиг вправо */ } </style> </head> <body> <form action="login.php" method="post" id="enter"> <div class="form-item"> <span class="label">Логин:</span> <span class="field"><input type="text" id="login" value="" class="form-text"></span> </div> <div class="form-item"> <span class="label">Пароль:</span> <span class="field"><input type="password" id="pass" class="form-text"></span> </div> <p><input type="submit" value="Войти"></p>
- 129. </form> </body> </html> Результат данного примера показан на рис. 1. При получении фокуса текстовое поле меняет цвет фона и цвет границы. Рис. 1. Результат использования псевдокласса focus
- 130. font Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2 Значение по умолчанию Зависит от использования Наследуется Да Применяется Ко всем элементам Аналог HTML <I>, <B>, <FONT> Ссылка на спецификацию http://www.w3.org/TR/CSS21/fonts.html#propdef-font Описание Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста. Синтаксис font: [font-style || font-variant || font-weight] font-size [/line-height] font-family | inherit Значения В качестве обязательных значений свойства font указывается размер шрифта и его семейство. Остальные значения являются опциональными и задаются при желании. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. inherit Наследует значение родителя. Примеры использования p { font: 12pt/10pt sans-serif; } Из типографики пошла запись указывать через слэш размер шрифта и межстрочное расстояние (интерлиньяж). Поэтому 12pt в данном случае означает размер основного текста в пунктах, а 10pt — интерлиньяж. В качестве семейства указывается рубленый шрифт (sans-serif). p { font: bold italic 110% serif; } Значение bold устанавливает жирное начертание текста, а italic — курсивное. В данном случае их порядок не важен, поэтому bold и italic можно поменять местами. Размер текста задается в процентах, а в качестве гарнитуры используется шрифт с засечками (serif). p { font: normal small-caps 12px/14px fantasy; } Значение small-caps принадлежит свойству font-variant и устанавливает текст в виде капители (заглавные буквы уменьшенного размера). Значение normal применяется сразу к двум свойствам: font-style и font- weight. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>font</title> <style type="text/css"> .layer1 { font: 12pt sans-serif; } H1 { font: 200% serif; } </style>
- 131. </head> <body> <div class="layer1"> <h1>Duis te feugifacilisi</h1> Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. </div> </body> </html> Результат данного примера показан ни рис. 1. Рис. 1. Применение свойства font Объектная модель [window.]document.getElementById("elementID").style.font Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 132. font-family Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2 Значение по Шрифт, установленный в браузере по умолчанию. Обычно умолчанию это Times New Roman. Наследуется Да Применяется Ко всем элементам Аналог HTML <font face="..."> Ссылка на http://www.w3.org/TR/CSS21/fonts.html#propdef-font-family спецификацию Описание Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки. Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans- serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания. Синтаксис font-family: имя шрифта [, имя шрифта[, ...]] | inherit Значения Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов: serif — шрифты с засечками (антиквенные), типа Times; sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial; cursive — курсивные шрифты; fantasy — декоративные шрифты; monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier). inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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>
- 133. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html> Результат данного примера показан ни рис. 1. Рис. 1. Применение свойства font-family Объектная модель [window.]document.getElementById("elementID").style.fontFamily Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 134. font-size Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Да Да Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2 Значение по умолчанию medium Наследуется Да Применяется Ко всем элементам Аналог HTML <font size="..."> Ссылка на спецификацию http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size Описание Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задает размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы. Другой набор констант (larger, smaller) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента. В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента. Синтаксис font-size: абсолютный размер | относительный размер | значение | проценты | inherit Значения Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large. Их соответствие с размером шрифта в HTML приведено в табл. 1. Табл. 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% берется размер шрифта родительского элемента. Отрицательные значения не допускаются. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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>
- 135. <body> <h1>Duis te feugifacilisi</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html> Результат данного примера показан ни рис. 1. Рис. 1. Применение свойства font-size Объектная модель [window.]document.getElementById("elementID").style.fontSize Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 136. font-style Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2 Значение по умолчанию normal Наследуется Да Применяется Ко всем элементам Аналог HTML <I> Ссылка на спецификацию http://www.w3.org/TR/CSS21/fonts.html#propdef-font-style Описание Определяет начертание шрифта — обычное, курсивное или наклонное. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста. Результат и качество при этом могут получиться неудовлетворительными, особенно при печати документа. Синтаксис font-style: normal | italic | oblique | inherit Значения normal Обычное начертание текста. italic Курсивное начертание. oblique Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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.
- 137. Рис. 1. Применение свойства font-style Объектная модель [window.]document.getElementById("elementID").style.fontStyle Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit. Браузеры текст со значением oblique всегда отображают как курсив (italic).
- 138. font-variant Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Нет Нет Да Да Да Да Краткая информация CSS CSS1, CSS2 Значение по умолчанию normal Наследуется Да Применяется Ко всем элементам Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/fonts.html#propdef-font- спецификацию variant Описание Определяет, как нужно представлять строчные буквы — оставить их без модификаций или делать их все прописными уменьшенного размера. Такой способ изменения символов называется капителью. Синтаксис font-variant: normal | small-caps | inherit Значения normal Оставляет регистр символов исходным, заданным по умолчанию. small-caps Модифицирует все строчные символы как заглавные уменьшенного размера, как показано на рис. 1. inherit Наследует значение родителя Рис. 1. Обычный текст и текст в виде капители Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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>
- 139. </html> Результат данного примера показан ни рис. 2. Рис. 2. Применение свойства font-variant Объектная модель [window.]document.getElementById("elementID").style.fontVariant Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 140. font-weight Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Да Да Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2 Значение по умолчанию normal Наследуется Да Применяется Ко всем элементам Аналог HTML <B> Ссылка на http://www.w3.org/TR/CSS21/fonts.html#propdef-font- спецификацию weight Описание Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700. Синтаксис font-weight: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900. Значения Насыщенность шрифта задается с помощью ключевых слов: bold — полужирное начертание, bolder — жирное начертание; lighter — светлое начертание, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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.
- 141. Рис. 1. Применение свойства font-weight Объектная модель [window.]document.getElementById("elementID").style.fontW eight Браузеры Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.
- 142. height Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по умолчанию auto Наследуется Нет Применяется К блочным элементам <table height=""> Аналог HTML <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 | inherit Значения В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи высота элемента вычисляется в зависимости от высоты родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. auto устанавливает высоту исходя из содержимого элемента Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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.
- 143. Рис. 1. Применение свойства height Объектная модель [window.]document.getElementById("elementID").style.height Браузеры Браузер Internet Explorer 6 некорректно определяет height как min-height. В режиме несовместимости (quirk mode) Internet Explorer до версии 8.0 включительно неправильно вычисляет высоту элемента, не добавляя к ней значение отступов, полей и границ. Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 144. hover Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Да Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2 Применяется Не определено Аналог HTML <тег onmouseover="function()"> Ссылка на http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo- спецификацию classes Описание Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата. Синтаксис E:hover { ... } Здесь E имя селектора. Если селектор не указан, то hover применяется ко всем элементам документа. Значения Нет. Пример 1 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>link</title> <style type="text/css"> a:link { color: #0000d0; /* Цвет ссылок */ padding: 2px; /* Поля вокруг текста */ } a:hover { background: #786b59; /* Цвет фона под ссылкой */ color: #ffe; /* Цвет ссылки */ } </style> </head> <body> <p><a href="link1.html">Ссылка 1</a></p> <p><a href="link2.html">Ссылка 2</a></p> <p><a href="link3.html">Ссылка 3</a></p> </body> </html> В данном примере псевдокласс hover применяется к ссылке (тегу <A>), при этом меняется цвет ссылки и фона под ней. Результат примера показан на рис. 1.
- 145. Рис. 1. Результат использования псевдокласса hover для ссылок Пример 2 HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>hover</title> <style type="text/css"> UL { width: 180px; /* Ширина меню */ list-style: none; /* Для списка убираем маркеры */ margin: 0; /* Нет отступов вокруг */ padding: 0; /* Убираем поля вокруг текста */ font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */ font-size: 10pt; /* Размер названий в пункте меню */ } LI UL { position: absolute; /* Подменю позиционируются абсолютно */ display: none; /* Скрываем подменю */ margin-left: 165px; /* Сдвигаем подменю вправо */ margin-top: -2em; /* Сдвигаем подменю вверх */ } LI A { display: block; /* Ссылка как блочный элемент */ padding: 5px; /* Поля вокруг надписи */ text-decoration: none; /* Подчеркивание у ссылок убираем */ color: #666; /* Цвет текста */ border: 1px solid #ccc; /* Рамка вокруг пунктов меню */ background-color: #f0f0f0; /* Цвет фона */ border-bottom: none; /* Границу снизу не проводим */ } LI A:hover { color: #ffe; /* Цвет текста активного пункта */ background-color: #5488af; /* Цвет фона активного пункта */ } LI:hover UL { display: block; /* При выделении пункта курсором мыши отображается подменю */ } .brd { border-bottom: 1px solid #ccc; /* Линия снизу */ } </style> </head> <body> <ul id="menu"> <li><a href="russian.html">Русская кухня</a> <ul> <li><a href="linkr1.html">Бефстроганов</a></li> <li><a href="linkr2.html">Гусь с яблоками</a></li> <li><a href="linkr3.html">Крупеник новгородский</a></li> <li><a href="linkr4.html" class="brd">Раки по-русски</a></li> </ul> </li> <li><a href="ukrainian.html">Украинская кухня</a> <ul> <li><a href="linku1.html">Вареники</a></li> <li><a href="linku2.html">Жаркое по-харьковски</a></li> <li><a href="linku3.html">Капустняк черниговский</a></li>
- 146. <li><a href="linku4.html" class="brd">Потапцы с помидорами</a></li> </ul> </li> <li><a href="caucasus.html">Кавказская кухня</a> <ul> <li><a href="linkc1.html">Суп-харчо</a></li> <li><a href="linkc2.html">Лилибдж</a></li> <li><a href="linkc3.html">Чихиртма</a></li> <li><a href="linkc4.html" class="brd">Шашлык</a></li> </ul> </li> <li><a href="asia.html" class="brd">Кухня Средней Азии</a></li> </ul> </body> </html> В данном примере псевдокласс hover добавляется к элементу списка (тег <LI>) для создания двухуровневого меню. Результат примера показан на рис. 2. Рис. 2. Использование hover для создания меню Браузеры В браузере Internet Explorer до версии 6.0 включительно псевдокласс hover работает только для ссылок.
- 147. lang Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Нет Да Да Да Да Да Да Нет Нет Да Да Да Да Краткая информация CSS CSS2 Значение по умолчанию Нет Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/selector.html#lang Описание Определяет язык, который используется в документе или его фрагменте. В коде HTML язык устанавливается через параметр charset тега <META>. В XML для этой цели применяется xml:lang. С помощью псевдокласса lang можно задавать определенные настройки, характерные для разных языков, например, вид кавычек в цитатах. Синтаксис Элемент:lang(язык) { ... } Значения В качестве языка могут выступать следующие значения: ru — русский; en — английский ; de — немецкий ; fr — французский; it — итальянский и др. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>lang</title> <style type="text/css"> P { font-size: 150%; /* Размер текста */ } q:lang(de) { quotes: "201E" "201C"; /* Вид кавычек для немецкого языка */ } q:lang(en) { quotes: "201C" "201D"; /* Вид кавычек для английского языка */ } q:lang(fr), q:lang(ru) { /* Вид кавычек для русского и французского языка */ quotes: "00AB" "00BB"; } </style> </head> <body> <p>Цитата на французском языке: <q lang="fr">Ce que femme veut, Dieu le veut</q>.</p> <p>Цитата на немецком: <q lang="de">Der Mensch, versuche die Gotter nicht</q>.</p> <p>Цитата на английском: <q lang="en">То be or not to be</q>.</p> </body> </html> Результат данного примера показан на рис. 1. Для отображения типовых кавычек в примере используется стилевое свойство quotes, а само переключение языка и соответствующего вида кавычек происходит через параметр lang, добавляемого к тегу <Q>.
- 148. Рис. 1. Результат использования псевдокласса lang
- 149. left Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2 Значение по умолчанию auto Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.html#propdef-left Описание Для позиционированного элемента определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента (рис. 1). Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его левого края. В случае значения relative, left отсчитывается от левого края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от левого края родителя. Рис. 1. Значение свойства left Синтаксис left: значение | проценты | auto | inherit Значения В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства left может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от ширины родительского элемента. auto Не изменяет положение элемента. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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; /* Абсолютное позиционирование */
- 150. left: 20px; /* Положение от левого края */ background: #fc3; /* Цвет фона */ margin: 7px; /* Отступы вокруг элемента */ } .layer2 { position: relative; /* Относительное позиционирование */ left: -12px; /* Положение от левого края */ top: 13px; /* Положение от верхнего края */ border: 1px solid black; /* Параметры рамки */ padding: 5px; /* Поля вокруг текста */ margin: 7px; /* Отступы вокруг элемента */ } </style> </head> <body> <div class="layer1"> <div class="layer2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </body> </html> Результат данного примера показан ни рис. 2. Рис. 2. Применение свойства left Объектная модель [window.]document.getElementById("elementID").style.left Браузеры В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя одновременно задать свойства top, left, right, bottom. Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 151. letter-spacing Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2 Значение по умолчанию normal Наследуется Да Применяется Ко всем элементам Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/text.html#propdef-letter- спецификацию spacing Описание Определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данное свойство. Допустимо использовать отрицательное значение, но в этом случае надо убедиться, что сохраняется читабельность текста. Синтаксис letter-spacing: значение | normal | inherit Значения В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Наилучший результат дает использование относительных единиц основанных на размере шрифта (em и ex). normal Задает интервал между символами как обычно. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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.
- 152. Рис. 1. Применение свойства letter-spacing Объектная модель [window.]document.getElementById("elementID").style.letterSpacing Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 153. line-height Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2 Значение по умолчанию normal Наследуется Да Применяется Ко всем элементам Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/visudet.html#propdef-line- спецификацию height Описание Устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически. Отрицательное значение межстрочного расстояния не допускается. Синтаксис line-height: множитель | значение | проценты | normal | inherit Значения Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пикселы (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берется высота шрифта. normal Расстояние между строк вычисляется автоматически. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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.
- 154. Рис. 1. Применение свойства line-height Объектная модель [window.]document.getElementById("elementID").style.lineHeight Браузеры Internet Explorer до седьмой версии неправильно вычисляет высоту строк для изображений и элементов форм. Также в этом браузере не поддерживается значение inherit.
- 155. link Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Да Да Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Применяется К ссылкам (тег <A>) Аналог HTML <body LINK="#RRGGBB"> Ссылка на http://www.w3.org/TR/CSS21/selector.html#link-pseudo- спецификацию classes Описание Псевдокласс link применяется к ссылкам, которые еще не посещались пользователем, и задает для них стилевое оформление. Синтаксис A:link { ... } Значения Нет. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>link</title> <style type="text/css"> a:link { color: #0000d0; /* Цвет ссылок */ } a:visited { color: #900060; /* Цвет посещенных ссылок */ } </style> </head> <body> <p><a href="task1.html">Выяснить вес нестандартного груза (камень)</a></p> <p>Дается: стул, палка, веревка, безмен с ограничением по весу.</p> </body> </html> Результат данного примера показан на рис. 1. Рис. 1. Результат использования псевдокласса link
- 156. list-style Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по Нет умолчанию Наследуется Да К тегам <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 | inherit Значения Любые комбинации трех значений, разделяемых между собой пробелом, определяющих стиль маркеров. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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.
- 157. Рис. 1. Применение свойства list-style Объектная модель [window.]document.getElementById("elementID").style.listStyle Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 158. list-style-image Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по none умолчанию Наследуется Да К тегам <DD>, <DT>, <LI>, <OL> и <UL>, а также ко всем Применяется элементам, у которых указано display: list-item Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image спецификацию Описание Устанавливает адрес изображения, которое служит в качестве маркера списка. Это свойство наследуется, поэтому для отдельных элементов списка для восстановления маркера используется значение none. Синтаксис list-style-image: none | url('путь к файлу') | inherit Значения none Отменяет изображение в качестве маркера для родительского элемента. url Относительный или абсолютный путь к графическому файлу. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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.
- 159. Рис. 1. Применение свойства list-style-image Объектная модель [window.]document.getElementById("elementID").style.listStyleImage Браузеры В разных браузерах расстояние между изображением и текстом может различаться. В Internet Explorer до седьмой версии включительно не отображаются маркеры, если для списка добавлено свойство float. Также в этом браузере не поддерживается значение inherit.
- 160. list-style-position Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по outside умолчанию Наследуется Да К тегам <DD>, <DT>, <LI>, <OL> и <UL>, а также ко всем Применяется элементам, у которых указано display: list-item Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/generate.html#propdef-list-style- спецификацию position Описание Определяет, как будет размещаться маркер относительно текста. Имеется два значения: outside — маркер вынесен за границу элемента списка (рис. 1) и inside — маркер обтекается текстом (рис. 2). Рис. 1. Значение outside Рис. 2. Значение inside Синтаксис list-style-position: inside | outside Значения inside Маркер является частью текстового блока и отображается в элементе списка. outside Текст выравнивается по левому краю, а маркеры размещаются за пределами текстового блока. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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">
- 161. 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, начинают накладываться на текст списка. Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 162. list-style-type Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2 Значение по disc (для <UL>); decimal (для <OL>) умолчанию Наследуется Да К тегам <DD>, <DT>, <LI>, <OL> и <UL>, а также ко всем Применяется элементам, у которых указано display: list-item Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-type спецификацию Описание Изменяет вид маркера для каждого элемента списка. Это свойство используется только в случае, когда значение list-style-image установлено как none. Маркеры различаются для маркированного списка (тег <UL>) и нумерованного (тег <OL>). Синтаксис list-style-type: circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower- latin | lower-roman | upper-alpha | upper-latin | upper-roman | none | inherit Значения Значения зависят от того, к какому типу списка они применяются: маркированному или нумерованному. Маркированный список circle Маркер в виде кружка. disc Маркер в виде точки. square Маркер в виде квадрата. Нумерованный список armenian Традиционная армянская нумерация. decimal Арабские числа (1, 2, 3, 4,...). decimal-leading-zero Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,...). georgian Традиционная грузинская нумерация. lower-alpha Строчные латинские буквы (a, b, c, d,...). lower-greek Строчные греческие буквы (α, β, γ, δ,...). lower-latin Это значение аналогично lower-alpha. lower-roman Римские числа в нижнем регистре (i, ii, iii, iv, v,...). upper-alpha Заглавные латинские буквы (A, B, C, D,...). upper-latin Это значение аналогично upper-alpha. upper-roman Римские числа в верхнем регистре (I, II, III, IV, V,...). none Отменяет маркеры для списка. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
- 163. <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, начинают накладываться на текст списка. Браузер Internet Explorer до седьмой версии включительно не поддерживает значения armenian, decimal- leading-zero, georgian, lower-greek, lower-latin, upper-latin, inheirt. Вместо них выводится нумерация арабскими числами. В этом браузере нумерация или маркеры не отображаются для плавающих элементов (UL { float: left; }). Internet Explorer 8 дополнительно понимает значение upper-greek, которое устанавливает нумерацию в виде заглавных греческих букв (Α, Β, Γ, Δ,...).
- 164. margin Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по умолчанию 0 Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.html#propdef-margin Описание Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента (рис. 1). Рис. 1. Отступ от левого края элемента Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с учетом того, что у самого окна по умолчанию тоже установлены отступы. Чтобы от них избавиться, следует устанавливать значение margin для селектора <BODY> равное нулю. Свойство margin позволяет задать величину отступа сразу для всех сторон элемента или определить ее только для указанных сторон. Синтаксис margin: [значение | проценты | auto] {1,4} | inherit Значения Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1. Табл. 1. Зависимость от числа значений Число Результат значений 1 Отступы будут установлены одновременно от каждого края элемента. 2 Первое значение устанавливает отступ от верхнего и нижнего края, второе — от левого и правого. Первое значение задает отступ от верхнего края, второе — одновременно от левого и правого 3 края, а третье — от нижнего края. 4 Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края. Величину отступов можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя.
- 165. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>margin</title> <style type="text/css"> BODY { margin: 0; /* Убираем отступы */ } DIV.parent { margin: 20%; /* Отступы вокруг элемента */ background: #fd0; /* Цвет фона */ padding: 10px; /* Поля вокруг текста */ } DIV.child { border: 3px solid #666; /* Параметры рамки */ padding: 10px; /* Поля вокруг текста */ margin: 10px; /* Отступы вокруг */ } </style> </head> <body> <div class="parent"> <div class="child"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </body> </html> Результат данного примера показан на рис. 2. Рис. 2. Применение свойства margin
- 166. Объектная модель [window.]document.getElementById("elementID").style.margin Браузеры Internet Explorer 6 в режиме несовместимости (quirk mode) не поддерживает выравнивание блока по центру с помощью правила margin: 0 auto. Также в этом браузере наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента. Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 167. margin-bottom Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по умолчанию 0 Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/box.html#propdef-margin- спецификацию bottom Описание Устанавливает величину отступа от нижнего края элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента (рис. 1). Рис. 1. Отступ от нижнего края элемента Синтаксис margin-bottom: значение | auto | inherit Значения Величину нижнего отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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>
- 168. <div class="layer1"> <big>Lorem ipsum dolor sit amet</big> </div> <div class="layer2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </body> </html> Результат данного примера показан ни рис. 2. Рис. 2. Применение свойства margin-bottom Объектная модель [window.]document.getElementById("elementID").style.marginBottom Браузеры Браузер Internet Explorer 6 в некоторых случаях некорректно вычисляет значение отступа, заданное в процентах. Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 169. margin-left Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по умолчанию 0 Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.html#propdef-margin-left Описание Устанавливает величину отступа от левого края элемента. Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента (рис. 1). Рис. 1. Отступ от левого края элемента Синтаксис margin-left: значение | auto | inherit Значения Величину левого отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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>
- 170. <div class="layer1"> <div class="layer2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </div> </body> </html> Результат данного примера показан ни рис. 2. Рис. 2. Применение свойства margin-left Объектная модель [window.]document.getElementById("elementID").style.marginLeft Браузеры Браузер Internet Explorer 6 удваивает значение левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента. Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 171. margin-right Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по умолчанию 0 Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/box.html#propdef-margin- спецификацию right Описание Устанавливает величину отступа от правого края элемента. Отступом является расстояние от внешнего края правой границы текущего элемента до внутренней границы его родительского элемента (рис. 1). Рис. 1. Отступ от правого края элемента Синтаксис margin-right: значение | auto | inherit Значения Величину правого отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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; /* Выравнивание по ширине */ }
- 172. </style> </head> <body> <div class="panel"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </body> </html> Результат данного примера показан ни рис. 2. Рис. 1. Применение свойства margin-right Объектная модель [window.]document.getElementById("elementID").style.marginRight Браузеры Браузер Internet Explorer 6 удваивает значение левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента. Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 173. margin-top Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по умолчанию 0 Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.html#propdef-margin-top Описание Устанавливает величину отступа от верхнего края элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента (рис. 1). Рис. 1. Отступ от верхнего края элемента Синтаксис margin-top: значение | auto | inherit Значения Величину верхнего отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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.
- 174. </div> </body> </html> Результат данного примера показан ни рис. 2. Рис. 2. Применение свойства margin-top Объектная модель [window.]document.getElementById("elementID").style.marginTop Браузеры Браузер Internet Explorer 6 в некоторых случаях некорректно вычисляет значение отступа, заданное в процентах. Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 175. max-height Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2 Значение по умолчанию none Наследуется Нет Применяется Ко всем элементам, кроме встроенных и таблиц Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/visudet.html#min-max-heights Описание Устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от значений установленных свойств 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 | inherit Значения В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются. none Отменяет действие этого свойства. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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>
- 176. <div class="block"> <p>Блокирование элемента не позволяет вообще производить с ним каких-либо действий, в том числе выделять содержимое текстового поля, изменять его или активизировать. Заблокированное поле помечается обычно серым цветом</p> <p>Некоторые браузеры позволяют выделять и копировать содержимое заблокированного текстового поля, но все остальные действия недоступны.</p> </div> </body> </html> Результат данного примера показан на рис. 1. Рис. 1. Результат использования свойства max-height Объектная модель [window.]document.getElementById("elementID").style.maxHeight Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 177. max-width Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2 Значение по умолчанию none Наследуется Нет Применяется Ко всем элементам, кроме встроенных и таблиц Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/visudet.html#propdef-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 | inherit Значения В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются. none Отменяет действие этого свойства. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Версия сайта для КПК</title> <style type="text/css" media="handheld"> body { max-width: 320px; /* Максимальная ширина страницы в пикселах */ } </style> </head> <body> <h1>Текст заголовка</h1> <p>Текст примера</p> </body> </html>
- 178. В данном примере ширина страницы ограничена размером 320 пикселов для всех наладонных устройств. К ним относятся КПК, смартфоны и другие устройства, способные отображать HTML-документы. Объектная модель [window.]document.getElementById("elementID").style.maxWidth Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 179. min-height Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2 Значение по умолчанию 0 Наследуется Нет Применяется Ко всем элементам, кроме встроенных и таблиц Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/visudet.html#min-max-heights Описание Задает минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных значений свойств 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: значение | проценты | inherit Значения В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются. inherit наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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">
- 180. <p>Сайт Cloverfield</p> <p><a href="/info/">Информация о сайте</a> <a href="/author/">Об авторе</a></p> </div> </body> </html> В данном примере, чтобы фоновое изображение не обрезалось по верхнему краю, задана минимальная высота блока равная 80 пикселам. Результат примера показан на рис. 1. Рис. 1. Высота блока, заданная с помощью min-height Объектная модель [window.]document.getElementById("elementID").style.minHeight Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 181. min-width Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2 Значение по умолчанию 0 Наследуется Нет Применяется Ко всем элементам, кроме встроенных и таблиц Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/visudet.html#propdef-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: значение | проценты | inherit Значения В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются. inherit наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Колонки без переносов</title> <style type="text/css"> #container { min-width: 420px; /* Минимальная ширина контейнера */ } #col1 { background-color: #fc0; /* Цвет фона колонки */ padding: 5px; /* Поля вокруг текста */ float: left; /* Обтекание по правому краю */ width: 150px; /* Ширина левой колонки */ } #col2 {
- 182. background-color: #c0c0c0; /* Цвет фона колонки */ padding: 5px; /* Поля вокруг текста */ width: 250px; /* Ширина правой колонки */ float: left; /* Обтекание по правому краю */ } </style> </head> <body> <div id="container"> <div id="col1">Колонка 1</div> <div id="col2">Колонка 2</div> </div> </body> </html> Результат данного примера, как он отображается в браузере Opera, показан на рис. 1. Internet Explorer 6 не поддерживает свойство min-width, поэтому страница будет выглядеть иначе (рис. 2). Рис. 1. Результат использования min-width в браузере Opera Рис. 2. Результат использования min-width в браузере Internet Explorer 6 Объектная модель [window.]document.getElementById("elementID").style.minWidth Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 183. opacity Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Нет Нет Да Да Да Да Да Да Да Да Нет Да Да Краткая информация CSS CSS3 Значение по умолчанию 1 Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/css3-color/#transparency Описание Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта. Синтаксис opacity: значение Значения В качестве значения выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6. Пример HTML 4.01 CSS 2.1 CSS 3 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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.
- 184. Рис. 1. Результат использования opacity Браузеры Internet Explorer для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.
- 185. outline Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2, CSS2.1 Значение по умолчанию Нет Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/ui.html#propdef-outline Описание Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четрырех сторонах элемента. В отличие от линии, задаваемой через border, свойство outline не влияет на положение блока и его ширину. Синтаксис outline: outline-color || outline-style || outline-width | inherit Значения outline-color Задает цвет линии в любом допустимом для CSS формате. outline-style Стиль линии. outline-width Толщина границы. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>outline</title> <style type="text/css"> .photo IMG { padding: 20px; /* Поля вокруг изображения */ margin-right: 10px; /* Отступ справа */ outline: 1px solid #666; /* Параметры рамки */ background: #f0f0f0; /* Цвет фона */ float: left; /* Обтекание по правому краю */ } </style> </head> <body> <div class="photo"> <img src="girl.jpg" alt="Девочка с муфтой"> <img src="owl.jpg" alt="Сова"> <img src="boy.jpg" alt="Эвенкийский мальчик"> </div> </body> </html> Результат данного примера показан на рис. 1.
- 186. Рис. 1. Использование свойства outline Объектная модель [window.]document.getElementById("elementID")style.outline
- 187. outline-color Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2, CSS2.1 Значение по умолчанию invert Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/ui.html#propdef-outline-color Описание Задает цвет внешней границы элемента. В отличие от линии, задаваемой через border, линия через свойство outline отображается вокруг элемента, не влияя на ширину блока или его положение. Синтаксис outline-color: invert | цвет | inherit Значения invert Автоматически задает цвет линии, исходя из фона под ней для достижения максимального контраста. В CSS 2.1 браузеру разрешается игнорировать значение invert и вместо него использовать цвет линии заданный свойством color. цвет Задает цвет линии в любом допустимом для CSS формате. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>outline-color</title> <style type="text/css"> #block { outline-style: dashed; /* Пунктирная граница */ outline-color: #be8b5e; /* Цвет границы */ padding: 10px; /* Поля вокруг текста */ background: #eedac8; /* Цвет фона */ } </style> </head> <body> <div id="block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div> </body> </html> Результат примера показан на рис. 1.
- 188. Рис. 1. Использование свойства outline-color Объектная модель [window.]document.getElementById("elementID")style.outlineColor
- 189. outline-style Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2, CSS2.1 Значение по умолчанию none Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/ui.html#propdef-outline-style Описание Задает стиль внешней границы элемента. В отличие от линии, задаваемой через border, линия через outline отображается вокруг элемента, не влияя на ширину блока или его положение. Синтаксис outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit Значения none Граница не отображается. Это значение перекрывает свойство outline-width, если оно присутствует. dotted Линия состоящая из набора точек. dashed Пунктирная линия, состоящая из серии коротких отрезков. solid Сплошная линия. double Двойная линия. groove Создает эффект вдавленной рамки. ridge Создает эффект рельефной границы. inset Псевдотрехмерная рамка, при которой правая и нижняя граница осветляется, а левая и верхняя линии затемняются. outset Псевдотрехмерная рамка, при которой левая и верхяя граница имеют более светлый оттенок, чем заданный цвет, а правая и нижняя линии затемняются. inherit Наследует значение родителя. Вид указанных стилей представлен на рис. 1. Рис. 1. Вид границы с разным значением стилей Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>outline-style</title> <style type="text/css"> .noborder A { outline-style: none; /* Убираем границу вокруг ссылок */ } </style> </head> <body> <p><a href="http://ya.ru">Яндекс</a> <a href="http://google.ru">Google</a></p>
- 190. <p class="noborder"><a href="http://ya.ru">Яндекс</a> <a href="http://google.ru">Google</a></p> </body> </html> Результат примера показан на рис. 2. В данном примере для браузера Firefox убирается пунктирная граница вокруг ссылок, возникающая при их активации. В первом абзаце рамка еще будет отображаться, а во втором абзаце она скрывается с помощью значения none свойства outline-style. Рис. 2. Использование свойства outline-style для ссылок в Firefox Объектная модель [window.]document.getElementById("elementID")style.outlineStyle
- 191. outline-width Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2, CSS2.1 Значение по умолчанию medium Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/ui.html#propdef-outline-width Описание Задает толщину внешней границы элемента. В отличие от свойства border-width, для outline-width нельзя устанавливать границу для каждой стороны элемента индивидуально. Чтобы outline-width работал, необходимо установить у свойства outline-style любое значение кроме none. Синтаксис outline-width: thin | medium | thick | значение | inherit Значения thin Тонкая линия. Значение в пикселах может изменяться в зависимости от браузера, но обычно составляет 1 пиксел. medium Линия средней толщины (3 пиксела). thick Линия большой толщины (6 пикселов). значение Для точной установки толщины можно использовать любые единицы размера принятые в CSS. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>outline-width</title> <style type="text/css"> #block { outline-style: dotted; /* Пунктирная внешняя граница */ outline-width: 3px; /* Толщина внешней границы */ padding: 10px; /* Поля вокруг текста */ border: 3px dotted #000; /* Параметры рамки */ } </style> </head> <body> <div id="block"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div> </body> </html> Результат примера показан на рис. 1.
- 192. Рис. 1. Использование свойства outline-width Объектная модель [window.]document.getElementById("elementID")style.outlineW idth
- 193. overflow Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2 Значение по умолчанию visible Наследуется Нет Применяется К блочным элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow Описание Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. Синтаксис overflow: auto | hidden | scroll | visible | inherit Значения visible Отображается все содержание элемента, даже за пределами установленной высоты и ширины. hidden Отображается только область внутри элемента, остальное будет скрыто. scroll Всегда добавляются полосы прокрутки. auto Полосы прокрутки добавляются только при необходимости. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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.
- 194. Рис. 1. Применение свойства oveflow Объектная модель [window.]document.getElementById("elementID").style.overflow Браузеры Браузер Internet Explorer поддерживает также свойство overflow-x, которое отображает полосу прокрутки по горизонтали и overflow-y, оно отвечает за полосу прокрутки по вертикали. Значения те же, что и для overflow. Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 195. padding Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2.1 Значение по умолчанию 0 Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.html#propdef-padding Описание Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1). Рис. 1. Поле слева от текста Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить ее только для указанных сторон. Синтаксис padding: [значение | проценты] {1, 4} | inherit Значения Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1. Табл. 1. Зависимость от числа значений Число Результат значений 1 Поля будут установлены одновременно от каждого края элемента. 2 Первое значение устанавливает поля от верхнего и нижнего края, второе — от левого и правого. Первое значение задает поле от верхнего края, второе — одновременно от левого и правого края, 3 а третье — от нижнего края. 4 Поочередно устанавливается поля от верхнего, правого, нижнего и левого края. Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
- 196. <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>padding</title> <style type="text/css"> .layer { background: #fc3; /* Цвет фона */ border: 2px solid black; /* Параметры рамки */ padding: 20px; /* Поля вокруг текста */ } </style> </head> <body> <div class="layer"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </body> </html> Результат данного примера показан ни рис. 2. Рис. 2. Применение свойства border-right-color Объектная модель [window.]document.getElementById("elementID").style.padding Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 197. padding-bottom Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2.1 Значение по 0 умолчанию Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/box.html#propdef-padding- спецификацию bottom Описание Устанавливает значение поля от нижнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1). Рис. 1. Поле снизу от текста Синтаксис padding-bottom: значение | inherit Значения Величину нижнего поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах.Значение inherit указывает, что оно наследуется у родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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>
- 198. </html> Результат данного примера показан ни рис. 2. Рис. 2. Применение свойства padding-bottom Объектная модель [window.]document.getElementById("elementID").style.paddingBottom Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 199. padding-left Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2.1 Значение по умолчанию 0 Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.html#propdef-padding-left Описание Устанавливает значение поля от левого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1). Рис. 1. Поле слева от текста Синтаксис padding-left: значение | проценты | inherit Значения Величину левого поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>padding-left</title> <style type="text/css"> .layer { background: #fc3; /* Цвет фона */ border: 2px solid black; /* Параметры рамки */ padding: 5px; /* Поля вокруг текста */ } .layer P { margin: 0; /* Убираем отступы вокруг */ padding-left: 10%; /* Поле слева */ } </style> </head> <body>
- 200. <div class="layer"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </body> </html> Результат данного примера показан ни рис. 2. Рис. 1. Применение свойства padding-left Объектная модель [window.]document.getElementById("elementID").style.paddingLeft Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 201. padding-right Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2.1 Значение по умолчанию 0 Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/box.html#propdef-padding- спецификацию right Описание Устанавливает значение поля от правого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1). Рис. 1. Поле справа от текста Синтаксис padding-right: значение | inherit Значения Величину правого поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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">
- 202. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div> </body> </html> Результат данного примера показан ни рис. 2. Рис. 2. Применение свойства padding-right Объектная модель [window.]document.getElementById("elementID").style.paddingRight Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 203. padding-top Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2.1 Значение по умолчанию 0 Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/box.html#propdef-padding- спецификацию top Описание Устанавливает значение поля от верхнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1). Рис. 1. Поле сверху от текста Синтаксис padding-top: значение | inherit Значения Величину верхнего поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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.
- 204. </div> </body> </html> Результат данного примера показан ни рис. 2. Рис. 2. Применение свойства padding-top Объектная модель [window.]document.getElementById("elementID").style.paddingTop Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 205. position Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2 Значение по умолчанию static Наследуется Да Применяется Ко всем элементам, за исключением генерируемых Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.html#propdef-position Описание Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице. Синтаксис position: absolute | fixed | relative | static | inherit Значения absolute Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб- странице словно абсолютно позиционированного объекта и нет. Положение элемента задается свойствами left, top, right и bottom относительно края окна браузера. fixed По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузеры Netscape и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данное значение. relative Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. static Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам. inherit Наследует значение родителя. Пример HTML 4.01 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>position</title> </head> <body> <div style="font-family: Times, serif; font-size: 200%"> T<span style="position: relative; top: 10px">E</span>X и L<span style="position: relative; top: -5px; font-size: 80%">A</span>T<span style="position: relative; top: 10px">E</span>X </div> </body> </html> Результат данного примера показан ни рис. 1.
- 206. Рис. 1. Применение свойства position Объектная модель [window.]document.getElementById("elementID").style.position Браузеры Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 207. quotes Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Нет Нет Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2 Значение по Зависит от браузера, его настроек и операционной системы. умолчанию Чаще всего используется кавычки вида "/" Наследуется Да Применяется Ко всем элементам Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/generate.html#propdef-quotes спецификацию Описание Устанавливает тип кавычек, который применяется в тексте документа. В каждом языке существуют свои традиции для обозначения кавычек, свойство quotes позволяет задать вид их отображения по всему тексту и установить, таким образом, его единообразное оформление. Добавление кавычек происходит автоматически для содержимого контейнера <Q>, а также для текста, к которому применяется стилевое свойство content со значением open-quote (открывающая кавычка) или close-quote (закрывающая кавычка). Синтаксис quotes: "левая кавычка" "правая кавычка" | none | inherit Значения В качестве значения используется символ текста (например, quotes: "«" "»") или символ юникода. Некоторые из них перечислены в табл. 1. Табл. 1. Виды кавычек Спецкод Вид Юникод Описание HTML Двойная кавычка, применяется обычно в моноширинных " " 0022 шрифтах, для обозначения символа дюйма, а также угловой минуты. ' ' 0027 Апостроф. Символ угловой секунды, в латинице применяется для обозначения мягкого знака (popalas' lisa). « « или « 00ab Открывающая двойная угловая кавычка. » » или » 00bb Закрывающая двойная угловая кавычка. ‘ ‘ 2018 Открывающая одинарная кавычка. ’ ’ 2019 Закрывающая одинарная кавычка. “ “ 201c Открывающая двойная кавычка в англоязычных текстах или закрывающая для русского языка. ” ” 201d Закрывающая двойная кавычка в англоязычных текстах. „ „ 201e Открывающая двойная кавычка. Применяется в русском языке. none Кавычки не добавляются. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
- 208. <!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
- 209. right Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2 Значение по умолчанию auto Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.html#propdef-right Описание Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента (рис. 1). Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его правого края. В случае значения relative, right отсчитывается от правого края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от правого края родителя. Рис. 1. Значение свойства right Синтаксис right: значение | проценты | auto | inherit Значения В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства right может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от ширины родительского элемента. auto Не изменяет положение элемента. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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; /* Абсолютное позиционирование */
- 210. top: 20px; /* Положение от верхнего края */ left: 20px; /* Положение от левого края */ width: 100px; /* Ширина блока */ background: #fc3; /* Цвет фона */ border: 1px solid #000; /* Параметры рамки */ padding: 10px; /* Поля вокруг текста */ } #centercol { position: relative; /* Относительное позиционирование */ background: maroon; /* Цвет фона */ padding: 10px; /* Поля вокруг текста */ color: white; /* Цвет текста */ margin: 13px 250px 0 130px; /* Отступы вокруг блока */ } #rightcol { position: absolute; /* Абсолютное позиционирование */ top: 20px; /* Положение от верхнего края */ right: 20px; /* Положение от правого края */ width: 200px; /* Ширина блока */ background: #ccc; /* Цвет фона */ border: 1px solid black; /* Параметры рамки */ padding: 10px; /* Поля вокруг текста */ } </style> </head> <body> <div id="leftcol">...</div> <div id="centercol">...</div> <div id="rightcol">...</div> </body> </html> Результат данного примера показан ни рис. 2. Рис. 2. Применение свойства right Объектная модель [window.]document.getElementById("elementID").style.right Браузеры В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя одновременно задать свойства top, left, right, bottom. Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 211. table-layout Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2 Значение по auto умолчанию Наследуется Нет К тегу <TABLE> или к элементу, у которого значение display Применяется установлено как table или inline-table. Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/tables.html#propdef-table-layout спецификацию Описание Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на ее содержимом. Синтаксис table-layout: auto | fixed | inherit Значения auto Браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и только после этого отображает. fixed Ширина колонок в этом случае определяется либо с помощью тега <COL>, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким- либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>table-layout</title> <style type="text/css"> TABLE { table-layout: fixed; /* Фиксированная ширина ячеек */ } </style> </head> <body> <table width="100%" cellspacing="0" border="1"> <col width="160"> <col span="9" width="60"> <tr> <td> </td> <td>1995</td><td>1996</td><td>1997</td><td>1998</td> <td>1999</td><td>2000</td><td>2001</td><td>2002</td> <td>2003</td> </tr> <tr> <td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td> <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td> </tr>
- 212. <tr> <td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td> <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td> </tr> <tr> <td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td> <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td> </tr> </table> </body> </html> Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 213. text-align Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2 Значение по умолчанию left Наследуется Да Применяется Ко всем элементам <center> Аналог HTML <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 | inherit Значения center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. auto Не изменяет положение элемента. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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; /* Отступ снизу */ }
- 214. #left { text-align: left; } #right { text-align: right; } #center { text-align: center; } .content { width: 75%; /* Ширина слоя */ background: #fc0; /* Цвет фона */ } </style> </head> <body> <div id="left"><div class="content">Выравнивание по левому краю</div></div> <div id="center"><div class="content">Выравнивание по центру</div></div> <div id="right"><div class="content">Выравнивание по правому краю</div></div> </body> </html> Результат данного примера показан ни рис. 1. Рис. 1. Выравнивание текста в браузере Opera Браузер Internet Explorer несколько иначе трактует данный пример, чем Opera и Firefox, выравнивая не только текст, но и блоки (рис. 2). Рис. 2. Выравнивание текста в браузере Internet Explorer 6 Объектная модель [window.]document.getElementById("elementID").style.textAlign
- 215. text-decoration Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Част. Част. Част. Да Да Да Да Да Да Да Да Да Да Да Част. — поддерживается частично. Краткая информация CSS CSS1, CSS2 Значение по умолчанию none Наследуется Нет Применяется Ко всем элементам Аналог HTML <U>, <S>, <STRIKE>, <BLINK> Ссылка на http://www.w3.org/TR/CSS21/text.html#propdef-text- спецификацию decoration Описание Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел. Синтаксис text-decoration: [ blink | line-through | overline | underline ] | none | inherit Значения blink Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте (пример). line-through Создает перечеркнутый текст (пример). overline Линия проходит над текстом (пример). underline Устанавливает подчеркнутый текст (пример). none Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию. inherit Значение наследуется у родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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
- 216. [window.]document.getElementById("elementID").style.textDecorationBlink [window.]document.getElementById("elementID").style.textDecorationLineThrough [window.]document.getElementById("elementID").style.textDecorationNone [window.]document.getElementById("elementID").style.textDecorationOverLine [window.]document.getElementById("elementID").style.textDecorationUnderline Браузеры Браузер Internet Explorer до восьмой версии включительно, хотя и позволяет использовать значение blink, текст показывает как обычно, без всякого мерцания. Internet Explorer до седьмой версии включительно не поддерживает значение inherit. Линия, полученная с помощью значения line-through, в IE7 располагается выше, чем в других браузерах. В IE8 эта ошибка исправлена.
- 217. text-indent Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Да Да Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2 Значение по умолчанию 0 Наследуется Да Применяется К блочным элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/text.html#propdef-text-indent Описание Устанавливает величину отступа первой строки блока текста (например, для параграфа <P>). Воздействия на все остальные строки не оказывается. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера. Синтаксис text-indent: значение | проценты | inherit Значения В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При задании значения в процентах, отступ первой строки вычисляется в зависимости от ширины блока. Допустимо использовать отрицательные значения, но при этом в разных браузерах возможно появление ошибок. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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.
- 218. Рис. 1. Применение свойства text-indent Объектная модель [window.]document.getElementById("elementID").style.textIndent
- 219. text-transform Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1, CSS2 Значение по умолчанию none Наследуется Да Применяется Ко всем элементам Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/text.html#propdef-text- спецификацию transform Описание Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменен. Синтаксис text-transform: capitalize | lowercase | uppercase | none | inherit Значения capitalize Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют. lowercase Все символы текста становятся строчными (нижний регистр). uppercase Все символы текста становятся прописными (верхний регистр). none Не меняет регистр символов. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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.
- 220. Рис. 1. Применение свойства text-transform Объектная модель [window.]document.getElementById("elementID").style.textTransform Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 221. top Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS2 Значение по умолчанию auto Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-top Описание Для позиционированного элемента определяет расстояние от верхнего края родительского элемента, не включая отступ, поле и ширину рамки, до верхнего края дочернего элемента (рис. 1). Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края. В случае значения relative, top отсчитывается от верхнего края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от верхнего края родителя. Рис. 1. Значение свойства top Синтаксис top: значение | проценты | auto | inherit Значения В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства top может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента. auto Не изменяет положение элемента. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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; /* Положение от верхнего края */
- 222. width: 120px; /* Ширина блока */ background: #e0e0e0; /* Цвет фона */ border: 1px solid #000; /* Параметры рамки */ padding: 5px; /* Поля вокруг текста */ } #content { position: absolute; /* Абсолютное позиционирование */ left: 0; /* Положение от левого края */ top: 0; /* Положение от верхнего края */ width: 280px; /* Ширина блока */ background: #800000; /* Цвет фона */ color: white; /* Цвет текста */ padding: 5px; /* Поля вокруг текста */ padding-right: 60px; /* Отступ справа */ text-align: justify; /* Выравнивание по ширине */ } </style> </head> <body> <div id="content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. </div> <div id="menu"> Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. </div> </body> </html> Результат данного примера показан ни рис. 2. Рис. 2. Применение свойства top Объектная модель [window.]document.getElementById("elementID").style.top Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit. Браузеры В браузере Internet Explorer 6 для абсолютно позиционированных элементов нельзя одновременно задать свойства top, left, right, bottom. Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 223. unicode-bidi Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Нет Нет Да Да Да Да Краткая информация CSS CSS2 Значение по normal умолчанию Наследуется Нет Применяется Ко всем элементам Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/visuren.html#propdef-unicode- спецификацию bidi Описание В европейских языках чтение текста происходит слева направо, в то время как есть языки, где текст читается справа налево. При смешении в одном документе разных по написанию символов (русского с ивритом, к примеру) в системе юникод, их направление определяется браузером из характеристик и содержимого текста. Свойства unicode-bidi и direction задают, как должен располагаться текст используемого языка. Синтаксис unicode-bidi: normal | embed | bidi-override | inherit Значения normal Браузер самостоятельно определяет, как ему следует отображать текст на основе символов юникода. embed Переопределяет параметры текста, располагая его, как указано в свойстве direction. bidi-override Аналогичен embed, но при этом также меняется порядок символов в тексте, подчиняясь значению direction. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>unicode-bidi</title> <style type="text/css"> DIV.rtl { unicode-bidi: bidi-override; /* Меняются характеристики текста */ direction: rtl; /* Текст пишется справа налево */ } </style> </head> <body> <div class="rtl"> <p>А роза упала на лапу Азора.</p> <p>У лип Леша нашел пилу.</p> <p>И городу дорог огород у дороги.</p> <p>Уж я веники не вяжу.</p> <p>Аргентина манит негра.</p> <p>Он дивен, палиндром — и ни морд, ни лап не видно.</p> <p>Но невидим архангел, мороз узором лег на храм и дивен он.</p> <p>Леша на полке клопа нашел.</p> <p>Я не стар брат Сеня.</p> </div> </body> </html>
- 224. Результат данного примера показан на рис. 1. Поскольку используется значение bidi-override свойства unicode-bidi, то порядок символов в тексте меняется на обратный. А именно на тот, что указан свойством direction. Заметьте, что текст располагается по правому краю окна и читается справа налево, что характерно для арабского языка. Рис. 1. Результат использования unicode-bidi и direction Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 225. vertical-align Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по baseline умолчанию Наследуется Нет Применяется К встроенным элементам или ячейкам таблицы. <caption | col | colgroup | tbody | tfoot | thead | th | td | tr Аналог HTML valign> Ссылка на http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical- спецификацию align Описание Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы. Синтаксис vertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top | top | inherit | значение | проценты Значения baseline Выравнивает базовую линию текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента. bottom Выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех. middle Выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента. sub Элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется. super Элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним. text-bottom Нижняя граница элемента выравнивается по самому нижнему краю текущей строки. text-top Верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки. top Выравнивание верхнего края элемента по верху самого высокого элемента строки. inherit Наследует значение родителя. В качестве значения также можно использовать проценты, пикселы или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчет ведется от значения свойства line-height, при этом 0% аналогично значению baseline. Для выравнивания по вертикали в ячейках таблицы применяются следующие значения. baseline Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента. bottom Выравнивает по нижнему краю ячейки. middle Выравнивает по середине ячейки. top Выравнивает содержимое ячейки по ее верхнему краю. Пример HTML 4.01 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
- 226. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>vertical-align</title> </head> <body> <div style="font-family: Times, serif; font-size: 200%"> T<span style="vertical-align: sub">E</span>X и L<span style="vertical-align: 5px; font-size: 80%">A</span>T<span style="vertical-align: sub">E</span>X </div> </body> </html> Результат данного примера показан ни рис. 1. Рис. 1. Применение свойства vertical-align Объектная модель [window.]document.getElementById("elementID").style.verticalAlign Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 227. visibility Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Ошибки Ошибки Да Частично Частично Да Да Да Да Краткая информация CSS CSS2, CSS2.1 Значение по умолчанию visible Наследуется Да Применяется Ко всем элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility Описание Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойством display. Синтаксис visibility: visible | hidden | collapse | inherit Значения visible Отображает элемент как видимый. hidden Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы. collapse Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. Это значение не поддерживается браузером Internet Explorer. inherit Наследует значение родителя. Пример HTML 4.01 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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>
- 228. Объектная модель [window.]document.getElementById("elementID").style.visibility Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit и collapse. Браузер Safari до версии 2.0 включительно поддерживает значение collapse. Opera до версии 9.2 включительно воспринимает значение collapse как hidden для всех элементов.
- 229. visited Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Да Да Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Применяется К ссылкам (тег <A>) Аналог HTML <body VLINK="#RRGGBB"> Ссылка на http://www.w3.org/TR/CSS21/selector.html#link-pseudo- спецификацию classes Описание Псевдокласс visited применяется к ссылкам, уже посещенные пользователем, и задает для них стилевое оформление. Синтаксис A:visited { ... } Значения Нет. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>visited</title> <style type="text/css"> a:link { color: #0000d0; /* Цвет ссылок */ } a:visited { color: #900060; /* Цвет посещенных ссылок */ } </style> </head> <body> <p><a href="link1.html">Посещенная ссылка</a></p> <p><a href="link2.html">Непосещенная ссылка</a></p> <p><a href="link3.html">Непосещенная ссылка</a></p> </body> </html> Результат данного примера показан на рис. 1. Рис. 1. Результат использования псевдокласса visited
- 230. white-space Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Част. Част. Да Част. Част. Част. Част. Да Да Да Да Част. Част. Да Част. — поддерживается частично. Краткая информация CSS CSS1, CSS2 Значение по умолчанию normal Наследуется Да Применяется К блочным элементам Аналог HTML <PRE>, <NOBR> Ссылка на http://www.w3.org/TR/CSS21/text.html#propdef-white- спецификацию space Описание Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является тег <PRE>, помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу тега <PRE>, но в отличие от него не меняет шрифт на моноширинный. Синтаксис white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit Значения normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега <BR> переносит текст на новую строку. pre Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. pre-line В тексте пробелы и переносы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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 {
- 231. border: 1px solid black; /* Параметры рамки */ border-bottom: none; /* Убираем линию снизу */ padding: 3px; /* Поля вокруг текста */ display: inline; /* Отображать как встроенный элемент */ background: #efecdf; /* Цвет фона */ font-weight: bold; /* Жирное начертание */ font-size: 90%; /* Размер шрифта */ margin: 0px; /* Убираем отступы */ white-space: nowrap; /* Переносов в тексте нет */ } </style> </head> <body> <p class="exampleTitle">Пример</p> <p class="example"> <html> <body> <b>Великая теорема Ферма</b><br> <i>X <sup><small>n</small></sup> + Y <sup><small>n</small></sup> = Z <sup><small>n</small></sup></i><br> где n - целое число > 2 lt;/body> </html> </p> </body> </html> Результат данного примера показан ни рис. 1. Рис. 1. Применение свойства white-space Объектная модель [window.]document.getElementById("elementID").style.whiteSpace Браузеры Браузер Internet Explorer до седьмой версии включительно не поддерживает значения pre-line, pre-wrap и inherit. Для <TEXTAREA> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line. Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap. Для <TEXTAREA> значения normal, nowrap, и pre воспринимаются как pre-wrap. Opera до версии 9.2 не поддерживает значение pre-line. Для <TEXTAREA> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.
- 232. width Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по умолчанию auto Наследуется Нет Применяется К блочным элементам Аналог HTML <img width>, <table width> Ссылка на спецификацию http://www.w3.org/TR/CSS21/visudet.html#propdef-width Описание Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег <IMG>). Ширина не включает толщину границ вокруг элемента, значение отступов и полей. Браузеры неодинаково работают с шириной, результат отображения зависит от используемого DOCTYPE. В табл. 1 приведены возможные варианты DOCTYPE и получаемая ширина. Табл. 1. Действие width в браузерах DOCTYPE Internet Explorer Firefox Opera Не указан Если содержимое превышает Во всех случаях Firefox Ширина равна заданную ширину, то блок действует по спецификации значению width. «Переходный» изменяет свои размеры, CSS. А именно, ширина блока <!DOCTYPE HTML подстраиваясь под содержимое. получается сложением Содержимое блока, PUBLIC "-//W3C//DTD В противном случае ширина блока значений width, padding, margin если не помещается в HTML 4.01 равна значению width. и border. заданные размеры, Transitional//EN"> отображается поверх. Содержимое блока, если не «Строгий» Ширина формируется путем помещается в заданные Ширина равна <!DOCTYPE HTML сложения значений width, padding, размеры, отображается значению width плюс PUBLIC "-//W3C//DTD margin и border. поверх блока. padding, margin, и HTML 4.01//EN"> border. Содержимое блока, если не XHTML помещается в заданные размеры, Содержимое блока, <!DOCTYPE html отображается поверх. если не помещается в PUBLIC "-//W3C//DTD заданные размеры, XHTML 1.0 Strict//EN"> отображается поверх. Синтаксис width: значение | проценты | auto | inherit Значения В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. auto Устанавливает ширину исходя из типа и содержимого элемента. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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; /* Ширина блока */
- 233. background: #fc0; /* Цвет фона */ padding: 7px; /* Поля вокруг текста */ border: 1px solid #ccc; /* Параметры рамки */ } .layer2 { width: 400px; /* Ширина текстового блока */ } </style> </head> <body> <div class="layer1"> <p class="layer2">Lorem ipsum dolor sit amet,consectetuer adipiscing elit,seddiem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> </div> </body> </html> Результат данного примера, как он отображается в бразере Opera показан ни рис. 1. Рис. 1. Ширина блока в браузере Opera Объектная модель [window.]document.getElementById("elementID").style.width Браузеры Браузер Internet Explorer 6 некорректно определяет width как min-width. В режиме несовместимости (quirk mode) Internet Explorer до версии 8.0 включительно неправильно вычисляет ширину элемента, не добавляя к ней значение отступов, полей и границ. Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 234. word-spacing Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Частично Частично Да Да Да Да Да Да Да Да Да Да Да Да Краткая информация CSS CSS1 Значение по умолчанию normal Наследуется Да Применяется Ко всем элементам Аналог HTML Нет Ссылка на http://www.w3.org/TR/CSS21/text.html#propdef-word- спецификацию spacing Описание Устанавливает интервал между словами. Если для текста задано выравнивание через text-align со значением justify (выравнивание по ширине), то свойство word-spacing не действует, поскольку интервал между словами будет установлен принудительно, чтобы строка текста была выровнена по правому и левому краю. Синтаксис word-spacing: значение | normal | inherit Значения В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение может быть и отрицательным, но следует проверять работоспособность в разных браузерах. Процентная запись не применима. normal Устанавливает интервал между словами как обычно. inherit Наследует значение родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!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.
- 235. Рис. 1. Применение свойства word-spacing Браузеры Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
- 236. z-index Internet Explorer Netscape Opera Safari Firefox 6.0 7.0 8.0 8.0 9.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0 Ошибки Ошибки Да Да Да Да Да Да Да Да Да Ошибки Ошибки Да Краткая информация CSS CSS2 Значение по умолчанию auto Наследуется Нет Применяется К любым позиционированным элементам Аналог HTML Нет Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index Описание Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z- index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative. Синтаксис z-index: число | auto | inherit Значения В качестве значения используются целые числа (положительные, отрицательные и ноль). Чем больше значение, тем выше находится элемент по сравнению с теми элементами, у которых оно меньше. При равном значении z-index, на переднем плане находится тот элемент, который в коде HTML описан ниже. Хотя спецификация и разрешает использовать отрицательные значения z-index, но такие элементы не отображаются в браузерах Netscape и Firefox до версии 2.0 включительно. Кроме числовых значений применяется auto — порядок элементов в этом случае строится автоматически, исходя из их положения в коде HTML и принадлежности к родителю, поскольку дочерние элементы имеют тот же номер, что их родительский элемент. Значение inherit указывает, что оно наследуется у родителя. Пример HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>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>
- 237. <div id="layer2">Слой 2</div> <p>Слой 4 наверху</p> <div id="layer3">Слой 3</div> <div id="layer4">Слой 4</div> </body> </html> Результат данного примера показан ни рис. 1. Рис. 1. Применение свойства z-index Объектная модель [window.]document.getElementById("elementID").style.zIndex Браузеры Список, созданный с помощью тега <SELECT>, в браузере Internet Explorer 6 всегда отображается поверх других элементов, несмотря на значение z-index. Internet Explorer до седьмой версии включительно не поддерживает значение inherit и интерпретирует auto как 0. В браузере Firefox до версии 2.0 включительно отрицательное значение z-index располагало элемент располагает элемент ниже фона веб-страницы и его контента.