Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Информационный Бестселлер на DVD или CD

Статьи для сайтов!!!
Главная CSS по шагам Свойства CSS Visibility White-space

Свойство visibility

Описание

Свойство visibility используется для скрытия элементов.

При скрытии элемента при помощи свойства visibility, место, ранее им занимаемое, так и остается за ним, в отличие от значения none свойства display.

Это свойство применимо ко всем элементам.

Значение

- visible – элемент отображается,

- hidden – элемент скрыт, но оставляет за собой свое место, 

- collapse- применяется для скрытия элементов таблицы. При этом таблица перестраивается с учетом отсутствующих элементов. При применении к другим элементам, результат аналогичен действию свойства при значении hidden,

- inherit - принимает значение свойства родительского элемента.

Значение по умолчанию

- visible


Пример

Пример 1 - До применения свойства visibility

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство visibility </title>

<style type="text/css">
p{border:#CC0066 solid 1px; background-color:#99FF99; padding:5px; width:500px;}
</style>

</head>
<body>

<p> Скроем следующий абзац. </p>
<p> Этот абзац будет скрыт - сделаем его невидимым. </p>
<p> А этот абзац останется на месте, не заняв место предыдущего. </p>

<table border width="500">
<caption align="center"> Скроем у этой таблицы вторую строку. </caption>
<tr>
<td>
1 </td>
<td>
2 </td>
</tr>
<tr>
<td>
3 </td>
<td>
4 </td>
</tr>
<tr>
<td>
5 </td>
<td>
6 </td>
</tr>
</table>


</body>
</html>

При просмотре в браузере

Скроем следующий абзац.

Этот абзац будет скрыт - сделаем его невидимым.

А этот абзац останется на месте, не заняв место предыдущего.

Скроем у этой таблицы вторую строку.
1 2
3 4
5 6


Пример 2 - После применения свойства visibility

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство visibility </title>

<style type="text/css">
p{border:#CC0066 solid 1px; background-color:#99FF99; padding:5px; width:500px;}
</style>

</head>
<body>

<p> Скрыли второй абзац. </p>
<p style="visibility:hidden;"> Невидимый абзац. </p>
<p> А этот абзац остался на месте, не заняв место скрытого абзац. </p>

<table border width="500">
<caption align="center"> Вторая строка скрыта - на ее месте третья. </caption>
<tr>
<td>
1 </td>
<td>
2 </td>
</tr>
<tr style=
"visibility:collapse;">
<td>
3 </td>
<td>
4 </td>
</tr>
<tr>
<td>
5 </td>
<td>
6 </td>
</tr>
</table>


</body>
</html>

При просмотре в браузере

Скрыли второй абзац.

Невидимый абзац.

А этот абзац остался на месте, не заняв место скрытого абзац.

Вторая строка скрыта - на ее месте третья.
1 2
3 4
5 6


Свойство Vertical-align Свойство Visibility Свойство White-space
Свойства CSS
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru