Найбільший трюк в обробці HTML-елементів – це розуміння того, що немає нічого особливого в тому, як більшість із них працюють. У більшості випадків сторінки можуть бути створені за допомогою кількох тегів, до яких застосовано стиль відповідно до особистих переваг. Стандартне подання браузером більшості HTML-елементів включає стилі шрифту, відступи, поля і, головним чином, типи відображення (display).
Головними типами відображення є inline (вбудований), none (не показувати) і block-line (блок) . Ви можете застосовувати їх, використовуючи значення властивості display: inline, block та none.
inline діє так, як підказує його ім’я. Елементи, представлені за допомогою inline завжди слідують потоку лінії. Елементи strong (жирне накреслення), emphasis (курсив) і anchor (якір) зазвичай представлені інлайном на більшості сторінок.
block поміщає розрив рядка над і під елементом. Елементи абзац і заголовок зазвичай відображаються у стилі block-line.
none просто не відображає елемент. І хоча це може здатися безглуздим, ви можете досягти з його допомогою чудових ефектів, хоча можливі і складності з доступністю.
Початкова таблиця стилів для мого сайту, наприклад, використовувала кілька елементів, які традиційно застосовуються in-line і block-line, щоб зробити дизайн краще.
h1 {
display: inline;
font-size: 2em;
}
#header p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
}
Завдяки цьому заголовок сторінки і ключова фраза представлені поряд, а не один під одним. У теж час збережена оптимальна доступність.
#navigation, #seeAlso, #comments, #standards {
display: none;
}
Код, зазначений вище, застосовується для сторінок для друку. Цей стиль «відключає» панель навігації, коментарі тощо, які зазвичай надлишкові при роздруківці.
display: none та visibility: hidden розрізняються в тому, що display: none стирає елемент повністю зі сторінки, в той час, як visibility: hidden містить елемент та його потік недоторканими у візуальному представленні. Наприклад, якщо для другого з трьох абзаців встановити display: none, перший параграф наблизиться впритул до третього. Якщо б ми встановили властивість visibility: hidden, то між першим і третім абзацом залишився порожній простір, де повинен бути абзац.
Таблиці
Найпростіший спосіб зрозуміти значення табличних властивостей відображення, це розглядати їх у контексті HTML-таблиць. table – це базове уявлення. Ви також можете уявити елементи tr та td значеннями властивостей table-row та table-cell відповідно.
Властивість display дає вам ще більше можливостей і пропонує вам в якості значень table-column, table-row-group, table-column-group, table-header-group, table-footer-group та table-caption. Я думаю, всі ці значення говорять самі за себе. Що відразу приходить на розум – це перевага конструювання таблиць колонками замість методу, який застосовується в HTML
У кінцевому рахунку значення inline-table фактично поміщає вашу таблицю без розривів рядків зверху і знизу.
Якщо ви дозволите собі захопитися CSS таблицями, доступність вашого сайту може серйозно постраждати. Мета HTML – передати значення. Отже, будь-які дані, які повинні бути представлені в табличному вигляді, краще відображати за допомогою значень HTML. Якщо ви використовуєте тільки CSS-таблиці, це можете привести до змішання інформації, що неприпустимо для людей з відсутністю CSS. Це неправильно.
Інші типи відображення
list-item говорить сам за себе. Працює практично ідентично елементу li в HTML. Для коректного відображення, елементи повинні бути вкладені всередині елементів ul або ol.
compact також показує елемент вбудованим в лінію або блок в залежності від контексту. Він також не дуже корисний ...
marker використовується тільки разом з псевдоелементами :before та :after, щоб описати відображення значення властивості content. За замовчуванням властивість content вже відображається як marker. Тому marker корисний тоді, коли ви намагаєтеся переписати попередню властивість display для псевдоелементу.