Коротко: скачать CSS с сайта можно через инструменты разработчика (DevTools → Sources), по прямой ссылке на файл из <head>, командой curl/wget или расширением браузера. Обычно вы получите минифицированный файл; исходный код доступен, если автор выложил карты исходников (source maps).
Способы скачать
| Способ | Что получаете |
|---|---|
| DevTools → Sources | файл целиком, можно сохранить |
| Прямая ссылка | то же, открывается в браузере |
curl/wget |
файл в терминале |
| Расширение | сбор всех CSS страницы |
Вкладки: пошагово
- Откройте сайт, нажмите F12.
- Вкладка «Network» (Сеть) → перезагрузите страницу.
- Отфильтруйте по «CSS».
- Кликните файл → откройте на вкладке «Sources».
- Правый клик → «Save as…» или скопируйте содержимое.
Во вкладке «Sources» видно и дерево файлов, если включены карты исходников.
- «Просмотр кода страницы» (Ctrl+U).
- Найдите тег
<link rel="stylesheet">. - Скопируйте
href. - Откройте адрес в браузере — увидите CSS.
- Сохраните через Ctrl+S (браузер сохранит как .css) или скопируйте текст.
# скачать один файл
curl -O https://site.ru/wp-content/themes/theme/style.css
# или с произвольным именем
wget -O theme.css https://site.ru/.../style.cssУдобно, если файлов много: можно собрать команды из списка ссылок.
Большинство сайтов отдают минифицированный CSS — без пробелов и переносов, в одну строку. Читать его можно, но неудобно.
- в DevTools есть кнопка форматирования (
{ }); - онлайн-сервисы «beautify CSS» приводят код в читаемый вид;
- если есть файл
.map, DevTools покажет исходный код (например, SCSS); - иногда CSS «склеен» из нескольких файлов — ориентируйтесь по комментариям.
Практика: разобрать чужую вёрстку
- Скачайте CSS страницы.
- Отформатируйте его (DevTools или сервис).
- Найдите интересующий блок через DevTools: он подскажет селектор и файл.
- Скопируйте нужные правила и адаптируйте под свою разметку.
- Проверьте поведение на своих элементах.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Файл в одну строку | минификация | форматировать |
| Нет нужных правил | стили в другом файле | искать в Network все CSS |
| Правила есть, но «не работают» | специфичность/другие файлы | смотреть порядок подключения |
| Пропали переменные | значения заданы в другом месте | искать :root и карты |
Проверьте себя
Вопросы и ответы
Только если автор выложил карты исходников (.map) и они доступны. Тогда DevTools покажет исходный код.
Начните с того файла, который показывает DevTools для нужного элемента. Затем посмотрите порядок подключения — он влияет на приоритет.
Скачать и изучить — да, файл доступен публично. А вот копировать чужие стили целиком на свой сайт нельзя: код защищён авторским правом. Берите идеи и пишите своё.
Выберите элемент в DevTools — в панели Styles видно применённые правила, зачёркнутые перебитые и файл-источник. Это быстрее перебора файлов.
Итоги
- CSS скачивают через DevTools, по прямой ссылке,
curlили расширением. - Обычно файл минифицирован — его форматируют для чтения.
- Карты исходников дают доступ к SCSS, если автор их выложил.
- Изучать можно, копировать целиком — нет.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.