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

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

Статьи для сайтов!!!
Главная Свойства CSS CSS по шагам Cкрытие элементов Свойства ячеек

Cкрытие элементов в CSS

Clip Cursor Display Opacity Overflow Visibility

Прозрачность элемента
Скрытая и видимая области
За пределами блока
Курсор


В CSS для скрытия элементов используется свойство display со значением none. При этом элемент не просто скрыт, он как бы удаляется со страницы вместе с содержимым. А его место автоматически занимают другие элементы.

Свойство visibility со значением hidden также скрывает элемент, но область ранее им занимаемая остается за ним: другие элементы не могут там располагаться. Значение collapse свойства visibility служит для скрытия элементов таблиц.

Свойства display и visibility применимы ко всем элементам.

Применение свойств display и visibility

Пример

Фрагмент кода:

<!DOCTYPE ...>
<html>
<head>
<meta http-...>
<title> Cкрытие элементов </title>

<style type="text/css">
p {border:#0099CC solid 1px; padding:5px; font-size:18px; color:#CC0066;}
</style>

</head>
<body>

<p>
<img src="../img/peng_64.gif"> Скроем пингвина разными методами. </p>
<p>
<img src="../img/peng_64.gif" style="display:none;"> Пингвин скрыт и его место занял текст. </p>
<p>
<img src="../img/peng_64.gif" style="visibility:hidden;"> Пингвин скрыт, но область, ранее им занимаемая, осталась за ним. </p>

</body>
</html>

Результат:

Прозрачность элемента

Свойство opacity предназначено для указания степени прозрачности элемента. Свойство принимает значение от 0 до 1.

1 - это значение по умолчанию, ему соответствует нормальному отображению элемента - он непрозрачен.

Соответственно при значении 0 - элемент становится невидим - он прозрачен. Вот таким способом можно скрыть элемент.

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

Пример

Фрагмент кода:

<p>
Полупрозрачный пингвин! <img src="img/peng_128.gif" style="opacity:0.5;"> </p>

Результат:


Полупрозрачный пингвин! Прозрачность элемента


Скрытая и видимая области

Для абсолютно позиционированных элементов применимо свойство clip. Оно обозначает ту область элемента, которая будет видна. Оставшаяся часть отображаться не будет.

Необходимая (видимая) часть элемента определяется заданием координат с помощью ключевых слов top, right, bottom и left, которые указывают расстояния от краев элемента до границ видимой области.

 

Свойство clip

Форма видимой области - это всегда прямоугольник.

За пределами блока

Свойство overflow используется в тех случаях, когда содержимое блока превышает его размеры.

Свойство применимо к блочным элементам.

По умолчанию, если содержимое блока превышает его размеры, то оно будет отображено полностью, но выйдет за границы блока.

При значении hidden свойства overflow будет отображена та часть содержимого, которая вместится в границы блока. Соответственно оставшаяся часть будет скрыта.

Также, при превышении габаритами контента размеров блока, можно воспользоваться полосами прокрутки: при значении scroll свойства overflow они будут присутствовать всегда, а при значении auto будут добавлены при необходимости.

Пример

Фрагмент кода:

<p style="border:#FF3300 solid 2px; width:100px;">
<img src="img/peng_128.gif">
</p>

Результат:


За пределами блока


Пингвин превышает ширину блока, поэтому выходит за его границу.

Применение свойства overflow

В следующем примере воспользуемся свойством overflow со значениями hidden иauto.

Пример

Фрагмент кода:

<p style="border:#FF3300 solid 2px; width:100px; overflow:hidden;">
<img src="img/peng_128.gif">
</p>
<p style="border
:#FF3300 solid 2px; width:100px; overflow:auto;">
<img src="img/peng_128.gif">
</p>

Результат:


Свойство overflow:hidden

Свойство overflow:auto


Курсор

Свойство cursor ничего не скрывает. Однако оно дает возможность изменить вид (тип) курсора при наведении мыши на элемент.

То есть (если можно так сказать) текущий курсор будет скрыт, а заданный появится.

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

Пингвина в примере скорее всего занимает какой-то вопрос. О чем он думает? Я хочу задать для пингвина курсор в виде стрелки со знаком вопроса, воспользовавшись свойством cursor со значением help.

Пример

Фрагмент кода:

<p style="border:#FF3300 solid 2px; width:150px; cursor:help;">
<img src="img/peng_128.gif">
</p>

Результат:


Свойство cursor


Наведите на него курсор!

Направление текста Cкрытие элементов Свойства ячеек
CSS по шагам
Дизайн сайтов
ПОИСК ПО САЙТУ:

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