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

Селектор CLASS дозволяє задати для одного й того ж елемента різні правила форматування.

Наприклад:

<!--

H1.red {color: red; }

H1.bluebgrd {color: red; background-color: blue}

-->

</STYLE>

Тут задано два правила форматування Н1. Перше позначається red і визначає червоний колір шрифту для Н1. Друге позначається bluebgrd і визначає червоний колір на синьому фоні для Н1.

У тексті документа посилання на відповідний клас задається у параметрі

CLASS:

<Н1 CLASS="red"> Червоний шрифт</Н1>

<Н1 CLASS="bluebgrd"> Червоний шрифт на синьому фоні</Н1>

Якщо клас повинен використовуватись для всіх елементів документа, то конкретний дескриптор не вказується:

.red {color: red; }

.bluebgrd {color: red; background-color: blue}

-->

</STYLE >

Тепер класи red і bluebgrd можна застосовувати до будь-яких елементів документа, що мають властивості, визначені у стилі.

Замість параметра CLASS можна використати параметр ІР. Параметр ID задає унікальне ім'я елемента, яке використовується для посилань на нього у сценаріях і таблицях стилів. Для цього перед ім'ям записується символ #.

Лістинг 1.25

<НТМL>

<HEAD>

<ТІТLЕ> Використання параметра ID</TITLE>

#red {color: red; }

#bluebgrd {color: red; background-color: blue}

-->

</STYLE >

</HEAD>

<BODY>

</BODY>

</HTML>

Тут, у новому абзаці, на що вказує дескриптор <Р>, текст 12345 буде відображено червоним кольором. Текст заголовка першого рівня буде відображено червоним кольором на синьому фоні. На це вказує рядок <Н1 ID=bluebgrd> 123456 </Н1>.

За допомогою контейнера <SPAN> можна перевизначити стиль фрагмента тексту всередині іншого стандартного контейнера.

Лістинг 1.26

<HTML>

<HEAD>

<TITLE> Використання контейнера SPAN </TITLE>

P { color: red;}

SPAN {color: yellow

</STYLE>

</HEAD>

<BODY>

<P> Текст червоного кольору

<SPAN>Teкст жовтого кoльopy</SPAN>

Знову текст червоного кольору

</Р>

</BODY>

</HTML>

У цьому прикладі для дескриптора <Р> визначено червоний колір символів. Але за допомогою контейнера <SPAN> перевизначили колір символів усередині <Р> на жовтий. Після закінчення дії контейнера <SPAN> колір символів знову буде червоним.

До одного документа можна приєднати декілька таблиць стилів, які утворюють «каскад» (тому таблиці стилів називають каскадними). Таблиці стилів мають такий пріоритет (від найменшого до найбільшого): зв'язана таблиця стилів; імпортована таблиця стилів; правило, селектором у якому є елемент HTML; правило, селектором у якому є параметр CLASS; правило, селектором у якому є параметр ID; вбудоване правило у HTML-дескриптор.