Web-програмування та web-дизайн (стр. 9 )

<NAME>Santa Fe</NAME>

<STATE>New Mexico</STATE>

</CITY>

<STATE>California</STATE>

</MAPS>.

Наступні правила в приєднуваній таблиці стилів змусять браузер відформатувати "New Mexico" звичайним шрифтом, а "California" – курсивом:

CITY STATE

{font-style:normal}

STATE

{font-style:italic}.

Хоча вміст New Mexico елемента STATE відповідає обом контекстуальним селекторам у правилі CITY STATE і родовому селектору в правилі STATE, селектор CITY STATE є конкретнішим і, отже, має пріоритет. (Докладніше про пріоритети і конфлікти правил ви дізнаєтеся в розділі "Привласнення значень у таблицях каскадних стилів" далі).

Примітка. Майте на увазі, що не слід поміщати коми між іменами елементів у контекстному селекторі. Інакше правило буде застосоване до всіх елементів (як було описано в попередньому розділі), але не до останнього дочірнього елемента в списку.

Використання атрибута STYLE

Ви можете використовувати спеціальний атрибут STYLE у вашому XML-документі замість того, щоб встановлювати одне або декілька певних властивостей окремого елемента в таблиці стилів. Якщо значення властивості, встановленої за допомогою атрибута STYLE, конфліктує із значенням властивості, встановленої в таблиці стилів, установка за допомогою атрибута STYLE має пріоритет. Таким чином, атрибут STYLE є зручним засобом, щоб переустановити – для певного елемента – значення властивості, привласнене для типу елемента в приєднаній таблиці стилів. Проте використання атрибута STYLE порушує принцип CSS щодо зберігання інформації про форматування окремо від визначення вмісту документа і структури XML-файлу.

Щоб встановити одне або декілька значень властивостей, включене оголошення в значення атрибута STYLE у вигляді рядка, що виділене лапками, відокремлюючи індивідуальні оголошення крапкою з комою, як ви це робите в оголошенні блоку в CSS.

Наприклад, наведена таблиця стилів задає для елементів TITLE курсивне зображення з розміром шрифту в 10 пунктів. Проте, якщо ви включите наступний атрибут STYLE в початковий тег певного елемента TITLE в документі, цей елемент відображуватиме шрифтом normal (не курсивом), а розмір шрифту становитиме 14 пунктів:

<TITLE STYLE='font-style:normal; font-size:14pt'>

The Adventures of Huckleberry Finn

</TITLE>.

Порада. Для валідних документів необхідно оголосити атрибут STYLE в DTD перед тим, як ви зможете використовувати атрибут. Ви можете зробити це, наприклад, таким чином:

<!ATTLIST TITLE STYLE CDATA #IMPLIED>.

Імпорт інших таблиць стилів

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

Ось узагальнена форма запису директиви @import, де URLТаблСтил є повний або відносний URL (Uniform Resource Locator) файлу, що містить таблицю каскадних стилів, яку ви хочете імпортувати.

@import url(URLТаблСтил).

Наприклад, наступна директива (що використовує відносний URL), поміщена на початку таблиці стилів імпортує таблицю стилів Book, що міститься у файлі. css (який повинен знаходитися в тій же папці, що і основна таблиця стилів):

@import url(Book. css);

BOOK

{display:block;

margin-top:12pt;

font-size:10pt}

/* продовження таблиці стилів */.

Директива @import повинна розміщуватися на початку таблиці стилів перед правилами. Ви можете помістити на початку таблиці стилів декілька директив @import .

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

Завдання значень URL

Директива @import і властивість background-image вимагають вказівки значення URL для завдання місцезнаходження відповідного ресурсу (таблиці стилів або файлу зображення). URL задається з використанням наступної форми запису, де URL є URL. Зверніть увагу, що не можна робити пропуски між url і символом відкриваючої дужки (

url(URL).

Ви можете використовувати повністю заданий URL, як в таких прикладах:

@import url(http://www. /stylesheets/

MyStyles. css);

INVENTORY

{background-image:url(file:///E:\Example Code\Background. gif)}.

Або ви можете використовувати частковий URL, який задає місцезнаходження щодо місцезнаходження файлу таблиці стилів, що містить URL. Відносні URL у таблицях стилів працюють подібно URL в HTML-сторінках. Наприклад, якщо файл таблиці стилів знаходиться у папці Example Code, наступний відносний URL буде еквівалентний повному URL з попереднього прикладу.

INVENTORY {background-image:url(Background. gif)}.

Крок другий: пов'язання таблиці стилів з XML-документом

Щоб пов'язати таблицю каскадних стилів з XML-документом, ви повинні вставити в документ зарезервовану інструкцію щодо обробки xml-stylesheet. Ця інструкція з обробки має таку узагальнену форму запису, де CSSFilePath задає місцезнаходження файлу таблиці стилів:

<?xml-stylesheet type="text/css" href=CSSFilePath?>

Ви можете використовувати повний URL, наприклад:

<?xml-stylesheet type="text/css"

href="http://www. /

Inventory01.css"?>.

Частіше використовується частковий URL, який задає місцезнаходження щодо місцезнаходження XML-документа, що містить інструкцію з обробки xml-stylesheet, наприклад:

<?xml-stylesheet type="text/css" href="Inventory01.css"?>.

(Відносний URL використовується частіше, оскільки, як правило, ви зберігаєте файл таблиці стилів у тій самій папці, що і XML-документ, або в одній із вкладених папок).

Як правило, ви додаєте інструкцію з обробки xml-stylesheet у пролог XML-документа за оголошенням XML.

Можливість приєднувати до XML-документа зовнішню таблицю стилів збільшує гнучкість форматування документа. Ви можете повністю змінити вид документа, просто приєднавши до нього іншу таблицю стилів. Щоб зробити це, достатньо всього лише відредагувати URL в інструкції з обробки xml-stylesheet – не вносячи ніяких інших змін в XML-документ.

Ви можете включити в XML-документ декілька таблиць стилів, вставивши для кожної з них інструкцію з обробки xml-stylesheet на початку XML-документа, наприклад:

<?xml version="1.0"?>

<?xml-stylesheet type="text/css" href="Book01.css"?>

<?xml-stylesheet type="text/css" href="Book02.css"?>

<INVENTORY>

</INVENTORY>.

Можливість пов'язування з декількома таблицями стилів дозволяє вам зберігати групи взаємозв'язаних правил в окремих файлах, а потім об'єднувати їх при створенні документів певних типів.

Якщо ви встановлюєте зв'язки з декількома таблицями стилів, браузер об'єднує правила з різних таблиць. Якщо окремі таблиці стилів містять конфліктуючі правила, правила з останньої позв’язуваної з документом таблиці стилів мають пріоритет над правилами, що містяться в попередніх таблицях стилів.

Привласнення значень у таблицях каскадних стилів

У таблицях каскадних стилів ви можете привласнювати значення властивостям на декількох різних рівнях. Нижче даний опис основних рівнів, на яких ви можете привласнювати значення властивості. Рівні подані в порядку їх пріоритетів – від вищого до нижчого. Коли браузер готується відображувати елемент і значення його певної властивості, наприклад, font-size, конфліктує із значенням, привласненим цьому елементу на інших рівнях, браузер використовує значення, привласнене на найвищому рівні пріоритету.

1. Якщо ви привласнили значення властивості в атрибуті STYLE для певного елемента в XML-документі, браузер використовує це значення при відображенні елемента. Наприклад, він відображуватиме такий елемент напівжирним шрифтом:

<TITLE STYLE="font-weight:bold">Leaves of Grass</TITLE>

2. Якщо ви не встановили властивість в атрибуті STYLE, браузер використовує значення властивості, оголошеної в правилі CSS з контекстуальним селектором (тобто селектором, який визначає елемент з одним або декількома його елементами-предками). Припустимо, що наступний елемент є елементом Документ XML-документа:

<MAPS>

<CITY>

<NAME>Santa Fe</NAME>

<STATE>New Mexico</STATE>

</CITY>

<STATE>California</STATE>

</MAPS>.

Припустимо також, що приєднана таблиця стилів містить такі правила:

CITY STATE

{font-style:normal}

STATE

{font-style:italic}

Браузер використовує правило CITY STATE для форматування елемента "New Mexico" STATE, оскільки воно має контекстуальний селектор, і, отже, має пріоритет над правилом STATE, що має родовий селектор. Напис "New Mexico" в результаті буде відображений звичайним шрифтом.

3. Якщо ви не оголосили значення певної властивості в правилі, що має відповідний контекстуальний селектор, браузер використовує значення, оголошене в правилі з родовим селектором (тобто селектором, який включає тільки ім'я елемента). Наприклад, для другого компоненту даної таблиці стилів браузер не знайде відповідного контекстуального правила для елемента "California" STATE, тому використовує родове правило STATE, внаслідок чого напис "California" відображуватиме курсивом.

4. Якщо ви не оголосили значення для певної властивості для елемента в батьківському правилі, браузер використовує установку властивості, оголошену для найближчого елемента-предка (батька, батька батька і так далі):

TITLE

{font-style:italic}

Отже, браузер використовуватиме установку властивості font-size для батьківського елемента BOOK (елемент BOOK є батьком для елемента TITLE в XML-документі, що використовує таблицю стилів):

BOOK

{display:block;

margin-top:12pt;

font-size:10pt}

У результаті текст елемента TITLE буде відображений 10-им шрифтом.

Цей процес має місце тільки для успадкованої властивості. Для успадкованої властивості браузер використовуватиме значення властивості за замовчанням (див. розділ "Спадкоємність установок властивостей).

5. Якщо таблиця стилів не містить установку властивості для якого-небудь батьківського елемента, браузер використовує свою власну установку. Такою установкою може бути значення за замовчанням, вбудоване в браузер, або значення, задане користувачем браузера. Цей процес має місце тільки для успадкованих властивостей. Для успадкованих властивостей браузер використовує значення властивості за замовчанням. Як ви можете бачити з цього списку, основний принцип тут такий: якщо ви привласнили властивості значення, що конфліктують на різних рівнях, браузер віддає перевагу більш конкретизованому правилу. Наприклад, встановлена для елемента властивість є сама по собі більш конкретизованою, ніж установка для батька елемента, тому має пріоритет. Ви можете скористатися цим принципом і в складніших випадках.

Нижче наведений порядок, в якому браузер обробляє правила таблиці стилів:

o якщо ви пов'язуєте декілька таблиць стилів із документом, що використовує інструкцію з обробки xml-stylesheet, браузер обробляє таблиці стилів у послідовності, в якій вони наведені в інструкції з обробки;

o якщо ви імпортуєте одну або декілька таблиць стилів в іншу таблицю стилів з використанням директиви @import, браузер обробляє імпортовані таблиці стилів перед таблицею, в яку вони імпортуються. Порядок обробки при цьому визначається порядком імпорту;

o у таблиці стилів правила обробляються в тому порядку, в якому вони записані.

СПИСОК ЛІТЕРАТУРИ

1. Изучаем XML. –СПб.: Символ-Плюс, 2001. – 408с.

2. XML. Справочник. –СПб.: Питер, 2000. – 480 с.

3. Энциклопедия XML. – СПб.: Питер, 2004. – 1101 с.

4. Освой самостоятельно XML за 21 день. - СПб.: Вильямс, 2002. – 432 с.

5. XML. Разработка Web-приложений. - СПб.: BHV, 2003. – 585 с.