Міністерство освіти і науки України Сумський державний університет



Сторінка8/8
Дата конвертації28.12.2016
Розмір0.94 Mb.
1   2   3   4   5   6   7   8

Основні етапи при використанні каскадних таблиць стилів


Наведемо два основні етапи при використанні таблиці каскадних стилів для відображення XML-документа:

  1. Створення файлу таблиці стилів.

  2. Пов'язання таблиці стилів з XML-документом.

Крок перший: створення файлу таблиці стилів


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

Розглянемо приклад простої таблиці каскадних стилів example_19.css.


BOOK

{display:block;

margin-top:12pt;

font-size:10pt}

TITLE

{font-style:italic}


AUTHOR

{font-weight:bold}

Ця таблиця стилів призначена для приєднання до XML-документа.

Таблиця стилів складається з одного або декількох правил (інколи їх називають набором правил). Правило містить інформацію про відображення певного типу елемента в XML-документі.

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

За селектором іде блок оголошень, який обмежується фігурними дужками ({) і містить одне або декілька оголошень, що розділяються крапкою з комою.

Кожне оголошення задає установку певної властивості, такої як розмір шрифту, який буде використаний для відображення елемента. Оголошення складається з властивості, вслід за якою йде двокрапка, після якої йде значення для даної властивості. Наприклад, наступне оголошення встановлює для властивості font-size (розмір шрифту) значення 10pt (10 пунктів).

Таблиця стилів може також містити коментарі. Коментарі в таблиці стилів починаються з символів косої межі і зірочки (/*) і закінчуються символами зірочки і косої межі (*/). Між цими парами символів-обмежувачів ви можете помістити будь-який текст за вашим бажанням. Коли браузер зчитує таблицю стилів для форматування документа, він ігнорує цей текст. Ви можете використовувати коментар для пояснень, вказівки призначення і дії таблиці стилів.

Ви також можете використовувати коментарі в процесі розроблення таблиці стилів, щоб тимчасово відключити правило або його частку. Наприклад, якщо ви хочете подивитися, який вигляд будуть мати елементи BOOK без верхнього відбиття, то можете тимчасово додати символи коментарів у таке правило:
BOOK

{display:block;

/* margin-top:12pt; */

font-size:10pt}.



Примітка. Порожні символи (пропуски, табуляція, пропуск рядка) відділяють різні компоненти CSS такі як індивідуальні оголошення в блоці оголошень. Спосіб використання пропусків у даному курсі є лише одна з можливостей. Ви можете використовувати пропуски будь-яким способом, щоб краще організувати вміст і додати велику ясність вашим власним таблицям стилів. Наприклад, ви можете помістити всі оголошення, що відносяться до правила, в один рядок, замість того, щоб розміщувати кожне з них на окремому рядку, як це зроблено в прикладах.
Даний приклад таблиці стилів містить такі оголошення:

  • display:block. Вміщує порожній рядок перед і після тексту елемента;

  • margin-top:12pt. Додає верхнє поле висотою в 12 пт до тексту елемента;

  • font-size:10pt. Встановлює розмір шрифту, що використовується для відображення тексту елемента, в 10 пунктів;

  • font-style:italic. Відображує текст елемента курсивом;

  • font-weight:bold. Відображує текст елемента напівжирним шрифтом.

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


Р
Рисунок 17 – Відображення xml-даних за допомогою каскадних таблиць стилів
Набір властивостей, що використовувався в таблицях каскадних стилів, схожий на набір властивостей, які ви можете застосовувати в текстовому процесорі.

Спадкоємність установок властивостей


Набір властивостей, які ви привласнили певному елементу (наприклад, BOOK), діє на всі дочірні елементи, прямо або побічно вкладені в нього, якщо тільки вони не встановлюються знову згодом для певного дочірнього елемента.

Проте наступні властивості є виключеннями і не наслідуються дочірніми елементами:



  • властивість display;

  • властивості, що відносяться до фону (background-color, background-image, background-repeat і background-position );

  • властивість vertical-align;

  • властивості розміщення тексту.

Кожен елемент BOOK має п'ять дочірніх елементів. Оскільки властивість font-size є успадкованою, всі дочірні елементи усередині елемента BOOK відображуються з розміром шрифту в 10 пунктів. Проте дочірні елементи не успадковують установку властивостей display і margin-top (властивість margin-top відноситься до групи властивостей розміщення тексту).

Для неуспадкованих властивостей, якщо ви не задали значення властивості для конкретного елемента, браузер використовує значення властивості за замовчанням. Наприклад, значенням за замовчанням для властивості display буде inline .

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



Використання множинних елементів і множинних правил


Ви можете застосувати одне правило до декількох елементів, включивши всі імена елементів у селектор і відокремивши імена комами. Наприклад, наступне правило застосовується до типів елементів POEM, TITLE, AUTHOR, DATE і STANZA :
POEM, TITLE, AUTHOR, DATE, STANZA

{display:block;

margin-bottom:12pt}.

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

Ви також можете включити до певного типу елемента більше, ніж одне правило усередині тієї самої таблиці стилів. Наприклад, обидва правила включають елемент DATE :
POEM, TITLE, AUTHOR, DATE, STANZA

{display:block;

margin-bottom:12pt}

DATE


{font-style:italic}.

Перше правило містить оголошення, яке елемент DATE розділяє з іншими елементами в списку, тоді як друге правило здійснює додаткове налаштування для елемента DATE, а саме задає установку властивості, яка застосовується тільки до цього елемента.



Використання контекстуальних селекторів


У селекторі ви можете передувати імені елемента іменами одного або декількох елементів-предків (батьківський, батьківський плюс батьківський батька і так далі), і правило буде застосоване тільки до елементів з цим ім'ям, які є вкладеними так само. Селектор, який включає один або декілька елементів-предків, називається контекстуальним (contextual) селектором. Селектор, який не включає імен елементів-предків (подібно до тих, з якими ви мали справу в попередньому розділі), називається родовим (generic) селектором.

Якщо певна властивість для одного і того самого елемента має одну установку в правилі з контекстуальним селектором, і іншу установку в правилі з родовим селектором, установка в правилі з контекстуальним селектором домінує, оскільки є більш конкретизованою.

Припустимо, що наступний елемент є кореневим елементом XML-документа:




Santa Fe

New Mexico



California

.

Наступні правила в приєднуваній таблиці стилів змусять браузер відформатувати "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 пунктів:
</p> <p>The Adventures of Huckleberry Finn</p> <br /> <br />.

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

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


Ви можете скористатися директивою @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.my_domain.com/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 задає місцезнаходження файлу таблиці стилів:

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

href="http://www.my_domain.com/

Inventory01.css"?>.

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


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

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

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

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










.

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

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

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


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

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


Leaves of Grass


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






Santa Fe

New Mexico



California

.

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


CITY STATE

{font-style:normal}

STATE

{font-style:italic}



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

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

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

TITLE


{font-style:italic}

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

BOOK

{display:block;



margin-top:12pt;

font-size:10pt}

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

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



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

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

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

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

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

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


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

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

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

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

  5. Старигин А. XML. Разработка Web-приложений. - СПб.: BHV, 2003. – 585 с.
1   2   3   4   5   6   7   8


База даних захищена авторським правом ©lecture.in.ua 2016
звернутися до адміністрації

    Головна сторінка