visibility
Internet Explorer |
|
|
|
Netscape |
|
|
Opera |
|
|
|
Safari |
|
|
|
|
|
||
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>
Объектная модель
[window.]document.getElementById("elementID").style.visibility
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit и collapse.
Браузер Safari до версии 2.0 включительно поддерживает значение collapse.
Opera до версии 9.2 включительно воспринимает значение collapse как hidden для всех элементов.
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>) |
Применяется |
|
|
<body VLINK="#RRGGBB"> |
Аналог HTML |
|
|
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
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 |
Значение по умолчанию |
|
|
Да |
Наследуется |
|
|
К блочным элементам |
Применяется |
|
|
<PRE>, <NOBR> |
Аналог HTML |
|
|
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
pre
pre-line
Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега <BR> переносит текст на новую
строку.
Текст показывается с учетом всехпробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.
В тексте пробелы и переносы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
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 {
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.