В веб-разработке подключить стили можно тремя разными способами, каждый из которых имеет свою область применения, приоритет и влияние.
Вот их полное сравнение:
Встроенный стиль (Inline CSS)
Это стиль, который прописывается непосредственно внутри HTML-тегов через атрибут «style».
Пример:
<p style="color: red; font-size: 20px;">Этот текст красный.</p>
Приоритет самый высокий (имеет приоритет над всеми, кроме «!important»).
Когда использовать:
- Для динамического изменения стилей через JavaScript (например, element.style.color = 'red').
- В письмах (Email-рассылках), где внешние стили часто отключаются почтовыми клиентами.
- В крайне редких случаях, когда нужно переопределить стиль «здесь и сейчас» без правки файлов.
Внутренний стиль (Internal CSS)
Стили прописываются внутри контейнера <style>, который находится в разделе <head> HTML-документа.
Пример:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 18px;
}
.warning {
background: yellow;
}
</style>
</head>
<body>
<p>Этот текст синий.</p>
</body>
</html>Приоритет: Средний (выше, чем у внешних файлов, но ниже, чем у встроенных стилей).
Когда использовать:
- Для одностраничных сайтов (лендингов, лендинг-пейджей).
- В учебных целях или прототипах.
- Когда стили уникальны для конкретной страницы и не используются на других.
Плюсы:
- Не требует дополнительного HTTP-запроса (страница загружается одним файлом).
- Можно использовать классы, псевдоклассы (:hover), медиазапросы, чего нет у встроенных стилей.
Минусы:
- Увеличивает время загрузки HTML (так как CSS не кешируется отдельно).
- Не используется между страницами сайта (придется копипастить код на каждую страницу).
Внешний стиль (External CSS)
Таким способом стили вынесены в отдельный файл с расширением «.css». Подключаются через тег <link> в <head>.
Пример (HTML):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Этот текст стилизован из внешнего файла.</p>
</body>
</html>Пример (файл styles.css):
p {
color: green;
font-weight: bold;
}Приоритет: Самый низкий (перебивается внутренними и встроенныеми стилями).
Когда использовать: Всегда, при разработке полноценных сайтов и веб-приложений (это стандарт).
Плюсы:
- Кеширование: Браузер загружает CSS один раз и использует его для всех страниц сайта, ускоряя загрузку.
- Переиспользование: Один файл обслуживает сотни страниц.
- Чистота кода: HTML остается легким и понятным.
- Удобство разработки: Легче искать ошибки и править дизайн в одном месте.
Минусы:
- Требует дополнительного HTTP-запроса (решается HTTP/2 и кешированием).
- Страница может отображаться «серой», пока стили не загрузятся.
Важный нюанс про приоритет
Правило «Inline > Internal > External» работает только при одинаковой специфичности селекторов.
- Если у вас во внешнем стиле стоит селектор #header p (ID + тег), а во внутреннем стиле стоит просто p (тег), то больше приоритета будет у внешнего стиля, потому что его селектор более специфичный (весомый).
- Правило: Сначала браузер смотрит на специфичность селектора, и только если она равна, сравнивает по месту подключения (приоритетнее тот, что объявлен позже в коде, или во встроенном стиле).
Современный подход
В реальной разработке используют комбинацию:
- Внешний стиль — для основного дизайна (главный файл стилей).
- Внутренний стиль — самые важные стили (для первой загрузки страницы), чтобы ускорить отрисовку страницы (чтобы не ждать загрузки внешнего файла стилей).
- Встроенный стиль — используют только внутри JS-фреймворков (React, Vue) для компонентных стилей (CSS-in-JS) или для анимаций.