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

line-height

line-height керує вертикальним інтервалом між рядками тексту. Браузери встановлюють значення за замовчуванням залежно від шрифту, але його можна налаштувати за допомогою кількох форматів:

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

multiplier безрозмірне значення, наприклад, 1.5 множить font-size;
value in px конкретна висота, наприклад, 24px;
value in em відносне значення, подібне до multiplier (1.4em = font-size × 1.4);
percent працює як multiplier (120% = 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: інтервал відносно 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 design?

Can you show more creative uses of text-shadow?

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

line-height

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

multiplier безрозмірне значення, наприклад, 1.5 множить font-size;
value in px конкретна висота, наприклад, 24px;
value in em відносне значення, подібне до multiplier (1.4em = font-size × 1.4);
percent працює як multiplier (120% = 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: інтервал відносно 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