Свойство visibility используется для отображения или скрытия элемента.
Свойство имеет следующие значения: visible, hidden и collapses.
При значении "hidden" контент данного тега становится полностью прозрачным, а место, которое элемент занимает, остается за ним. Но дочерние элементы скрытого элемента могут быть отображены при применении visibility:visible.
Некоторые браузеры не используют значение "collapse".
Значение по умолчанию | visible |
Применяется | Ко всем элементам. |
Наследуется | Да |
Анимируемое | Да |
Версия | CSS2 |
DOM синтаксис | Object.style.visibility = "collapse"; |
Синтаксис
visibility: visible | hidden | collapse | initial | inherit;
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
p {
visibility:hidden;
}
</style>
</head>
<body>
<h2>Пример свойства visibility.</h2>
<div>Какой-нибудь текст.</div>
<p>Текст, который не будет отображен в браузере.</p>
<div>Вы видите пространство сверху от этого предложения, но на самом деле это текст, для которого установлено значение hidden.</div>
</body>
</html>
Пример со значениями "visible" и "hidden":
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.test1 {
visibility: visible;
}
.test2 {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Пример свойства visibility</h2>
<p class="test1">Lorem Ipsum - это текст-"рыба".</p>
<p class="test2">Lorem Ipsum - это текст-"рыба".</p>
<p>В пространстве сверху находится скрытый текст.</p>
</body>
</html>
Пример со значением "collapse":
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.collapse {
visibility: collapse;
}
table {
border: 2px solid #666;
}
td {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>Пример свойства visibility</h2>
<p>Применено значение "collapse".</p>
<table>
<tr>
<td>10</td>
<td class="collapse">100</td>
<td>1000</td>
</tr>
<tr>
<td>20</td>
<td>200</td>
<td>2000</td>
</tr>
<tr class="collapse">
<td>30</td>
<td>300</td>
<td>3000</td>
</tr>
<tr>
<td>40</td>
<td>400</td>
<td>4000</td>
</tr>
</table>
</body>
</html>
Значения
Значение | Описание |
---|---|
visible | Тег отображается. Значение по умолчанию. |
hidden | Только визуально скрывает элементы. |
collapse | Используется только с конкретными табличными элементами (строки, группы строк, колонки, группы колонок) для удаления всех строк и колонок. Имеет то же значение, что "hidden", если используется с другими элементами. |
initial | Устанавливает свойство в значение по умолчанию. |
inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
1.0+ | 1.0+ | 1.0+ | 4.0+ |
Практикуйте свои знания
Какие значения может принимать свойство 'visibility' в CSS?
Правильный!
Неправильно!