«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS


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

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

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



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

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<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

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


CSS по шагам

Все cвойства CSS