Урок 20. Видимость элементов

Это двадцатый урок изучения CSS. В этом урок мы рассмотрим видимость элементов на html странице, которая задается свойствами CSS.

Перед изучением данного урока пройдите предыдущие уроки:

Теория и практика

Любой элемент на странице можно скрыть с помощью свойств CSS.

Рассмотрим на примере шаблона, который использовали в прошлом уроке. Обратите внимание на текст с восклицательными знаками. Данному блоку дадим селектор <p class="hideBlockV">, а блоку со знаками "@" дадим селектор <p class="hideBlockD"> чтобы затем в CSS задавать им свойства невидимости. Ниже посмотрите пример начальной страницы, где блокам мы еще не задавали никаких свойств, а только прописали селекторы для CSS:

Посмотреть пример

Видимость элементов

В CSS существует два способа сделать элемент невидимый. Рассмотрим их сразу на примере. Сейчас для каждого из наших двух блоков в CSS пропишем свойства:

1
2
3
4
5
6
7

.hideBlockV{
    visibility:hidden;
}
 
.hideBlockD{
    display:none;
}

Блоку с восклицательными знаками мы задали свойство visibility со значением hidden, а блоку со знаками "@" свойство display со значением none. И одно свойство и другое выполняют одну функцию, то есть скрывают элемент, но делают это по-разному. Свойство visibility скрывает блок, но его место никаким другим блоком не занимается, а свойство display скрывает элемент полностью со страницы. Сначала может показаться зачем скрывать элементы, но это больше применяется при написании javascript-ов.

Как выглядит сейчас данная страница можно посмотреть, а также скачать себе на компьютер по ссылкам ниже:

Посмотреть примерСкачать

Вот такие два свойства в CSS для того чтобы скрыть элементы на странице.

Успехов!