Что такое формат файла CSS?
.css файлы используются для форматирования контента и описания внешнего вида сайта.
Файлы с расширением .css содержат правила, определяющие, как элементы .html должны отображаться на заданной странице. Эти правила охватывают такие области, как:
- настройки шрифтов (шрифт, размер, цвет и стиль),
- межстрочный интервал и отступы,
- правила верстки для встроенных и позиционированных элементов,
- ссылки на ресурсы, анимации и точки остановки адаптивности через
@mediaзапросы.
CSS - Каскадные таблицы стилей - это язык таблиц стилей, используемый для создания .css файлов. Он был разработан для разделения контента сайта и его оформления, что значительно упрощает изменение внешнего вида сайта без изменения контента. .css файлы также позволяют страницам отображаться по-разному в зависимости от устройства, используемого для доступа к ним - будь то мобильное устройство, настольный ПК или планшет - для лучшего пользовательского опыта. Часть «каскадирование» означает, что несколько правил могут одновременно targeting один и тот же элемент, а приоритет и порядок источника разрешают, какое из них выигрывает.
CSS - это не единый версионный формат: с CSS3 он развивается как независимые модули (селекторы, Flexbox, Grid, Цвет, Анимация и другие), каждый из которых развивается своим темпом. Препроцессоры, такие как .scss и .less, расширяют синтаксис написания CSS, но всегда компилируются в обычный .css, который браузеры потребляют напрямую.
.css файлы хранят данные в текстовом формате и, следовательно, могут быть отредактированы с помощью любого текстового редактора. Однако рекомендуется редактировать .css файлы с помощью специализированных инструментов, чтобы избежать потенциальных ошибок - такие инструменты автоматически подсвечивают ключевые слова, исправляют синтаксические ошибки и предлагают автозаполнение. В файле .css нет бинарной подписи; он может начинаться с необязательного объявления @charset, правила @import или комментария /* comment */.
Безопасность и защита
РИСК: LOWCSS - это обычный текст и не выполняет код, поэтому файл .css представляет низкий риск при открытии. Крайние случаи: исторически CSS мог загружать удалённые ресурсы (шрифты/изображения), а старые браузеры имели странности CSS expression()/behavior (долгое время устаревшие); современный CSS не может запускать скрипты. Настоящая осторожность заключается в скачивании программ «бесплатный CSS редактор/просмотрщик» из门户网站, содержащих рекламу и PUP - используйте перечисленные выше надёжные редакторы.
Детали формата
в двух словахПрограммы, открывающие файлы CSS
Windows4 apps
Sublime Text
Платно Откройте для редактирования; бесплатно для оценки, лицензия для продолжения использования. 
Visual Studio Code
Бесплатно Откройте .css для редактирования с подсветкой синтаксиса, IntelliSense и расширениями для предпросмотра в реальном времени. 
Web browser (Chrome/Firefox/Edge)
Бесплатно Браузеры применяют CSS автоматически при загрузке страницы; используйте DevTools (F12) для проверки/редактирования стилей в реальном времени. 
macOS2 apps
TextEdit
Встроенная Откройте в режиме обычного текста для чтения/редактирования; сначала отключите форматирование.
Visual Studio Code
Бесплатно Откройте .css для редактирования с подсветкой синтаксиса, IntelliSense и расширениями для предпросмотра в реальном времени. 
Linux1 app
VS Code / gedit / GNU Emacs
Бесплатно Откройте .css в любом текстовом/кодовом редакторе для просмотра или редактирования.
CodePen / JSFiddle
Бесплатно Вставьте CSS в онлайн-песочницу для редактирования и предпросмотра против HTML в реальном времени. Технические подробности
глубокая спецификация| MIME-тип | text/css |
| Кодировка файла | Обычный текст, UTF-8 по умолчанию; набор символов может быть явно объявлен с помощью правила `@charset` в самом верху файла. |
| Бинарная подпись | Отсутствует - у файлов `.css` нет магических байтов; идентификация зависит от расширения файла или MIME-типа. |
| Типичный размер файла | 1 КБ до 500 КБ; минифицированные пакеты сторонних фреймворков (Bootstrap, Tailwind) могут достигать верхнего предела. |
| Основная структура | Правила: селектор или список селекторов, за которым следует блок объявлений пар `свойство: значение`, заключённый в фигурные скобки. |
| Атрибуты (At-rules) | `@media` (точки остановки адаптивности), `@import`, `@font-face`, `@keyframes`, `@supports` и `@layer` управляют условной загрузкой, пользовательскими шрифтами, анимациями и обнаружением функций. |
| Алгоритм каскадирования | Конфликтующие правила разрешаются по специфичности, источнику каскада (автор / пользователь / браузер) и порядку источника; значения распространяются на дочерние элементы через наследование. |
| Модель версионирования | Модульная с CSS3; отдельные модули, такие как селекторы, Flexbox, Grid и Цвет, проходят через этапы кандидатских рекомендаций W3C независимо. |
| Пользовательские свойства | Встроенные CSS-переменные, объявленные как `--name: значение` и потребляемые через `var(--name)`, что позволяет использовать повторно используемые токены дизайна без препроцессора. |
| Совместимость с препроцессорами | Файлы `.scss`, `.sass` и `.less` компилируются в обычный `.css`; PostCSS преобразует исходный `.css` во время сборки; браузеры потребляют только итоговый `.css`. |
| Сжатие при передаче | Обычно передаются по HTTP сжатыми gzip или Brotli для экономии пропускной способности; на диске файл представляет собой несжатый обычный текст. |
| Целостность подсубресурсов | Хэш SHA-256/384/512 может быть помещён в атрибут HTML `<link integrity="…">` для проверки загруженного файла; хэш не хранится внутри самого файла `.css`. |
| Вендорные префиксы | Префиксы `-webkit-`, `-moz-` и `-ms-` исторически защищали экспериментальные свойства; большинство из них устарели, так как базовые свойства были стандартизированы. |
| Объектная модель браузера | Разбирается движком браузера в CSSOM (CSS Object Model), который объединяется с деревом DOM для вычисления финальных вычисленных стилей и отрисовки страницы. |
| Стандартный поддерживающий орган | Группа по работе с CSS W3C; спецификации публикуются как независимые документы модулей, каждый со своими черновиками редакторов и кандидатскими рекомендациями. |
| Выпущен | CSS Level 1, December 1996 (W3C Recommendation) |
| Последняя версия | CSS is now modular (CSS3+); modules like Selectors, Flexbox, Grid, Color advance independently |
| Открыть стандартное | Да · без роялти |
| Спецификация | www.w3.org |
Конвертации CSS
Вопросы и ответы сообщества
спрошено пользователямиВопросов пока нет - станьте первым, кто спросит о файлах CSS.
