5.1 Властивість line-height
Параметри тексту, такі як line-height, letter-spacing і word-spacing, грають важливу роль у стилізації тексту на веб-сторінках. Вони дозволяють контролювати інтерліньяж (відстань між рядками), міжбуквенну відстань і відстань між словами відповідно. Розглянемо детальніше кожну з цих властивостей.
Властивість line-height визначає висоту рядка тексту. Воно задає відстань між базовими лініями сусідніх рядків тексту, що впливає на щільність і читабельність тексту.
Значення:
- Числове значення: відносне значення без одиниць (наприклад, 1.5), яке множиться на поточний розмір шрифта
- Відсоткове значення: відносне значення у відсотках від поточного розміру шрифта (наприклад, 150%)
- Абсолютне значення: значення у фіксованих одиницях (наприклад, пікселях) (наприклад, 24px)
- Ключове слово
normal: значення за замовчуванням, зазвичай дорівнює 1.2
Приклад використання:
.normal {
line-height: normal;
}
.one-point-five {
line-height: 1.5;
}
.double {
line-height: 2;
}
<body>
<p class="normal">Це текст із нормальною висотою рядка. Це текст із нормальною висотою рядка.</p>
<p class="one-point-five">Це текст із висотою рядка 1.5. Це текст із висотою рядка 1.5.</p>
<p class="double">Це текст із подвійною висотою рядка. Це текст із подвійною висотою рядка.</p>
</body>
5.2 Властивість letter-spacing
Властивість letter-spacing визначає міжбуквенну відстань, тобто додатковий простір між символами тексту. Воно може використовуватися для покращення читабельності або створення візуальних ефектів.
Значення:
- Приймає наступні значення:
px,em,rem,pt,normal - Абсолютне значення: значення у фіксованих одиницях (наприклад, пікселях — 2px)
- Від'ємне значення: скорочує відстань між символами (наприклад, -1px)
- Ключове слово
normal: значення за замовчуванням, рівне 0 (без додаткового простору)
Приклад використання:
.normal {
letter-spacing: normal;
}
.wide {
letter-spacing: 2px;
}
.narrow {
letter-spacing: -1px;
}
<body>
<p class="normal">Це текст із нормальною міжбуквенною відстанню.</p>
<p class="wide">Це текст із збільшеною міжбуквенною відстанню.</p>
<p class="narrow">Це текст із зменшеною міжбуквенною відстанню.</p>
</body>
5.3 Властивість word-spacing
Властивість word-spacing визначає відстань між словами у тексті. Воно додає або видаляє простір між словами, що може використовуватися для покращення читабельності або створення візуальних ефектів.
Значення:
- Абсолютне значення: значення у фіксованих одиницях (наприклад, пікселях) (наприклад, 4px)
- Від'ємне значення: скорочує відстань між словами (наприклад, -2px)
- Ключове слово
normal: значення за замовчуванням, рівне стандартній міжсловній відстані (зазвичай 0)
Приклад використання:
.normal {
word-spacing: normal;
}
.wide {
word-spacing: 4px;
}
.narrow {
word-spacing: -2px;
}
<body>
<p class="normal">Це текст із нормальною міжслівною відстанню.</p>
<p class="wide">Це текст із збільшеною міжслівною відстанню.</p>
<p class="narrow">Це текст із зменшеною міжслівною відстанню.</p>
</body>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ