CSS-правило можно подключить к HTML тремя способами: инлайн - прямо в атрибуте style на самом теге; внутренний - в теге style на конкретной странице; внешний - отдельным .css-файлом, подключённым через link. Правила внутри работают одинаково, а разница - в том, где находится код и на сколько страниц он действует.
Попробуй прямо в этом окне: поменяй tomato в атрибуте style у h1 и отдельно - dodgerblue внутри блока style у h2. Оба способа красят текст, но код для этого написан в разных местах.
Инлайн-стиль: атрибут style
Инлайн-стиль - это когда правило пишут прямо в атрибуте style на самом теге, без фигурных скобок и без селектора: браузеру и так понятно, к какому элементу это относится - вот к этому самому. Такой стиль действует только на один этот тег и побеждает любое другое правило для этого же элемента из тега style или внешнего файла - неважно, насколько точный там селектор.
<p style="color: tomato;">Только этот абзац оранжевый.</p> - удобно, когда нужно точечно поменять один-единственный элемент.
<p style="color: tomato;">Абзац 1</p>
<p style="color: tomato;">Абзац 2</p>
<p style="color: tomato;">Абзац 3</p> - если такой абзац на странице не три, а сто, при смене цвета придётся вручную редактировать каждый тег.
Внутренний стиль: тег style
Внутренний стиль - это блок <style> с обычными CSS-правилами: селектор и фигурные скобки, как в прошлом уроке. Такой блок обычно размещают в head страницы, и он действует на все подходящие элементы именно этой страницы - но только этой. Если такой же блок нужен на другой странице сайта, его придётся скопировать туда отдельно.
<style>
h2 { color: dodgerblue; }
</style> - одно правило, применится ко всем h2 на этой странице.
Тот же самый блок <style> скопирован ещё в 10 HTML-файлов сайта - работает, но при смене дизайна придётся находить и исправлять этот блок в каждом из 10 файлов по отдельности.
Внешний файл: тег link
Внешний способ - вынести CSS-правила в отдельный файл с расширением .css и подключить его к HTML-странице тегом <link rel="stylesheet" href="..."> в head. Главное преимущество: один и тот же файл можно подключить сразу ко всем страницам сайта, и если поменять что-то в нём один раз, изменится оформление сразу везде, где он подключён.
<link rel="stylesheet" href="styles.css"> - один файл, подключённый к каждой странице сайта; поменял файл - поменялся весь сайт.
Один и тот же блок <style> на 50 страниц вместо одного файла styles.css - формально работает, но это как раз тот случай, для которого и придуман внешний файл.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Использовать инлайн-стиль для оформления, которое повторяется на многих элементах | Чтобы что-то поменять, приходится вручную редактировать каждый тег с этим style | Выносить повторяющееся оформление в тег style или внешний файл |
| Копировать один и тот же блок style в каждую HTML-страницу сайта | При любом изменении дизайна нужно поправить этот блок сразу во всех файлах | Подключить один внешний .css-файл вместо copy-paste блока style |
| Ждать, что тег style на одной странице подключит стили сразу ко всему сайту | Тег style действует только внутри той страницы, где он написан | Для стилей на весь сайт использовать внешний файл через link |
| Не понимать, почему правка в общем .css-файле "не действует" на конкретный элемент | На этом элементе, скорее всего, стоит инлайн-стиль - он побеждает правила из style и внешнего файла | Убрать лишний style="" с элемента, если оформление должно приходить из общего файла |
Шпаргалка
| Термин | Значение |
|---|---|
| Инлайн-стиль | Атрибут style="" прямо на теге; действует на один этот элемент и побеждает любые другие правила |
| Внутренний стиль | Блок <style> на конкретной странице; действует на все подходящие элементы этой страницы |
| Внешний стиль | Отдельный .css-файл, подключённый через link; можно использовать сразу на многих страницах |
| <link rel="stylesheet"> | Тег, которым внешний файл стилей подключается к HTML-странице |
| Специфичность инлайн-стиля | Инлайн-стиль сильнее любого селектора в style или внешнем файле - его перебивает только !important |
Коротко: отвечаем на вопросы
Какой способ подключения CSS лучше использовать в реальном проекте?
Стандарт для настоящего сайта - внешний файл через link: он даёт браузеру кэшировать стили и быстрее загружать страницы при повторных заходах. Инлайн-стиль оправдан разве что для отдельных точечных случаев, а не как основной способ оформления.
Можно ли использовать все три способа сразу на одной странице?
Да, они не исключают друг друга. Если правила из разных способов конфликтуют для одного элемента, победит инлайн-стиль, а между style и внешним файлом - то правило, которое идёт позже в итоговом порядке подключения.
Правда ли, что инлайн-стили вообще нельзя использовать?
Нет, запрета нет - иногда инлайн-стиль оправдан для одного уникального элемента. Проблема не в самом способе, а в его использовании как основного инструмента оформления вместо style или внешнего файла.
Заработает ли внешний .css-файл, если открыть HTML-страницу прямо с компьютера, без сервера?
Да - браузер точно так же читает файл с диска, главное, чтобы путь в href в теге link был указан верно относительно самой HTML-страницы.
