CSS свойство visibility
Свойство visibility используется для указания того, должен ли элемент быть видимым или скрытым для пользователя.
Оно принимает следующие значения: visible, hidden и collapse.
Когда элементу установлено значение "hidden", содержимое этого тега становится полностью прозрачным, но сохраняет своё исходное пространство в макете. Дочерние элементы скрытого элемента могут быть видимыми, если к ним применено visibility: visible.
Если значение свойства visibility установлено в "collapse", оно используется с элементами, связанными с таблицами (такими как строки, столбцы и ячейки), чтобы удалить их из макета, сохраняя при этом структуру таблицы.
WARNING
Некоторые браузеры не поддерживают значение "collapse".
| Начальное значение | visible |
|---|---|
| Применяется к | Все элементы (collapse применяется только к элементам, связанным с таблицами). |
| Наследуется | Да. |
| Анимация | Да. |
| Версия | CSS2 |
| Синтаксис DOM | Object.style.visibility = "collapse"; |
Синтаксис
Синтаксис свойства CSS visibility
visibility: visible | hidden | collapse | initial | inherit | revert | revert-layer;Пример использования свойства visibility со значением "hidden":
Пример свойства CSS visibility со значением hidden
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility property example.</h2>
<div>Here is some text for example.</div>
<p>Text, which will not be displayed in browser.</p>
<div>
You see space above this sentence, but actually there is some text, which has visibility property with hidden value.
</div>
</body>
</html>Результат
Пример использования свойства visibility со значениями "visible" и "hidden":
Пример свойства CSS visibility со значениями visible и hidden
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.test1 {
visibility: visible;
}
.test2 {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility property example</h2>
<p class="test1">Lorem Ipsum is simply dummy text.</p>
<p class="test2">Lorem Ipsum is simply dummy text.</p>
<p>The space above is a hidden text.</p>
</body>
</html>Пример использования свойства visibility со значением "collapse":
Пример свойства CSS visibility со значением collapse
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.collapse {
visibility: collapse;
}
table {
border: 2px solid #666;
}
td {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>Visibility property example</h2>
<p>Here the "collapse" value is applied.</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 | Наследует свойство от родительского элемента. | |
| revert | Возвращает свойство к унаследованному или начальному значению в зависимости от применимости. | Запустить » |
| revert-layer | Возвращает свойство к значению, установленному в предыдущем слое каскада. | Запустить » |
Практика
Какие возможные значения имеет свойство CSS 'visibility'?