Додаток 2. Додавання 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/seset.css);
@import url(styles/form.css);
...
p {
color: #333333;
text-align: justify;
}
...
</style>