Урок 12

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

Приклади: 


Для перекриття елементів можливо застосовувати особливі "хитрощі", як в прикладі імітації ефекту.
Існують спеціальні властивості для позиціювання, застосовуючи які можна легко встановити елементи в потрібні місця сторінки. При цьому елементи можуть накладатися один на одного.
Для позиціювання елементів на сторінці використовуються три властивості:
  • 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
Картинка : положення у тексті

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








Підписатися на: Дописи (Atom)