Лабораторна робота №10 Спадкування й каскадуванния. Візуальні ефекти

Мета: отримати уявлення про правила спадкування та каскадування в HTML-документі. Навчитися використовувати візуальні ефекти при створенні HTML-документів.

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

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

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

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

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

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

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

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

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

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

TABLE TH BIG {color: blue}

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

Зауваження

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

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

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

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

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

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

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

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

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

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