2.3.1 Область представлення
Незалежно від типу пристрою термін область представлення означає простір, в якому видається структура форматування. Сама по собі область представлення має необмежені розміри, але представлення зазвичай здійснюється в її обмеженій частині, визначуваній призначеним для користувача агентом відповідно до кінцевого пристрою. Наприклад, призначені для користувача агенти, що управляють виводом на екран, в основному обмежуються мінімальною шириною екрану, початкове значення якої вибирають, виходячи з розмірів вікна перегляду. Призначені для користувача агенти, що управляють виводом на сторінку, в основному обмежуються шириною і заввишки. Призначені для користувача агенти, що управляють звуковим відтворенням, використовують обмеження, що відносяться до частотного діапазону і відтворення, що жодним чином не впливають на якийсь час.
2.3.2 Модель адресації в css2
Властивості і селекторы в CSS2 дозволяють таблицям стилів звертатися до наступних частин документу або призначеного для користувача агента :
Елементи в дереві документу і певні зв'язки між ними(див. розділ "Селекторы").
Атрибути елементів в дереві документу і значення цих атрибутів(див. розділ "Селекторы атрибутів").
Деякі частини утримуваного елементу(див. псевдоелементи :first - line і :first - letter).
Елементи в дереві документу, що знаходяться в певному стані(див. розділ "Псевдокласи").
Деякі частини області представлення, в яких буде здійснено виведення документу.
Певна інформація про систему(див. розділ "Призначений для користувача інтерфейс").
2.4 Принципи розробки css- описів
Мова CSS2, також як і його попередник CSS1, базується на сукупності певних принципів розробки описів :
Сумісність рівнів. Призначені для користувача агенти, підтримувальні CSS2, зможуть сприймати таблиці стилів CSS1. У свою чергу, призначені для користувача агенти, підтримувальні CSS1, зможуть читати таблиці стилів CSS2, ігноруючи ті їх частини, які не доступні їх розумінню. Крім того, призначені для користувача агенти, не підтримувальні CSS, зможуть відображати документи з використанням доступних стилів. Очевидно, що стилістичні поліпшення, що з'являються за рахунок використання CSS, при цьому не зможуть бути відображені, але увесь вміст документу, проте, буде представлений.
Доповнення до структурованих документів. Таблиці стилів збагачують структуровані документи(наприклад, додатки HTML і XML), надаючи стилістичну інформацію для розміченого тексту. При цьому модифікація таблиць стилів здійснюється досить просто і без особливих наслідків для розмітки тексту документу.
Незалежність від постачальника, платформи і апаратура. Таблиці стилів дозволяють документам зберігати незалежність від постачальника, платформи і використовуваної апаратури. Самі таблиці стилів також не залежать від постачальника і платформи, а CSS2 дозволяє визначати цільову таблицю для групи пристроїв(наприклад, принтерів).
Зручність експлуатації. Використовуючи в документах посилання на таблиці стилів, вебмастеры дозволяють істотно спростити обслуговування сайту, зберігаючи його зовнішній вигляд відносно постійним в часі і одноманітним в межах усього сайту. Наприклад, для зміни кольору фону на web- сторінці організації необхідно модифікувати тільки один файл.
Простота. Будучи складніше, ніж CSS1, CSS2 в той же час залишається звичною мовою для створення стилів, який доступний для людського сприйняття. Властивості, визначувані в CSS, зберігаються незалежно один від одного настільки, наскільки це тільки можливо, і, як правило, при їх використанні існує тільки один спосіб досягнення певного ефекту.
Продуктивність мережі. Засоби мови CSS надають системи кодування для компактного представлення утримуваного документу. Нерідко в порівнянні з графічними і звуковими файлами, часто використовуваними розробниками для досягнення певних ефектів в презентації, таблиці стилів дозволяють істотно виграти у використанні ресурсів пам'яті. Крім того, при цьому потрібне менше число мережевих з'єднань, що дозволяє ще більше збільшити продуктивність мережі.
Гнучкість. Використання CSS може здійснюватися декількома способами. Вирішальною при цьому являється можливість ієрархічного використання інформації про стиль, описаної в основній(визначуваною призначеним для користувача агентом) таблиці стилю, призначених для користувача таблицях стилів, приєднаних таблицях стилів, заголовку документу і в атрибутах елементів, що формують тіло документу.
Різноманіття ефектів. Надаючи розробникам багатий набір ефектів, CSS збільшує барвистість Web- сторінки як засоби візуального відображення інформації. Якщо дизайнери прагнули отримати багаті функціональні можливості, то вони і знаходили їх в настільних видавничих і слайд-шоу додатках. Проте, деякі з бажаних ними ефектів вступали в конфлікт з властивістю апаратури бути незалежною. Тепер можливості мови CSS2 істотно просунулися вперед, враховуючи усі вимоги дизайнерів.
Альтернативні засоби інтеграції. Сукупність властивостей, визначуваних в CSS і описаних в цій специфікації, формує модель самоузгодженого форматування для виведення візуальної і звукової інформації. Доступ до цієї моделі форматування здійснюється за допомогою мови CSS, або, завдяки існуючій можливості, за допомогою інших мов. Наприклад, програма JavaScript може динамічно змінювати значення властивості 'color' деякого елементу.
Доступність. Деякі функції CSS зроблять web- сторінку доступнішою для тих користувачів, у яких є обмеження доступу :
Властивості, що дозволяють управляти виведенням шрифтів, дозволяють розробникам уникати недоступних побітових відображень тексту.
Властивості позиціонування дозволяють розробникам уникати розмітки(наприклад, невидимих зображень), що управляє розташуванням об'єктів.
Семантика правил !important дозволяє користувачам, що мають специфічні вимоги до презентації, ігнорувати таблиці стилів розробника.
Новий тип значення 'inherit', яке мають усі властивості, робить більше універсальним каскадне використання таблиць і дозволяє спростити і зробити більше послідовним налаштування стилю.
Вдосконалена підтримка пристроїв, включаючи підтримку груп пристроїв і пристроїв для ектипографії, рельєфного друку і телетайпу, дозволить користувачам і розробникам настроювати вивід під свою апаратуру.
Властивості, що дозволяють управляти звуковим сигналом, надають контроль за відтворенням мови і аудіо-вихідним.
Селекторы атрибутів, функція 'attr()' і властивість 'content' надають доступ до вмісту, що модифікується.
Лічильники і нумерація параграфів/розділів можуть поліпшити перегляд документу і зберегти відстань між опуклостями(що дуже важливе для эктипографических пристроїв). Крім того, властивості 'word - spacing' і 'text - indent' виключають необхідність в додатковому вільному місці.
Фон
Автори можуть специфікувати фон елементу(тобто його видиму поверхню) як колір або як зображення. В термінах моделі боксу, "background" відноситься до фону вмісту і області заповнення. Колір і стиль обрамлення встановлюються у властивостях обрамлення. Поля завжди прозорі, тому фон боксу-предка завжди просвічує.
Властивості фону не наслідують, але фон боксу-предка за умовчанням просвічуватиме, оскільки початкове значення 'background - color' - 'transparent'.
Фон боксу, генерований кореневим елементом, покриває усю канву.
Для документів HTML, проте, ми рекомендуємо, щоб автори специфікували фон елементу BODY, а не елементу HTML.
ПА повинні враховувати наступні правила пріоритету при заповненні фону : якщо значення властивості 'background' для елементу HTML відмінно від 'transparent', тоді використайте його, в іншому випадку - використайте значення властивості 'background' елементу BODY. Якщо результуюче значення - 'transparent', те представлення не визначене.
Відповідно до цих правил, канва наступного документу HTML матиме фон "marble" :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Установка фону канви</TITLE>
<STYLE type="text/css">
BODY { background: url("http://style.com/marble.png") }
</STYLE>
</HEAD>
<BODY>
<P>Мій фон - marble.
</BODY>
</HTML>
Властивості фону : 'background - color', 'background - image', 'background - repeat', 'background - attachment', 'background - position' і 'background'
'background - color'
Значення: <color> | transparent | inherit
Початкове: transparent
Застосовується: до усіх елементів
Наслідує: немає
Процентне: N/A
Носій: візуальний
Ця властивість встановлює колір фону елементу значенням <color> чи ключовим словом 'transparent' (щоб зробити фон підкладки таким, що просвічує).
H1 { background - color: #F00 }
'background - image'
Значення: <uri> | none | inherit
Початкове: none
Застосовується: до усіх елементів
Наслідує: немає
Процентне: N/A
Носій: візуальний
Ця властивість встановлює зображення-фон елементу. При установці зображення для фону авторам необхідно також специфікувати колір фону, який використовуватиметься, якщо зображення виявиться недоступним. Якщо зображення доступне, воно виводиться поверх кольору фону. (Таким чином, колір фону буде видний в прозорих ділянках зображення).
Значеннями цієї властивості є <uri>, для специфікації зображення, або 'none', якщо зображення не використовується.
BODY { background - image: url("marble.gif") }
P { background - image: none }
'background - repeat'
Значення: repeat | repeat - x | repeat - y | no - repeat | inherit
Початкове: repeat
Застосовується: до усіх елементів
Наслідує: немає
Процентне: N/A
Носій: візуальний
Якщо специфіковано зображення фону, то ця властивість визначає, чи повторюється це зображення(чи розмножується), і як. Розмножене зображення покриває області вмісту і заповнення боксу.
Значення мають наступний сенс:
repeat
Зображення розмножується горизонтально і вертикально.
repeat - x
Зображення розмножується тільки горизонтально.
repeat - y
Зображення розмножується тільки вертикально.
no - repeat
Зображення не розмножується: виводиться тільки одна копія зображення.
BODY {
background: white url("pendant.gif");
background - repeat: repeat - y;
background - position: center;
}
Єдина копія фонового зображення центрована, а інші копії поміщені вище і нижче, щоб створити вертикальну стрічку позаду елементу.
[D]
'background - attachment'
Значення: scroll | fixed | inherit
Початкове: scroll
Застосовується: до усіх елементів
Наслідує: немає
Процентне: N/A
Носій: візуальний
Якщо специфіковано зображення фону, то ця властивість визначає, чи є воно фіксованим відносно порту перегляду('fixed'), або прокручується разом з документом('scroll').
Навіть якщо зображення зафіксоване, воно буде видне тільки у тому випадку, якщо знаходиться в області фону або заповнення елементу. Таким чином, поки зображення не розмножене('background - repeat: repeat'), воно може бути невидимим.
Тут створюється нескінченна вертикальна смуга, що залишається "приклеєною" до порту перегляду при прокручуванні елементу.
BODY {
background: red url("pendant.gif");
background - repeat: repeat - y;
background - attachment: fixed;
}
ПА можуть розглядати 'fixed' як 'scroll'. Проте рекомендується, щоб вони інтерпретували 'fixed' коректно, хоч би для елементів HTML і BODY, оскільки у автора немає способу надавати зображення тільки для тих браузерів, які підтримують 'fixed'. Див. деталі в розділі відповідність.
'background - position'
Значення: [ [ <percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
Початкове: 0% 0%
Застосовується: до елементів рівня блоку і до елементів, що заміщаються
Наслідує: немає
Процентне: відноситься до розміру самого боксу
Носій: візуальний
Якщо фонове зображення специфіковане, то ця властивість визначає його(зображення) початкову позицію. Значення мають наступний сенс:
<percentage> <percentage>
Якщо пара значень - '0% 0%', те верхній лівий кут зображення вирівняний з лівим верхнім кутом кромки заповнення боксу. Пара значень '100% 100%' поміщає нижній правий кут зображення в нижній правий кут області заповнення. Якщо пара значень - '14% 84%', точка зображення 14% упоперек і 84% вниз поміщається в точку 14% упоперек і 84% вниз області заповнення.
<length> <length>
Якщо пара значень - '2cm 2cm', те верхній лівий кут зображення поміщається на 2cm управо і на 2cm вниз від верхнього лівого кута області заповнення.
top left і left top
Те ж, що '0% 0%'.
top, top center і center top
Те ж, що '50% 0%'.
right top і top right
Те ж, що '100% 0%'.
left, left center і center left
Те ж, що '0% 50%'.
center і center center
Те ж, що '50% 50%'.
right, right center і center right
Те ж, що '100% 50%'.
bottom left і left bottom
Те ж, що '0% 100%'.
bottom, bottom center і center bottom
Те ж, що '50% 100%'.
bottom right і right bottom
Те ж, що '100% 100%'.
Якщо задано тільки одно значення, у відсотках або одиницях виміру, то воно встановлює тільки горизонтальну позицію, вертикальна позиція буде 50%.
Якщо задано два значення, перше задає горизонтальну позицію. Допускаються комбінації значень у відсотках і одиницях виміру(наприклад, '50% 2cm'). Допускаються негативні значення позиції. Ключові слова не можуть комбінуватися зі значеннями у відсотках або одиницях виміру(усі можливі поєднання приведені вище).
BODY { background: url("banner.jpeg") right top } /* 100% 0% */
BODY { background: url("banner.jpeg") top center } /* 50% 0% */
BODY { background: url("banner.jpeg") center } /* 50% 50% */
BODY { background: url("banner.jpeg") bottom } /* 50% 100% */
Якщо фонове зображення фіксоване в порту перегляду(див. властивість 'background - attachment' ), то зображення розміщується відносно порту перегляду, а не відносно області заповнення елементу. Наприклад
BODY {
background - image: url("logo.png");
background - attachment: fixed;
background - position: 100% 100%;
background - repeat: no - repeat;
}
У цьому прикладі зображення(поодиноке) розміщується в правому нижньому кутку порту перегляду.
'background'
Значення: [<'background - color'> || <'background - image'> || <'background - repeat'> || <'background - attachment'> || <'background - position'>] | inherit
Початкове: не визначено для скорочених властивостей
Застосовується: до усіх елементів
Наслідує: немає
Процентне: дозволено для 'background - position'
Носій: візуальний
Властивість 'background' ця скорочена властивість для установки індивідуальних властивостей фону(тобто 'background - color', 'background - image', 'background - repeat', 'background - attachment' і 'background - position' ) в одному місці в таблиці стилів.
Властивість 'background' спочатку встановлює усі індивідуальні властивості фону в їх початкові значення, а потім призначає явні значення, задані в оголошенні.
У першому правилі задано тільки значення 'background - color', а інші індивідуальні властивості встановлені у свої початкові значення. У другому правилі усі індивідуальні властивості специфіковані.
BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }
Звукове представлення документу, зазвичай використовуване людьми з проблемами зору, поєднує мовний синтез і "звукові іконки". Часто таке звукове представлення відбувається при конвертації документу в звичайний текст і його перенаправленні в облаштування читання з екрану -- програму або фізичний пристрій, який просто прочитує усі символи на екрані. Результатом цього є менш ефективне представлення, чим могло б бути, якби зберігалася структура документу. Властивості таблиць стилів для звукового представлення можуть використовуватися спільно з візуальними властивостями(змішаний носій) або як звукова альтернатива візуальному представленню.
Окрім очевидної переваги - підвищення доступності, є і поліпшення використання в інших умовах прослуховування інформації : використанні в автомобілі, індустріальних і медичних системах документації(intranet), домашні розваги і допомога користувачам, що навчаються читанню або що має проблеми з читанням.
При використанні звукових властивостей, канва складається з тривимірного фізичного простору(звукового середовища) і временнoго простору(можна специфікувати звуки, в час і після інших звуків). Властивості CSS дозволяють також авторам змінювати якість мови(тип голосу, частоту, инфлексию і тому подібне), що синтезується.
H1, H2, H3, H4, H5, H6 {
voice - family: paul;
stress: 20;
richness: 90;
cue - before: url("ping.au")
}
P.heidi { azimuth: center - left }
P.peter { azimuth: right }
P.goat { volume: x - soft }
Тут мовний синтезатор прямує в мовні заголовки в голосі(свого роду "аудіо-шрифт"), званому "paul", рівним звуком, але дуже м'яким голосом. Перед вимовленням заголовків звуковий уривок програватиметься із заданого URL. Параграфи класу "heidi" йтимуть ліворуч(якщо звукова система здатна відтворювати просторове аудіо), а параграфи класу "peter" - справа. Параграфи класу "goat" звучатимуть дуже м'яко.
Властивості об'єму звуку : 'volume'
'volume'
Значення: <number> | <percentage> | silent | x - soft | soft | medium | loud | x - loud | inherit
Початкове: medium
Застосовується: до усіх елементів
Наслідує: так
Процентне: відносно успадковного значення
Носій: звуковий
Об'єм означає величину розмаху синусоїди. Іншими словами, сильно зігнута синусоїда голосу при об'ємі 50 може давати списи вище цього значення. Повні значення, ймовірно, будуть комфортнішими для людини, наприклад, при фізичному управлінні об'ємом звуку(що пропорційно збільшуватиме значення і 0, і 100); єдине, що робить цю властивість, це визначає динамічний діапазон.
Значення мають наступний сенс:
<number>
Будь-яке число від '0' до '100'. '0' - це мінімальний чутний рівень гучності, а 100 відповідає максимальному комфортному рівню.
<percentage>
Процентні значення обчислюються відносно успадковного значення і потім вирівнюються в діапазоні від '0' до '100'.
silent
Взагалі немає звуку. Значення '0' не означає те ж саме, що 'silent'.
x - soft
Те ж, що '0'.
soft
Те ж, що '25'.
medium
Те ж, що '50'.
loud
Те ж, що '75'.
x - loud
Те ж, що '100'.
ПА повинні дозволяти слухачеві встановлювати значення, що відповідають '0' і '100'. Жодне значення не є універсально застосовним; відповідні значення залежать від використовуваної апаратури(гучномовців, навушників), обстановки(автомобіль, домашній театр, бібліотека) і особистих переваг. Ось деякі приклади:
Браузер для використання в автомобілі має установки з урахуванням сильних сторонніх шумів. '0' буде досить високим рівнем, а '100' - дуже високим. Мова добре прослуховуватиметься крізь вуличний шум, але загальний динамічний діапазон буде обмежений. Автомобілі з поліпшеною звукоізоляцією можуть забезпечити ширший динамічний діапазон.
Інший браузер використовується в квартирі пізно вночі або в учбовій аудиторії. '0' - встановлено на дуже низький рівень, а '100' - теж на досить низький. Як і в першому прикладі, динамічний діапазон досить обмежений. Реальний об'єм звуку тут невеликий, а в першому прикладі - занадто високий.
У тихому ізольованому приміщенні встановлений домашній театр hi - fi. '0' - встановлений досить низько і '100' - досить високо; динамічний діапазон дуже широкий.
Одна і та ж авторська таблиця стилів може використовуватися в усіх випадках, просто відображаючи значення '0' і '100' відповідним чином на стороні клієнта.
Властивості розмови : 'speak'
'speak'
Значення: normal | none | spell - out | inherit
Початкове: normal
Застосовується: до усіх елементів
Наслідує: так
Процентне: N/A
Носій: візуальний
Ця властивість специфікує, чи буде текст представлятися в звуці і - якщо так - в якій манері(приблизно як властивість 'display').
Можливі значення:
none
Вирізує звукове представлення, так що елемент не вимагає часу для представлення. Зверніть увагу, що нащадки можуть перевизначати це значення і звучатимуть. (Для того, щоб точно відмінити представлення елементу і його нащадків, використайте властивість 'display').
normal
Використовує залежні від мови правила вимови для представлення елементу і його нащадків.
spell - out
Текст вимовляється побуквенно(використовується для акронимов і абревіатур).
Зверніть увагу різницю між елементом, чия властивість 'volume' має значення 'silent', і елементом, чия властивість 'speak' встановлена в 'none'. Перший віднімає стільки ж часу, начебто він вимовлявся, включаючи паузи до і після елементу, але звук не генеруватиметься. Другий не віднімає часу і не представляється(хоча його нащадки - можуть).
Властивості паузи : 'pause - before', 'pause - after' і 'pause'
'pause - before'
Значення: <time> | <percentage> | inherit
Початкове: залежить від ПА
Застосовується: до усіх елементів
Наслідує: немає
Процентне: див. текст
Носій: звуковий
'pause - after'
Значення: <time> | <percentage> | inherit
Початкове: залежить від ПА
Застосовується: до усіх елементів
Наслідує: немає
Процентне: див. текст
Носій: звуковий
Ця властивість специфікує паузу до(чи після) вимовлення утримуваного елементу.
Значення мають наступний сенс:
<time>
Виражає паузу в абсолютних одиницях часу(секундах і мілісекундах).
<percentage>
Відноситься до інверсії значення властивості 'speech - rate'. Наприклад, якщо speech - rate - 120 слів в хвилину(тобто одно слово в півсекунди, або 500ms), тоді 'pause - before' в 100% означає паузу в 500ms, а 'pause - before' в 20% означає 100ms.
Пауза вставляється між вмістом елементів і будь-яким вмістом 'cue - before' або 'cue - after'.
Автори повинні використати відносні значення, щоб створювати надійніші таблиці стилів з урахуванням можливої різниці в реальних значеннях встановлюваного об'єму.
'pause'
Значення: [ [ <time> | <percentage> ]{1,2} ] | inherit
Початкове: залежить від ПА
Застосовується: до усіх елементів
Наслідує: немає
Процентне: див. описи 'pause - before' і 'pause - after'
Носій: звуковий
Властивість 'pause' це скорочення для 'pause - before' і 'pause - after'. Якщо задано два значення, то перше являється 'pause - before', а друге - 'pause - after'. Якщо задано тільки одно значення, воно застосовується для обох властивостей.
H1 { pause: 20ms } /* pause - before: 20ms; pause - after: 20ms */
H2 { pause: 30ms 40ms } /* pause - before: 30ms; pause - after: 40ms */
H3 { pause - after: 10ms } /* pause - before: ?; pause - after: 10ms */
Властивості репліки : 'cue - before', 'cue - after' і 'cue'
'cue - before'
Значення: <uri> | none | inherit
Початкове: none
Застосовується: до усіх елементів
Наслідує: немає
Процентне: N/A
Носій: звуковий
'cue - after'
Значення: <uri> | none | inherit
Початкове: none
Застосовується: до усіх елементів
Наслідує: немає
Процентне: N/A
Носій: звуковий
Звукові іконки(репліки) є способом розрізнення семантичних елементів. Звуки можуть програватися до і/або після елементу, щоб позначити його межі.
Значення мають наступний сенс:
<uri>
URI зобов'язаний вказувати на ресурс звукової іконки. Якщо URI вказує не на аудіо-файл, а, наприклад, на зображення, ресурс повинен ігноруватися, а властивість - розглядатися так, як якби воно мало значення 'none'.
none
Звукова іконка не специфікована.
A {cue - before: url("bell.aiff"); cue - after: url("dong.wav") }
H1 {cue - before: url("pop.au"); cue - after: url("pop.au") }
'cue'
Значення: [ <'cue - before'> || <'cue - after'> ] | inherit
Початкове: не визначено для скороченої властивості
Застосовується: до усіх елементів
Наслідує: немає
Процентне: N/A
Носій: звуковий
Властивість 'cue' є скороченням для установок 'cue - before' і 'cue - after'. Якщо задано два значення, перше являється 'cue - before', а друге - 'cue - after'. Якщо задано тільки одно значення, воно застосовується до обох властивостей.
Наступні два правила еквівалентні:
H1 {cue - before: url("pop.au"); cue - after: url("pop.au") }
H1 {cue: url("pop.au") }
Якщо ПА не може вивести звукову іконку(напр., установки ПА не дозволяють це зробити), ми рекомендуємо, щоб він відтворював альтернативну підказку(напр., виводив застережливе повідомлення, видавав застережливий звук і тому подібне).
Інформацію про інші види техніки генерації вмісту см в "псевдоелементах :before і :after" .