Урок 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.

Відео: Уроки Java - №27 Видимість змінних

Розглянемо на прикладі шаблону, який використовували в минулому уроці. Зверніть увагу на текст зі знаками оклику. Даного блоку дамо селектор

, а блоку зі знаками "@" дамо селектор

Відео: GoToWeb - Відеокурс Html і Css, урок 33, CSS-властивість float - обтікання елементів

щоб потім в CSS ставити їм властивості невидимості. Нижче подивіться приклад початкової сторінки, де блокам ми ще не ставили ніяких властивостей, а тільки прописали селектори для CSS:

Подивитися приклад

видимість елементів

У CSS існує два способи зробити елемент невидимий. Розглянемо їх відразу на прикладі. Зараз для кожного з наших двох блоків в CSS пропишемо властивості:

Відео: MyBookTools - 2 відео-урок «Додавання інтерактивних елементів»

1234567

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

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

Як виглядає зараз ця сторінка можна подивитися, а також завантажити собі на комп`ютер по посиланнях нижче:

Подивитися прімерСкачать

Ось такі дві властивості в CSS для того щоб приховати елементи на сторінці.

Успіхів!