Каскадні таблиці стилів (CSS) — це мова таблиць стилів, яка використовується для опису візуального представлення документів HTML і XML. Використовуючи CSS, розробники можуть керувати та змінювати стиль, зовнішній вигляд і макет елементів на веб-сторінках.
Наприклад, розробники можуть змінювати шрифти, кольори, фони, ефекти наведення курсора і навіть робити свої веб-сторінки адаптивними до різних розмірів екрана та пристроїв. Крім того, CSS дозволяє брендам і розробникам легко створювати веб-сторінки, які мають узгоджені стилі, які відповідають кольорам їхніх брендів.
Коли ви створюєте документ HTML за замовчуванням, елементи HTML відображатимуться в тому порядку, в якому вони з’являються у вихідному коді. Це називається нормальним потоком.
У звичайному потоці, де розташування елементів HTML не було змінено, ми можемо згрупувати елементи HTML у дві групи на основі того, як елементи відображаються на сторінці.
Ці групи є вбудованими елементами та блоковими елементами. Давайте розглянемо ці дві групи, щоб краще зрозуміти, як відображаються елементи HTML.
Для цього створіть нову папку, а в папці створіть файли index.html і app.css. Ви можете дати файлам назву на свій вибір. Однак це розширення .html і .css відповідно.
Відкрийте файл HTML у редакторі коду та вставте наступний код:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Display Property</title> <link rel="stylesheet" href="https://wilku.top/which-css-display-style-is-best-for-you/app.css"> </head> <body> </body> </html>
Наведений вище код посилань створює базову модель HTML або шаблон, з якого ми можемо почати створювати веб-сторінки. Він також пов’язує index.html із файлом app.css, щоб ми могли змінювати та контролювати, як елементи HTML відображаються за допомогою CSS.
Весь HTML-код, представлений далі в статті, буде додано в теги
. Наш файл CSS буде порожнім на початку.Блокові елементи
Блокові елементи — це елементи, які займають увесь доступний горизонтальний простір, де вони з’являються, створюючи нову лінію до та після елемента. Він також займає вертикальну висоту, еквівалентну висоті його вмісту, таким чином створюючи блоки.
Деякі приклади елементів на рівні блоку включають div
, невпорядковані списки
- , упорядковані списки
- та заголовки, такі як
,
,
і так далі.
Приклад цього показано нижче:
<body> <h1>techukraine.net</h1> <p>techukraine.net is an online publication that produces high-quality articles on Technology, Business, and Fintech to help businesses and people grow. Some of the topics covered include:</p> <p>Some of the topics covered by techukraine.net include:</p> <ul> <li>Programming</li> <li>Cyber Security</li> <li>Digital Forensics</li> <li>Productivity</li> <li>Gaming</li> </ul> </body>Коли ви відкриваєте документ HTML у браузері та перевіряєте сторінку, результат показано нижче:
Зауважте, що елемент
із заголовком techukraine.net займає весь доступний простір по горизонталі, а абзац, який йде після нього, переміщується на наступний рядок. Так поводяться елементи блоку.
Вбудовані елементи
Вбудовані елементи – це елементи, які підходять поряд з іншими елементами в одному рядку та займають стільки ширини, скільки необхідно для їх відображення. Вбудовані елементи не починаються з нового рядка, і вони також не переміщують інші елементи на новий рядок.
Вбудовані елементи не порушують потік вмісту. Вони перетікають у вміст, не створюючи окремих блоків. Деякі приклади вбудованих елементів включають spans , теги прив’язки , inputs і time
Розглянемо наведений нижче код, який змінює наш попередній код, щоб включити вбудовані елементи:
<body> <h1>techukraine.net</h1> <p>techukraine.net <span>I AM A SPAN ELEMENT</span> is an online publication that produces high-quality articles on Technology, Business, and Fintech to help businesses and people grow. Some of the <a href="https://wilku.top/which-css-display-style-is-best-for-you/techukraine.net.com">topics</a> covered include:</p> <p>Some of the topics covered by techukraine.net include:</p> <ul> <li>Programming</li> <li>Cyber Security</li> <li>Digital Forensics</li> <li>Productivity</li> <li>Gaming</li> </ul> </body>Результат перевірки нової сторінки HTML показано нижче:
Зверніть увагу, як елемент вписується в один рядок з іншим вмістом, не порушуючи потоку вмісту на сторінці. Ось як поводяться вбудовані елементи.
Властивість дисплея
Як ми щойно бачили, елементи HTML за замовчуванням є або блоковими елементами, або вбудованими елементами, що визначає спосіб їх відображення та вплив, який вони мають на нормальний потік вмісту в документі HTML.
Як веб-розробник, ви можете змінити цю поведінку за замовчуванням в елементах HTML. Тобто елемент, який за замовчуванням є блоковим елементом, розглядатиметься як вбудований елемент або навпаки. Наприклад, ви можете захотіти, щоб h1, який за замовчуванням є блоковим елементом, був вбудованим елементом, або , який за замовчуванням є вбудованим, щоб був блоковим елементом.
Щоб змінити типову поведінку блокових і вбудованих елементів, ми використовуємо властивість display. Властивість display — це властивість CSS, яка дозволяє змінювати або встановлювати, чи буде елемент розглядатися як вбудований або блоковий елемент.
Використовуючи властивість display, ви можете змінити елемент, який за замовчуванням є блоковим елементом, на вбудований елемент і навпаки.
Щоб побачити це в дії, додайте наступний код до створеного файлу CSS і оновіть сторінку HTML у браузері.
h1 { display: inline; background-color: paleturquoise; } p { display: inline; background-color: palevioletred; } span { display: block; background-color: darkolivegreen; } ul { background-color: yellow; }Наведений вище код використовує властивість display для зміни елементів
і
, які за замовчуванням є блоковими елементами, на вбудовані. Він також змінює елемент , який за замовчуванням є вбудованим у блок, і додає до елементів різні фонові кольори для легкого розрізнення. Остаточний HTML-документ після внесення змін до нашого файлу CSS показано нижче:
Зверніть увагу, що елемент
, який раніше займав цілий блок, тепер має спільний рядок з елементом
, який також займав цілий блок. Елемент span із фоновим кольором оливково-зеленого кольору тепер займає цілий блок, навіть якщо його поведінка за замовчуванням полягає в тому, щоб поміститися в один рядок з іншими елементами.
Важлива різниця між вбудованими та блоковими елементами
Окрім їх впливу на нормальний потік вмісту на сторінці. Існує ще одна важлива відмінність між вбудованими та блоковими елементами.
Якщо в елементах Inline є властивість ширини та/або висоти, ці властивості ігноруватимуться. Таким чином, ви не можете змінити ширину або висоту вбудованого елемента.
Крім того, якщо ви додасте поле до вбудованого елемента, поле буде дотримано лише горизонтально. Вертикальне поле на вбудованому елементі ігнорується.
Якщо ви додаєте відступ до вбудованого елемента, воно дотримується лише горизонтально. Незважаючи на те, що відступи також відображатимуться вертикально, інші елементи не поважатимуть їх. Таким чином, відступ не порушить решту вмісту над або під вбудованим елементом.
Щоб побачити це в дії, видаліть або закоментуйте весь код у файлі CSS і додайте такий код:
span { height: 500px; width: 400px; margin: 20px; background-color: darkolivegreen; } a { padding: 20px; border: 1px solid black; }Отримана HTML-сторінка показана нижче:
Зауважте, що незважаючи на те, що елемент мав властивості height і width, його висота і ширина не змінилися. Крім того, поля, додані з усіх сторін елемента , застосовуються лише горизонтально.
З блоковими елементами дотримуються властивості ширини та висоти. Поля та відступи, застосовані до блокових елементів, також дотримуються та діють у всіх напрямках.
Щоб побачити це в дії, додайте наступний код до наявного файлу CSS:
h1 { height: 50px; width: 200px; border: 1px solid black; padding: 50px; margin: 35px; background-color: aquamarine; }Отриманий HTML показано нижче:
Зауважте, що ширина, висота, поля та відступи, додані до h1, блокового елемента, дотримані в усіх напрямках.
Через різницю в тому, як ширина, висота, поля та відступи застосовуються до вбудованих і блокових елементів, ми отримуємо третє значення відображення, яке можна використовувати з властивістю display, щоб змінити спосіб відображення елементів. Це вбудований блок.
Inline-Block Elements
Елемент inline-block поводиться як вбудований елемент; тобто він поміщається поряд з іншими елементами в одному рядку, не пересуваючи елементи в інший рядок. Однак, на відміну від вбудованих елементів, ширина, висота, поле та відступ елементів вбудованих блоків дотримуються.
Таким чином, ви повинні використовувати опцію відображення inline-block, коли ви хочете, щоб елемент поводився як вбудований елемент, але дозволяв вам додавати ширину, висоту, поля та відступи, які будуть застосовані до елемента, як якщо б це був блок елемент. Тобто властивості будуть застосовані та дотримані у всіх напрямках.
Щоб побачити це в дії, видаліть або закоментуйте весь код у файлі CSS і додайте такий код:
span { display: inline-block; background-color: darkolivegreen; height: 50px; width: 200px; margin: 10px; padding: 10px; border: 1px solid black; }Код CSS вище встановлює для властивості відображення значення inline-block. є вбудованим елементом за замовчуванням. Потім код додає ширину, висоту, поле та відступ до елемента . Результат показано нижче:
Зауважте, що ширина, висота, поля та відступи, додані до елемента , були дотримані, а елемент span все ще відображається як вбудований елемент.
Ось як поводяться вбудовані блочні елементи. Раніше ми намагалися додати ті самі властивості до елемента , але вони не були дотримані, оскільки на той час був вбудованим елементом.
Inline проти Inline-Block
Відмінності між inline та inline-block показано нижче:
Поведінка CharacteristicInlineInline-BlockDisplay.На це впливає властивість line-height.Дотримуватися горизонтальних полів і відступів.Width і heightІгнорує властивості ширини і висоти.Враховує властивості ширини і висоти.Поля і paddingІгнорує горизонтальні поля і відступи.Потоки всередині вмісту не починаються з нового лінія. Висота рядка. На нього впливає властивість line-height. На нього впливає властивість line-height. Горизонтальний макет Ігнорує властивості вирівнювання тексту та вирівнювання тексту. Реагує на властивості вирівнювання тексту та вирівнювання тексту.
Як бачите, вбудовані та вбудовані блочні елементи відрізняються тим, як поводяться певні властивості CSS, коли до них застосовуються.
Коли використовувати Inline і Inline-Block
Як розробник, використовуйте вбудований параметр, якщо ви хочете, щоб ваш HTML-вміст розміщувався в одному рядку без розривів рядків. Наприклад, під час роботи з вбудованими елементами рівня тексту, такими як , і , має сенс використовувати опцію inline, яка є їх поведінкою за замовчуванням.
З іншого боку, використовуйте inline-block, коли ви хочете, щоб елемент поводився як блоковий елемент, але все ще перетікав у вмісті, не спричиняючи розривів рядків і не переміщуючи решту вмісту на нові рядки. Тобто, використовуйте inline-block, якщо ви хочете контролювати ширину, висоту, поля та властивості відступу елемента, але все одно щоб елемент був частиною вбудованого потоку.
Висновок
CSS має вбудовані, блокові та вбудовані параметри відображення, які можна використовувати для зміни або керування відображенням елементів на веб-сторінці. Ми використовуємо властивість display, щоб встановити елемент як inline, block або inline-block.
Як веб-розробнику важливо розуміти різницю між елементами inline, block і inline-block. Скористайтеся статтею, щоб ознайомитися з ними та почати використовувати властивість display у своїх проектах, щоб отримати більше практики.
Далі ви також можете дослідити деякі CSS Grid Generators, щоб візуально створювати складні макети.
- , елементи списку