Глава 1 · Урок 3 из 6
Способы подключения CSS
Три способа подключить CSS к странице — внешний файл через link, элемент style и атрибут style, а также @import: чем они отличаются и какой выбрать.
Цель урока
Научиться подключать стили к странице и понимать, когда уместен внешний файл, элемент style или атрибут style.
Внешний файл
Обычно стили пишут в отдельном файле с расширением .css и подключают к странице элементом link в head:
<head>
<meta charset="utf-8" />
<title>Мой сайт</title>
<link rel="stylesheet" href="/styles/main.css" />
</head>rel="stylesheet"говорит, что по ссылке — таблица стилей.href— адрес файла: абсолютный от корня сайта (/styles/main.css), относительный (styles/main.css) или полный (https://…).
Это лучший вариант почти всегда. Один файл обслуживает все страницы сайта, а браузер скачивает его один раз и берёт из кеша при переходе на следующую страницу.
Файлов может быть несколько. Порядок имеет значение: при равных условиях побеждает правило, которое подключено позже.
Элемент style
Стили можно написать прямо в HTML внутри элемента style:
<style>
.note {
padding: 1rem;
border-inline-start: 4px solid teal;
background: #eef8f8;
}
</style>
<p class="note">Эта заметка оформлена стилями из элемента style.</p>Такие стили действуют только на этой странице. Этот способ подходит для одностраничных демо, писем и для небольшого «критического» CSS, который нужен для первой отрисовки ещё до загрузки основного файла.
Атрибут style
Объявления можно записать в атрибут style конкретного элемента — без селектора и фигурных скобок:
<p style="color: crimson; font-weight: bold">Внимание: только этот абзац.</p>
<p>А этот — обычный.</p>У такого подхода много минусов. Стиль нельзя переиспользовать, его трудно найти и поменять, а перебить его обычными правилами почти невозможно: объявления в атрибуте выигрывают у любых селекторов. Атрибут style уместен, когда значение вычисляет скрипт, — например, координаты перетаскиваемого элемента. Ещё один минус: строгая политика безопасности сайта (Content Security Policy) может такие стили запрещать.
@import
Внутри CSS-файла можно подключить другой файл:
@import url('reset.css');
body {
margin: 0;
}@import должен стоять в начале файла, до обычных правил. Есть подвох: браузер узнаёт о вложенном файле, только когда скачает и прочитает внешний, поэтому файлы грузятся цепочкой, одно за другим. Для скорости лучше подключать файлы несколькими элементами link или собирать их в один файл инструментом сборки.
Стили для разных условий
Атрибут media у link подключает файл только при подходящих условиях — например, стили для печати:
<link rel="stylesheet" href="/styles/print.css" media="print" />Файл при этом всё равно скачивается, но не мешает отрисовке страницы на экране. Подробнее об условиях — в главе про адаптивность.
Что запомнить
- Основной способ — внешний файл, подключённый элементом link в head.
- Элемент style удобен для стилей одной страницы и для критического CSS.
- Атрибут style действует на один элемент и перебивает обычные правила — пользуйтесь им редко.
- @import в CSS-файле загружает стили последовательно и замедляет страницу.
Проверьте себя
Практика
Задача 1
Подключите стили для печати
На странице уже подключён main.css. Добавьте второй файл print.css, который действует только при печати.
<head>
<meta charset="utf-8" />
<title>Статья</title>
<link rel="stylesheet" href="main.css" />
</head>Показать решение
<head>
<meta charset="utf-8" />
<title>Статья</title>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="print.css" media="print" />
</head>Атрибут media="print" подключает файл только для печати. Скачивается он всё равно, но не задерживает отрисовку на экране.