Как подключить несколько css файлов в html

Ответы

10 марта 2023

Существует несколько способов добавить 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, иначе данный способ не сработает

1 0

Как подключить несколько css файлов в html

Похожие вопросы