Простий спосіб встановити відступи між flexbox елементами

Варіант 1 – негативний відступ для батьківського блоку

Найпростіший спосіб встановити мінімальну відстань між елементами flexbox – використовуємо margin: 0 5px для дочірніх елементів .item та негативний відступ margin: 0 -5px для батьківського контейнера .box.

HTML

 Візьміть Pen NWGKWGJ by Denis (@deniscreative) on CodePen.

Варіант 2 - без негативного відступу з відступами з боків

Не використовуємо негативні відступи і не використовуємо :first-child/:last-child . Задаємо внутрішнє поле контейнера padding:5px і задаємо відступи для дочірніх елементів margin:5px . Таким чином ми отримуємо рівномірний відступ 10px між дочірніми елементами та від дочірніх елементів до контейнера.

HTML

 Натисніть на Pen Uniform distribution of blocks with flex 2 by Denis (@deniscreative) на CodePen.

Варіант 3 – фіксована ширина за допомогою calc()

Задаємо фіксовану ширину для дочірніх елементів з урахуванням відступу з-поміж них за допомогою CSS функції calc() . Даний спосіб не зовсім вдалий для розміщення флексбокс-елементів в кілька рядів, тому що елементи розтягуються по краях контейнера justify-content: space-between .

де 1/3 - це 3 колонки в ряд, і 10px - це ширина між колонками.

HTML

 Натисніть Pen Uniform distribution of blocks with flex 3 by Denis (@deniscreative) на CodePen.

Варіант 4 - фіксована ширина за допомогою calc() з відступами з боків

Задаємо фіксовану ширину для дочірніх елементів з урахуванням відступу з-поміж них за допомогою CSS функції calc() . Але головна відмінність від попереднього варіанту, що для дочірніх елементів .item задані відступи з обох боків, а для батьківського контейнера .box задані негативні відступи як у першому прикладі. І таким чином ми можемо задати justify-content: flex-start; щоб flexbox-елементи розташовувалися рівномірно зліва направо.

Я найчастіше використовую цей варіант, як найбільш універсальний та зручний для розміщення будь-яких flexbox-елементів.

де 1/3 - це 3 колонки в ряд, і 10px - це ширина між колонками.

HTML

 Натисніть на Pen Uniform distribution blocks with flex 4 by Denis (@deniscreative) на CodePen.

Природно, що способів для того, щоб задати відступи між флексбокс-елементами або їх рівномірного розміщення всередині контейнера, набагато більше, і є набагато витонченіші варіанти. Але я навів найчастіше використовувані способи та найпростіші для розуміння.

Допустимо, у нас є кілька nth-child елементів, до яких ми хочемо застосувати різні затримки для…

Дуже популярна функція на різних односторінках - плавний скролл до потрібного елемента на цій же...

Використання @keyframes із препроцесором SASS. Базовий приклад використання @keyframes у SASS: Створюємо міксин, щоб додати…

CSS лічильники, по суті, змінні CSS, значення яких можуть бути інкрементовані за допомогою CSS…

Простір між об'єктами в CSS Flexbox за допомогою gap

У цій статті я розповім, як додати простір між елементами CSS Flexbox за допомогою властивості gap та необхідні рішення для підтримки браузерами.

inline-flex

CSS Flexbox та CSS Grid – це чудові інструменти для верстки сайтів. Flexbox чудово справляється з одновимірними макетами, а CSS Grid - з двомірними макетами, колонками та рядками. І, звичайно, бувають ситуації, коли ми хочемо додати простір між елементами в нашому макеті.

Щоб продемонструвати властивість gap CSS, ми будемо використовувати Flexbox. gap працює також у CSS Grid, але є багато випадків, коли у нас є інлайн-списки (в один рядок), яким потрібний простір без певної сітки.

HTML:

Ми використовуємо inline-flex, щоб мати гнучкі елементи, але відображати батьківський елемент як малий елемент, а не як блоковий. Властивість flex-wrap: wrap дозволить нашим елементам обернутися (перейти на наступний рядок) у разі зменшення або обмеження батьківського контейнера.

Якщо хочемо додати простір між кожним елементом, ми можемо використовувати margin (відступи) кожного елемента.

.flex-gap < display: inline-flex; flex-wrap: wrap; >.flex-gap > div

Це дасть нам таке:

Відступи ( margin ) працюють, але це не те саме поведінка, що дає нам властивість для створення простору за допомогою властивості CSS gap . Зверніть увагу на додатковий простір навколо осередків (зелений колір для прикладу). При використанні інтервалів (відступів) ми хочемо, щоб простір застосовувався лише між елементами. Використовуючи gap, ми можемо цього досягти.

Наш CSS у такому разі виглядатиме так:

Отримаємо приблизно такий варіант:

Старі браузери

CSS Gap – це особливість специфікації CSS Grid та Flexbox. Раніше Firefox був єдиним браузером, який підтримував gap для flex-елементів.Але на початку минулого року інтервали вже підтримувалися у всіх основних браузерах.

Для старих браузерів, які не підтримують gap у Flexbox, можна використовувати margin для створення обхідного шляху.

HTML:

.emulated-flex-gap > * < margin: 12px 0 0 12px; >.emulated-flex-gap

Ми можемо задати відступи зверху та зліва кожного елемента. На батьківському flex-елементі ми використовуємо негативні відступи для компенсації надлишкових відступів на зовнішніх дочірніх елементах. Ця техніка дає ефект, аналогічний ефекту gap у CSS.

Ми можемо трохи очистити CSS, використовуючи власні властивості CSS, щоб легше було змінювати відстань між полями.

.emulated-flex-gap < --gap: 12px; display: inline-flex; flex-wrap: wrap; margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap)); width: calc(100% + var(--gap)); >.emulated-flex-gap > *

За допомогою такого варіанта ми можемо отримати щось близьке до інтервалів CSS gap у старих браузерах. За допомогою інтервалів ми можемо усунути більшу частину складнощів із білим простором у CSS при використанні margin.

Сергій Єрмілов

Засновник проекту "Юзабіла", веб-дизайнер, верстальник, фронтенд-розробник, PHP та WordPress ентузіаст, автор та головний редактор сайту

Як створити сітку на сторінці CSS-властивість flex

Властивість flex – це один із двох інструментів для побудови сіток та мікросіток на сторінці. Властивість заснована на концепції гнучкого макету, де елементи можуть розтягуватися або стискатися, щоб використовувати доступний простір на сторінці найефективніше.

🚀 Сьогодні вам безкоштовно доступний тренажер з HTML та CSS.

Синтаксис

Значення якості flex

• flex-grow
• flex-shrink
• flex-basis
• flex-direction
• flex-wrap
• justify-content
• align-items
• align-self
• order

Розберемо значення на прикладах.

Flex-grow

Значення flex-grow визначає, як елементи розтягуватимуться всередині контейнера, коли є вільний простір. flex-grow може набувати цілих або дробових числових значень і за умовчанням дорівнює 0 . Якщо задати flex-grow значення більше нуля, то флекс-елемент розтягнеться на вільний простір, що залишився у флекс-контейнері.

.container < display: flex; >.item-puppy < flex-grow: 0; >.item-cat

Якщо флекс-елементам задати однакові позитивні значення flex-grow, вони порівну поділять між собою вільний простір.

.container < display: flex; >.item-puppy < flex-grow: 1; >.item-cat

Flex-shrink

Значення flex-shrink відповідає за гнучкість та стиснення елементів, коли доступний простір обмежений. Приймає числове значення, яке вказує, яку частку вільного простору елемент займе при стисненні інших елементів у контейнері. За замовчуванням 1 .

Усі стандартні флекс-елементи можуть стискатися, якщо після визначення розмірів з'ясувалося, що місця у флекс-контейнері не вистачає. Якщо один елемент має flex-shrink: 2 , а інші — flex-shrink: 1 , перший елемент стискатиметься вдвічі більше за інші. У цілому нині значення flex-shrink використовується досить рідко. Якщо мікросетці велика кількість елементів, то зазвичай відразу включають багаторядковий флекс-контейнер, щоб елементи не деформувалися.

.container < display: flex; >.item-puppy < flex-shrink: 2; >.item-cat < flex-shrink: 1; >.item-corgi

Flex-basis

Властивість flex-basis визначає початковий розмір елемента перед розподілом доступного простору. Можна вказати значення px , mm або у відсотках вздовж головної осі. Значення за промовчанням – auto .

Властивість flex-basis сильніше width і height, воно їх перевизначить, якщо зустрінеться з ними на тому самому флекс-елементі.

.container < display: flex; >.item-puppy < height: 220px; width: 220px; flex-basis: 300px; >.item-cat < height: 220px; width: 220px; >.item-corgi

Flex-direction

Властивість flex-direction визначає напрямок елементів у контейнері – горизонтальне чи вертикальне, що дає більшу гнучкість у створенні різних макетів.

Можна вказати одне із чотирьох значень:

row - значення за замовчуванням, вказує, що елементи розміщуються горизонтально у контейнері. Порядок елементів визначається їхньою послідовністю в розмітці.

row-reverse показує, що елементи розміщуються у контейнері горизонтально, але у зворотному порядку. Перший елемент стає останнім, а останній елемент – першим.

Елементи розташовуються горизонтально у зворотному порядку

column показує, що елементи розміщуються вертикально у контейнері. Кожен елемент займає окремий рядок усередині контейнера.

Елементи розташовуються вертикально по порядку у розмітці

column-reverse вказує, що елементи розміщуються у контейнері вертикально, але у зворотному порядку. Перший елемент переміщається останнє місце, а останній — перше.

Flex-wrap

Властивість flex-wrap визначає, чи елементи повинні переноситися на новий рядок або залишатися на одному. Має три значення - nowrap, wrap, wrap-reverse.

nowrap - значення за замовчуванням, вказує, що елементи розміщуються в контейнері в один рядок або стовпець. Якщо елементи не розміщуються по ширині або висоті контейнера, вони масштабуватимуться.

.container < display: flex; flex-direction: row; flex-wrap: nowrap; >.blue < height: 220px; width: 220px; background: #4b9eb3; >.item-puppy < height: 220px; width: 220px; background-image: url(./images/puppy.jpg); >.pink < height: 220px; width: 220px; background: #e78830; >.item-cat < height: 220px; width: 220px; background-image: url(./images/cat.jpg); >

wrap — елементи можуть переноситися на наступний рядок або стовпець, якщо вони не розміщуються. Це дозволяє створювати багаторядкові або багатоколонкові макети. Елементи будуть розміщені в нових рядках або стовпцях зверху вниз або ліворуч, залежно від орієнтації основної осі.

.container < display: flex-direction: row; wrap; background-image: url(./images/puppy.jpg); >.pink < height: 220px; width: 220px; height: 220px; width: 220px; #4bb381; >.item-corgi < height: 220px; 220px;

wrap-reverse — значення працює аналогічно wrap , але елементи будуть переноситися на наступний рядок або стовпець у зворотному порядку.

.container < display: flex-direction: row-wrap: wrap-reverse; 220px; url(./images/puppy.jpg); >.pink < 220px; width: 220px; images/cat.jpg); >.green < height: 220px; width: 220px; #4bb381; >.item-corgi < height: 220px;

Justify-content

Властивість justify-content розподіляє елементи вздовж головної осі контейнера.

Властивості є ряд значень:

flex-start — значення за замовчуванням, воно вказує, що флекс-елементи вирівняні на початку головної осі контейнера.

flex-end показує, що флекс-елементи вирівняні до кінця головної осі контейнера.Якщо основна вісь спрямована горизонтально, то елементи вирівнюватимуться праворуч, а якщо вісь спрямована вертикально - знизу.

center вказує, що флекс-елементи вирівняні центром головної осі контейнера. Елементи вирівнюватимуть горизонтально або вертикально в центрі контейнера.

space-between показує, що флекс-елементи рівномірно розподілені вздовж головної осі контейнера. Перший елемент буде вирівняний на початку осі, а останній елемент – наприкінці. Проміжки між елементами будуть рівномірно розподілені.

space-around означає, що флекс-елементи рівномірно розподілені вздовж головної осі контейнера з рівними проміжками як, так і після кожного елемента.

space-evenly вказує, що елементи рівномірно розподілені вздовж головної осі контейнера і проміжки між ними і на краях контейнера рівні.

Align-items

Властивість align-items визначає вирівнювання елементів уздовж поперечної осі контейнера.

Розподіл осей у контейнері за замовчуванням, align-items: stretch

align-items має кілька значень:

flex-start - флекс-елементи вирівняні на початку поперечної осі контейнера. Якщо поперечна вісь спрямована горизонтально, то елементи вирівнюватимуться вгорі, а якщо вісь спрямована вертикально, то елементи вирівнюватимуться зліва.

flex-end - флекс-елементи вирівняні до кінця поперечної осі контейнера.

center – флекс-елементи вирівняні по центру поперечної осі контейнера. Елементи вирівнюватимуть горизонтально або вертикально в центрі контейнера.

baseline - флекс-елементи вирівняні за базовою лінією, яка зазвичай використовується для вирівнювання тексту.

stretch — значення за промовчанням. Вказує, що елементи повинні розтягуватися по висоті або ширині контейнера, щоб зайняти всю доступну площу уздовж поперечної осі. Це значення робить флекс-елементи однакової висоти чи ширини залежно від орієнтації поперечної осі.

Align-self

Властивість align-self визначає вирівнювання окремого елемента вздовж поперечної осі контейнера. Ця властивість задається флекс-елементу, а не флекс-контейнеру і має такі ж значення, як властивість align-items .

.container < display: flex; flex-direction: column; align-items: baseline; >.item-puppy < height: 220px; width: 220px; background-image: url(./images/puppy.jpg); align-self: center; >

Всі елементи в контейнері вирівнюються по базовій лінії, але елемент із класом.puppy вирівнюється по центру контейнера

Order

Значення order визначає порядок відображення елементів у контейнері, що задається потрібному флекс-елементу. Числове значення визначає порядковий номер елемента, і що менше число, то ближче елемент буде до початку контейнера.

.container < display: flex; >.item:first-child < order: 2; >.item:last-child

Нюанси використання

• Властивість flex працює тільки для елементів, у яких значення властивості display встановлено на flex.
• Якщо елементи не поміщаються в один рядок або стовпчик через обмеження ширини або висоти контейнера, використовується властивість flex-wrap зі значенням wrap , щоб елементи переносилися на новий рядок або стовпчик.
• Розташування елементів у HTML-файлі не має вирішального значення.
• Якщо потрібно встановити порядок відображення елементів, можна використовувати властивість order , де менше значення поміщатиме елемент ближче до початку контейнера.
• Багато мов у світі використовують написання справа наліво rtl (right-to-left), на відміну від звичного ltr (left-to-right). елементи будуть автоматично розташовані у реверсному порядку.

📌 Актуальна інформація про підтримку браузерами якості flex на caniuse.

Матеріали на тему

«Доктайп» — журнал про фронтенд. Читайте, слухайте та навчайтеся з нами.

Читати далі

Псевдоклас

Псевдоклас :link в CSS призначений для стилізації посилань, які ще не були відвідані користувачем.

Приклад використання псевдокласу :link для стилізації невідвіданих посилань:

У цьому прикладі для всіх невідвіданих посилань встановлюється синій колір ( #007bff ) і видаляється підкреслення.

При роботі з :link важливо пам'ятати, що цей псевдоклас повинен використовуватися в поєднанні з псевдокласом :visited для повної стилізації станів посилань.

Приклад повного набору стилів для посилань:

a:link < color: #007bff; text-decoration: none; >a:visited < color: #666; >a:hover < color: #0056b3; text-decoration: underline; >a:active

У цьому прикладі задаються різні стилі для всіх можливих станів посилань: :link для невідвідених, :visited для відвіданих, :hover при наведенні курсору та :active у момент натискання на посилання. Такий підхід дозволяє створити більш динамічний та інтуїтивно зрозумілий інтерфейс веб-сторінки.

Селектор нащадків (пробіл)

Селектор нащадків CSS використовується для вибору елементів, які є нащадками іншого елемента в структурі документа. Цей селектор позначається простою пробілом між двома селекторами і дозволяє застосувати стилі до елементів, що знаходяться всередині інших елементів, незалежно від глибини вкладеності.

Приклад використання селектора нащадків:

У цьому прикладі всі абзаци (

), які знаходяться всередині елемента, будуть пофарбовані в темно-сірий колір і отримають міжрядковий інтервал у півтора розміру шрифту. Селектор нащадків дозволяє легко керувати стилем конкретних елементів, зберігаючи при цьому загальну структуру та читання коду.

Селектор нащадків особливо корисний у таких випадках:

1. Структурування контенту: Допомагає стилізувати елементи всередині певних секцій або компонентів, не торкаючись схожих елементів в інших частинах сторінки.
2. Тематичне оформлення: Використовується для застосування унікальних стилів до елементів, які розташовані всередині певних контейнерів, наприклад, для статей, сайдбарів або футерів.
3. Ізоляція стилів: Забезпечує локальне застосування стилів, запобігаючи їх випадковому розповсюдженню на інші елементи документа.

Застосування селектора нащадків спрощує створення модульної структури стилів, що легко підтримується, дозволяючи розробникам більш точно і гнучко керувати зовнішнім виглядом веб-сторінки.

Однак, важливо дотримуватися балансу і уникати занадто глибокої вкладеності селекторів, оскільки це може ускладнити підтримку та оптимізацію коду. Рекомендується використовувати селектор нащадків з розумом, орієнтуючись на підтримку чистоти та простоти структури CSS.

Псевдоклас

Псевдоклас :focus CSS використовується для стилізації елементів, які отримали фокус. Це може бути, наприклад, текстове поле у ​​формі, до якого користувач перемістив курсор для введення або посилання, вибране через клавіатурне введення. Псевдоклас :focus дозволяє створити більш інтерактивний і доступний інтерфейс користувача, підсвічуючи активні або вибрані елементи.

Приклад використання :focus :

У цьому прикладі для всіх текстових полів (input) при отриманні фокусу змінюватиметься колір кордону на синій та фоновий колір на світло-синій. Це забезпечує наочний зворотний зв'язок користувачеві про те, який елемент форми активний в даний момент, покращуючи загальну доступність користувача і зручність використання інтерфейсу.

Псевдоклас :focus особливо важливий для:

1. Поліпшення доступності: Він допомагає користувачам з обмеженими можливостями або тими, хто використовує клавіатурне введення замість миші, розуміти, який елемент керування в даний момент активний.
2. Підвищення інтерактивності: Візуальна відмінність активних елементів робить інтерфейс більш дружнім та зрозумілим для користувача.
3. Створення стилістичних акцентів: Дозволяє додавати унікальні стилістичні особливості інтерактивних елементів інтерфейсу, підкреслюючи їх функціональність.

Застосування :focus у поєднанні з іншими псевдокласами, такими як :hover та :active , дозволяє створити комплексне візуальне уявлення різних станів елементів управління, роблячи інтерфейс більш інтуїтивно зрозумілим та приємним у використанні.

Однак, важливо пам'ятати, що стилізація елементів за допомогою :focus повинна бути досить помітною, щоб користувач міг легко ідентифікувати фокусований елемент, але при цьому не повинна бути надто нав'язливою, щоб не відволікати від загального сприйняття інтерфейсу.

Селектор з id

CSS-селектор за ідентифікатором (id) дозволяє стилізувати елементи веб-сторінки, які мають унікальний ідентифікатор. Використання селектора по id уможливлює точкове застосування стилів до конкретного елемента, не торкаючись інших елементів на сторінці.

Селектор id позначається знаком решітки ( # ) перед ім'ям ідентифікатора. Ідентифікатори HTML повинні бути унікальними в межах документа, що робить селектор по id потужним інструментом для стилізації конкретних елементів.

Приклад використання селектора по id:

Цей елемент є унікальним.

У цьому прикладі елементу з id="uniqueElement" надаються стилі, що роблять текст зеленим і збільшують розмір шрифту до 20 пікселів. Ці стилі будуть застосовані лише до цього конкретного елемента завдяки унікальності ідентифікатора.

Переваги використання селектора по id:

1. Точкова стилізація: Селектор по ID дозволяє застосовувати стилі до конкретного елемента, не впливаючи на інші елементи.
2. Високий пріоритет: Стилі, застосовані через селектор по ID, мають більш високий пріоритет, ніж стилі, застосовані через класи та теги, що полегшує перевизначення стилів.

• Ідентифікатор має бути унікальним у межах всього HTML-документа.
• Зловживання селекторами по ID може зробити CSS-код складним для підтримки, особливо у великих проектах. Рекомендується використовувати їх з розумом, віддаючи перевагу класам для стилізації, коли це можливо.
• Селектори id можуть збільшити специфічність CSS-правил, що іноді утруднює їх перевизначення.

Використання селектора id є потужним інструментом в арсеналі веб-розробника, дозволяючи точково впливати на стиль окремих елементів сторінки.

Кілька селекторів через кому

Список селекторів у CSS являє собою перелік селекторів, розділених комами, що дозволяє застосувати той самий набір стилів до різних елементів веб-сторінки. Цей метод спрощує написання CSS-коду, позбавляючи необхідності дублювати стилі для кожного типу елементів окремо.

Приклад використання списку селекторів для стилізації заголовків, абзаців та елементів списку:

Застосування списку селекторів є ефективним у багатьох ситуаціях, включаючи:

• Застосування базових стилів тексту (колір, шрифт, розмір) до різних типів елементів.
• Скидання стандартних відступів для елементів списку, параграфів та інших блокових елементів.
• Встановлення загальних стилів для інтерактивних елементів, таких як кнопки та посилання, у різних частинах веб-сторінки.

При роботі зі списком селекторів важливо враховувати, що стилі будуть застосовані до всіх вказаних елементів. Для більш специфічних стильових завдань слід використовувати класи чи ідентифікатори, і навіть більш конкретні типи селекторів.

Списки селекторів покращують читаність та підтримуваність CSS-коду, дозволяючи розробникам ефективніше керувати стилями веб-сторінки. Цей підхід сприяє скороченню дублювання коду та забезпечує більш упорядковану структуру стилів.

Суміжний селектор +

Суміжний селектор CSS, що позначається знаком плюс ( + ), дозволяє вибирати елемент, який є безпосереднім сусідом іншого елемента на тому самому рівні ієрархії DOM. Цей селектор ефективний для застосування стилів до елемента, що знаходиться в точному порядку після іншого елемента в коді HTML.

Приклад застосування суміжного селектора:

Суміжний селектор знаходить широке застосування у веб-розробці для детального налаштування відступів між елементами та для реалізації певних стильових ефектів, що залежать від положення елементів щодо документа.

При використанні суміжного селектора важливо враховувати такі моменти:

• Застосовуйте суміжний селектор з розумом, особливо у складних структурах HTML, оскільки зміни у розмітці можуть вплинути на його працездатність.
• Суміжний селектор ідеальний для випадків, коли необхідно модифікувати стиль елемента в залежності від його розташування по відношенню до попереднього елемента на тому самому рівні.
• Обмежте використання суміжного селектора для підтримки простоти та читання коду, особливо коли йдеться про великі стильові листи.

Дотримання стандартів кодування та увага до деталей в оформленні допоможуть створити легко підтримуваний та гнучкий код CSS, що сприяє ефективній стилізації веб-сторінок.

Селектор тип

Селектори типу CSS використовуються для вибору HTML-елементів, відповідних певному імені тега. Вони дозволяють застосовувати стилі до елементів, не покладаючись на класи або ідентифікатори, що робить їх ідеальними для встановлення базових стилів для стандартних елементів сторінки, таких як абзаци, заголовки та списки.

Приклад використання селектора типу для стилізації всіх абзаців (

) на сторінці:

У цьому прикладі кожному абзацу на веб-сторінці задається шрифт Helvetica, міжрядковий інтервал у півтора рази більший за розмір шрифту та темно-сірий колір тексту. Це базова стилізація, яка може бути перевизначена додатковими селекторами, наприклад селекторами класу або ідентифікатора.

Селектори типу корисні для завдання загальних стилів елементам, які часто використовуються в документі, і є основою каскадності CSS. Вони дозволяють легко підтримувати та оновлювати стилі сайту, надаючи одноманітне представлення елементів по всьому сайту.

При роботі з селекторами типу рекомендується дотримуватися принципів чистого коду та кращих практик веб-розробки:

• Використовуйте типи селекторів для встановлення базових стилів документа, таких як шрифт, розмір тексту та колір.
• Намагайтеся не перевизначати стилі селекторів типу надто специфічними селекторами без необхідності уникнути конфліктів і складнощів з каскадом.
• Для забезпечення читання та підтримуваності коду дотримуйтесь угод про написання CSS, включаючи використання малих літер для селекторів та властивостей, додавання пробілу перед фігурною дужкою та одного рівня відступу для властивостей усередині правила.

Дотримання цих рекомендацій допоможе створити структурований та легко підтримуваний код, який полегшить подальшу розробку та оновлення веб-сайту.

Універсальний селектор *

У CSS універсальний селектор * (зірочка) використовується для застосування стилів до всіх елементів на веб-сторінці. Цей селектор корисний, коли необхідно встановити загальні стилі для всього документа, наприклад, скидання стандартних відступів або завдання базового шрифту.

Приклад використання універсального селектора для скидання стандартних відступів та завдання базового шрифту:

У цьому прикладі всі елементи сторінки обнуляють зовнішні та внутрішні відступи ( margin і padding ), а також встановлюють шрифт Arial як базовий для всього документа.

Використання універсального селектора робить стилізацію більш передбачуваною, оскільки видаляє відмінності у відображенні елементів, які можуть бути встановлені браузером за замовчуванням. Однак слід бути обережним з його використанням, оскільки застосування надто численних стилів до всіх елементів може сповільнити завантаження сторінки.

При роботі з CSS важливо дотримуватися рекомендацій щодо стилю коду, щоб забезпечити читання та підтримуваність коду. Наприклад, згідно з рекомендаціями HTML Academy:

• Селектори та властивості записуються малими літерами.
• Перед відкриває фігурною дужкою ставиться пробіл, властивості перераховуються з нового рядка з одним рівнем відступу.
• Після двокрапки в оголошенні якості слідує пробіл.
• Наприкінці оголошення властивості ставиться крапка з комою.
• Між блоками правил залишається один порожній рядок для кращого читання.

Ігри з нескінченністю, або навіщо нам infinity в CSS

💡 Це переклад статті Will Boyd з блогу CodersBlock. Оригінал: https://codersblock.com/blog/playing-with-infinity-in-css/

У CSS є константа Infinity. Коли я тільки дізнався про це, до мене в голову відразу спала гора абсурдних ідей, як це використовувати, серед яких була й пара непоганих.

Ну мені так здається.

До речі, якщо що, infinity можна використовувати тільки всередині calc(). Ну поїхали!

🚀 Сьогодні вам безкоштовно доступний тренажер з HTML та CSS.

Міжрядкова відстань у CSS. Властивість line-height

line-height задає інтерліньяж, тобто відстань між базовими лініями сусідніх рядків тексту. Ця властивість може проводити читабельність тексту та її сприйняття.

Значення line-height можна вказувати як абсолютних одиницях (наприклад, px , pt ), і у відносних ( em , % , без одиниці виміру). Рекомендується використовувати відносні одиниці, оскільки вони дозволяють зберегти масштабованість та адаптивність тексту.

• line-height: 1.2; - Відносне значення, що не залежить від розміру шрифту.
• line-height: 20px; - Абсолютне значення, фіксований розмір інтерліньяжу.
• line-height: 1.5em; - Відносне значення, що залежить від розміру шрифту елемента.