Коротко: CSS-файл создают как обычный текстовый файл с расширением .css и подключают к HTML тегом <link> в <head>: <link rel="stylesheet" href="style.css">. Главное — правильный путь к файлу. Ниже — с нуля, плюс минификация, порядок подключения и типичные ошибки.
wp_enqueue_style), это тоже разберём.Вкладки: от файла до подключения
- Создайте папку проекта, например
site/. - Внутри — папку
css/(не обязательно, но удобно). - Создайте файл
style.cssв текстовом редакторе. - Напишите первый стиль:
body { font-family: system-ui; } - Сохраните файл в кодировке UTF-8.
<head>
<meta charset="utf-8">
<title>Моя страница</title>
<link rel="stylesheet" href="css/style.css">
</head>Тег <link> ставится именно в <head>, до контента. Атрибут rel="stylesheet" обязателен, иначе браузер не поймёт, что это стили.
Путь бывает трёх видов:
css/style.css— относительно текущей страницы;/css/style.css— от корня сайта;https://site.ru/css/style.css— абсолютный адрес.
Для многостраничного сайта удобнее путь от корня, чтобы не зависеть от «глубины» страницы.
В WordPress файл кладут в тему (style.css в корне темы — обязателен) и подключают правильно, а не тегом link в шаблоне:
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style('theme-style', get_stylesheet_uri(), [], '1.0.0');
});Если файл отдельный, например assets/css/main.css:
wp_enqueue_style(
'main',
get_template_directory_uri() . '/assets/css/main.css',
[],
'1.0.0'
);Минификация: «сжать» CSS
Минификация убирает пробелы, переносы и комментарии — файл становится легче. Делают сборщиками (gulp, postcss) или онлайн-сервисами. Но держите и «исходник» — без отступов код неудобно править.
/* Было */
.card {
padding: 16px;
border-radius: 8px;
}
/* После минификации */
.card{padding:16px;border-radius:8px}Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Стили вообще не применяются | неверный путь или опечатка в href |
открыть адрес файла в браузере |
| Тег есть, но стилей нет | забыли rel="stylesheet" |
добавить атрибут |
| Часть стилей «не работает» | их переопределяет другой файл | изменить порядок подключения |
| Кракозябры вместо текста | файл сохранён не в UTF-8 | сохранить файл в UTF-8 |
@import внутри CSS тормозит загрузку: браузер узнаёт о вложенных файлах позже. Подключайте файлы через отдельные <link> или собирайте в один.Проверьте себя
Вопросы и ответы
В разработке удобно много (база, компоненты, страницы), а на хостинг лучше отдавать один собранный и минифицированный файл — меньше запросов.
Можно через тег style или атрибут style, но для проекта это плохо: стили не переиспользуются и не кэшируются отдельно.
WordPress читает из его шапки название и версию темы. Даже если стили лежат в других файлах, этот style.css должен остаться.
Атрибут media позволяет подключать файл только для нужных условий, например media="print" — стили печати. Для адаптива чаще пишут media-запросы внутри самих стилей.
Итоги
- CSS-файл — обычный текстовый файл с расширением
.css. - Подключается тегом
<link rel="stylesheet">в<head>. - Порядок подключения влияет на приоритет стилей.
- В WordPress — через
wp_enqueue_style, а не тегом link в шаблоне.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.