Випуск №12. Керування видимістю елементів в CSS

312

Доброго часу доби, шановні передплатники!

На зв’язку Андрій.

Цей випуск розсилки хотілося б присвятити управління видимості елементів CSS.

Але перш даю Вам посилання на відео-версію даного уроку:

Відео версія 12 уроку

У html існує можливість робити об’єкт видимим або невидимим, причому є різні варіанти, і вони по-різному відображають вміст.

Отже, почнемо.

Уявімо ситуацію: нам потрібно в блок розміром 200 на 300 пікселів вмістити досить великий фрагмент тексту (в принципі це може бути що завгодно).

Якщо ми задамо блоку за допомогою стилів ширину рівну 200 і висоту рівну 300 пікселів, то по висоті він розтягнеться на стільки, скільки буде вмісту в блоці. Але нам потрібно строго 300 пікселів по висоті! У цьому випадку робимо наступне:

Для нашого блоку задаємо властивість overflow зі значенням scroll. Блок стає з потрібними нам розмірами, все вміст помістилося в ньому, і з’явилися смуги прокручування.

Значення властивості overflow наведено нижче:

overflow – управління розмірами об’єкта, якщо його вміст не може бути показано цілком.

Значення:

auto – визначається браузером.

visible – розмір розтягується до такої міри, що б вміст було видимим.

hidden – те, що виходить за межі елемента просто не відображається.

scroll – весь вміст відображається, і з’являються смуги прокрутки.

Для нашого конкретного випадку приклад:

#st1{
overflow: scroll;
height:300px;
}

Досить великий фрагмент тексту

Є властивість, яка дозволяє управляти видимістю вмісту елемента.

visibility — керує в CSS, видимістю вмісту елемента.

Значення:

Visible – вміст відображається.

hidden — вміст не відображається.

Приклад:

вміст цього заголовку не відображуватиметься

Наступне властивість, яка дозволяє управляти видимістю блоку – це display.

display — визначає, як буде відображатися елемент

Значення:

none — елемент не відображається

block – розбиває рядок до і після елемента (тобто елемент не може знаходиться на одній лінії з іншими елементами)

inline – не розбиває рядок

Як користуватися цією властивістю?

Припустимо у нас йде текст, серед цього тексту є тег або це може бути посилання, і нам потрібно, що б вміст цього тега або посилання відображалися на окремому рядку, то для них ми поставимо властивість display зі значенням block. І навпаки, якщо потрібно, припустимо, щоб тег

був не на окремій терміні, а в тій же що і текст, то йому задаємо властивість display зі значенням inline.

Приклади:

буде на одному рядку з текстом

відображатися на окремому рядку

Особливої уваги заслуговує значення none. Якщо ми задамо якого-небудь елементу, властивість display зі значенням none, то цей елемент не відобразитися. Причому, на відміну від властивості visibility зі значенням hidden, цей елемент не відобразиться повністю (властивості visibility зі значенням hidden не відобразить вміст елемента, а сам елемент буде займати своє місце на сторінці).

Приклад:

елемент не відобразиться на сторінці

Чим хочу завершити цей випуск?

Скажу, що ці властивості дуже важливі при розробці меню (при наведенні на пункт меню випадають підпункти меню).

Ідея тут полягає в тому, що ми скриптом міняємо значення none на display при наведенні курсору миші на посилання.

Про таких меню буде докладно розказано на диску, який вже зовсім скоро вийде у світ.

Повторне посилання на відео-версію уроку:

Відео версія 12 уроку

На цьому, випуск присвячений управлінню видимості в CSS, завершую.

До швидкої зустрічі!

Випуск №12. Керування видимістю елементів в CSS