Вивчайте Техніки Форматування Тексту Для Покращення Читабельності

line-height

Властивість line-height визначає висоту рядка та часто використовується для регулювання відстані між рядками тексту. За замовчуванням значення line-height залежить від шрифту тексту та визначається браузером.

line-height: multiplier | value in px | value in em | percent

multiplier — значення без одиниць виміру (наприклад, 1.5). У цьому випадку висота рядка буде у 1.5 рази більшою за значення font-size;
value in px — конкретне значення (наприклад, 24px), якому дорівнюватиме висота рядка;
value in em — значення (наприклад, 1.4em), що працює подібно до multiplier. Браузер візьме значення font-size, помножить його на 1.4, і отримає висоту рядка;
percent — значення (наприклад, 120%), що функціонує як multiplier. Значення font-size буде помножено на 1.2, і це визначить висоту рядка.

index.html

styles.css

Вивід

letter-spacing

Властивість letter-spacing встановлює горизонтальний інтервал між символами тексту.

letter-spacing: normal | value in px | value in em

normal — стандартний інтервал між символами;
value in px — конкретне значення, яке додає додатковий простір між символами;
value in em працює аналогічно до px, але інтервал визначається відносно font-size.

index.html

styles.css

Вивід

word-spacing

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

word-spacing: value | inherit | normal

value — конкретне значення, що встановлює відстань між словами;
inherit — успадковує відстань між словами від батьківського елемента;
normal — стандартний інтервал між словами.

index.html

styles.css

Вивід

text-shadow

Властивість text-shadow додає тінь до тексту.

text-shadow: "X set" | "Y set" | "blur radius" | "color"

X set регулює горизонтальне розташування тіні. Додатні значення зміщують тінь вправо, від’ємні — вліво;
Y set регулює вертикальне розташування тіні. Додатні значення зміщують тінь вниз, від’ємні — вгору;
blur radius визначає ступінь розмиття тіні. Вищі значення роблять тінь м’якшою та більш розсіяною. Значення за замовчуванням — 0, якщо не вказано інше;
color задає колір тіні у будь-якому допустимому форматі кольору. Якщо не вказано, використовується колір тексту за замовчуванням.

index.html

styles.css

Вивід

Примітка

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

1. Яка CSS-властивість використовується для створення візуального ефекту тіні для тексту?

2. Яка CSS-властивість регулює відстань між словами в тексті?

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 2

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you explain the difference between line-height, letter-spacing, and word-spacing?

How do I choose the right values for these text properties in my project?

Can you show more examples of using text-shadow with different colors or effects?

Свайпніть щоб показати меню

line-height

line-height: multiplier | value in px | value in em | percent

multiplier — значення без одиниць виміру (наприклад, 1.5). У цьому випадку висота рядка буде у 1.5 рази більшою за значення font-size;
value in px — конкретне значення (наприклад, 24px), якому дорівнюватиме висота рядка;
value in em — значення (наприклад, 1.4em), що працює подібно до multiplier. Браузер візьме значення font-size, помножить його на 1.4, і отримає висоту рядка;
percent — значення (наприклад, 120%), що функціонує як multiplier. Значення font-size буде помножено на 1.2, і це визначить висоту рядка.

index.html

styles.css

Вивід

letter-spacing

Властивість letter-spacing встановлює горизонтальний інтервал між символами тексту.

letter-spacing: normal | value in px | value in em

normal — стандартний інтервал між символами;
value in px — конкретне значення, яке додає додатковий простір між символами;
value in em працює аналогічно до px, але інтервал визначається відносно font-size.

index.html

styles.css

Вивід

word-spacing

word-spacing: value | inherit | normal

value — конкретне значення, що встановлює відстань між словами;
inherit — успадковує відстань між словами від батьківського елемента;
normal — стандартний інтервал між словами.

index.html

styles.css

Вивід

text-shadow

Властивість text-shadow додає тінь до тексту.

text-shadow: "X set" | "Y set" | "blur radius" | "color"

X set регулює горизонтальне розташування тіні. Додатні значення зміщують тінь вправо, від’ємні — вліво;
Y set регулює вертикальне розташування тіні. Додатні значення зміщують тінь вниз, від’ємні — вгору;
blur radius визначає ступінь розмиття тіні. Вищі значення роблять тінь м’якшою та більш розсіяною. Значення за замовчуванням — 0, якщо не вказано інше;
color задає колір тіні у будь-якому допустимому форматі кольору. Якщо не вказано, використовується колір тексту за замовчуванням.

index.html

styles.css

Вивід

Примітка

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

1. Яка CSS-властивість використовується для створення візуального ефекту тіні для тексту?

2. Яка CSS-властивість регулює відстань між словами в тексті?

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 2