Селектор - ідентифікатор об'єкта

Об'єктна модель документа (Document Object Model) описує документ як дерево об'єктів. Об'єктами є: сам документ, його розділи (елемент DIV), картинки, параграфи, додатки й т.п. Кожному з об'єктів можна дати ім'я й звертатися до нього по ім'ю. Дана можливість використовується при програмуванні сторінок на стороні клієнта.

Застосування ідентифікатора об'єкта виправдано ще й у випадку модифікації атрибута опису стилю для даного об'єкта в його CSS-Описі. Замість двох описів класів, які відрізняються тільки одним з параметрів, можна створити один опис класу й опис ідентифікатора об'єкта. Опис стилю для об'єкта задається рядком, у якій селектор являє собою ім'я цього об'єкта з лідируючим символом "#":

a.mainlink { color:darkred;

            text-decoration:underline;

            font-style:italic; }

#blue { color:#003366 }

...

<A CLASS=mainlink>основна гіпертекстова

посилання</A>

<A CLASS=mainlink ID=blue>модифікована

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

Слід зазначити, що інтерпретація ідентифікаторів об'єктів в Internet Explorer і Netscape Navigator різна. Існує ще атрибут name в елемента розмітки. При ідентифікації об'єкта Netscape Navigator звичайно має справа саме із цим атрибутом, а Internet Explorer - з атрибутом ID.

Розходження в інтерпретації ID у браузерах при декларативному використанні CSS не дуже страшні. Інша справа, якщо автор зважиться програмувати стилі, тобто змінювати значення атрибутів описателей стилів. У цьому випадку різниця об'єктних моделей документів в Netscape Navigator і Internet Explorer виявиться повною мірою. Фактично, прийде для кожного із браузерів розробляти зовсім різні сторінки.

Спадкування й перевизначення

Під час обговорення технічних специфікацій часто буває корисно добрати зміст назви. У назві прийнято точно визначати суть і призначення стандарту або специфікації. Опис стилів відображення елементів HTML-Розмітки звуться "Каскадні таблиці стилів". Зі словом "стилів" всі більш-менш зрозуміло. Під словом "таблиці" варто розуміти набір властивостей елемента розмітки, якому можна представити у вигляді рядка в таблиці властивостей, тобто елементи розмітки - рядка, а властивості - стовпці. А от слово "каскадні" вимагає пояснення.

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

 

Попередній текст закодований у термінах розділів і списку в такий спосіб:

<DIV STYLE="margin-left:10px;margin-top:10px;">

Це початок першого розділу, що зрушать

на 10 пикселов вправо щодо лівого

краю параграфа й на 10 пикселов долілиць

щодо стандартної границі параграфа.

<DIV STYLE="margin-left:10px;margin-top:20px;

text-indent:10px;font-style:italic;">

   Це початок другого розділу, що

  зрушать щодо попереднього розділу

  на 10 пикселов, а щодо параграфа -

  на 20 пикселов. Даний розділ має червону

  рядок з відступом в 10 пикселов і зміщений

  щодо попереднього розділу на 20

  пикселов.

<UL STYLE="margin-left:10px;">

<LI>перший елемент списку

<LI>другий елемент списку

</UL>

Список зрушать щодо другого розділу

на 10 пикселов, а щодо поточного

параграфа - на 30 пикселов. Перший рядок не

є рядком початку параграфа, тому на

її відступ не поширюється (тільки в

Netscape).

</DIV>

</DIV>

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

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

При використанні стилів діють наступні правила старшинства стилів:

Рис. 8.3.

спочатку застосовуються стилі браузера за замовчуванням;

1. стилі браузера за замовчуванням перевизначаються прилинкованими стилями (елемент LINK заголовка документа);

2. прилинковані стилі перевизначаються описами стилів в елементі STYLE;

3. стилі елемента STYLE перевизначаються атрибутом STYLE у кожному з елементів розмітки.

Не всі атрибути стилю можуть успадковуватися. Наприклад, "набивання" (відступ змісту елемента від його границь) елемента BODY не успадковуються вкладеними в нього елементами й визначається за замовчуванням або прописується для кожного елемента окремо. Алгоритми спадкування в різних броузерах різні, тому для єдності відображення елементів варто прописувати стиль по максимуму атрибутів.