Создание страницы это, в первую очередь, работа с текстом. Каким бы ни был красивый дизайн, но если информацию прочитать трудно или невозможно, то пользователь быстро уйдёт со страницы. CSS даёт широкие возможности для стилизации текста. В этом уроке рассмотрим основные стили, которые возможно применить к тексту. Описать их все в рамках одного урока невозможно и в этом нет необходимости. В процессе получения опыта вы будете узнавать о новых свойствах, но все они базируются на нескольких основных «китах»:
Каждый текст на странице имеет свой цвет. Будь то заголовки или кричащий баннер, который рассказывает о скидке. Любой текст имеет цвет. Чтобы управлять им в CSS используется свойство color
. С его помощью можно установить любой цвет для разных участков текста. В качестве значения свойство принимает цвет в разных моделях цветового пространства. Распространённой является модель RGB. Она указывает, сколько красного, зелёного, и синего используется в цвете. На первых порах вы можете использовать онлайн-сервисы, которые укажут выбранный цвет в этой модели. Одним из таких сервисов является HTML Colors Codes.
Первое, что настраивают разработчики во время вёрстки макета — цвет основного текста страницы. Так как свойство color
является наследуемым, то его можно устанавливать для тега <html>
или <body>
. С помощью каскадности этот цвет будет применяться ко всему тексту, если не указано иного значения. Выберем неглубокий чёрный цвет, который записывается в модели RGB как #333333
.
Интересно: в макетах редко встречается максимально чёрный цвет, который записывается как #000000
. Дело в том, что такой цвет не встречается в природе и человеческому глазу непривычен.
body {
color: #333;
}
Установка цвета текста — непростая задача. Помимо решения дизайнерской задачи и согласования текста с остальными цветовыми решениями, необходимо не забывать про доступность текста. Какой бы цвет ни был выбран, его прочтение должно быть комфортным для пользователя. Для этого текст должен быть контрастным относительно фона, на котором он лежит. Светло-серый текст на белом фоне будет трудно прочитать. Поэтому на белом фоне используют чёрный или близкий к чёрному цвет для основного текста.
Контраст в меньшей степени относится к заголовкам и небольшим выделениям внутри текста. Они выделяются на общем фоне по другим характеристикам: насыщенность, размер, границы, самостоятельный фон. Такой текст тоже должен обладать достаточным контрастом, при этом он может иметь значения ниже, чем основной текст.
Для проверки контраста текста можно использовать веб-инспектор Chrome DevTools. Выбрав любой цвет на панели Styles браузер автоматически выведет коэффициент контраста текста. Он обозначен как Contrast ratio. Если контраст находится в рамках допустимого, то будет отмечен зелёной галочкой. В противном случае будет показан красный круг.
Выравнивание текста является важным способом выделения текста на странице. Нестандартное выравнивание позволяет пользователю быстрее заметить текст. В связке с размером текста и цветом, выравнивание заголовков является общепризнанной практикой на страницах.
Для выравнивания текста используется свойство text-align
, которое принимает следующие значения:
left
— выравнивание текста по левому краю. Это значение устанавливается по умолчанию.center
— выравнивание текста по центру.right
— выравнивание текста по правому краю.justify
— выравнивание текста по ширине. Данное значение выравнивает текст так, чтобы поместить слова строго от начала блока до его конца. При этом возможны изменения размеров пробелов между словами.Важно: использование значения justify
является плохой практикой. Данный приём используется в оформлении книг, где есть возможность отредактировать текст так, чтобы выравнивание по ширине не создавало больших пробелов между словами. В условиях веб-страницы такое почти невозможно.
Свойство text-align
также является наследуемым. Установив его для какого-либо блока весь текст внутри него будет выравнен в соответствии со значением свойства.
Используя CSS можно гибко настраивать насыщенность шрифта. Насыщенность используется для выделения важного участка текста и придаёт ему «вес» относительно соседних элементов. Для управления насыщенностью в CSS используется правило font-weight
. Оно принимает следующие значения:
lighter
— сверхтонкое начертание. Делает текст менее насыщенным, чем текущее значение.normal
— значение по умолчанию. Соответствует числовому значению 400.bold
— жирное начертание текста. Соответствует числовому значению 700.bolder
— сверхжирное начертание. Делает текст насыщеннее, чем текущее значение.Для многих шрифтов доступны только значения normal
и bold
. Это связано с тем, сколько создатели шрифта включат различных начертаний.
Управлять размером текста можно с помощью свойства font-size
. Текст с большим размером шрифта первым бросается в глаза, поэтому заголовки, помимо выравнивания по центру, имеют больший размер шрифта.
Сравните заголовки, которые указаны с помощью тега <h1></h1>
и <h2></h2>
. Основное их визуальное отличие — размер текста. Помимо встроенных стилей, мы можем самостоятельно устанавливать размер шрифта. Для этого можно использовать единицы измерения пиксели px. В следующих уроках вы узнаете и о других единицах измерения и как с их помощью можно адаптировать контент.
.small-text {
font-size: 12px;
}
.normal-text {
font-size: 16px;
}
.big-text {
font-size: 30px;
}
Вам ответят команда поддержки Хекслета или другие студенты.
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Загляните в раздел «Обсуждение»:
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
Зарегистрируйтесь или войдите в свой аккаунт