Загрузка...

Текст в CSS

Вы задали размеры боксов и управляли overflow. Теперь оформите сами слова. Свойства текста в CSS отвечают за выравнивание, подчёркивание, регистр, интервалы и высоту строки — пока без смены семейства шрифта (это следующий урок).

Повседневные инструменты текста

📊 Частые свойства текста

Свойство Повседневная роль
text-align Выравнивает текст в строке: left, right, center, justify
text-decoration Добавляет или убирает подчёркивание, надчёркивание или зачёркивание
text-transform Меняет регистр: uppercase, lowercase, capitalize
line-height Задаёт высоту каждой строки — ключ к читаемым абзацам
letter-spacing Настраивает расстояние между буквами

Выровнять текст

text-align размещает текст по горизонтали в содержащем блоке.

Центрировать заголовок

css
CSS Code 
.hero-title {
text-align: center;
color: #0f172a;
}

Оформление — подчёркивание и друзья

text-decoration рисует линии на тексте. Ссылки часто подчёркнуты; уберите это через none или добавьте underline / line-through, если нужно дизайну.

Примеры оформления

css
CSS Code 
.link-quiet {
text-decoration: none;
color: #2563eb;
}

.sale {
text-decoration: line-through;
color: #64748b;
}

.note {
text-decoration: underline;
}

Менять регистр

text-transform меняет вид букв, не переписывая HTML-текст.

Преобразования регистра

css
CSS Code 
.label {
text-transform: uppercase;
letter-spacing: 0.06em;
}

.city {
text-transform: capitalize;
}

Высота строки для читаемых абзацев

line-height задаёт вертикальный ритм строк. Безразмерные значения вроде 1.5 масштабируются с размером шрифта и спокойно подходят для основного текста.

Комфортная высота строки

css
CSS Code 
.article p {
line-height: 1.6;
color: #334155;
}

Межбуквенный интервал — лёгкая рука

Немного letter-spacing может раскрыть короткий заголовок. Абзацы основного текста чаще оставляйте естественными, если дизайн не требует иного.

Заголовок с лёгким трекингом

css
CSS Code 
.section-title {
text-align: left;
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.3;
}

Попробуйте сами

  1. Центрируйте h1 через text-align: center.
  2. Уберите подчёркивание ссылки через text-decoration: none; при желании верните на hover.
  3. Сделайте маленькую метку заглавными через text-transform: uppercase.
  4. Поставьте абзацу line-height: 1.6 и сравните с 1.2.
  5. Добавьте заголовку небольшой letter-spacing — проверьте, что всё ещё читается.

Частые ошибки

  • Ждать, что text-align: center отцентрирует весь блочный layout (это задача layout, не только текста)
  • Оставлять все ссылки подчёркнутыми, когда дизайн хочет спокойные ссылки — или снимать подчёркивание без другого сигнала
  • Тащить сюда font-family и font-size (это урок Fonts)
  • Огромный letter-spacing на длинных абзацах (тяжело читать)
  • Путать инструменты многоточия overflow текста с этими основами (позже)

Кратко

  • text-align выравнивает текст влево, вправо, по центру или justify
  • text-decoration добавляет или убирает подчёркивания и похожие линии
  • text-transform меняет регистр без правки HTML
  • line-height формирует читаемость абзаца
  • Лёгкий letter-spacing может отполировать короткие заголовки
  • Шрифты — дальше; этот урок про то, как текст сидит и читается

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 26 из 35
Css Урок