Как подключить несколько css файлов в html
Существует несколько способов добавить CSS на страницу HTML:
- инлайн запись с помощью тега атрибута style у любого тега в HTML-разметке
- использование тега <style>, который обычно указывается внутри секции <head> в HTML-разметке
- использование отдельного CSS-файла
В реальной разработке чаще всего принято писать стили в отдельном CSS-файле. Если к HTML-документу требуется добавить несколько CSS фалов, можно воспользоваться одним из двух способов:
1). Подключить каждый CSS-файл по отдельности к HTML-файлу с помощью специального тега <link>:
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Основной файл index.html</title>
<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/fonts.css">
</head>
<body></body>
</html>
2). Использовать директиву @import, которая позволяет импортировать один CSS-файл в другой. Допустим, что все стили проекта разбиты на 3 файла: main.css (основной файл), reset.css, fonts.css. Добавим reset.css и fonts.css в основной CSS-файл:
@import "reset.css";
@import "fonts.css";
/* Основной код CSS-файла main.js */
Далее нужно подключить main.css к нашему HTML-файлу с помощью <link>.
Важно располагать импорт файлов reset.css и fonts.css именно в начале документа main.css, иначе данный способ не сработает
