Способы подключения CSS в HTML

Существует 4 способа подключения CSS в HTML. Два из них — это прямое добавление CSS-кода в HTML-файл, а другие два — подключение внешних CSS-файлов. Давайте рассмотрим эти методы, их преимущества и недостатки.

Встроенный стиль

Встроенный стиль означает добавление CSS непосредственно в атрибутstyleHTML-тега.

Пример:

<div style="background: red"></div>

Обычно это очень плохой способ написания. Он может изменить стиль только текущего тега. Если вы хотите, чтобы несколько<div>тегов имели одинаковый стиль, вам придётся повторно добавлять один и тот же стиль к каждому<div>тег. Если вы хотите изменить стиль, вам придётся снова изменить весь код в `style`. Очевидно, что встроенное подключение CSS делает HTML-код многословным, а веб-страницу — сложной в поддержке.

Встроенный стиль

Встроенный стиль означает написание CSS-кода в теге<style>`<style>` в разделе head HTML.

Пример:

<head>
    <style>

    .content {
        background: red;
    }

    </style>
</head>

Встроенный CSS действует только для текущей веб-страницы. Поскольку CSS-код находится в HTML-файле, код более сконцентрирован, что обычно удобно, когда мы пишем шаблонные веб-страницы. Потому что люди, просматривающие код шаблона, могут сразу увидеть структуру HTML и стили CSS. Поскольку встроенный CSS действует только для текущей страницы, когда нескольким страницам нужно подключить один и тот же CSS-код, такой способ написания приведёт к дублированию кода и не способствует поддержке.

Связанный стиль

Связанный стиль означает использование тега<head>`<link>` в разделе head HTML для импорта внешнего CSS-файла.

Пример:

<head>
    <link rel="stylesheet" type="text/css" href="style.css.html">
</head>

Это самый распространённый и наиболее рекомендуемый способ подключения CSS. При использовании этого метода весь CSS-код существует только в отдельном CSS-файле, поэтому он обладает хорошей поддерживаемостью. Более того, весь CSS-код находится только в CSS-файле, и CSS-файл подключается при первой загрузке. В дальнейшем при переключении страниц нужно загружать только HTML-файл.

Импортированный стиль

Импортированный стиль означает использование CSS-правила для импорта внешнего CSS-файла.

Пример:

<style>
    @import url(style.css);
</style>

Сравнение связанного стиля и импортированного стиля

Связанный стиль (далее именуемый@import`@import`) — оба способа подключения внешних CSS-файлов. Давайте сравним эти два метода и объясним, почему использование `@import` не рекомендуется.@import。

`link` относится к HTML, через<link>атрибут `href` в теге для импорта внешних файлов, тогда как@import`@import` относится к CSS, поэтому инструкция импорта должна быть записана в CSS. Обратите внимание, что инструкция импорта должна быть записана в начале таблицы стилей, иначе внешний файл не сможет быть импортирован правильно.
@import`@import` — это концепция, которая появилась только в CSS2.1. Поэтому, если версия браузера низкая, внешние файлы стилей не смогут быть импортированы правильно.
Когда HTML-файл загружается, файлы, на которые ссылается `link`, загружаются одновременно, тогда как@importфайлы, на которые ссылается `@import`, загружаются после полной загрузки страницы.

Резюме: Следует стараться использовать<link>тег `link` для импорта внешних CSS-файлов и избегать или реже использовать остальные три метода.

Источник: https://segmentfault.com/a/1190000003866058