Додавання CSS до HTML-документу

Для того, щоб застосувати стилі до HTML-документу, ми можемо обрати один з чотирьох способів, або ж комбінувати їх:

  • застосувати зовнішні стилі за допомогою елемента link;

  • додати CSS-блок за допомогою елемента style;

  • вказати стиль конкретному HTML-елементу за допомогою HTML-атрибуту style (т.з. inline-стилі);

  • використати @import.

Зовнішні стилі

Застосовуються за допомогою елемента link, який повинен розташовуватися всередині елемента head.

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

Зустрівши в HTML-документі цей тег, браузер завантажить із сайту CSS-файл і застосує стилі, що містяться в ньому. Шлях до файлу вказують в атрибуті href (у нашому випадку це styles.css).

Такий підхід зручний тим, що спільні для декількох документів стилі можна винести в окремий файл і додавати їх тегом link, не дублюючи один і той же CSS-код в кожному з цих документів.

Таблиці стилів документу

Називаються так тому, що розташовуються безпосередньо в HTML-документі і застосовуються лише до нього.

CSS-стилі та коментарі розташовуються між тегами, що відкривають і закривають елемент style:

<style type="text/css">
    ...
    p {
        color: #333333;
        text-align: justify;
    }
    ...
</style>

Зазвичай тег style розміщують всередині елементу head, хоча він може знаходитися в будь-якій частині документу.

Inline-стилі

Якщо необхідно задати стиль певному елементу на сторінці, не застосовуючи зовнішніх стилів і елемента style, можна скористатись атрибутом style цього елементу:

<p style="color: red">Абзац з літерами червоного кольору</p>

Всередині атрибуту style можна вказати декілька CSS-правил, які слід розділити крапкою з комою.

<p style="color: blue; font-weight: bold">...</p>

Атрибут style є майже у всіх HTML-елементів, окрім тих, що розташовуються поза елементом body.

Правило @import

Правило @import дозволяє імпортувати (завантажити) вміст CSS-файлу в поточну стильову таблицю.

@import не дозволено вставляти після будь-яких оголошень, крім @charset або іншого @import.

<style type="text/css">
    @import url(styles/reset.css);
    @import url(styles/form.css);
    ...
    p {
        color: #333333;
        text-align: justify;
    }
    ...
</style>
PreviousКороткий описNextCSS-препроцесори

Last updated