Введение в CSS: стиль, порядок и магия вёрстки

Мы начинаем наше погружение в мир CSS – языка, который превращает скучные HTML-страницы в красоту. Без него весь интернет выглядел бы как Word 97, а это, согласись, не очень весело. Давай разбираться, что к чему!

Что такое CSS?

Определение и предназначение

CSS (Cascading Style Sheets – каскадные таблицы стилей) – это язык, который отвечает за внешний вид веб-страниц. Если HTML – это кости сайта, то CSS – его кожа, одежда и макияж.

С помощью CSS мы можем изменять цвета, шрифты, размеры элементов, их расположение и анимацию. Другими словами, HTML – это что будет на странице, а CSS – как это будет выглядеть.

Как CSS влияет на внешний вид страниц?

Допустим, у нас есть такой HTML-код:

<h1>Привет, мир!</h1>
<p>Это мой первый сайт.</p>

Он отобразится просто как чёрный текст на белом фоне. Но если мы добавим немного CSS:

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

p {
    color: gray;
    font-style: italic;
}

Теперь заголовок станет синим и большим, а текст — серым и наклонным.

Способы подключения CSS

Теперь разберёмся, как этот стиль магически попадает на страницу. Есть три способа подключить CSS.

Inline-стили (встроенные в HTML-элемент)

<h1 style="color: red; font-size: 24px;">Привет, мир!</h1>

Плюсы: Быстро и просто.
Минусы: Легко запутаться, сложно менять стили для всей страницы.

Встроенные стили в <head>

<head>
    <style>
        h1 {
            color: red;
            font-size: 24px;
        }
    </style>
</head>

Плюсы: Все стили собраны в одном месте.
Минусы: Плохо масштабируется, если стилей много.

Внешний CSS-файл (лучший вариант)

В файле styles.css:

h1 {
    color: red;
    font-size: 24px;
}

В HTML подключаем так:

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

Плюсы:

Удобно работать с большими сайтами.
Можно использовать один стиль для всех страниц.
HTML остаётся чистым.

Минусы:

Без интернета файл может не загрузиться (если внешний сервер).
Нужно отдельно загружать файл.

Вывод: Всегда старайся использовать внешние стили, если проект более-менее серьёзный.

Основы синтаксиса CSS

CSS работает по принципу "селектор – свойство – значение".

Как выглядит правило CSS?

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

Пример:

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

h1 – селектор (к какому элементу применить стиль).
color – свойство (что меняем).
blue – значение (на что меняем).

Примеры базовых правил

p {
    color: green; /* Цвет текста */
    font-size: 18px; /* Размер шрифта */
    text-align: center; /* Выравнивание */
}

body {
    background-color: lightgray; /* Фон страницы */
}

Как браузер обрабатывает CSS?

Сначала загружается HTML, создаётся его структура (DOM).
Потом загружается CSS, браузер применяет стили.
Если несколько правил совпадают, работает каскад (важнее то, что ниже или более специфично).

Например:

p {
    color: red;
}

p {
    color: blue;
}

Какого цвета будет текст? Синего! Потому что последнее правило перезаписало предыдущее.