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.
Рис. 1. Использование псевдоэлемента before в списках
Браузеры
Opera 9.2 учитывает все пробелы, как если бы они были заключены в тег <PRE>.
Браузер Firefox до второй версии включительно нестабильно работает с позиционированными элементами, а также не применяет before к тегу <FIELDSET>.
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 |
|
Зависит от использования |
Значение по умолчанию |
|
|
Нет |
Наследуется |
|
|
Ко всем элементам |
Применяется |
|
|
<img border > | <table border> |
Аналог HTML |
|
|
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.
Рис. 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.