Основні теоретичні відомості

 

Застосування CSS до відображення HTML-документів засновано на правилах спадкування й каскадування.

Правила спадкування властивостей

HTML-документи мають ієрархічну структуру. У вершині цієї структури перебуває елемент HTML, що містить дочірні елементи HEAD і BODY. Ті, у свою чергу, включають елементи наступного рівня. Наприклад, елемент HEAD містить TITLE і STYLE, а елемент BODY включає Нх, Р, DIV, IMG і багато інших. Кожний з елементів Р або DIV може містити дочірні елементи (SPAN, IMG, I і т.ін..).

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

 

Селектори нащадків

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

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

Селектори нащадків призначені для зіставлення стильових правил HTML-елементам відповідно до порядку їхнього вкладання в батьківські елементи. Тобто селектор нащадків назначає стиль елементам з урахуванням їхнього розміщення в структурі документа.

Селектор нащадків складається з кількох селекторів типу. Наприклад, CSS-правило

TABLE TH BIG {color: blue}

призначає відображення синім шрифтом тільки тих елементів BIG, які розташовані в комірках заголовків (елементи ТН) таблиць (елементи TABLE). CSS-правило з селектором нащадків застосовується до елемента, що записаний останнім (правим) у селекторі.

 

Зауваження

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

 

Каскади стилів

Концепція каскадування, є ключовою в аркушах стилів. З цією концепцією пов’язана назва Cascading Style Sheets (каскадні аркуші стилів).

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

Наприклад, стилі заголовків Н2 можуть бути призначені чотирма джерелами:

· зовнішнім аркушем стилів із CSS-правилом;

· заголовним стилем із селектором типу;

· убудованим стилем;

· CSS-правилом із селектором нащадків.

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

Пріоритети стилів

Найбільш низьким пріоритетом володіє стиль браузера. За ним у порядку зростання пріоритету слідує стиль, заданий користувачем. Найбільш високий пріоритет задається розроблювачем Web-сторінок.

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

· Атрибут style. Властивості, що привласнюються атрибутом style, мають найвищий пріоритет. Властивості, задані за допомогою цього атрибута, скасовують будь-які призначення стилю за допомогою контейнера <STYLE> або зовнішнього аркуша стилів;

· Селектори нащадків. Пріоритет CSS-правил із селектором нащадків на один ступінь нижче, ніж у атрибута style. Якщо властивість елемента не встановлена атрибутом style, то для відображення цього елемента браузер застосує значення, задане CSS-правилом із селектором нащадків;

· Селектори типу. Селектори типу мають пріоритет на один ступінь нижче, ніж селектори нащадків. Якщо значення стилю не вказано ні селектором нащадків, ні атрибутом style, то браузер приймає значення, яке задане селектором типу;

· Наслідувані властивості. Наслідувані властивості мають пріоритет на три ступеня нижче, ніж у атрибута style. При відсутності значення, яке об’явлене селектором типу, для відображення елемента браузер застосує властивість і її значення, які задані для найближчого елемента-предка. Це справедливо тільки для властивостей, які наслідуються;

· Початкові значення. Найнижчим рівнем пріоритету володіють початкові значення (прийняті за замовчуванням).

Якщо конфліктуючі значення встановлюються різними CSS-правилами з однаковим пріоритетом, то до елемента буде застосований стиль, що зазначений останнім в аркуші стилів.

Таким чином, концепція каскадування полягає в застосуванні значень властивостей відповідно пріоритету джерела стилів. Для відображення елемента браузер вибирає те значення властивості, яке відповідає більш конкретизованому (локальному) CSS-правилу.