14.1 Введення
- використання відповідних розширень HTML;
- конвертування тексту в зображення;
- використання зображень для управління пробілами;
- використання таблиць для форматування тексту;
- написання програм замість використання HTML.
Ці способи явно збільшували складність сторінок Web, обмежували свободу дій, створювали проблеми сумісності, а також складності для користувачів з фізичними проблемами.
Таблиці стилів вирішують ці завдання, одночасно виходячи за вузькі рамки механізмів подання в HTML. Таблиці стилів полегшують установку міжрядкових інтервалів, відступів, кольору тексту і фону, розміру і стилю шрифту та інших деталей.
Наприклад, ця невелика CSS (таблиця стилів), що знаходиться в файлі "special.css", встановлює колір тексту параграфа в зелений і оточує його суцільний червоною рамкою:
HTML 4 підтримує наступні можливості таблиць стилів:
Таблиці стилів, навпаки, застосовуються до конкретних носіїв або групам носіїв. Таблиця, передбачувана для використання з екраном, може функціонувати при друку на принтері, але мало підходить для мовних браузерів.
Ця специфікація дозволяє визначити пристрої з широкого набору, в яких дана таблиця стилів може бути застосована. Це дозволяє призначеним для користувача агентам (ПА) виключити вживання невідповідних таблиць стилів. Мови таблиць стилів можуть включати можливості опису в тій же самій таблиці залежності від типу носія.
В даний час пропонується для вирішення цієї проблеми включати відповідні інструкції безпосередньо в кожен елемент HTML. Інформація про подання в цьому випадку завжди доступна для ПА при відображенні конкретного елемента.
14.2 Додавання стилю в HTML
Документи HTML можуть містити правила таблиць стилів безпосередньо в собі або імпортувати таблиці стилів.
Будь-яка мова таблиць стилів може бути використаний в HTML. Простий мову може задовольнити потреби більшості користувачів, а інші мови більше підходять для вирішення вузькоспеціалізованих завдань. У цій специфікації використаний мову стилів "Cascading Style Sheets" ([CSS1]), скорочено - CSS.
Синтаксис даних стилю залежить від мови таблиці стилів.
ПА повинні визначати мову за замовчуванням для таблиць стилів документа в такій послідовності (пріоритет по спадаючій):
style = style [CN] Цей атрибут визначає стильову інформацію для даного елемента.
Цей приклад CSS встановлює колір і шрифт тексту параграфа:
14.2.3 Інформація про стилі в заголовках. елемент STYLE
Атрибути, визначені в іншому місці
Елемент STYLE дозволяє розмістити інформацію стилю в "шапці" документа. HTML допускає будь-яку кількість елементів STYLE в розділі HEAD документа.
ПА, які не підтримують таблиці стилів або які не підтримують певний мову таблиць стилю, який використовується елементом STYLE. повинні ховати вміст елемента STYLE. Помилковим буде відображати цей вміст як частина тексту документа. Деякі мови таблиць стилю підтримують синтаксис приховування вмісту від невідповідних ПА.
Деякі реалізації таблиць стилю можуть допускати більший набір правил в елементі STYLE. ніж в атрибуті style. Наприклад, при наявності CSS, правила можуть бути оголошені в елементі STYLE для:
- всіх об'єктів певного елемента HTML (напр. всі елементи P. всі елементи H1 і т.д.);
- всіх об'єктів елемента HTML, що належать до певного класу (тобто тих, чий атрибут class встановлений в деяке значення);
- одиночних об'єктів елементів HTML (тобто тих, чий атрибут id встановлений в деяке значення).
Правила ієрархії і успадкування стилю залежать від мови таблиць стилів.
Щоб ця інформація стилю впливала тільки на елементи H1 певного класу, ми змінимо її так:
Нарешті, щоб обмежити область видимості стильової інформації до одного об'єкта H1. встановимо атрибут id:
Хоча інформація стилю може бути встановлена майже для будь-якого елементу HTML, два з них, DIV і SPAN. використовуються зазвичай так, щоб не мати семантики уявлення (окрім рівня блоку і інлайн). У комбінації з таблицями стилю ці елементи дозволяють користувачеві розширювати HTML, особливо при використанні атрибутів class та id.
У цьому прикладі ми використовуємо елемент SPAN для установки стилю шрифту декількох слів на початку параграфа в малі прописні.
В даному прикладі ми використовуємо DIV і атрибут class для вирівнювання по формату тексту кількох параграфів, що утворюють уявний розділ наукової статті. Ця стильова інформація може використовуватися повторно для іншого розділу шляхом установки атрибута class в будь-якому потрібному місці документа.
Тут додані звуковий ефекти до якоря для використання в голосовому виведення:
Media-елемент представляє особливий інтерес при застосуванні до таблиці стилів, оскільки ПА може заощадити час, запитуючи по мережі тільки ті таблиці, які застосовуються безпосередньо до поточного пристрою. Наприклад, мовні браузери можуть виключити завантаження таблиць стилів, створених для візуального представлення. Див. Також розділ media-залежні каскади.
14.3 Зовнішні таблиці стилів
14.3.1 Основні і альтернативні таблиці стилів
HTML дозволяє асоціювати будь-яке число зовнішніх таблиць стилів з документом. Мова таблиці стилів визначає, скільки зовнішніх таблиць стилів взаємодіє з документом (наприклад, "каскадні" правила CSS).
ПА зобов'язані враховувати media-декскріптори при використанні будь-якої таблиці стилів.
- href вказує на розташування файлу таблиці стилів. Значним href є URI;
- значення атрибута type вказує мову пов'язаного ресурсу (таблиці стилів). Це дозволяє ПА уникати завантаження таблиць стилів для не підтримує мови таблиць стилів;
- визначити, є таблиця стилів постійної, основний або альтернативної:
- щоб зробити таблицю постійної, встановіть атрибут rel в "stylesheet" і не встановлюйте атрибут title;
- щоб зробити таблицю основний, встановіть атрибут rel в "stylesheet" і називайте таблицю за допомогою атрибута title;
- щоб зробити таблицю альтернативної, встановіть атрибут rel в "alternate stylesheet" і називайте таблицю за допомогою атрибута title.
ПА повинен надавати користувачеві можливість бачити список альтернативних стилів і вибрати з нього. Значення атрибута title рекомендується як назва кожного пункту вибору.
У цьому прикладі ми спочатку визначаємо постійну таблицю стилів, що знаходиться в файлі mystyle.css:
Додавання ключового слова "alternate" до атрибуту rel робить її альтернативної таблицею стилів:
Додаткову інформацію про таблиці стилів див. Посилання і зовнішні таблиці стилів.
Якщо два або більше елементів LINK визначають основну таблицю стилів, перша таблиця має перевагу.
Основна таблиця стилів, певна в META або в заголовку HTTP, має перевагу перед таблицями, певними в елементі LINK.
14.4 Каскадні таблиці стилів
У наступному прикладі ми визначаємо дві альтернативні таблиці стилів з назвою "compact". Якщо користувач вибере стиль "compact", ПА зобов'язаний застосувати обидві зовнішні таблиці стилів, також як і постійну таблицю стилів "common.css". Якщо користувач вибере стиль "big print", тільки альтернативна таблиця "bigprint.css" і постійна "common.css" будуть застосовані.
Приклад каскаду, який використовує елементи LINK і STYLE.
Каскад може включати таблиці стилів, що застосовуються для різних типів носія. І LINK. і STYLE можуть використовуватися з атрибутом media. ПА в цьому випадку відповідає за фільтрацію тих таблиць, які не застосовуються для поточного носія.
У наступному прикладі ми визначаємо каскад, де таблиця "corporate" дається в декількох версіях: одна для друку, інша для екрану і третя для мовних браузерів (використовувана, як кажуть, при читанні email в автомобілі). Таблиця "techreport" застосовна до всіх носіїв. Правило кольору, певне елементом STYLE. використовується для друку і екрану, але не для мовного уявлення.
14.4.2 Спадкування і каскадирование
Якщо ПА хоче відобразити документ, йому потрібно знайти значення для властивостей стилю, наприклад, сімейство шрифтів, стиль шрифту, розмір, висота рядка, колір тексту і так далі. Точний механізм залежить від мови таблиць стилів, але такий опис в цілому може бути застосовано:
Механізм каскадирования застосовується, якщо кілька правил стилю застосовуються безпосередньо до елементу. Цей механізм дозволяє ПА сортувати правила за специфікою, щоб визначити, яке правило застосувати. Якщо не знайдено жодного правила, наступний крок залежить від того, може чи ні успадковуватися це властивість стилю. Не всі властивості можуть успадковуватися. Для цих властивостей мову таблиць стилю надає значення за замовчуванням для того, щоб використовувати їх при відсутності явних правил для конкретного елемента.
14.5 Приховування даних стилю від користувацьких агентів (ПА)
Цей розділ стосується лише тих ПА, які відповідають версіями HTTP, визначальним поле заголовка Link. Зверніть увагу, що HTTP 1.1, як визначено в [RFC2616], не містить поле заголовка Link (див. Розділ 19.6.3).
Менеджери Web-сервера можуть знайти зручним конфігурувати сервер так, щоб таблиця стилів застосовувалася до групи сторінок. Тема HTTP Link має ту саму дію, що і елемент LINK з тими ж атрибутами і значеннями. Множинні заголовки Link відповідають множинним елемента LINK. з'являтимуться в тому ж порядку. наприклад:
Можна визначити кілька альтернативних стилів, використовуючи множинні заголовки Link. і використовувати потім атрибут rel для визначення стилю за замовчуванням.
У цьому прикладі "compact" застосовується за умовчанням, оскільки опущено ключове слово "alternate" для атрибута rel.
Елементи LINK і META. очікувані заголовками HTTP, визначені як з'являються явно перед будь-яким елементом LINK або META в HEAD документа.