Лого SiteHere.ru

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

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

Здравствуй, уважаемый читатель.

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


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


Урок 1. Что такое CSS?
Урок 2. Базовые селекторы
Урок 3. Групповые селекторы и селекторы потомков
Урок 4. Псевдоселекторы ссылок
Урок 5. Шрифты
Урок 6. Оформление текста
Урок 7. Рамки
Урок 8. Оформление списков
Урок 9. Наследование
Урок 10. Блочная модель
Урок 11. Высота и ширина блока
Урок 12. Конфликты полей
Урок 13. Работа с изображениями. Часть 1
Урок 13. Работа с изображениями. Часть 2
Урок 14. Таблицы
Урок 15. Формы
Урок 16. Свойство float
Урок 17. Каркас на основе свойства float
Урок 18. Позиционирование. Часть 1
Урок 18. Позиционирование. Часть 2
Урок 18. Позиционирование. Часть 3
Урок 19. z-индекс

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

Любой элемент на странице можно скрыть с помощью свойств 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 для того чтобы скрыть элементы на странице.

Успехов!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *