Основы CSS

стилизация тегов HTML

CSS

CSS (Cascading Style Sheets) — это язык стилей.

HTML — это скелет сайта, а CSS — это как одежда. Он отвечает за то, как сайт выглядит: цвета, шрифты, размеры, отступы.

CSS — это внешний вид сайта.

Пример, как выглядит одна и та же страница без CSS и с CSS:

❌ Без CSS
✅ С CSS

Правило CSS состоит из селектора и свойств:

селектор {
    свойство: значение;
}

Примеры правил для тега, класса и id:

h1 {
    color: #4a6cf7;
}
.card {
    background: white;
    padding: 20px;
    border-radius: 12px;
}
#header {
    background: #1e293b;
    color: white;
}
  • селектор — к чему применяем стиль (тег, класс, id)
  • свойство — что меняем (цвет, размер, отступ)
  • значение — на что меняем (красный, 20px, по центру)

Подключение CSS

Есть три способа подключить стили к HTML.

Способ 1. Внешний файл

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

Способ 2. Внутри тега <style>

<head>
    <style>
        h1 { color: red; }
    </style>
</head>

Способ 3. Прямо в теге (inline)

<h1 style="color: red;">Заголовок</h1>

⚠️ При использовании внешнего файла style.css — код чище, и стили можно переиспользовать на всех страницах.

Создание CSS-файла

А где писать стили? А надо создать CSS-файл!

Нажать правой кнопкой по папке проекта

Правая кнопка по папке проекта
  • • Выбрать «New»
  • • Нажать «File»

Указать имя файла «style.css» (можно свое любое, но обязательно с расширением .css) и нажать Enter

Новый файл

Ура! Мы создали CSS-файл. Теперь в нем можно будет писать стили

style.css — файл стилей. Именно его мы подключаем к HTML через <link>.

Селекторы

Селектор — это то, к чему применяется стиль. Есть три основных вида:

Селектор Как пишется Что выбирает
Тег h1 Все теги <h1>
Класс .title Все элементы с class="title"
ID #header Элемент с id="header"

Дополнительные селекторы:

Селектор Что выбирает
* Все элементы на странице
h1, h2, h3 Несколько тегов сразу
.card p Все <p> внутри .card

HTML-код:

<h1 class="title">Димасик</h1>
<p>Привет! Мне 14 лет.</p>
<p class="highlight">Люблю игры и музыку.</p>

CSS-код:

.title {
    color: #4a6cf7;
    font-size: 36px;
}

.highlight {
    font-weight: bold;
    color: #f59e0b;
}

Пример работы селектора по тегу и по классу:

❌ Без CSS
✅ С CSS

Класс можно использовать много раз на странице, а id — только один раз.

Задания по селекторам (^>_<^)

  1. Создай файл style.css и подключи его к своему HTML-файлу
Пример: подключаю style.css через <link>
  1. Покрась все <h1> на странице в свой любимый цвет
Пример: h1 { color: #4a6cf7; }
  1. Добавь класс highlight одному абзацу и сделай его жирным через CSS
Пример: .highlight { font-weight: bold; }

Цвета и фон

Цвет текста задаётся свойством color.

h1 {
    color: #4a6cf7;
}

Цвет можно задать тремя способами:

  • По названию: red, blue, green
  • По HEX-коду: #4a6cf7, #ff0000
  • По RGB: rgb(74, 108, 247)

Популярные названия цветов:

Название Цвет HEX
red #ff0000
blue #0000ff
green #008000
orange #ffa500
purple #800080
black #000000
white #ffffff
gray #808080

Популярные HEX-цвета для сайтов:

HEX Цвет Где использовать
#4a6cf7 Кнопки, ссылки
#1e293b Тёмный фон, заголовки
#f0f4ff Светлый фон страницы
#f59e0b Акценты, выделения
#22c55e Успех, «готово»
#ef4444 Ошибки, важное
#8b5cf6 Фиолетовые акценты 
h1 { color: red; }
h2 { color: blue; }
p  { color: #4a6cf7; }
.dark { background: #1e293b; color: white; }
.card { background: #f0f4ff; }

Как выглядит страница до и после добавления цветов:

❌ Без CSS
✅ С цветами

HEX-код начинается с # и состоит из 6 символов. Подбирать цвета удобно на сайте https://colorscheme.ru/.

Задания по цветам ≽^◕ ˕ ◕^≼

  1. Поменяй цвет фона всей страницы на светло-голубой
Пример: body { background: #e0f2fe; }
  1. Сделай заголовок <h1> своего любимого цвета
Пример: h1 { color: #f59e0b; }
  1. Сделай один абзац с тёмным фоном и белым текстом
Пример: .dark { background: #1e293b; color: white; }

Шрифты и текст

Шрифт задаётся свойством font-family.

body {
    font-family: Arial;
}

Размер текста — свойство font-size:

h1 {
    font-size: 40px;
}

Популярные шрифты:

Шрифт Тип Пример
Arial Без засечек Привет, мир!
Verdana Без засечек Привет, мир!
Georgia С засечками Привет, мир!
Times New Roman С засечками Привет, мир!
Courier New Моноширинный Привет, мир!
Comic Sans MS Рукописный Привет, мир!
Impact Жирный, для заголовков Привет, мир!

Популярные размеры шрифта:

Размер Где использовать
12px Мелкий текст, подписи
16px Обычный текст (стандарт)
20px Подзаголовки
32px Заголовки h2
48px Главный заголовок h1

Значения font-weight:

Значение Что делает Пример
normal Обычный Привет
bold Жирный Привет
100–300 Тонкий Привет
400 = normal Привет
700 = bold Привет
900 Очень жирный Привет

Значения text-align:

Значение Что делает
left По левому краю (по умолчанию)
center По центру
right По правому краю
justify По ширине (как в книгах) 
body {
    font-family: Georgia, serif;
    font-size: 16px;
}

h1 {
    font-family: Impact, sans-serif;
    font-size: 48px;
    font-weight: 700;
    text-align: center;
}

p {
    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
}

Как выглядит страница до и после настройки шрифтов:

❌ Без CSS
✅ С CSS

Другие полезные свойства текста:

Свойство Что делает Пример
font-weight Жирность bold, normal, 700
text-align Выравнивание center, left, right
text-decoration Подчёркивание none, underline
line-height Межстрочный интервал 1.5, 24px

Задания по шрифтам (≧▽≦)

  1. Поменяй шрифт всей страницы на Verdana или Georgia
Пример: body { font-family: Georgia; }
  1. Выровняй заголовок <h1> по центру и сделай его размер 50px
Пример: h1 { text-align: center; font-size: 50px; }
  1. Убери подчёркивание у всех ссылок на странице
Пример: a { text-decoration: none; }

Базовые свойства CSS

Все свойства, которые мы прошли, и ещё немного — в одной шпаргалке.

Размеры и отступы:

Свойство Что делает Пример
width Ширина 300px, 50%
height Высота 200px, 100vh
max-width Максимальная ширина 500px, 100%
padding Внутренний отступ 20px, 10px 20px
margin Внешний отступ 16px, 0 auto

Рамки и тени:

Свойство Что делает Пример
border Рамка 2px solid #4a6cf7
border-radius Скругление углов 8px, 50%
box-shadow Тень 0 4px 12px rgba(0,0,0,0.1)

Текст:

Свойство Что делает Пример
color Цвет текста #4a6cf7, red
font-family Шрифт Arial, Georgia
font-size Размер текста 16px, 32px
font-weight Жирность bold, 400, 700
text-align Выравнивание center, left
text-decoration Подчёркивание none, underline
line-height Межстрочный интервал 1.5, 24px

Фон и отображение:

Свойство Что делает Пример
background Фон #f0f4ff, white
display Как отображается block, inline, flex
opacity Прозрачность 0.5, 1 
.card {
    width: 300px;
    height: auto;
    max-width: 100%;
    padding: 20px;
    margin: 16px auto;
    border: 2px solid #4a6cf7;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background: white;
    color: #334155;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
    display: block;
}

✅ Эта шпаргалка — твой справочник. Когда не знаешь, как сделать что-то — загляни сюда.

СПЕЦЗАДАНИЕ

Клепаем красивую визитку — стилизуем то, что сделали на прошлом занятии.

Что нужно сделать:

  • body — фон и шрифт для всей страницы
  • h1 — цвет, размер, выравнивание по центру
  • img — круглая аватарка через border-radius: 50%
  • p — межстрочный интервал line-height
  • h2 — цвет и отступ сверху
  • ul — убрать стандартные маркеры через list-style: none
  • a — убрать подчёркивание, сделать цвет и ховер
  • div.card — блок с рамкой, тенью и скруглёнными углами

Как выглядит визитка до и после CSS:

✅ Работаем!!!