Файл карти CSS є файл у форматі JSON, який з’єднує файл CSS із вихідними файлами, крім того, він часто написаний у препроцесорах (наприклад, Less, Sass, Stylus тощо), що дозволяє виконувати налагодження вихідних файлів у веб-браузері. Однак вона також відома як вихідна карта.
Щоб пов’язати файл CSS із файлом HTML, ви можете використовуйте тег HTML <link>. Елемент <link> розміщується в розділі <head> файлу HTML і вимагає трьох атрибутів: rel , href і type . Атрибут rel визначає зв’язок між файлом HTML і пов’язаним файлом, який є «таблицею стилів» для файлів CSS.
Найпростіший і найшвидший спосіб перемикати вихідні карти CSS або JS в інструментах розробника Chrome – це використовувати палітру команд Chrome:
- У macOS введіть cmd+shift+p (у Windows введіть ctrl+shift+p)
- Шукайте «вихідна карта»
- Виберіть увімкнути/вимкнути вихідні карти CSS або JS, залежно від того, що ви хочете перемкнути:
Використовується CSS (каскадні таблиці стилів). для стилізації та компонування веб-сторінок — наприклад, щоб змінити шрифт, колір, розмір і інтервал вмісту, розділити його на кілька стовпців або додати анімацію та інші декоративні функції.
Основне призначення файлу карти використовується для зв’язування вихідного коду css із меншим вихідним кодом у інструменті розробника chrome. ви можете побачити вихідний код css. Але якщо включити файл карти на сторінку з початковим файлом css. ви можете побачити менше коду, який застосовується до стилю елемента, який ви хочете перевірити.