Карта сайта

Урок 16: Базовые свойства CSS

/Уроки по HTML/CSS/Урок 16: Базовые свойства CSS
Урок 16: Базовые свойства CSS
Автор: написал в рубрике Уроки по HTML/CSS. 0 Комментариев.

В шестьнадцатом уроке мы продолжаем изучать HTML и CSS. Мы разберём три ключевых свойства CSS, без которых не обходится ни один веб-проект. Цвет текста, размер шрифта и семейство шрифтов. Эти свойства основа оформления текста и они помогут вам сделать ваш сайт не только функциональным, но и визуально привлекательным.

Почему CSS используется для текста?

Прежде чем перейти к свойствам, давайте вспомним, зачем вообще нужен CSS. Если HTML это «скелет» вашего сайта, то CSS его «одежда». С помощью каскадных таблиц стилей вы управляете внешним видом элементов: цветами, шрифтами, отступами и многим другим. Сегодня мы сосредоточимся на тексте, ведь именно он передаёт основную информацию пользователям.

Цвет текста: свойство color

Цвет текста, что замечает пользователь при загрузке страницы. Он влияет на читаемость, настроение сайта и даже на конверсию (например, кнопки с правильным цветом чаще нажимают). Давайте разберёмся, как управлять цветом с помощью CSS.

Как задать цвет?

Свойство color принимает различные форматы цвета. Рассмотрим основные:

1. Ключевые слова

CSS поддерживает более 140 названий цветов на английском языке. Например:

  • red (красный)
  • blue (синий)
  • green (зелёный)
  • gold (золотой)

Пример:

p {
  color: tomato; /* Текст параграфа станет оранжево-красным */
}

2. HEX-коды

HEX-код это шестнадцатеричное представление цвета в формате #RRGGBB, где:

  • RR — интенсивность красного (00 до FF).
  • GG — интенсивность зелёного.
  • BB — интенсивность синего.

Пример:

h1 {
  color: #1a73e8; /* Синий цвет, как в Google */
}

3. RGB и RGBA

Формат rgb() позволяет задать цвет через интенсивность красного, зелёного и синего (от 0 до 255).
Формат rgba() добавляет прозрачность (альфа-канал от 0 до 1).

Примеры:

/* Чистый синий без прозрачности */
.text {
  color: rgb(0, 0, 255);
}

/* Синий с прозрачностью 50% */
.text-transparent {
  color: rgba(0, 0, 255, 0.5);
}

Советы по выбору цвета

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

Практическая задача

Создайте HTML-страницу с тремя параграфами. Задайте каждому из них разный цвет текста, используя:

  1. Ключевое слово.
  2. HEX-код.
  3. RGBA с прозрачностью 0.7.

Решение:

<!DOCTYPE html>
<html>
<head>
  <style>
    .p1 { color: purple; }
    .p2 { color: #2ecc71; }
    .p3 { color: rgba(255, 0, 0, 0.7); }
  </style>
</head>
<body>
  <p class="p1">Фиолетовый текст</p>
  <p class="p2">Зелёный текст</p>
  <p class="p3">Красный текст с прозрачностью</p>
</body>
</html>

Размер шрифта: свойство font-size

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

Единицы измерения

Свойство font-size поддерживает разные единицы. Рассмотрим популярные:

1. Пиксели (px)

Пиксели является абсолютной единицей. Значение 16px означает, что высота шрифта равна 16 пикселям на экране.

Пример:

body {
  font-size: 16px; /* Базовый размер для страницы */
}

h2 {
  font-size: 24px; /* Заголовок второго уровня */
}

2. Проценты (%)

Проценты зависят от размера шрифта родительского элемента.

Пример:

<div class="parent">
  <p class="child">Текст с размером 150%</p>
</div>
.parent {
  font-size: 20px;
}

.child {
  font-size: 150%; /* 20px * 1.5 = 30px */
}

3. em

em — относительная единица, кратная размеру шрифта родителя.

  • 1em = 100% от размера родителя.
  • 2em = 200% и т.д.

Пример:

.parent {
  font-size: 15px;
}

.child {
  font-size: 2em; /* 15px * 2 = 30px */
}

4. rem

rem (root em) зависит от размера шрифта корневого элемента (<html>). Это удобно для создания масштабируемых интерфейсов.

Пример:

html {
  font-size: 16px;
}

.text {
  font-size: 1.5rem; /* 16px * 1.5 = 24px */
}

Какую единицу выбрать?

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

Практическая задача

Создайте страницу с заголовком <h1>, параграфом <p> и блоком <div>. Задайте размеры:

  • <h1>: 2.5rem.
  • <p>: 18px.
  • <div>: 120% от размера родителя (у родителя должен быть размер 20px).

Решение:

<!DOCTYPE html>
<html>
<head>
  <style>
    html { font-size: 16px; }
    h1 { font-size: 2.5rem; } /* 16px * 2.5 = 40px */
    p { font-size: 18px; }
    .parent { font-size: 20px; }
    .child { font-size: 120%; } /* 20px * 1.2 = 24px */
  </style>
</head>
<body>
  <h1>Заголовок</h1>
  <p>Основной текст</p>
  <div class="parent">
    <div class="child">Текст внутри родителя</div>
  </div>
</body>
</html>

Семейство шрифтов: свойство font-family

Шрифт это «голос» вашего сайта. Serif-шрифты (с засечками) выглядят традиционно. Sans-serif современно, а моноширинные подходят для кода. Давайте научимся их применять.

Как задать шрифт?

Свойство font-family принимает список шрифтов через запятую. Браузер выбирает первый доступный шрифт из списка.

Пример:

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

Категории шрифтов

  • Serif: Times New Roman, Georgia.
  • Sans-serif: Arial, Roboto, Open Sans.
  • Monospace: Courier New, Consolas (равная ширина символов).
  • Cursive: имитация рукописного текста.
  • Fantasy: декоративные шрифты.

Веб-безопасные шрифты (Web-Safe Fonts)

Не все шрифты установлены на устройствах пользователей. Веб-безопасные шрифты это те, которые есть почти везде:

  • Arial (sans-serif)
  • Times New Roman (serif)
  • Georgia (serif)
  • Courier New (monospace)

Всегда указывайте резервный шрифт и общую категорию!

Плохо:

p {
  font-family: Roboto; /* Если Roboto нет, браузер использует стандартный шрифт */
}

Хорошо:

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

Подключение кастомных шрифтов

Если вы хотите использовать нестандартный шрифт (например, с Google Fonts), его нужно подключить через @font-face или ссылку.

Пример с Google Fonts:

  1. Выберите шрифт на fonts.google.com.
  2. Добавьте ссылку в <head>:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  1. Используйте в CSS:
body {
  font-family: 'Roboto', sans-serif;
}

Практическая задача

Создайте страницу с тремя блоками:

  1. Заголовок с шрифтом Georgia и резервным serif.
  2. Параграф с шрифтом Arial и резервным sans-serif.
  3. Блок с кодом (используйте моноширинный шрифт).

Решение:

<!DOCTYPE html>
<html>
<head>
  <style>
    h2 {
      font-family: Georgia, serif;
    }
    p {
      font-family: Arial, sans-serif;
    }
    code {
      font-family: 'Courier New', Courier, monospace;
    }
  </style>
</head>
<body>
  <h2>Заголовок с Georgia</h2>
  <p>Текст с Arial</p>
  <code>console.log("Hello, CSS!");</code>
</body>
</html>

Итоги 16-го урока

Сегодня мы разобрали три ключевых свойства CSS:

  1. color — управление цветом текста.
  2. font-size — контроль размера шрифта.
  3. font-family — выбор семейства шрифтов.

Потренируйтесь с примерами из задач, экспериментируйте с значениями и наблюдайте, как меняется ваша страница. Хороший дизайн начинается с внимания к деталям.

В следующем уроке мы изучим селекторы классов, селекторы ID и группировку.

Полный курс «HTML и CSS для начинающих» доступен по ссылке: https://max-gabov.ru/html-css-dlya-nachinaushih