Ви можете налаштовувати видимість елементів в css
Доброго часу доби, шановні передплатники!
На зв'язку Андрій.
Цей випуск розсилки хотілося б присвятити управління видимості елементів в CSS.
В html існують можливість робити об'єкт видимим або невидимим, причому є різні варіанти, і вони по-різному відображають вміст.
Уявімо ситуацію: нам потрібно в блок розміром 200 на 300 пікселів вмістити досить великий фрагмент тексту (в принципі це може бути що завгодно).
Якщо ми поставимо блоку за допомогою стилів ширину рівну 200 і висоту рівну 300 пікселів, то по висоті він розтягнеться на стільки, скільки буде вмісту в блоці. Але нам потрібно строго 300 пікселів по висоті! В цьому випадку робимо наступне:
Для нашого блоку задаємо властивість overflow із значенням scroll. Блок стає з потрібними нам розмірами, весь вміст помістилося в ньому, і з'явилися смуги прокрутки.
Значення властивості overflow наведені нижче:
overflow - управління розмірами об'єкта, якщо його вміст не може бути показано цілком.
auto - визначається браузером.
visible - розмір розтягується до такої міри, що б весь вміст було видимим.
hidden - то, що виходить за межі елементу просто не відображається.
scroll - весь вміст відображається, і з'являються смуги прокрутки.
Для нашого конкретного випадку приклад:
Є властивість, яке дозволяє управляти видимістю вмісту елемента.
visibility - управляє в CSS, видимістю вмісту елемента.
Visible - вміст відображається.
hidden - вміст не відображається.
Наступне властивість, яке дозволяє управляти видимістю блоку - це display.
display - визначає, як буде відображатися елемент
none - елемент не відображається
block - розбиває рядок до і після елементу (тобто елемент не може знаходиться на одній лінії з іншими елементами)
inline - не розбивати рядок
Як цим властивістю користуватися?
На особливу увагу заслуговує значення none. Якщо ми поставимо якому-небудь елементу, властивість display із значенням none, то цей елемент не відобразитися. Причому, на відміну від властивості visibility зі значенням hidden. цей елемент не відобразиться повністю (властивості visibility зі значенням hidden не відобразяться вміст елемента, а сам елемент буде займати своє місце на сторінці).
Чим хочу завершити даний випуск?
Скажу, що ці властивості дуже важливі при розробці випадають меню (при наведенні на пункт меню випадають підпункти цього меню).
Ідея тут полягає в тому, що ми скриптом міняємо значення none на display при наведенні курсору миші на посилання.
Про таких меню буде детально розказано на диску, який вже зовсім скоро вийде в світ.
На цьому, випуск присвячений управлінню видимості в CSS. завершую.
До скорої зустрічі!
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
