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>
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ