Область представлення

Незалежно від типу пристрою термін область представлення означає простір, в якому видається структура форматування. Сама по собі область представлення має необмежені розміри, але представлення зазвичай здійснюється в її обмеженій частині, визначуваній призначеним для користувача агентом відповідно до кінцевого пристрою. Наприклад, призначені для користувача агенти, що управляють виводом на екран, в основному обмежуються мінімальною шириною екрану, початкове значення якої вибирають, виходячи з розмірів вікна перегляду. Призначені для користувача агенти, що управляють виводом на сторінку, в основному обмежуються шириною і заввишки. Призначені для користувача агенти, що управляють звуковим відтворенням, використовують обмеження, що відносяться до частотного діапазону і відтворення, що жодним чином не впливають на якийсь час.

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

Носій: візуальний

Якщо специфіковано зображення фону, то ця властивість визначає, чи повторюється це зображення(чи розмножується), і як. Розмножене зображення покриває області вмісту і заповнення боксу.

Значення мають наступний сенс:

Дата добавления: 2013-12-12