Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Лабораторна робота №3
ТЕМА: Позиціонування елементів.
МЕТА: Навчитись використовувати абсолютне та відносне позиціонування елементів засобами CSS.
Основні теоретичні відомості
Згідно з концепцією мови розмітки HTML, всі елементи документа виводяться браузером у тій послідовності, у якій розміщені тегові конструкції в коді.
CSS (рівень 2) дозволяє задавати порядок і послідовність відображення тих або інших HTML-елементів залежно від певних подій на сторінці або маніпуляцій, здійснюваних зі сторони користувача. Інакше кажучи, за допомогою засобів CSS можна вдатися до позиціонування (просторового розташування) необхідних об'єктів в межах електронного документа.
Існують два типи візуального позиціювання елементів: абсолютне і відносне. Для опису кожного типу використаються специальні властивості position, top і left.
Довідник властивостей, що застосовуються при позиціонуванні елементів на веб-сторінках.
position
Спосіб визначення координат границь елемента.
Значення:
• normal — положення елемента визначається броузером;
• relative - спочатку обчислюється звичайне положення елемента, потім розраховується зсув щодо цього положення;
• absolute - координати обчислюються щодо границь контейнера, що містить елемент;
• fixed - координати обчислюються щодо границь контейнера, що містить елемент, і забороняється прокручування.
top, bottom, right, left
Координати верхньої, нижньої, правої й лівої границь елемента.
Значення:
• auto — визначається броузером;
• числове;
• процентне.
margin-top, margin-right, margin-bottom, margin-left
Розмір порожнього простору поруч із певною стороною елемента.
Значення:
• auto — визначається броузером;
• числове;
• процентне.
margin
Величина відступів навколо елемента.
Значення:
• auto — визначається броузером;
• числове;
• процентне.
Приклад:
Р { margin: 12px 12рх 12рх 12рх }
padding-top, padding-right, padding-bottom,
padding-left
Величина відступу між зазначеною границею елемента і його вмістом.
Значення:
• auto - визначається броузером;
• числове;
• процентне.
padding
Величина відступу між границями елемента і його вмістом.
Значення:
• auto - визначається броузером;
• числове;
• процентне.
Приклад:
OL { padding: 4px 4рх 4рх 4рх }
border-top-width, border-right-width,
border-bottom-width, border-left-width
Ширина елементів рамки.
Значення:
• thin - тонка;
• medium - середня;
• thick - широка;
• числове.
border-width
Товщина рамки.
Значення:
• thin - тонка;
• medium - середня;
• thick - широка;
• числове.
border-top-color, border-right-color,
border-bottom-color, border-left-color
Кольори елементів рамки.
border-color
Кольори рамки.
border-top-style, border-right-style, border-bottomstyle,
border-left-style
Вид елементів рамки.
Значення:
• none або hidden - рамка не показана;
• dotted - рамка із крапок;
• dashed - пунктирна рамка;
• solid - суцільна рамка;
• double - подвійна рамка;
• groove - двогранна рамка;
• ridge - така ж, як groove, але світлої й темної грані розташовані інакше;
• inset - одна грань, нахилена усередину;
• outset - така ж, як inset, але світло падає по-іншому.
border-style
Вид рамки.
Значення такі ж, як й у попередніх властивостей.
border-top
Одночасне завдання значень властивостей border - top - width , border - top - style ,
border-top-color.
Приклад:
Н1 { border-top: thin solid blue }
border-bottom
Одночасне завдання значень властивостей border-bottom-width, border-bottom-style і border-bottom-color.
border-left
Одночасне завдання значень властивостей border - left - width , border - left - style i border-left-color.
border-right
Одночасне завдання значень властивостей border-right-width, border-right-style і border-right-color.
border
Одночасне завдання значень властивостей border-width, border-style п border-color.
Приклад:
Р { border: medium double red }
overflow
Спосіб зміни розмірів об'єкта, якщо його вміст не може бути показу-
але цілком.
Значення:
• auto — визначається броузером;
• visible - розмір границь збільшується в такому ступені, щоб уміст
було видимим;
• hidden - розміри границь не встановлюються залежно від розмірів вмісту;
• scroll - установлюється режим прокручування.
float
Спосіб обтікання елемента іншими.
Значення:
• none — обтікання немає;
• left - ліворуч;
• right - праворуч.
Приклад:
IMG { float: left }
clear
Спосіб розташування елементів, що випливають за елементом, вирівняним по лівому або правому краю.
Значення: none, left, right, both.
clip
Визначення видимої частини об'єкта.
Значення:
• auto — визначається броузером;
• прямокутник, «вырезающий» частина об'єкта.
Приклад:
Р { clip: rect(5px, 10рх, 10рх, 5рх); }
visibility
Видимість або невидимість об'єкта.
Значення:
• visible — видимий;
• hidden - невидимий.
z-index
Спосіб перекриття об'єктів іншими. Об'єкт, що має більше значення індекса, розташовується вище.
Значення:
• auto — «нульовий рівень», що задає за замовчуванням;
• негативне числове - об'єкт розташовується «нижче» нульового рівня;
• позитивне числове - об'єкт розташовується «вище» нульового рівня.
Завдання
Створити веб-сторінку, згідно з макетом варіанту.
Сторінка повинна містити обов’язкові елементи:
1. заголовок з тінню або обводкою;
2. гіперпосилання у вигляді об’ємного тексту;
3. елементи дизайну згідно з зразком відповідно до варіанту, реалізований засобами СSS (не вставкою картинки).