Урок 12

Позиціювання елементів веб-сторінки за допомогою стилів


Позиціонування елементів

Для перекриття елементів можливо застосовувати особливі "хитрощі", як в прикладі створення 3-D ефекту.

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

Для позиціонування елементів на сторінці використовуються три властивості:

  • left- для завдання відстані в пікселах від лівого краю вікна (х-координата);
  • top- для завдання відстані в пікселах від верхнього краю вікна (у-координата);
  • z-index- для вказівки порядку, в якому елементи будуть перекривати один одного; це новий вимір, елементи з великим z-індексом відображаються над елементами з меншим z-індексом.

Звичайно, при використанні цих трьох властивостей не створюється ефект тривимірного простору.


Крім властивостей-координат, для позиціонування елементів знадобиться властивість position. Ця властивість в поєднанні з властивостями left/top дозволяє встановлювати елементи в певні позиції вікна.


Властивість position може приймати три значення:

  • absolute- задані властивості left/top поставлять елемент в місце з координатами х і увідносно верхнього лівого кута контейнера (об'єкта, що містить даний елемент).Якщо вони визначені для елемента поза контейнера, то початком відліку координат буде верхній лівий кут сторінки.
  • relative- елемент буде встановлено відповідно до того, в якому місці вихідного тексту він знаходиться; це стандартне значення.
  • static- елемент буде поставлений в деякий стан щодо фону і не буде переміщатися при прокручуванні сторінки.

ПРИКЛАДИ:


Додатково:

Практична робота 3
«Створення веб-сторінки з використанням каскадних
 аркушів стилю»

Вариант 1


Відформатувати текст і картинки, використовуючи опис стилів:

Заголовок: колір – DarkGreen, розмір 40 пт, отступ 150 пікселів; тип шрифту Verdana
Основний текст: колір – Navy, розмір 45 пт, тип шрифту Arial
Картинка : положення у тексті


Вид документу:




Вариант 2


Відформатувати текст і картинки, використовуючи опис стилів:

Заголовок: колір  BlueVioletрозмір 48 пт, отступ 200 пікселів;  тип шрифту Tahoma
Основной текст:   колір Chocolateрозмір 34 пт,   тип шрифту Comic Sans MS
Картинка : положення у тексті

Вид документу:



Немає коментарів:

Дописати коментар