Урок 4.1 — Первые стили

HTML — это скелет страницы. Он говорит браузеру: "Вот заголовок, вот абзац, вот ссылка". Но как сделать заголовок оранжевым, абзац крупнее, а ссылку без подчёркивания и с зелёным цветом? Для этого нужен CSS.

CSS (Cascading Style Sheets — каскадные таблицы стилей) — это язык описания внешнего вида документа. Если HTML — это структура, то CSS — это дизайн. Представьте, что вы строите дом: HTML — это кирпичи, стены и крыша, а CSS — это цвет стен, обои, паркет и освещение.

Вот пример: без CSS все заголовки — чёрные, текст — стандартный Times New Roman. С CSS можно сделать заголовок крупным оранжевым, текст — шрифтом Arial, фон — светло-серым. CSS превращает "скучный документ" в "красивую страницу".

CSS можно подключить к HTML тремя способами: inline (прямо в теге), internal (внутри <style> в head) и external (отдельный .css файл через <link>). В этом уроке мы будем использовать inline и internal — это проще для начинающих.

Inline-стили (атрибут style)

Стиль пишется прямо в HTML-тег через атрибут style. Это самый простой способ, но подходит только для одного элемента.

<p style="color: blue; font-size: 20px;">Синий текст крупным шрифтом</p>

Internal-стили (тег style в head)

Стили пишутся внутри тега <style> в секции <head>. Так можно стилизовать все элементы определённого типа сразу.

<head>
  <style>
    h1 { color: #f97316; }
    p { font-size: 18px; }
  </style>
</head>

External-стили (тег link)

Стили выносятся в отдельный файл styles.css и подключаются через <link>. Это лучший способ для больших проектов.

<head>
  <link rel="stylesheet" href="styles.css">
</head>

В этом уроке мы будем использовать internal-стили (<style> в head) — так нагляднее всего для обучения.

Свойство color задаёт цвет текста. Цвет можно указать разными способами:

• По названию: color: red;, color: blue;, color: tomato;. Всего 148 именованных цветов.
• HEX: color: #ff6600; — шестнадцатеричный код. #ff6600 — оранжевый. Можно сокращать: #f60.
• RGB: color: rgb(255, 102, 0); — три числа от 0 до 255 (красный, зелёный, синий).

Для начала используйте названия цветов — их проще запомнить. Потом переходите к HEX (их копируют из графических редакторов).

<style>
  .example-1 { color: red; }
  .example-2 { color: #f97316; }
  .example-3 { color: rgb(59, 130, 246); }
  .example-4 { color: green; }
</style>

<p class="example-1">Красный текст</p>
<p class="example-2">Оранжевый текст (HEX)</p>
<p class="example-3">Синий текст (RGB)</p>
<p class="example-4">Зелёный текст</p>

Свойство font-size задаёт размер текста. Самые популярные единицы — пиксели (px). 16px — размер по умолчанию в браузере.

<style>
  .small { font-size: 12px; }
  .normal { font-size: 16px; }
  .big { font-size: 24px; }
  .huge { font-size: 36px; }
</style>

<p class="small">Маленький текст (12px)</p>
<p class="normal">Обычный текст (16px)</p>
<p class="big">Большой текст (24px)</p>
<p class="huge">Огромный текст (36px)</p>

Размеры текста в вебе обычно от 12px (минимальный читаемый) до 48px (огромные заголовки). Не делайте текст меньше 12px — его будет трудно читать. Для обычного текста используйте 16–18px, для заголовков — 24–36px.

Есть и другие единицы: em (относительно родителя), rem (относительно корневого элемента), % (проценты). Но для начала достаточно px.

Свойство background-color заливает фон элемента указанным цветом. Можно также задать фон для всей страницы — достаточно применить background-color к селектору body.

Цвет фона задаётся теми же способами, что и color: названия, HEX, RGB.

<style>
  body { background-color: #fef3c7; } /* Светло-жёлтый фон страницы */

  .card {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
  }

  .highlight {
    background-color: #f97316;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
  }
</style>

<div class="card">
  <p>Это белая карточка на жёлтом фоне.</p>
  <p><span class="highlight">Важно!</span> Вот так выделяют текст.</p>
</div>

Обратите внимание на padding: 20px; — это отступ внутри элемента (текст не прилипает к краям). border-radius: 8px; скругляет углы. Эти свойства мы подробнее изучим в следующих уроках.

Свойство text-align выравнивает текст по горизонтали. Возможные значения:

• left — по левому краю (значение по умолчанию)
• center — по центру
• right — по правому краю
• justify — по ширине (как в газетах)

<style>
  .left { text-align: left; }
  .center { text-align: center; }
  .right { text-align: right; }
  .justify { text-align: justify; }
</style>

<p class="left">Текст слева. По умолчанию все абзацы выровнены влево.</p>
<p class="center">Текст по центру. Обычно так выравнивают заголовки.</p>
<p class="right">Текст справа. Используется редко.</p>
<p class="justify">Текст по ширине. Браузер добавляет пробелы между словами, чтобы текст был ровным с обеих сторон. Используется в книгах и газетах, но не очень удобен в вебе.</p>

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

Возьмём страницу "О себе" из урока 3.1 и добавим ей стилей. Создайте файл styled-about.html и добавьте следующий код:

<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Моя страница с CSS</title>
  <style>
    body {
      background-color: #fef3c7;
      font-family: Arial, sans-serif;
      margin: 40px;
    }

    h1 {
      color: #c2410c;
      font-size: 36px;
      text-align: center;
    }

    h2 {
      color: #ea580c;
      font-size: 24px;
    }

    p {
      font-size: 18px;
      line-height: 1.6;
      color: #333;
    }

    ul, ol {
      font-size: 18px;
      line-height: 1.8;
      color: #444;
    }

    a {
      color: #f97316;
    }

    .card {
      background-color: white;
      padding: 20px;
      border-radius: 12px;
      max-width: 700px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="card">
    <h1>Привет! Меня зовут Алексей</h1>
    <p>Я начинающий веб-разработчик. Учу HTML и CSS, чтобы создавать красивые сайты.</p>

    <h2>Мои хобби</h2>
    <ul>
      <li>Программирование</li>
      <li>Музыка</li>
      <li>Чтение</li>
    </ul>

    <h2>Мои цели</h2>
    <ol>
      <li>Научиться верстать</li>
      <li>Выучить CSS</li>
      <li>Изучить JavaScript</li>
    </ol>

    <p>Мой любимый сайт — <a href="https://developer.mozilla.org/ru/">MDN Web Docs</a>.</p>
  </div>
</body>
</html>

Давайте разберём, что здесь происходит:

• body { background-color: #fef3c7; } — фон страницы светло-жёлтый
• body { font-family: Arial; } — шрифт Arial (без засечек, чистый)
• body { margin: 40px; } — отступ от краёв страницы
• h1 { color: #c2410c; font-size: 36px; text-align: center; } — оранжевый заголовок по центру
• p { font-size: 18px; line-height: 1.6; color: #333; } — текст 18px, межстрочный интервал 1.6
• .card { background: white; padding: 20px; border-radius: 12px; max-width: 700px; margin: 0 auto; } — белая карточка с закруглениями, max-width ограничивает ширину, margin: 0 auto центрирует по горизонтали
• a { color: #f97316; } — ссылки оранжевые (вместо стандартного синего)

Попробуйте открыть эту страницу в браузере. Она уже совсем не похожа на "скучную" страницу с чёрным текстом на белом фоне! А теперь поэкспериментируйте:

• Поменяйте background-color страницы на другой цвет (например, #e0f2fe — нежно-голубой)
• Измените font-size заголовков
• Попробуйте text-align: center для h2
• Поменяйте color ссылок на #2563eb (синий)
• Добавьте ещё один div с классом "card" с дополнительной информацией

Вот таблица базовых CSS-свойств, которые пригодятся каждый день:

Не пытайтесь запомнить всё сразу. Просто знайте, что эти свойства существуют, и возвращайтесь к таблице, когда нужно что-то подсмотреть.

Забыли точку с запятой. Без ; после свойства CSS сломается. Браузер не поймёт, где кончается одно правило, и может проигнорировать следующие.

Неправильное имя цвета. color: orrange; не сработает. Имена цветов нужно писать точно: orange, tomato, dodgerblue.

Пропущена решётка в HEX. color: ff6600; не сработает. HEX всегда с #: #ff6600.

Стиль в head, а не в body. Internal-стили (тег <style>) должны быть в <head>, а не в <body>. Хотя технически сработает и в body, лучше всегда писать в head.

Не закрыли тег style. Забыли </style>? Весь остальной HTML будет восприниматься как CSS и не отобразится. Проверяйте!

• CSS — язык стилей, который отвечает за внешний вид страницы
• Три способа подключения: inline (style=""), internal (<style>), external (<link>)
• color — цвет текста (red, #f97316, rgb(255,102,0))
• font-size — размер шрифта в пикселях (px)
• background-color — цвет фона элемента
• text-align — выравнивание текста (left, center, right)
• CSS-правило пишется как свойство: значение;

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