Коротко: подключить CSS можно тегом <link> в <head> или правилом @import внутри CSS-файла. Тег link предпочтительнее: он грузится параллельно и быстрее. @import удобен для объединения нескольких файлов стилей.
Способы подключения
| Способ | Особенность |
|---|---|
<link> |
быстро, параллельная загрузка |
@import |
последовательная загрузка |
| Инлайн-блок style | для критичных стилей |
Тег link
<head>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/print.css" media="print">
</head>Основной способ. Порядок тегов важен: стили, подключённые позже, перебивают однотипные правила из ранних файлов.
Вкладки: импорт и порядок
@import url("base.css");
@import url("layout.css");
@import url("theme.css");@import подключает один CSS-файл из другого. Он должен идти в самом начале файла, до любых других правил, иначе будет проигнорирован.
1. сброс стилей (reset)
2. базовая типографика
3. компоненты
4. утилиты и переопределенияПравильный порядок избавляет от конфликтов: базовые стили идут первыми, конкретные — последними. Тогда не придётся использовать !important.
<link rel="stylesheet" href="mobile.css"
media="(max-width: 768px)">Условие media подключает файл только при подходящих условиях. Так отдельные стили не грузятся на ненужных устройствах.
@import: каждый импорт — дополнительный запрос и задержка. Лучше объединить файлы при сборке, а подключать один-два link. Для WordPress используйте wp_enqueue_style.Практика: подключить CSS
- Решите, сколько файлов стилей нужно.
- Подключите основные через
<link>. - Соблюдайте порядок: от общих к частным.
- Условные стили подключайте с
media. - Избегайте глубоких цепочек
@import. - Проверьте, что стили применились и не конфликтуют.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Стили не применяются | неверный путь | проверить адрес в инспекторе |
| Правила перебиваются | неверный порядок | подключать частные стили позже |
@import не работает |
стоит не в начале файла | перенести вверх |
| Сайт грузится медленно | много импортов | объединить файлы |
| Стиль печати мешает | нет media |
указать media="print" |
Проверьте себя
@import?
Вопросы и ответы
При равной специфичности побеждает правило, которое идёт позже. Поэтому базовые стили подключают раньше, а уточняющие — позже, чтобы они перебивали общие.
Файлы по цепочке импортов грузятся последовательно: браузер сначала скачивает основной файл, потом вложенные. Тег link позволяет загружать стили параллельно.
Это минимально необходимые стили для первого экрана, которые вставляют прямо в HTML. Так страница показывает контент быстрее, пока грузятся остальные файлы.
Через wp_enqueue_style() в functions.php. Прямые теги link в шаблоне нарушают очередь загрузки и конфликтуют с плагинами.
Итоги
- Основной способ подключения — тег
<link>. @importподключает CSS из CSS, но замедляет загрузку.- Порядок подключения влияет на приоритет стилей.
- В WordPress используют
wp_enqueue_style.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.