Css для текста: оформление, стилизация — учебник CSS

«Базовая линия» — это воображаемая линия, на которой расположен текст.

Например, есть короткий текст внутри тега <div>:

<div>
  The alligator went for a swim in the deep lagoon.
</div>

Если перетащить окно браузера так, чтобы текст переносился на следующую строку, у вас будет две базовых линии и line-height (обозначены желтыми стрелками):

Большее значение свойства CSS line-height увеличит это расстояние, а меньшее – уменьшит.

Line-height и читабельность текста

Line-height играет важную роль в восприятии и читабельности текста. Если вы установите слишком маленькое значение line-height, блок текста будет казаться переполненным. Чтение такого текста утомляет пользователя:

Если значение слишком большое, то у пользователя не будет вовлеченности в читаемое

Когда вы найдете правильную высоту строки, ваш текст будет казаться объемным и гармоничным.

Правильное line-height зависит от ваших потребностей, а также от шрифтов. Это связано с тем, что каждый шрифт имеет свою индивидуальность и будет «читаться» по-разному в большом блоке текста.

Для Helvetica и Times New Roman требуются разные межстрочные интервалы, даже если они имеют одинаковое значение font-size.

Синтаксис line-height

Свойство line-height поддерживает все виды значений! Синтаксис сильно отличается от других свойств CSS, поскольку может принимать типичные значения px и %, но также имеет собственное уникальное «безразмерное» значение:

/* Use browser default.
 Typically "1.2" for
 all the major browsers */
line-height: normal;

/* Unitless (only line-height can do this!) */
line-height: 1.2;

/* <length> values like px, rem, em, pt */
line-height: 3em;

/* <percentage> values */
line-height: 120%;

Line-height обозначено желтой стрелкой.

Как браузеры обрабатывают line-height

Если вы используете процентное или «безразмерное» значение, font-size будет учитываться в итоговом line-height. Например, оба приведенных ниже фрагмента будут обработаны браузером как 19,2 px:

. myText {
  font-size: 16px;
  line-height: 1.2  /* (19.2px = 16 x 1.2) */
}

.myText {
  font-size: 16px;
  line-height: 120%;  /* (19.2px = 16 x 1.2) */
}

Однако, если вы используете значения длины, такие как px|em|rem|pt, font-size не будет учитываться при обработке line-height:

.myText {
  font-size: 16px;
  line-height: 20px;  /* Always 20px! */
}

Хотя и процентные, и «безразмерные» значения кажутся идентичными, между ними есть различия. Рекомендуется по возможности использовать «безразмерные» значения.

В общем и целом, правильное значение line-height для большинства шрифтов находится в диапазоне от 1,5 до 1,7. Alligator.io, например, использует высоту строки 1,6. Поиск оптимального значения – это скорее искусство, чем наука. Изменяйте значение line-height, пока оно не покажется вам идеальным.

Цвет текста — Tailwind CSS

Свойство текста CSS

В дополнение к свойствам шрифта CSS предоставляет отдельный набор свойств, которые могут помочь вам оформить текст веб-страницы. В этой главе вы познакомитесь с различными текстовыми свойствами CSS.

Можно назначить различные свойства текста CSS в элементе HTML, используя свойства текста CSS, перечисленные ниже:

Свойство текста CSS	Описание
цвет	Свойство цвета можно применять для задания цвета текста.
направление	Свойство направления может применяться для установки направления вашего текста.
letter-spacing	Свойство letter-spacing может применяться для добавления или вычитания пробела между буквами, что формирует слово.
текст-украшение	Свойство text-decoration можно применять для подчеркивания, надчеркивания и зачеркивания текста.
text-shadow	Свойство text-shadow может быть применено для установки text-shadow для вашего текста.
text-transform	Свойство text-transform можно применять для преобразования текста в верхний или нижний регистр.
word-spacing	Свойство word-spacing может применяться для добавления или вычитания пробела между разными словами в вашем предложении.
text-indent	Свойство text-indent может применяться для отступа текста вашего абзаца.
text-align	Свойство text-align можно применять для выравнивания текста в документе.
white-space	Свойство white-space можно применять для управления потоком, а также для форматирования текста.

Давайте обсудим их подробно и посмотрим, как их реализовать и как это выглядит в браузере.

Цвет текста CSS

Свойство цвета CSS реализовано для присвоения цвета вашим текстам. Эти цвета можно задать тремя различными способами:

• С помощью имени цвета , например, красный, цвет морской волны, синий
• С помощью HEX-значения , например #ff0000, #ffff00
• С помощью RGB значение , например rgb(255,0,0), rgb(255,255,0)

Вот фрагмент кода, как реализовать:

Пример:

 р {
    красный цвет;
}
тело {
    цвет: морской волны;
} 

Выравнивание текста CSS

Это свойство реализовано для указания горизонтального выравнивания текста. Выравнивание текста может иметь эти четыре значения.

1. слева
2. справа
3. по центру или
4. по ширине

Пример:

 p {
    выравнивание текста: по левому краю;
}
тело {
    выравнивание текста: по центру;
}
h3 {
    выравнивание текста: вправо;
} 

Следует отметить, что когда свойству text-align присваивается значение по ширине, строка растягивается до размера страницы, где правое и левое поля становятся прямыми.

Украшение текста CSS

Это свойство CSS реализовано для добавления или удаления украшений из вашего текста. Когда для параметра text-decoration установлено значение none, оно часто используется для удаления подчеркиваний из ссылок, что выглядит примерно так:

Пример:

 a {
    текстовое оформление: нет;
} 

Другие фрагменты кода:

Пример:

 h3 {
    оформление текста: сквозное;
}
п {
    оформление текста: надчеркивание;
}
тело {
    оформление текста: подчеркивание;
} 

Преобразование текста CSS

Это свойство CSS реализовано для указания строчных и прописных букв в тексте. Преобразование может заключаться либо в преобразовании каждого текста в нижний или верхний регистр, либо в заглавной начальной букве каждого слова.

Пример:

 h3.uppercase {
    преобразование текста: верхний регистр;
}
h4.нижний регистр {
    преобразование текста: нижний регистр;
}
h5.capitalize {
    преобразование текста: использовать заглавные буквы;
} 

Отступ текста CSS

Свойство CSS text-indent реализовано для указания отступа начальной строки текста.

Пример:

 p {
    отступ текста: 40px;
} 

Высота строки CSS

Это свойство высоты строки CSS применяется для назначения интервала между строками:

Пример:

 p.small {
    высота строки: 0,6;
}
р.большой {
    высота строки: 1,5;
} 

Интервал между буквами и словами CSS

Свойство межбуквенного интервала реализовано для указания пробела между символами в тексте HTML. А свойство word-spacing реализовано для указания пространства между словами между вашими текстами.