Імпорт опису стилів

Імпорт описателей стилів у деякому змісті становить конкуренцію представленому вище вказівці на зовнішній описатель стилю.

Імпортувати стиль можна або усередину елемента STYLE, або усередину зовнішнього файлу, що являє собою описатель стилю. Оператор імпорту стилю повинен передувати всім прочим описателям стилів:

<STYLE>

@import:url(http://snu.edu.ua/style.css)

A { color:cyan;text-decoration:underline; }

</STYLE>

Імпортований стиль можна перевизначити або через описатель елемента в STYLE, або через атрибут елемента STYLE.

Синтаксис

Формально стиль відображення елементів розмітки задається посиланням в елементі розмітки на селектор стилю. Синтаксис опису стилів у загальному виді представляється в такий спосіб:

selector[, selector[, ...]]

       { attribute:value;

       [attribute:value;...] }

або

selector selector [selector ...]

        { attribute:value;

        [attribute:value;...] }

У першому варіанті перераховані селектори, для яких діє даний опис стилю. Другий варіант задає ієрархію вкладеності селекторів, для сукупності яких визначений стиль. Нагадаємо, що мова в цьому випадку йде про описи стилів у нотації text/css. Опису стилів розміщаються або усередині елемента STYLE, або в зовнішньому файлі.

Як селектор можна використовувати ім'я елемента розмітки, ім'я класу й ідентифікатор об'єкта на HTML-Сторінці.

Атрибут (attribute) визначає властивість відображуваного елемента, наприклад лівий відступ параграфа (margin-left), а значення (value) - значення цього атрибута, наприклад, 10 типографських пунктів (10 pt).

Селектор - ім'я елемента розмітки

Коли автор Web-Вузла хоче визначити загальний стиль всіх сторінок, він просто прописує стилі для всіх елементів HTML-Розмітки, які будуть використовуватися на сторінках. Це дає можливість скомпонувати сторінки з логічних елементів, а стиль відображення елементів описати в зовнішньому файлі.

Такий спосіб створення сайту дозволяє авторові змінювати зовнішній вигляд всіх сторінок шляхом внесення змін у файл опису стилів, а не у файли HTML-Сторінок.

Зовнішній файл при цьому може виглядати в такий спосіб:

I, EM {color:#003366;font-style:normal;}

A I {font-style:normal;font-weight:bold;

     text-decoration:line-through;}

У першому рядку цього опису перераховані селектори-елементи, які будуть відображатися однаково:

<I>Це курсив</I> і це теж <EM>курсив</EM>

Останній рядок визначає стиль відображення вкладеного в гіпертекстове посилання курсиву:

<A NAME=empty><I>intuit</I></A>

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

Селектор - ім'я класу

Ім'я класу не є яким-небудь стандартним ім'ям елемента HTML-Розмітки. Воно визначає опис класу елементів розмітки, які будуть відображатися однаково. Для того, щоб віднести елемент розмітки до того або іншого класу, потрібно скористатися його атрибутом CLASS:

<STYLE>

.test{color:white;background-color:black;}

</STYLE>

...

<P>

Цей параграф ми відобразимо білим кольором по

чорному тлу

</P>

...

<P>

Цю <A>гіпертекстове посилання</A>

ми відобразимо білим кольором по чорному тлу.

</P>

Рис. 8.2. 

У такий спосіб у будь-якому елементі розмітки можна послатися на опис класу відображення. При цьому зовсім необов'язково, щоб елементи розмітки були однотипними. У прикладі до одного класу віднесені й параграф, і гіпертекстове посилання в іншому параграфі.

Лідируючу крапку в ім'ї класу можна опустити. Вона задається з міркувань збереження єдності опису. Наприклад, можна визначити класи відображення однотипних елементів розмітки:

a.menu { color:red;background-color:white;

        text-decoration:none; }

a.paragraph { color:navy;

             text-decoration:underline; }

У даному прикладі клас гіпертекстових посилань menu має один опис стилю, а клас гіпертекстових посилань paragraph - зовсім інше. При цьому кожний із цих класів не можна застосувати до інших елементів розмітки, наприклад, параграфу або списку. Якщо ім'я елемента розмітки не задано, це означає, що клас можна віднести до будь-якого елемента розмітки - кореневий клас опису стилів. Це дуже схоже на позначення ім'я кореневого домена в системі доменних імен. Властиво нічого дивного тут ні, тому що система класів об'єктів на HTML-Сторінці являє собою дерево. Елементи розмітки - це вузли дерева.