CSS свойство visibility
The visibility CSS property defines whether the element is visible to the user or hidden. Find some examples and try them for yourself.
Свойство 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'?