ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 14.04.2024
Просмотров: 20
Скачиваний: 0
7 Позиціонування і візуалізація
Застосування позиціонування припускає використання ряду понять:
Обмежена область (блок) – невидима прямокутна область, визначена браузером. Таблиці стилів дозволяють управляти цією областю, встановлюючи її положення на сторінці з використанням абсолютних або відносних значень позиціонування.
Абсолютне позиціонування – технологія, що дозволяє задавати координати блоку щодо верхнього лівого кута браузера.
Відносне позиціонування – технологія, що дозволяє задавати координати блоку щодо зовнішнього блоку.
position – метод позиціонування блоку, за умовчанням має значення static, іншими значеннями є absolute (абсолютне) і relative (відносне) позиціонування, а також значення – fixed, при якому позиціонування блоку є зміщенням, як у разі абсолютного позиціонування, але блок фіксується у вікні браузера і не переміщається при прокрутці вікна.
top – величина зміщення вниз (вгору) щодо точки відліку, left (ліворуч, праворуч). Значеннями є будь-які, відповідні стандарту довжини, а також процентне значення: відношення у процентах довжини зміщення до ширини (висоти) блоку.
width – ширина блоку. Значеннями є будь-які, відповідні стандарту довжини, а також процентне значення: відношення у процентах довжини зміщення до ширини вікна.
height – висота блоку. Значеннями є будь-які, відповідні стандарту довжини, а також процентне значення: відношення у процентах довжини зміщення до висоти вікна.
z-index – z-индекс визначає порядок розташовує блоків. Значеннями є цілі числа (позитивні і негативні), причому блоки з великими значеннями z-индекса з’являтимуться над блоками з меншими значеннями.
visibility – видимість. Визначає, чи є елемент видимим – visible або прихованим – hidden.
overflow – управління переповнюванням. Має три значення: visible – елемент видимий; hidden – частина, що перекривається, відсікається; scroll – використовується механізм прокрутки для візуалізації елемента.
clip: rect (top right bottom left) – відсікання. Визначає вирізувані області. Вирізувана область визначається значеннями зміщення відповідно зверху, праворуч, знизу і ліворуч.
Приклад:
<html>
<head><title>Web-документ</title>
<style type="text/css">
<!--
.revers {font-weight:bold; color:white; text-align:сеnter;}
.bluetext {font-weight:bold; color:darkblue; text-align: justify; margin:20;}
-->
</style>
</head>
<body>
<b>Приклад</b>
<!--вертикальний шар-->
<div style="position:absolute; top:0; left:250; width:200; height:300;background:'deeppink'">
<img src="p1.gif" style="position: relative; top:20; left:25;">
<p class="revers">ЗАО Повітряний шар</p>
</div>
<!--горизонтальний шар-->
<div style="position:absolute; top:150; left:10; width:400; height:90; background:'mistyrose' ">
<p class="bluetext">Шар кольору mistyrose з абзацом лежить поверх правої колонки (шару кольору deeppink) з логотипом. Логотип позиціонується відносно шару, що його містить.</p>
</div>
</body>
</html>
В прикладі показано використання абсолютного позиціонування для відображення двох шарів. Вертикальний шар кольору deeppink містить логотип деякого гіпотетичного ЗАТ, який позиціонується відносно шару, що його містить, а також текст «ЗАТ Повітряна куля», що має оформлення, описане в класі "revers".
Горизонтальний шар кольору mistyrose розташований поверх вертикального і містить текст, оформлений згідно стилю bluetext.
Приклад, який наведений нижче, демонструє використовування властивості z-index, яка дозволяє задати порядок (рівень) розташовує елемента. Дескриптор <div> використовується для визначення властивостей шару. Він є контейнерним елементом і дозволяє застосувати позиціонування і z-index для одного або декількох елементів, що містяться в ньому.
В прикладі на Web-сторінці виводиться текст і шар <div> червоного кольору.
Приклад:
<head><title>Web-документ</title>
<style type="text/css">
<!--
.div_layer {background-color:#a9a9a9; position:absolute; left:80; width:120; height:100; visibility:visible;}
.div_text {color:blue; position:absolute;left:50; width:350; height:100; font-size:24;}
-->
</style>
</head>
<body>
<b>Приклад</b>
<body>
<div class="div_layer" style="top:50; z-index:1;">
</div>
<div class="div_text" style="top:50;">Наша Таня громко плачет...(Приклад використання шарів)</div>
<div class="div_layer" style="top:200; z-index:-1;">
</div>
<div class="div_text" style="top:200;">Наша Таня громко плачет...(Приклад використання шарів)</div>
</body>
</html>
Властивості шару сірого кольору і шару тексту описані за допомогою відповідних класів в розділі опису стилів (<style>). У верхній частині прикладу z-index сірого шару позитивний (рівний 1), тоді як текст має за умовчанням z-index рівний 0. В результаті шар тексту знаходиться на задньому плані, а сірий шар – на передньому плані.
В нижній частині прикладу z-index сірого шару негативний (рівний –1), а текст лежить в нульовому шарі. При цьому текст виявляється на передньому плані, а сірий шар – за текстом.
В наступному прикладі демонструється ефект, завдяки якому можна управляти представленням інформації в межах обмеженої області. Обмежена область менше ніж зображення, а переповнювання приховано. Таким чином, зображення вписується в обмежену область. Звичайне зображення поміщено вище за область з переповнюванням і оточено тонкою рамкою, а область з переповнюванням – рамкою з більшою товщиною.
Приклад:
<html>
<head><title>Web-документ</title></head>
<style type="text/css">
<!--
.overflow
{
position: absolute; top:190;left: 50;
width:80;
height:80;
border:2 solid black;
overflow:hidden;
}
-->
</style>
</head>
<body>
<b>Приклад</b><br><br>
<img class="overflow" src="flower.gif" width=150 height=150 alt=flower>
<img src="flower.gif" width=150 height=150 alt=flower border=1>
</body>
</html>
Приклад:
<html>
<head><title>Web-документ</title>
<style type="text/css">
<!--
.clip
{
position: absolute; top:50;
left: 230;
width:150;
height:150;
color:yellow;
background-color:black;
clip:rect(25px 125px 125px 25px);
}
.clip1
{
position: absolute; top:50;
left: 30;
width:150;
height:150;
color:yellow;
background-color:black;
}
-->
</style>
</head>
<body>
<b>Приклад</b>
<div class="clip1">Текста абзацу обрізатиме за допомогою відсікання, застосованого до даної квадратної області розміром 150 на 150 пікселів.</div>
<div class="clip">Текста абзацу обрізатиме за допомогою відсікання, застосованого до даної квадратної області розміром 150 на 150 пікселів.</div>
</body>
</html>
В прикладі використаний клас clip1, який описує текст, поміщений в квадратну область, описану дескриптором <div>. Клас clip забезпечує вживання до цієї області відсікання (зверху і ліворуч на 25 пікселів, а знизу і праворуч на 125 пікселів).
КОНТРОЛЬНІ ПИТАННЯ
-
Що таке каскадна таблиця стилів?
-
Які є способи застосування каскадних таблиць стилів?
-
Як застосовуються таблиці стилів з використанням класів та ідентифікаторів?
-
Назвіть властивості каскадних таблиць стилів.
Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.
Как и при использовании других блочных элементов, содержимое тега <div> всегда начинается с новой строки. После него также добавляется перенос строки.
Синтаксис <div>...</div>
Атрибуты
align Задает выравнивание содержимого тега <div>.
title Добавляет всплывающую подсказку к содержимому.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег Обязателен.