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

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

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

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

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

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

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

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

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

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

5. Шари й позиціонування елементів

Вирішити задачу компонування складних сторінок стало можливим із розробкою специфікації CSS, у якій передбачені можливості позиціонування елементів.

Якщо елементом, що позиціонується є DIV, то можна говорити про окремий шар у документі. Пов’язано це з тим, що елемент DIV може розміщатися на сторінці незалежно від інших елементів, перекриваючись із ними. Складається враження, що вміст елемента DIV (текст, малюнки) розташовується як би в окремому шарі документа.

Зауваження

У браузері Internet Explorer шари реалізуються за допомогою елементів div. У браузері Netscape для шарів передбачені спеціальні елементи layer і Ilayer. Останні мають атрибути, що допускають абсолютне позиціонування, тобто розміщення шарів відповідно до певних координат.

Властивість position

Звичайно елементи Web-Сторінки позиціонуються щодо попередніх елементів у коді HTML. Властивість position дозволяє виконувати позиціонування елемента незалежно від попереднього коду (окремо від потоку документа). Специфікацією CSS передбачені наступні три значення для position:

• static - відповідає розміщенню об'єктів у тому порядку, у якому вони зустрічаються в коді документа (за замовчуванням);

• absolute - елемент з цим значенням властивості position міститься у видиму область, а сама область має певні координати, які не залежать від розташування інших елементів. Разом із переміщенням видимої області переміщається й змістовна частина. Якщо всередині видимої області який-небудь елемент одержує координати, що виходять за межі області, то цей елемент не показується;

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

Координати видимої області задаються за допомогою звичайних декартових координат. Початком координат для абсолютно позиціонованого елемента є верхній лівий кут документа. Тому координати (х, у) елемента виражаються значеннями властивостей left і top відповідно. Пара значень (0,0) відповідає розташуванню елемента на початку координат. Збільшення значення х зміщає елемент вправо вздовж осі абсцис, а збільшення у — означає зсув униз уздовж осі ординат.

Значення координат left і top можуть виражатися в припустимих для аркушів стилів величинах:

• у пікселях;

• у пунктах;

• у відсотках, причому відсотки обчислюються щодо ширини, width, і висоти, height, батьківського елемента (якщо для батьківського елемента зазначений розмір, скажімо, width: auto, то не можна користуватися процентним вираженням для величини left дочірнього елемента).

Якщо визначення властивостей left і top відсутній, то елемент розташовується в потоці документа, тобто він перебуває в тому місці сторінки, як і при відсутності властивості position.

Абсолютне й відносне позиціонування (значення absolute і relative)

Для збереження пропорцій ширини й висоти елемента досить вказати тільки одну із властивостей width і height або вказати значення однієї властивості, а для іншої записати значення auto.

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

Style="position:absolute; left:250; top:100; width:160"

style="nposition:absolute; left:35pt; top:80pt; height:20%"

Частіше стильова властивість position застосовується в аркушах стилів CSS, а не в окремих елементах.

Розглянемо ще один приклад - задачу відносного позиціонування елемента <IMG>. Нехай малюнок включений усередину блоку <DIV>, і потрібно задати розташування малюнка в цьому блоці. Будемо вважати, що зовнішній елемент <DIV> має ширину 520 пікселів і зміщений щодо робочої області вікна браузера на вектор (100, 50). Далі нехай малюнок зміщений відносно <DIV> на величину (0 , 50). Запишемо перераховані умови мовою CSS і оформимо документ у вигляді:

<HTML>

<HEAD>

<TITLE>Позиціонування елементів</TITLE>

</HEAD>

<BODY>

<DIV style=" text-align:justify; position:absolute; left:100; top:50; width:520; background:lightcyan" > Перевірка роботи позиціонування.

<IMG src="back.gif" style="position:relative; left:0; top:70">

</DIV>

</BODY>

</HTML>

Позиція малюнка обчислюється щодо останнього символу тексту. Міжрядкова відстань для останнього рядка браузер збільшує відповідно до висоти малюнка.