InnoMarts logo
InnoMarts
Fast websites
← Back to course

Цвета, Шрифты и Стилизация Текста

Цвета, Шрифты и Стилизация Текста

С возвращением.

В предыдущем уроке ты изучил CSS selectors.

Теперь ты можешь сказать CSS точно, что нужно стилизовать.

Очень мощно.

Очень опасно.

Как дать кисточку человеку, который только что открыл для себя gradients.

В этом уроке мы сосредоточимся на тексте.

Потому что большинство сайтов заполнены текстом.

Заголовки.

Абзацы.

Ссылки.

Кнопки.

Сообщения.

Предупреждения.

Маленький текст в footer, который никто не читает, но юридически всем нужен.

Если текст трудно читать, весь сайт кажется сломанным.

Даже если layout технически правильный.

Читаемый текст — это не украшение.

Читаемый текст — это выживание.

Что Ты Изучишь

В этом уроке ты узнаешь:

Почему Стилизация Текста Важна

HTML даёт тексту значение.

CSS даёт тексту внешний вид.

HTML говорит:

<h1>Добро пожаловать на мой сайт</h1>
<p>Это абзац.</p>

CSS говорит:

h1 {
  color: #111827;
  font-size: 48px;
}

p {
  color: #374151;
  font-size: 18px;
  line-height: 1.7;
}

Теперь браузер знает не только, что это за контент, но и как он должен выглядеть.

Хорошая стилизация текста помогает пользователям читать комфортно.

Плохая стилизация текста заставляет пользователей убегать быстрее, чем developer, который видит “undefined is not a function” в пятницу вечером.

Создай Проект

Создай папку для этого урока:

mkdir css-lesson3
cd css-lesson3
touch index.html
touch style.css

Ты должен получить:

css-lesson3/
  index.html
  style.css

Открой папку в своём editor.

Мы создадим маленькую article page.

Потому что articles идеально подходят для практики text styling.

Много headings.

Много paragraphs.

Много возможностей сделать всё читаемым.

Или ужасным.

Мы выбираем читаемость.

Мы цивилизованные люди.

Напиши HTML

Открой index.html и добавь это:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Цвета, Шрифты и Стилизация Текста</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <h1>Изучаем Стилизацию Текста с CSS</h1>
    <p class="subtitle">Сделай слова читаемыми, красивыми и немного менее скучными.</p>
  </header>

  <main class="page">
    <article class="article-card">
      <p class="category">CSS Basics</p>

      <h2>Почему Стилизация Текста Важна</h2>

      <p>
        Текст — одна из самых важных частей любого сайта. Если люди не могут комфортно читать твой контент, они не останутся надолго.
      </p>

      <p>
        CSS позволяет контролировать цвета, шрифты, размеры, отступы, выравнивание и многие другие детали, которые делают чтение проще.
      </p>

      <h3>Читаемый Текст — Это Хороший Дизайн</h3>

      <p>
        Хороший дизайн — это не только красивые цвета и fancy effects. Это также понятная подача информации.
      </p>

      <a href="#" class="read-more">Читать больше</a>
    </article>
  </main>

  <footer class="site-footer">
    <p>Создано во время изучения CSS text styling.</p>
  </footer>
</body>
</html>

Эта страница имеет:

Идеально.

Маленькая площадка для текста.

Но без песка в обуви.

Начни с Базовых Стилей Страницы

Открой style.css и добавь:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

Это даёт странице:

Страница уже выглядит менее хаотично.

Ещё не готова.

Но уже не так, будто браузер принимал все дизайнерские решения во время обеда.

Цвет Текста через color

Property color изменяет цвет текста.

Пример:

p {
  color: #374151;
}

Это делает текст paragraph тёмно-серым.

Тёмно-серый часто легче читать, чем чистый чёрный.

Чистый чёрный на чистом белом может выглядеть слишком резко.

Будто страница кричит.

Добавь это:

p {
  color: #374151;
}

Теперь все paragraphs используют более мягкий цвет текста.

Маленькое изменение.

Большой комфорт.

Глаза пользователей тихо благодарят тебя.

Background Color

Property background-color изменяет фон элемента.

Пример:

.site-header {
  background-color: #111827;
}

Добавь это:

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 48px 24px;
}

Теперь header имеет:

Это уже выглядит более осознанно.

CSS начинает вести себя нормально.

Полностью не доверяй.

Но прогресс есть.

Font Family

Property font-family контролирует шрифт.

Пример:

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

Это означает:

Используй Arial, если он доступен. Если нет — используй любой sans-serif font.

Fallback важен.

Не каждый computer имеет каждый font.

Browsers практичны.

Им нужны запасные планы.

Как developers перед production deploy.

Распространённые font families:

font-family: Arial, sans-serif;
font-family: Georgia, serif;
font-family: "Courier New", monospace;

Пока оставь это:

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

Просто.

Читаемо.

Безопасно.

Не драматично.

Font Size

Property font-size контролирует размер текста.

Пример:

h1 {
  font-size: 48px;
}

Добавь это:

h1 {
  font-size: 48px;
  margin-bottom: 12px;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 24px;
}

p {
  font-size: 18px;
}

Теперь headings и paragraphs имеют разные размеры.

Это создаёт hierarchy.

Hierarchy показывает пользователю, что самое важное.

Без hierarchy всё кричит с одинаковой громкостью.

Это не дизайн.

Это семейный ужин с плохим Wi-Fi.

Font Weight

Property font-weight контролирует толщину текста.

Пример:

h1 {
  font-weight: 700;
}

Распространённые значения:

font-weight: 400;
font-weight: 600;
font-weight: 700;

Также можно использовать слова:

font-weight: normal;
font-weight: bold;

Добавь это:

h1,
h2,
h3 {
  font-weight: 700;
}

.category {
  font-weight: 700;
}

Теперь headings и category label выглядят сильнее.

Используй bold осторожно.

Если всё bold, то ничего не bold.

Если каждая кнопка говорит “СРОЧНО”, со временем никто не верит.

Line Height

Property line-height контролирует пространство между строками текста.

Пример:

p {
  line-height: 1.7;
}

Добавь это:

p {
  font-size: 18px;
  line-height: 1.7;
}

Это улучшает читаемость.

Без нормального line-height paragraphs выглядят сжатыми.

Будто слова стоят в переполненном лифте.

Дай им пространство.

Словам тоже нужен кислород.

Text Align

Property text-align контролирует горизонтальное выравнивание.

Пример:

text-align: center;

Распространённые значения:

text-align: left;
text-align: center;
text-align: right;

Мы уже использовали это в header:

.site-header {
  text-align: center;
}

Используй centered text осторожно.

Он хорошо работает для коротких headers.

Но длинные paragraphs обычно легче читать left-aligned.

Не центрируй целую article, если не хочешь, чтобы читатели страдали вежливо.

Text Transform

Property text-transform изменяет регистр текста.

Пример:

.category {
  text-transform: uppercase;
}

Добавь это:

.category {
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

Это делает category label похожим на маленький tag.

letter-spacing добавляет пространство между буквами.

Полезно для uppercase labels.

Опасно, если переборщить.

Слишком большой letter-spacing делает текст таким, будто он пытается сбежать.

Text Decoration

Property text-decoration контролирует линии на тексте.

Links по умолчанию имеют underline.

Можно убрать его:

a {
  text-decoration: none;
}

Но осторожно.

Underlines помогают пользователям распознавать links.

Если убираешь underline, сделай link понятным другим способом.

Добавь это:

.read-more {
  color: #2563eb;
  font-weight: 700;
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline;
}

Теперь link выглядит чисто.

Когда user наводит mouse, underline возвращается.

Вежливо.

Читаемо.

Link с хорошими манерами.

Стилизуй Article Card

Теперь сделай article легче для чтения.

Добавь это:

.page {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.article-card {
  background-color: white;
  padding: 32px;
  border-radius: 16px;
}

Это создаёт:

Теперь страница имеет структуру.

Текст имеет дом.

Хороший дом.

Не подвал с default Times New Roman.

Стилизуй Footer

Добавь:

.site-footer {
  text-align: center;
  padding: 24px;
}

.site-footer p {
  color: #6b7280;
  font-size: 14px;
}

Теперь footer выглядит мягче.

Footer text обычно должен быть менее доминирующим.

Он полезен.

Но ему не нужно входить в комнату с трубой.

Полный CSS

Твой style.css должен выглядеть так:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 48px 24px;
}

h1 {
  font-size: 48px;
  margin-bottom: 12px;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 24px;
}

h1,
h2,
h3 {
  font-weight: 700;
}

.subtitle {
  color: #d1d5db;
  font-size: 20px;
}

.page {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.article-card {
  background-color: white;
  padding: 32px;
  border-radius: 16px;
}

.category {
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

p {
  color: #374151;
  font-size: 18px;
  line-height: 1.7;
}

.read-more {
  color: #2563eb;
  font-weight: 700;
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline;
}

.site-footer {
  text-align: center;
  padding: 24px;
}

.site-footer p {
  color: #6b7280;
  font-size: 14px;
}

Сохрани файл.

Обнови браузер.

Страница должна выглядеть намного более читаемой.

Не просто styled.

Readable.

Это цель.

Сайт должен не только выглядеть “cool”.

Он должен помогать людям понимать информацию.

Дикая идея, правда?

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

Слишком Маленький Текст

Плохо:

p {
  font-size: 10px;
}

Tiny text — это не элегантно.

Это просто tiny.

Основной текст должен быть комфортным для чтения.

Хороший старт:

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

Для beginner practice 18px тоже нормально.

Плохой Contrast

Плохо:

p {
  color: #cccccc;
  background-color: #ffffff;
}

Светло-серый текст на белом фоне трудно читать.

Может выглядеть “soft”.

Но также выглядит невидимым.

Твой content не должен играть в прятки.

Слишком Много Fonts

Плохая идея:

h1 {
  font-family: Georgia, serif;
}

h2 {
  font-family: "Courier New", monospace;
}

p {
  font-family: Arial, sans-serif;
}

Слишком много fonts делает страницу messy.

Начни с одного font.

Возможно, с двух позже.

Не с двенадцати.

Это website, а не font zoo.

Практика

Создай маленькую blog-style page с:

Потом стилизуй:

Сосредоточься на readability.

Не на decoration.

Readable first.

Fancy later.

Как научиться ходить перед тем, как покупать блестящие кроссовки.

Мини-Задание

Создай две article cards.

Дай им обеим class:

class="article-card"

Потом создай special class:

class="article-card highlighted"

Стилизуй highlighted article иначе:

.highlighted {
  border: 2px solid #2563eb;
}

Попробуй изменить:

Ты практикуешь настоящее CSS thinking:

base style plus variation.

Именно так websites остаются organized, а не превращаются в style soup.

Итог

Сегодня ты узнал, что:

Текст — не маленькая деталь.

Текст — главный content многих websites.

Относись к нему хорошо.

Users это заметят.

Даже если не будут знать, почему.

Следующий Урок

В следующем уроке мы изучим box model.

Margin.

Padding.

Border.

Content.

Секретную геометрию каждой web page.

Готовься.

Boxes are coming.