6. Види селекторів

У специфікаціях CSS визначено кілька видів селекторів.

1. Селектори типу.

Селектор типу встановлює відповідність між визначенням стилю й типом HTML-елементів, до яких цей стиль буде застосований. Наприклад, CSS-правило

Р{ font-family:arial; font-size:14pt}

використовує селектор типу й задає шрифт для всіх абзацних блоків HTML.

2.Селектори класу

HTML-елемент або група елементів, оформлених одним стилем, утворюють клас. Наприклад, елементи заголовків другого рівня, які однаково відформатовано, становлять клас.

Клас може позначатися так само, як і тип HTML-елемента, наприклад, абзаци документа утворюють клас Р. Однак частіше класу привласнюється формальне ім'я, що надалі буде пов'язане з певним набором стильових властивостей. Наприклад, клас із ім'ям blue:

HI.blue {color: blue}

Ім'я класу відділяється від імені елемента крапкою. Тому самому класу можуть належати різнотипні HTML-елементи. Для цього в список стилів вводиться CSS-правило із крапкою перед ім'ям класу, але без указівки назви елементів, наприклад,

.bgyellow { background-color: yellow}

Селектор . bgyellow позначає клас, а вираз у фігурних дужках - визначення стилю, що буде ставитися до будь-якого елемента класу bgyellow. Належність HTML-елемента цьому класу повинна бути зазначена в атрибуті class, наприклад:

<DIV class="bgyellow">

<Р class="bgyellow">

<SPAN class="bgyellow">

Селектори, що ставляться до будь-якого елемента документа, у специфікації CSS2 прийнято називати універсальними селекторами.

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

Всі елементи з атрибутом class, наявні в документі, будуть відображені із застосуванням стилю, що задається селектором класу.

3. Селектори id

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

Наприклад:

#red {color: FF0000}

Потрібний елемент абзацу повинен містити однойменне значення атрибута id:

<Р id="red"> Цей абзац буде відображений червоним шрифтом </Р>

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

Ознакою селектора id є символ «#» перед ім'ям. Селектор id застосовується в межах тіла документа body для завдання індивідуального стилю оформлення конкретного елемента. У цьому складається його відмінність від селектора класу.

Зверніть увагу, що значення атрибутів class і id у тегах HTML записуються в одинарних ( ' ) або подвійних лапках ( " ). Селектор класу й селектор id в аркуші стилів указуються без лапок.

Стильові властивості

1. Значення властивостей

У визначенні стилю вказуються найменування властивостей і їх значення (числові й символьні).

Числові значення застосовуються для завдання розмірів, наприклад, ширини й висоти блоку, розміру шрифту, товщини рамки, міжрядкових інтервалів і т.д. Значення виражається десятковим числом, за яким звичайно слідує розмірність. Розмірність записується після числа без додаткового пробілу, наприклад, 8pt, lcm, 2.5in, 130%. У випадку негативного значення перед числом ставиться знак мінус (наприклад, -15рх).

Числові значення можуть виражатися в абсолютних або відносних одиницях:

• абсолютні значення задають точний розмір елемента й приводяться в стандартних одиницях виміру довжини;

• відносні значення визначають розмір елемента щодо іншого елемента. Наприклад, ширина зображення може виражатися у відсотках щодо ширини блоку, у який вкладений малюнок, або щодо розміру вікна браузера. Міжсимвольний інтервал часто задається в одиницях em ширини символу основного шрифту (букви «m»).

Одиниці виміру значень властивостей подані в таблиці 1.

Табл. 1. Одиниці виміру значень властивостей

Умовне позначення	Найменування одиниці виміру	Приклад
Абсолютні одиниці
in	дюйм	width: .25in
cm	сантиметр	height: 1.5cm
mm	міліметр	margin-left: 12mm
pt	пункт (1pt = 1/72in)	font-size: 16pt
pc	пік (1pc = 12pt)	line- height: 1.2pc
Відносні одиниці
px	піксел	left: 200px
em	ширина букви «m»	letter-spacing: 0.3em
ex	висота букви «m»	font-size: 2ex
%^	процент	width: 150%

Символьні значення складаються з букв латинського алфавіту або з комбінацій букв, цифр і спеціальних символів. Форма запису визначається стандартом CSS. Символьні значення привласнюються багатьом стильовим властивостям, наприклад, властивостям шрифтів font-family (гарнітура шрифту) і font-style (стиль виводу шрифту), властивості тексту text-align (вирівнювання). Іншим прикладом використання символьних значень є властивості кольору color і background-color, значення яких задаються в символьному форматі RGB-моделі.

У CSS для опису кольору застосовуються й інші формати RGB-моделі, які не підтримуються в HTML: десятковий формат (наприклад, rgb (128,0,128)) і процентний формат (наприклад, rgb(50%,0,50%)).