Оформление текста в CSS

29 June 2024

Оформление текста с помощью CSS. Задание размера шрифтов, высоты строки, выравнивание, задание цвета и отступы текста.

Свойство font-size

font-size и размер шрифтов.

Наиболее важный параметр текста, которым можно управлять, — это шрифт.

Выбор конкретного шрифта, его размера, начертания и насыщенности — все эти свойства мы рассмотрим последовательно. Размер шрифта регулируется свойством font-size, значение которого определяет желаемую высоту символа шрифта.

Единицы измерения могут быть как абсолютными, так и относительными. Наиболее распространенной единицей измерения размера шрифта являются пиксели (px):

p { 
  font-size: 20px; 
}

Относительный размер шрифта

Абсолютные размеры шрифта представляют собой простую, однако не слишком гибкую систему, которая используется преимущественно в простых ситуациях.

К примеру, для всего документа зададим размер шрифта:

body { 
  font-size: 16px; 
}

Все дочерние элементы, у которых не задано значение размера шрифта, автоматически наследуют размер в 16 пикселей.

Заголовку на странице мы зададим другое фиксированное значение размера шрифта:

h1 { 
  font-size: 32px; 
}

До сих пор все проходило гладко. Однако, предположим, что теперь возникло требование увеличить размер шрифта документа с 16px до 20px на больших мониторах. Если изменить размер шрифта у элемента body, то все его дочерние элементы также изменят свой размер. Однако, размер шрифта у заголовка останется неизменным — 32px.

Чтобы решить эту проблему, можно использовать специальную единицу измерения — em. Один em равен размеру шрифта родительского элемента. Таким образом, если мы хотим, чтобы шрифт дочернего элемента всегда был в два раза больше, чем у родителя, мы можем установить значение 2em:

h1 { 
  font-size: 2em; 
}

Свойство line-height

Межстрочным интервалом в CSS управляет свойство line-height. Как и в случае с размером шрифта, значения line-height можно задавать разными способами.

По умолчанию свойство межстрочного интервала установлено в значение normal, что означает, что браузер должен автоматически определять подходящий интервал между строками, основываясь на размере шрифта. Согласно спецификации, рекомендуется устанавливать это значение в диапазоне от 100% до 120% от размера шрифта. То есть:

p {
  font-size: 10px;
  line-height: normal; /* значение будет примерно 12px */
}

Значение normal для свойства line-height обеспечивает читаемость всего нестилизованного текста. Тем не менее, если требуется отклониться от стандартной стилизации, можно установить для line-height фиксированное абсолютное значение в пикселях (px).

p {
  font-size: 16px;
  line-height: 26px;
}

Относительная высота строки

Итак, мы уже рассмотрели следующие варианты для line-height: 1. Относительное значение normal, которое вычисляется браузером автоматически в зависимости от font-size, и мы не можем управлять им напрямую. 2. Абсолютное значение в пикселях (px).

Если же нам требуется установить относительное значение, отличное от normal, это также возможно. Для этого значение line-height задается в процентах или в виде множителя. В таком случае браузер динамически вычисляет значение в зависимости от font-size.

p {
  font-size: 10px;
  line-height: 150%; /* вычисленное значение: 10px * 150% = 15px */
  line-height: 2;    /* вычисленное значение: 10px * 2 = 20px */
}

Как вы понимаете, относительные значения более гибкие, чем абсолютные.

Свойство font-family

Для определения используемого шрифта существует специальное свойство — font-family. В его значении перечисляется список названий шрифтов через запятую. Начинается список с наиболее предпочтительного шрифта, затем следуют менее предпочтительные, а в конце указывается общий тип шрифта. Браузер просматривает список слева направо и применяет первый найденный в системе или на сайте шрифт. Пример:

body {
  font-family: "PT Sans", "Arial", sans-serif;
}

Если название шрифта включает в себя несколько слов, его необходимо заключить в кавычки. Одинарные названия шрифтов можно оставить без кавычек или заключить их в кавычки для сохранения единообразия. Если браузер не может найти ни один из перечисленных шрифтов на сайте или в операционной системе, он использует последнее указанное значение — общий системный тип шрифта.

Свойство font-weight. Определение насыщенности шрифта

Еще одним параметром шрифта, которым мы можем управлять, является его насыщенность или толщина. Шрифт может быть более жирным или более тонким по сравнению с обычным начертанием. Насыщенность шрифта регулируется с помощью свойства font-weight. Это свойство может принимать ключевые слова или числовые значения.

Наиболее распространенные значения включают:

- 400 или normal — это стандартное начертание шрифта, которое используется по умолчанию;

- 700 или bold — указывает на жирное начертание шрифта.

Например

h1 {
  font-weight: 400; /* то же самое что и normal */
}                                  
p {
  font-weight: bold; /* то же самое что и 700 */
}

Свойство text-align. Горизонтальное выравнивание текста

Свойство text-align определяет горизонтальное выравнивание текста внутри блочного элемента (хотя оно также может влиять на другие элементы, о которых мы поговорим позже). Это свойство может принимать несколько значений:

- left — текст выравнивается по левому краю блока, что является значением по умолчанию;

- right — текст выравнивается по правому краю блока;

- center — текст центрируется внутри блока;

- justify — текст растягивается по ширине блока, при этом слова в строке располагаются таким образом, чтобы равномерно заполнить всё доступное пространство. В результате пробелы между словами могут стать неравномерными, так как браузер растягивает их для заполнения строки.

Обратите внимание, что text-align применяется к блоку-контейнеру, содержащему текстовый контент.

/* HTML: */
<p>
Текст внутри абзаца
</p>
/* CSS: */
p {
  text-align: center;
}

Свойство vertical-align. Вертикальное выравнивание текста

Если существует свойство для горизонтального выравнивания, то логично предположить, что должно быть и свойство для вертикального выравнивания. Действительно, такое свойство называется `vertical-align`. Оно предназначено для выравнивания инлайновых элементов относительно строки, в которую они встроены.

Рассмотрим простой пример использования `vertical-align` для выравнивания изображения `` в текстовой строке. Это свойство имеет несколько значений, но наиболее часто используются следующие:

- top - выравнивание по верхнему краю строки;

- middle - выравнивание по центру строки;

- bottom - выравнивание по нижнему краю строки;

- baseline (значение по умолчанию) - выравнивание по базовой линии строки.

Важно отметить, что в отличие от text-align, которое применяется к контейнеру, vertical-align задается непосредственно самому элементу, что позволяет точно контролировать его вертикальное расположение внутри строки.

/* HTML */
<p>
<img src="picture.png" alt="Картинка">
Текст внутри абзаца
</p>
/* CSS */
img {
  vertical-align: middle;
}

Использование фона для оформления текста

Один из ключевых параметров текста — это его цвет, который управляется свойством color в CSS. В этом контексте, важно также рассмотреть использование цвета фона блока для оформления текста и принципы сочетания цвета фона с цветом текста.

В CSS цвет обычно задается в шестнадцатеричном формате, начинающемся с символа решетки (#).

Например:

.text-block {
  color: #000000; /* черный цвет текста */
  background-color: #FFFFFF; /* белый цвет фона */
}

При выборе сочетаний цветов текста и фона следует учитывать контрастность, чтобы текст был четким и легко читаемым. Например, темный текст на светлом фоне или светлый текст на темном фоне обеспечивают хорошую видимость.

Фоновое изображение для блока задаётся свойством background-image, а фоновый цвет — свойством background-color:

div {
  background-image: url("путь_к_файлу_изображения.png");
  background-color: #cccccc;
}

Фоновое изображение и фоновый цвет блока всегда должны достаточно сильно контрастировать с цветом текста. Чем больше контраст, тем удобнее читается текст в разных условиях освещённости и на разных устройствах. Поэтому если вы задаёте блоку фоновое изображение, нужно обязательно дополнительно задавать подходящий фоновый цвет. В этом случае, пока изображение загружается, или в случае, если оно совсем не загрузится, текст всё равно можно будет прочитать:

p {
/* идеальный контраст: цвет текста белый, цвет фона — чёрный */
  background-color: #000000;
  color: #ffffff;
}                              
span {
/* плохой контраст: цвет текста и фона — серые */
  background-color: #cccccc;
  color: #dddddd;
}

Свойство color. Цвет текста

Разберемся со значениями color и backgroud-color

Цвет может быть задан в виде ключевого слова

Например:

color: black; /* чёрный цвет */
color: red;   /* красный цвет */
color: white; /* белый цвет */

Самый распространенный вариант указания цветов - это шеснадцатиричое значение. В данном контексте цвет определяется комбинацией красного, зелёного и синего компонентов, которые задаются в виде шестнадцатеричных чисел от 00 до FF. Если цветовые коды состоят из трех символов, то второй символ каждой составляющей повторяет первый, что позволяет быстро задавать цвета с удвоенной интенсивностью каждого компонента.

color: #000000; /* чёрный цвет */
color: #f00;    /* красный цвет, то же что #ff0000 */
color: #fff;    /* белый цвет, то же что #ffffff */

Если избегать использования шестнадцатеричных кодов, можно использовать функцию rgb, которая позволяет указывать цвета в десятичной системе от 0 до 255 для каждой из трех цветовых составляющих — красного, зеленого и синего, разделенных запятыми. Этот метод более интуитивно понятен и удобен.

color: rgb(0, 0, 0)       /* чёрный, то же что #000000 */
color: rgb(255, 0, 0)     /* красный, то же что #ff0000 */
color: rgb(255, 255, 255) /* белый, то же что #ffffff */

У функции rgb есть расширенная версия — rgba. В этом случае помимо указания цвета последним значением указывается степень непрозрачности цвета — alpha. Значение может быть от 0 (полностью прозрачный) до 1 (полностью непрозрачный):

color: rgba(0, 0, 0, 0.5)      /* чёрный, непрозрачный на 50% */
color: rgba(255, 0, 0, 0.3)     /* красный, непрозрачный на 30% */
color: rgba(255, 255, 255, 0.9) /* белый, непрозрачный на 90% */

Использование отступов для оформления текста

Для улучшения читаемости текста в блоке, важно обеспечить достаточное свободное пространство вокруг него. Текст не должен быть слишком прижат к границам блока, чтобы создать ощущение комфорта и легкости чтения. В CSS, для управления пространством вокруг текста, используются два свойства: padding, которое устанавливает внутренние отступы в пределах блока, и margin, которое определяет внешние отступы. Вот пример их применения:

.sometext {
  padding: 10px; /* Внутренние отступы */
  margin: 20px 0;  /* Внешние отступы */
}

В примере выше задан внутренний отступ со всех сторон 10px, а также внешний отступ сверху и снизу 20px и 0px слева и справа.

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

Свойство text-decoration. Подчёркивание и другие эффекты

Дополнительное оформление текста можно задать с помощью свойства text-decoration. Вот его значения:

underline — подчёркивание;

line-through — зачёркивание;

overline — надчёркивание;

none — убирает вышеперечисленные эффекты.

К тексту можно одновременно применить несколько эффектов, если перечислить значения через пробел:

p {
  text-decoration: underline; /* подчёркнутый текст */
}         
span {
/* подчёркнутый и зачёркнутый текст */
  text-decoration: underline line-through;
}

Свойство font-style. Курсив

Начертание текста можно задавать с помощью свойства font-style. Вот его основные значения:

normal — обычное начертание;

italic — курсивное начертание;

oblique — наклонное начертание.

Свойство text-transform. Регистр символов

С помощью CSS можно также управлять регистром символов: делать буквы строчными (маленькими) или заглавными (большими). Делается это с помощью свойства text-transform. Его значения:

lowercase — все строчные;

uppercase — все заглавные;

capitalize — каждое слово начинается с большой буквы;

none — отменяет изменение регистра.

Home About Links

Text me