#17. Способы добавить стили в CSS: атрибут style, тег style, внешний файл и link

В уроке #16 мы раскрасили страницу атрибутом style — и уже почувствовали неудобство: стили нужны были всего двум тегам, а представьте страницу из пятидесяти. Способов подключить CSS к HTML три: атрибут, тег style и внешний файл. Разберём все — и выберем главный.

Способ 1. Атрибут style

Стили пишутся прямо в открывающем теге — так мы делали в прошлом уроке:

<h1 style="color: red; font-size: 60px;">Мой блог</h1>

Работает мгновенно и годится для точечной правки одного элемента. Но минусы серьёзные:

• правило действует только на этот тег — чтобы поменять цвет всех абзацев, придётся править каждый;
• содержимое перемешивается с оформлением, а их разделение — вся суть CSS.

Способ 2. Тег style в head

Второй способ — вынести стили в тег style внутри head. Напомним из урока #3: head — служебная информация о странице, которая на ней самой не отображается:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Тег style</title>
    <style>
        h1 {
            color: red;
            font-size: 60px;
        }
        p {
            color: gray;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>Мой блог</h1>
    <p>Этот абзац оформлен без единого атрибута style.</p>
</body>
</html>

Правила немного изменили вид: перед фигурными скобками теперь стоит селектор — «кому применить». Запись h1 означает «все заголовки h1», p — «все абзацы»: одно правило оформляет сразу все теги страницы, а из HTML оформление исчезло совсем. Подробно селекторы — тема следующего урока, пока достаточно общей идеи.

Способ 3. Внешний css-файл

Третий способ — главный для реальных сайтов: стили живут в отдельном файле. Создайте рядом с HTML-страницей файл styles.css:

my-site/
    index.html
    styles.css

Внутри — те же правила, что были в теге style, но без самого тега:

h1 {
    color: red;
    font-size: 60px;
}
p {
    color: gray;
    font-size: 20px;
}

А в head страницы файл подключается тегом link:

<head>
    <meta charset="utf-8">
    <title>Внешние стили</title>
    <link rel="stylesheet" href="styles.css">
</head>

Атрибут href работает здесь так же, как в ссылках из урока #7: путь относительный, и если стили лежат в подпапке, пишем href="css/styles.css". Атрибут rel="stylesheet" сообщает браузеру, что подключена таблица стилей.

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

Какой способ выбрать

Частые ошибки

• писать в css-файле тег <style> — в файле должны быть только правила, тег живёт в HTML;
• наоборот, писать селекторы и фигурные скобки внутри атрибута style="";
• link вне head или без rel="stylesheet";
• опечатка в пути к файлу — страница внезапно «теряет» оформление. А если правили css-файл и изменений не видно — обновите страницу с очисткой кэша (Ctrl+F5).

Практика

Откройте страницу из урока #16 и проведите её «эволюцию» в два шага: сначала получите тот же вид через тег style в head, убрав атрибуты; затем перенесите правила в styles.css и подключите файл через link. После каждого шага страница должна выглядеть так же, как раньше. Напоследок прогоните её через валидатор из урока #15.

Наши правила пока умеют находить теги только по имени: h1 — значит, все заголовки.
А что если оформить нужно один конкретный абзац из десяти? Для этого есть селекторы по class и id — атрибуты, которые мы разобрали ещё в уроке #14.
Их и подключим к CSS в следующем уроке.