HTML. Таблиці стилів. Способи зв’язування CSS іх документом
Каскадні таблиці стилів – це мова, яка містить набір властивостей для визначення зовнішнього вигляду документу. Специфікація CSS визначає властивості і описову мову для встановлення зв’язку між цими властивостями та елементами у документі.
Таблиці стилів являють собою абстракцію, у якій стиль докомента визначається окремо від його змісту. Таким чином, при створенні Web-сторінки із використанням таблиці стилю, немає потреби здійснювати форматування абзаців, розділів, заголовків, зовнішноього вигляду таблиць і т. д. безппосередньо використовуючи необхідні параметри у тегах. Усі потрібні параметри можна описати окремо у таблиці стилю і потім використати на сторінці.
Термін cascading (каскадні) у назві CSS вказує на можливість злиття різних таблиць стилів для створення єдиного визначення стилю окремого елемента (тега) чи всього документа.
Способи використання CSS у HTML-документах.
Існує три метотоди додавання таблиць стилів у документ:
- внутрішні стилі – визначаються безпосередньо у тезі;
- глобальні стилі – стиль визначається на початкудокумента;
- зв’язані стилі – стиль описується у окремому файлі.
Внутрішні стилі.
Внутрішній стиль визначається завдяки використанню параметра style для тега, якому потрібно надати певні параметри форматування. Загальний синтаксис цього параметра такий:
style=”парметр1:значення1; параметр2:значення2; ”
Головний недолік внутрішніх стилів полягає у тому, що вони не відповідають ідеології структурованого документу, що у свою чергу не дозволяє ефективно динамічно змінювати зовнішній вигляд елемента.
Таблиця глобальних стилів.
Таблиця глобального стилю розташовується у заголовку документа між тегами <style>, </style>. Розташування усіх стилів документа у одному місці спрощує зміну режиму відтворення документа. Так, якщо у документі міститься декілька абзаців, які необхідно відобразити з однаковим набором параметрів форматування, то можна або для кожного тега абзацу використати параметр style, або один раз описати параметри абзацу у таблиці глобальних стилів. Очевидна перевага другого способу полягає в тому, що для зміни ситлю абзацу достатньо відредагувати відповідні параметри у одному місці документа тоді, як перший спосіб потребує редагування параматра style для кожного абзацу.
Тег style має необов’язковий, але бажаний для використання параметр type=”text/css”. Цей параметр визначає тип стилів і може приймати лише вказане значення ”text/css”.
У глобальній таблиці стилів, стилі окремих тегів форматуються завдяки використанню наступної конструкції: селектор {параметр1:значення1; параметр2:значення2;}.
Таблиця зв’язаних стилів.
Таблиця зв’язаних стилів знаходиться у зовнішньому файлі. Перевага використання таблиць зв’язаних стилів полягає у тому, що усі стилі можуть бути описані у одному файлі, який використовуватиметься декількома сторінками. Таким чином, наприклад, обробка усіх параграфів цілого Web-вузла може здійснюватися у одному файлі. Разом з цим використання зв’язаної таблиці стилів підвищує продуктивність роботи Web-браузера, оскільки вона кешується локально на диску клієнта (окремо від документа), так що кожний документ буде менший за розмірами, а інформацію про стиль потрібно завантажити лише один раз.
Для визначення таблиці зв’язаних стилів у заголовку документа використовується тег <link>:
<link rel=”stylesheet” type=”text/css” href=”file.css”>
Параметр rel визначає, що зв’язаний файл є таблицею стилів; параметр href є вказівником на зовнішній файл, що містить таблицю стилів.
Файл із таблицею стилів може містити лише селектори тегів та набори параметрів цих тегів з необхідними значеннями і повинен зберігатися з розширенням *.css.
