InnoMarts logo
InnoMarts
Fast websites
← Back to course

Первые Шаги с CSS

Первые Шаги с CSS

Добро пожаловать в первый урок CSS.

В HTML-курсе ты научился строить структуру веб-страницы.

Теперь в комнату входит CSS.

CSS смотрит на твой простой HTML и говорит:

“Хорошая структура. Очень ответственно. Но почему ты одет как бланк из государственной конторы?”

CSS добавляет странице стиль.

Он контролирует цвета, шрифты, отступы, layout, рамки, фоны и многие другие визуальные детали.

HTML создаёт контент.

CSS делает этот контент читаемым, приятным и менее способным напугать посетителей.

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

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

Что Такое CSS?

CSS означает Cascading Style Sheets.

Это язык, который используется для стилизации HTML-документов.

HTML говорит:

<h1>Hello World</h1>

CSS говорит:

h1 {
  color: blue;
  font-size: 48px;
}

Вместе они создают страницу, у которой есть и структура, и стиль.

HTML — это скелет.

CSS — это одежда, причёска, обувь и, возможно, солнцезащитные очки.

Но не слишком много очков.

Мы строим сайты, а не начинаем драматичный музыкальный клип.

Зачем Существует CSS

Представь, что ты пишешь стили прямо внутри каждого HTML-элемента.

Вот так:

<h1 style="color: blue; font-size: 48px;">Hello World</h1>
<p style="color: gray; font-size: 18px;">This is my paragraph.</p>

Это работает.

Но очень быстро превращается в хаос.

Если у тебя 50 заголовков и ты хочешь изменить их цвет, придётся редактировать 50 мест.

Это не development.

Это наказание с дополнительным набором текста.

CSS позволяет писать правила стиля в одном месте.

Пример:

h1 {
  color: blue;
  font-size: 48px;
}

p {
  color: gray;
  font-size: 18px;
}

Теперь все элементы h1 и все элементы p могут использовать одни и те же правила.

Чисто.

Организованно.

Меньше хаоса.

CSS уже сейчас спасает твоего будущего себя от страданий.

Создай Свой Первый CSS-Проект

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

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

Теперь у тебя есть два файла:

css-lesson1/
  index.html
  style.css

index.html будет содержать структуру страницы.

style.css будет содержать стили.

Это разделение важно.

HTML делает структуру.

CSS делает дизайн.

Как два человека на одном проекте.

Один строит стену.

Другой говорит: “Хорошая стена. Давай её покрасим.”

Напиши 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>Первые Шаги с CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Моя Первая CSS-Страница</h1>
    <p>CSS делает HTML красивее.</p>
  </header>

  <main>
    <section>
      <h2>О Этой Странице</h2>
      <p>Это простая страница, созданная для практики базового CSS.</p>
    </section>

    <section>
      <h2>Что Я Изучаю</h2>
      <ul>
        <li>Как подключить CSS к HTML</li>
        <li>Как стилизовать заголовки</li>
        <li>Как изменять цвета и отступы</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>Создано во время изучения CSS.</p>
  </footer>
</body>
</html>

Самая важная строка здесь:

<link rel="stylesheet" href="style.css">

Эта строка соединяет HTML-файл с CSS-файлом.

Без неё CSS-файл может кричать весь день.

HTML-страница его не услышит.

Элемент link

Элемент link размещается внутри head.

Пример:

<link rel="stylesheet" href="style.css">

Он говорит браузеру:

Загрузи файл style.css и используй его как stylesheet для этой страницы.

Атрибут rel означает relationship.

Атрибут href указывает путь к файлу.

Если CSS-файл лежит в той же папке, что и index.html, это работает:

href="style.css"

Если CSS-файл лежит в папке css, путь будет таким:

href="css/style.css"

Пути важны.

Браузер не телепат.

К сожалению.

Напиши Свой Первый CSS

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

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #222;
}

h1 {
  color: #2563eb;
}

h2 {
  color: #111827;
}

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

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

Открой index.html в браузере.

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

Поздравляю.

Ты только что стилизовал свою первую страницу с помощью CSS.

Церемония не нужна.

Но маленькое празднование с кофе разрешается.

Как Работают CSS-Правила

CSS-правило обычно имеет три части:

selector {
  property: value;
}

Пример:

h1 {
  color: blue;
}

Здесь:

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

Найди каждый элемент h1 и сделай его текст синим.

CSS даёт инструкции браузеру.

Иногда браузер слушается.

Иногда ты сделал ошибку в тексте.

Обычно это ошибка в тексте.

Будь сильным.

Selectors

Selector выбирает то, что ты хочешь стилизовать.

Пример:

p {
  color: gray;
}

Это выбирает все элементы p.

Пример:

h2 {
  font-size: 32px;
}

Это выбирает все элементы h2.

Пока что мы используем простые element selectors.

Позже изучим classes, IDs, combinations и более мощные selectors.

CSS selectors — это будто сказать:

“Ты. Да, ты. Надень этот стиль.”

Очень прямо.

Очень театрально.

Properties и Values

Property — это то, что ты хочешь изменить.

Value — это как именно ты хочешь это изменить.

Пример:

color: red;

color — это property.

red — это value.

Другой пример:

font-size: 24px;

font-size — это property.

24px — это value.

CSS имеет много properties:

Не пытайся запомнить всё сегодня.

Так новички превращаются в уставшую мебель.

Учись шаг за шагом.

Добавь Лучшие Отступы

Теперь улучшим отступы страницы.

Добавь это в style.css:

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

header {
  background-color: #111827;
  color: white;
  padding: 40px;
  text-align: center;
}

main {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
}

section {
  background-color: white;
  margin-bottom: 20px;
  padding: 24px;
  border-radius: 12px;
}

footer {
  text-align: center;
  padding: 20px;
  color: #666;
}

Теперь страница должна выглядеть более организованно.

Не идеально.

Но точно меньше похожа на HTML, который сбежал из подвала.

Что Такое margin?

margin — это пространство снаружи элемента.

Пример:

section {
  margin-bottom: 20px;
}

Это добавляет пространство под каждой секцией.

Margin — это как личное пространство.

Элементам оно нужно.

Людям оно нужно.

Твоему layout оно точно нужно.

Что Такое padding?

padding — это пространство внутри элемента.

Пример:

section {
  padding: 24px;
}

Он создаёт пространство между краем секции и контентом внутри.

Без padding текст прилипает к краям.

И это выглядит неудобно.

Как сесть слишком близко к кому-то в пустом автобусе.

Что Такое background-color?

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

Пример:

header {
  background-color: #111827;
}

Это делает header тёмным.

Можно использовать названия цветов:

color: blue;

Или hex values:

color: #2563eb;

Hex values сначала выглядят загадочно.

Как секретные коды.

Но это просто коды цветов.

Никакой магии.

Только пиксели, которые притворяются магией.

Тестирование с Локальным Сервером

Можно открыть index.html прямо в браузере.

Но можно также использовать Caddy, чтобы запустить папку локально:

caddy file-server --listen :8080

Потом открой:

http://localhost:8080

Это полезно, когда хочешь, чтобы проект вёл себя больше как настоящий сайт.

Не обязательно.

Но удобно.

И да, локальный сервер делает тебя немного профессиональнее.

Даже если твой CSS ещё спорит с margin.

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

Забыть link к CSS

Если CSS не работает, проверь эту строку:

<link rel="stylesheet" href="style.css">

Убедись, что она внутри head.

Убедись, что название файла правильное.

style.css — это не то же самое, что styles.css.

Компьютеры строгие.

Они не прощают орфографической драмы.

Случайно писать CSS внутри HTML

CSS должен быть в style.css.

Не внутри body вот так:

<body>
  h1 {
    color: blue;
  }
</body>

Это неправильно.

HTML посмотрит на это и скажет:

“Я не знаю, что это, но выглядит подозрительно.”

Пропущенные точки с запятой

Лучше так:

h1 {
  color: blue;
  font-size: 48px;
}

Каждая строка property обычно должна заканчиваться точкой с запятой.

CSS иногда выживет без последней.

Но не проверяй его терпение.

Практика

Создай собственную страницу с:

Потом стилизуй её с помощью CSS.

Твой CSS должен изменить:

Держи всё просто.

Сегодня не нужно становиться дизайнером.

Сегодня нужно заставить HTML слушать CSS.

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

Измени страницу так, чтобы:

Меняй по одной вещи.

Сохрани.

Обнови.

Посмотри.

Это CSS-цикл.

Пиши.

Сохраняй.

Обновляй.

Путаница.

Исправление.

Победа.

Повторить.

Итог

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

Ты написал свой первый CSS.

Это настоящий шаг вперёд.

Страница может ещё не быть шедевром.

Но это уже не голый HTML, который стоит под дождём.

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

В следующем уроке мы подробнее изучим selectors и базовую стилизацию.

Selectors — это способ сказать CSS точно, что нужно стилизовать.

Это очень важно.

Потому что CSS без selectors — это просто человек, который кричит дизайнерские инструкции в пустоту.