Здрастуйте, шановні читачі блогу . Сьогодні ми поговоримо про задоволене важливе правило мови стильової розмітки під назвою Display. Найбільш часто використовувані його значення ви вже, напевно, зустрічали в CSS код: display block, none або inline. У цій статті ми спробуємо розглянути все це докладніше і на прикладах.
По суті, воно дозволяє ставити і при необхідності змінювати способи відображення тих чи інших елементів Html коду. З допомогою нього блокові елементи можна буде зробити рядковими або навіть списком, а також використовуючи display:none можна реалізовувати динаміку на вебсторінці, наприклад, створювати випадають меню без використання скриптів на чистому CSS.
Display block і inline — як блочний зробити рядковим
Як ми з вами вже дізналися з курсу з мови Html, на веб сторінках формуються елементи за допомогою тегів, які в свою чергу обробляє парсер Html використовуваного браузера і відображає їх на екрані вашого комп’ютера. Те, як будуть виглядати ці елементи (створені на основі Html тегів), визначається в сучасній верстці мовою стильової розмітки CSS.
Навіть якщо ви ніяких спеціальних стилів не ставили для будь-яких позначок, то вони все одно будуть відображатися браузером з урахуванням тих правил, які були прийняті для них за замовчуванням. Де ж можна подивитися на ці самі CSS стилі за замовчуванням для всіх Html тегів? Ну, все в тому ж валидаторе W3C на цій сторінці. Якщо прокрутити її зміст до кінця, то там ви побачите посилання «Default style sheet for HTML 4», де і буде наведена потрібна нам інформація.
До чого все це? Я вже неодноразово при описі тих чи інших Html тегів акцентував вашу увагу на те, до якого саме типу відноситься цей тег — рядковий або ж блочний. В залежності від цього ми припускали наявність певної поведінки в даних елементів — небудь вони будуть прагнути зайняти все їм доступне місце по ширині (блокові), або не будуть (рядкові).
Але я так і не пояснив звідки береться такий поділ і де можна дізнатися до якого саме типу відноситься конкретний тег. Так от, дізнатися про це можна на згаданій нами сторінці специфікації CSS під назвою «Default style sheet for HTML 4» відповідає за все це неподобство спеціальне правило Display.
Наприклад, там в самому початку перераховані всі елементи, які відносяться до блоковим і відбувається це із-за того, що на них діє правило display:block:
Тут ви можете побачити всі ті ж теги абзаців P, заголовків H1-H6, контейнерів Div та інших блочних елементів. Якщо подивитися на список властивостей CSS і допустимих для них значень валидаторе W3C, то для display ми побачимо наступне:
Якщо не зазначено іншого, то за замовчуванням буде використовуватися варіант «display:inline» (оскільки саме це значення прописано в стовпці «Initial value»), що буде відповідати формування рядкових елементів. Тому в наведеній на сторінці специфікації «Default style sheet for HTML 4» ті теги, які повинні відображатися як малі (наприклад, span), взагалі не описані або для них не вказано значення Дисплей, бо за замовчуванням вони і так будуть малими.
Правило Дисплей відповідає за те, як даний елемент треба будувати і відображати браузеру. Воно говорить обозревателю, що з себе представляє тег і як його треба показувати. Є можливість показувати як елемент рядка (display: inline) або як блок (block), показувати як таблиці (table) або як частина таблиці (inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table cell | table-caption). Це правило дуже важливе.
Але те, що задано за замовчуванням для тегів, зовсім не є величиною постійною. При бажанні або виниклої необхідності ви завжди зможете зробити блоковий елемент (для якого за замовчуванням браузер використовував display: block) рядковим і, відповідно, навпаки.
Давайте розглянемо простий приклад з трьома тегами, один з яких за замовчуванням буде рядковим (span), а два інших — блочними (H3 і P). Для більшої наочності я залив область відведену для цих елементів фоном з допомогою Background:
H3 за замовчуванням буде відображати браузером як блочний
Span — типовий приклад рядкового тега
P — ще один за замовчуванням блоковий
В результаті браузер відобразив всі елементи в повній відповідності з їх умолчательными значеннями правила Display:
Як бачите, перший блок H3 (із значенням по замовчуванню block) займає весь доступний йому розмір по горизонталі (так само як і третій елемент P), ну а рядковий Span (із значенням по замовчуванню display:inline) займає по ширині рівно стільки місця, скільки потрібно для розміщення укладеного в нього контенту.
Ну, а тепер давайте з самого початку блочного тега H3 зробимо рядковий з допомогою додавання до нього display inline (я зменшив текст у перших двох елементах для отримання більшого ефекту наочності):
H3
Span
P — ще один за замовчуванням блоковий тег
>
Як ви можете бачити, браузер врахував display:inline і тепер елемент заголовка H3 (спочатку блочний) вже не займає весь доступний йому по ширині простір, внаслідок чого до нього впритул виявився притиснутий наступний за ним рядковий тег Span.
Але притулився він до попереднього не впритул, а розділений пропуском. При бутності заголовка H3 блоком цей пробіл не враховувався, але після його переродження в тег рядковий, всі стоять в коді пробільні символи (пробіли, табуляції і переноси рядків) були перетворені в єдиний пробіл за всіма правилами мови гіпертекстової розмітки, про які ви можете почитати за наведеним посиланням.
Точно так само можна з рядкового тега Span зробити блоковий з допомогою додавання display:block:
H3
Span
P — ще один за замовчуванням блочний елемент Html
І в результаті наше наочний посібник відображає сталася метаморфозу (що це?):
Span став займати всю область,доступну йому по ширині в не залежності від кількості контенту укладеного в цей тег.
Display list-item — створення списків на основі блокових тегів
А тепер давайте спробуємо з допомогою Дисплей зробити ряд блокових тегів елементами списку. З цим нам допоможе впоратися правило display:list-item. Нехай у нас будуть присутні кілька абзаців і заголовок:
H3
Перший абзац (тег P)
Другий абзац
Третій
Які будуть виглядати приблизно так:
Тепер, якщо ми додамо до всіх блоковим тегах абзацу CSS правило display:list-item, то браузер згенерує для всіх цих елементів спеціальну ділянку для маркера, в яких з’являться ці маркери використовуються за промовчанням:
H3
Перший абзац (тег P)
Другий абзац
Третій
Але в такому вигляді ви ніяких змін не помітите. Область маркера додається перед областю блочного тега і щоб її побачити, потрібно якимось чином відсунути цей блок ліворуч від краю контейнера, в якому він живе. Зробити це можна за допомогою все того ж Margin, а саме прописавши для потрібних абзаців margin-left:20px (або уклавши абзаци, наприклад, тег цитати blockquote) і тоді отримаємо наступну картину:
Т. о. ми створили елементи маркованого Html списку без використання тегів LI (вийшов аналог UL). При бажанні, для налаштування виду використовуваного маркера ви зможете використовувати вже розглянута нами раніше CSS правило list style. Можна зробити і зворотне, тобто прописати для тегів LI властивість display:block і зробити зі списку звичайні абзаци.
Ще серед можливих значень Display ви можете бачити величезну кількість варіантів для завдання зовнішнього вигляду таблиць та її складових частинах. У кожного елемента таблиці в Html коді проставлено своє значення Дисплей:
Торкатися того, що саме вони роблять, я не буду, бо навряд чи вам коли-небудь знадобиться, а тема ця досить складна. Крім того, навіть IE 7 не підтримує всі ці значення Дисплей для таблиць, не кажучи вже і про більш старих версіях цього диво-браузера.
Display none і inline-block — динаміка допомогою CSS
Інша справа display: none. Якщо ви подивіться на все ті ж автоматичні стилі для Html-елементів на сторінці «Default style sheet for HTML 4», то побачите, що «none» прописана за замовчуванням для тегу Head:
Що це означає? Це означає, що якщо у елемента прописаний display: none, то він ніяк не відображається на вебсторінці і ніяким чином не бере участь у побудові цього документа (під нього навіть не резервується місце).
Саме так і повинен вести себе тег Head, який призначений виключно для розміщення всередині себе службових даних не відображаються на вебсторінці, наприклад, там прописується шлях до іконки favicon.ico і до файлу таблиць каскадних стилів за допомогою службових гіперпосилань Link) і скриптів.
Так само правило display:none можна використовувати, наприклад, для створення випадаючого меню. Пам’ятаєте, коли я розповідав про селектори псевдокласів і псевдоелемент, то ми згадували про такий псевдоклас, як hover. За допомогою нього можна було встановити правила, які б починали працювати тільки при наведенні курсору миші на потрібний нам Html елемент.
Ніхто не заважає вам зробити випаданню вмісту списку при наведенні на нього мишкою (випадаюче меню). У звичайній ситуації для випадаючого списку вміст буде прописано display:none, ну, а з допомогою псевдокласу hover можна буде приписати для цього вмісту display:block і тоді меню буде розкриватися при наведенні на нього курсора миші.
Т. о. виходить, що значення «none» має сенс використовувати тільки для реалізації якоїсь динаміки на вебсторінці (видно — не видно), а писати його просто так ніякого сенсу не має, хіба що тільки у випадку вже згаданого трохи вище тегу Head, але знову ж таки це значення для нього використовується браузерами за замовчуванням.
Так, є ще значення display:inline-block, яке дозволяє надати якомусь тегу одночасно властивості рядкового і блокового елемента. По відношенню до зовнішніх і сусіднім тегах він буде вести себе як рядковий (тобто поряд з ним можуть розташовуватися й інші малі елементи), а ось по відношенню до вкладених в нього тегам він буде вести себе як блочний (тобто можна буде ставити його розміри, як по ширині, так і по висоті, а ще задавати відступи за допомогою марджинов і педдингов).
Взагалі, «inline-block» — це тема для окремої розмови, тим більше, що він не повністю підтримується навіть IE7. Але при бажанні ви можете ознайомитися з можливостями цього CSS правила з матеріалів цієї статті.
Виходить, що з допомогою правила Display можна в будь-який момент поміняти вже наявні в Html коді елементи на інші (просто змінивши спосіб їх відображення на вебсторінці), при цьому не змінюючи ці теги. Справа в тому, що тегів в коді може бути дуже багато і міняти їх все вручну буде важко, а от з допомогою Дисплей це можна буде зробити в кілька кліків через зовнішній файл каскадних таблиць стилів, що дуже зручно.
Удачі вам! До зустрічей на сторінках блогу
