Для додавання стилів на веб-сторінку існує кілька способів, які відрізняються можливостями і призначенням. Далі розглянемо їх докладніше.
Пов'язані стилі
При використанні пов'язаних стилів опис селекторів та їх значень розташовується в окремому файлі, як правило, з розширенням .css, а для зв'язування документа з цим файлом застосовується тег <link>. Даний тег поміщається в контейнер <head>, як показано в прикладі 3.1.
Приклад 3.1. Підключення пов'язаних стилів
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Стилі</title> <link rel="stylesheet" href="/mysite.css"> <link rel="stylesheet" href="https://html-css.co.ua/main.css"> </head> <body> <h1>Тема</h1> <p>Текст</p> </body> </html>
Значення атрибута тега <link> — rel залишається незмінним незалежно від коду, як у цьому прикладі. Значення href задає шлях до CSS-файлу. Шлях до CSS файлу може бути заданий як відносно, так і абсолютно. Зауважте, що таким чином можна підключати таблицю стилів, яка знаходиться на іншому сайті.
Вміст файлу mysite.css, який підключається за допомогою тега <link>, приведено в прикладі 3.2.
Приклад 3.2. Файл зі стилем
h1 {color:#000080; font-size: 200%; font-family: Arial, Verdana, sans-serif; text-align: center;}
p {padding-left: 20px;}
Як видно з цього прикладу, файл зі стилем не зберігає ніяких даних, окрім коду CSS. У свою чергу і HTML-документ містить лише посилання на файл зі стилем, тобто таким способом в повній мірі реалізується принцип поділу коду та оформлення сайту. Тому використання пов'язаних стилів є найбільш універсальним і зручним методом додавання стилю на сайт. Адже стилі зберігаються в одному файлі, а в HTML-документах вказується тільки посилання на нього. Для зміни стилів оформлення не потрібно редагувати всі HTML сторінки. Достатньо лише відредагувати код в CSS файлі.
Глобальні стилі
При використанні глобальних стилів властивості CSS описуються в самому документі і розташовуються в заголовку веб сторінки. За своєю гнучкості і можливостям цей спосіб додавання стилю поступається попередньому, але також дозволяє зберігати стилі в одному місці, в даному випадку прямо на тій же сторінці за допомогою контейнера <style>, як показано в прикладі 3.3.
Приклад 3.3. Використання глобального стилю
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Глобальні стилі</title>
<style>
h1 {font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color:#333366;}
</style>
</head>
<body>
<h1> Hello, world!</h1>
</body>
</html>
В даному прикладі задано оформлення тега <h1>, який потім можна повсюдно використовувати на даній веб-сторінці (рис. 3.1).
Внутрішні стилі
Внутрішній або вбудований стиль є по суті розширенням для одиночного тега, яке використовується на поточній веб-сторінці. Для визначення стилю використовується HTML атрибут style, а його значенням виступає набір стильових правил (приклад 3.4).
Приклад 3.4. Використання внутрішнього стилю
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Внутрішні стилі</title> </head> <body> <p style="font-size: 120%; font-family: monospace; color:#cd66cc">Приклад тексту</p> </body> </html>
В даному прикладі стиль тега <p> задається за допомогою HTML атрибута style, в якому через крапку з комою перераховуються стильові властивості (рис. 3.2).
Рекомендується обмежити використання на сайті внутрішніх стилів або ж узагалі відмовитися від них. Справа в тому, що внаслідок масового застосування таких стилів збільшує загальний розмір HTML документа, що веде до підвищення часу завантаження Web-сторінки в браузері, а також ускладнює редагування її коду.
Всі описані методи використання CSS можуть застосовуватися як самостійно, так і в поєднанні один з одним. В цьому випадку необхідно пам'ятати про їх ієрархію. Найвищий пріоритет має внутрішній стиль, потім глобальний стиль і лише в останню чергу застосовується пов'язаний стиль. У прикладі 3.5 застосовується відразу два методу додавання стилю в HTML документ.
Приклад 3.5. Поєднання різних методів підключення CSS стилів
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Підключення стилю</title>
<style>
h1 {font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; }
</style>
</head>
<body>
<h1 style="font-size: 36px; font-family: Times, serif; color: red">Заголовок 1</h1>
<h1>Заголовок 2</h1>
</body>
</html>
В наведеному вище прикладі перший заголовок задається червоним кольором розміром 36 пікселів за допомогою внутрішнього стилю, а наступний — зеленим кольором через таблицю глобальних стилів (рис. 3.3).
Імпорт CSS
В поточну стильову таблицю можна імпортувати вміст CSS файлу за допомогою команди @import. Цей метод можна використовувати спільно зі зв'язаними або глобальними стилями, але у жодному разі не з внутрішніми стилями. Загальний синтаксис наступний.
@import url("ім'я файлу") типи носіїв;
@import "ім'я файлу" типи носіїв;
Після ключового слова @import вказується шлях до стильового файлу одним з двох наведених способів — за допомогою url або без нього. У прикладі 3.6 показано, як можна імпортувати стиль із зовнішнього файлу в таблицю глобальних стилів.
Приклад 3.6. Імпорт CSS
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Імпорт</title>
<style>
@import url("style/header.css");
h1 {font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green;}
</style>
</head>
<body>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
</body>
</html>
В наведеному вище прикладі показано підключення файлу header.css, який розташований в папці "style".
Аналогічно відбувається імпорт і в файлі зі стилем, який потім підключається до документа (приклад 3.7).
Приклад 3.7. Імпорт в таблиці пов'язаних стилів
@import"/style/print.css";
@import"/style/palm.css";
body {font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 90%; background: white; color: black;}
В наведеному прикладі показано вміст файлу mysite.css, який додається до потрібних документів способом, показаним в прикладі 3.1, а саме за допомогою тега <link>.
Спробувати на практиці
Питання для перевірки
1. Сайт має більше ста HTML-документів, що мають однакове стильове оформлення. Який спосіб підключення CSS підходить найкраще?
- Пов'язані стилі.
- Глобальні стилі.
- Блокові стилі.
- Внутрішні стилі.
- Експорт стилю.
2. В наведеному нижче прикладі, який колір буде мати текст на веб-сторінці?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Колір тексту</title>
<style>
html {color: black; }
body {color: red; }
p {color: green; }
</style>
</head>
<body>
<p style="color: blue;"><span style="color: olive;">Текст</span>
</p>
</body>
</html>
- Чорний
- Червоний
- Зелений
- Синій
- Оливковий
3. Який HTML-код застосовується для підключення зовнішнього CSS-файлу?
- <style>mystyle.css</style>
- <style>@mystyle.css</style>
- <link rel="stylesheet" href="/mystyle.css">
- <link>@import url(mystyle.css)</link>
- <stylesheet>mystyle.css</stylesheet>
4. Який атрибут використовується для визначення внутрішнього стилю?
- style
- class
- styles
- font
- link