CSS в HTML: способы подключения и проверка

Подключение CSS к HTML выполняют четырьмя способами: внешним файлом, блоком <style>, атрибутом style и правилом @import. Для сайта по умолчанию выбирайте внешний файл через <link>: так стили проще поддерживать и переиспользовать. Вы узнаете, как создать CSS-файл для HTML, указать путь, проверить результат в браузере и разобраться с приоритетом правил.

Подключение CSS файла к HTML

Внешний файл подходит для нескольких страниц и больших таблиц стилей. Браузер загружает его через элемент <link> внутри <head>.

Как создать CSS файл для HTML

Создайте новый текстовый файл в Visual Studio Code или другом редакторе кода. Сохраните его с расширением .css, например под именем style.css.

Положите файл в папку css рядом с HTML-документом. Структура проекта может выглядеть так:

project/
    index.html
    css/
        style.css
        print.css

Запишите правила в css/style.css и сохраните оба файла. После этого укажите путь к таблице в атрибуте href.

Как привязать CSS к HTML через link

Добавьте элемент <link> в раздел <head>. Атрибут rel="stylesheet" сообщает браузеру, что подключенный ресурс содержит CSS.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример страницы</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Стили из отдельного файла</h1>
    <p class="intro">Этот текст оформляет файл style.css.</p>
</body>
</html>

В файле css/style.css добавьте правило для класса:

body {
    background-color: #f4f4f4;
    color: #222;
}

.intro {
    color: darkslateblue;
    font-size: 1.2rem;
}

После сохранения страница получит светлый фон, а абзац изменит цвет и размер. Если CSS лежит рядом с HTML-файлом, используйте href="style.css". Для папки css нужен путь href="css/style.css", а для папки уровнем выше – href="../style.css".

Путь от корня сайта начинается с косой черты: /css/style.css. Такой адрес работает на сервере и указывает на папку css в корне сайта. При открытии index.html с диска используйте относительный путь без начальной косой черты.

Для нескольких таблиц добавьте несколько элементов <link>. Атрибут media подключит отдельные правила для печати:

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

Как подключить стили CSS в HTML

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример страницы</title>
    <style>
        body {
            background-color: darkslategray;
            color: azure;
            font-size: 1.1em;
        }

        h1 {
            color: coral;
        }

        .colorful {
            color: orange;
        }
    </style>
</head>
<body>
    <h1>Внутренняя таблица стилей</h1>
    <p class="colorful">Этот абзац оформляет блок style.</p>
</body>
</html>

Браузер применяет правила к элементам этой страницы. Для нескольких страниц код придется повторять, поэтому для сайта удобнее внешний файл.

Как добавить CSS в HTML

Инлайн-стили записывают прямо в открывающем HTML-теге. Они действуют только на выбранный элемент и подходят для точечной правки.

<p style="color: olive; font-size: 24px;">Текст с точечным стилем</p>

Атрибут style быстро меняет один элемент, но усложняет поддержку страницы. Если одинаковое оформление нужно десяти абзацам, вынесите правило в класс внешнего файла или блока <style>.

Подключение стилей CSS в HTML через @import

Правило @import подключает одну внешнюю таблицу стилей из другой. В HTML его можно записать внутри блока <style>:

<style>
    @import url("css/theme.css");
</style>

В самом CSS-файле импорт выглядит так:

@import url("components/buttons.css");

body {
    margin: 0;
}

Правило @import ставьте в начале таблицы стилей, до остальных правил. Если разместить его после обычного CSS-правила, браузер проигнорирует импорт.

Вложенный файл браузер начинает загружать после родительской таблицы. Поэтому запросы идут цепочкой и могут замедлить получение стилей. Для обычного подключения используйте <link>, а @import оставляйте для осознанного разделения CSS.

Сравнение способов подключения CSS

Четыре способа отличаются местом кода, областью действия и сценарием применения. Таблица помогает выбрать подходящий вариант для страницы.

Приоритет CSS: какой способ победит

Приоритет зависит от специфичности селектора и места правила. Атрибут style перекрывает обычные правила из <style> и внешних файлов, если правило не использует !important.

<style>
    p {
        color: navy;
    }
</style>

<p style="color: crimson;">Побеждает атрибут style</p>

Между блоком <style> и <link> при равной специфичности побеждает правило, подключенное ниже в HTML-коде. В этом примере абзац станет зеленым:

<style>
    p {
        color: navy;
    }
</style>
<link rel="stylesheet" href="style.css">

p {
    color: green;
}

Более специфичный селектор может победить правило, расположенное ниже. Например, .note сильнее селектора p. Свойство с !important получает особый приоритет, поэтому не используйте его без причины.

Почему CSS не подключается

Если оформление не изменилось, откройте инструменты разработчика клавишей F12. Вкладка Network показывает загрузку файла, а вкладка Elements – итоговые правила выбранного элемента.

Неверный путь или регистр имени файла

Сравните значение href с реальной структурой проекта. Файлы style.css и Style.css могут считаться разными именами. В Network найдите запрос к CSS: ошибка загрузки указывает на неверный путь или имя.

Пропущен rel="stylesheet"

Проверьте элемент <link> во вкладке Elements. В нем должны быть атрибуты rel="stylesheet" и правильный href. Без rel браузер не воспринимает ссылку как таблицу стилей.

Браузер показывает старую версию файла

В Network временно отключите кеш и перезагрузите страницу. Посмотрите содержимое ответа CSS-файла: там должны быть последние сохраненные правила. После проверки верните обычный режим кеширования.

Правило перекрывает другой стиль

Выберите элемент во вкладке Elements и раскройте блок Styles. Перечеркнутое свойство проиграло другому правилу. Сравните селекторы, порядок подключения <style> и <link>, а также наличие атрибута style.

Как подключить CSS для проекта

По умолчанию подключайте внешний файл через <link>: он отделяет оформление от HTML и подходит нескольким страницам. Блок <style> выбирайте для одностраничника и критических стилей. Атрибут style оставляйте для точечных правок. @import в HTML не используйте для обычного подключения, потому что цепочка загрузки усложняет получение CSS.

Начните с проверки пути в href, затем найдите CSS-запрос во вкладке Network. Если файл загрузился, разберите приоритет правил во вкладке Elements.