Файл: Лекція 9 CSS.doc

Обмежена область (блок) – невидима прямокутна область, визначена браузером. Таблиці стилів дозволяють управляти цією областю, встановлюючи її положення на сторінці з використанням абсолютних або відносних значень позиціонування.

Абсолютне позиціонування – технологія, що дозволяє задавати координати блоку щодо верхнього лівого кута браузера.

Відносне позиціонування – технологія, що дозволяє задавати координати блоку щодо зовнішнього блоку.

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>

<!--

.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>

<p class="revers">ЗАО Повітряний шар</p>

</div>

<p class="bluetext">Шар кольору mistyrose з абзацом лежить поверх правої колонки (шару кольору deeppink) з логотипом. Логотип позиціонується відносно шару, що його містить.</p>

</div>

</body>

</html>

В прикладі показано використання абсолютного позиціонування для відображення двох шарів. Вертикальний шар кольору deeppink містить логотип деякого гіпотетичного ЗАТ, який позиціонується відносно шару, що його містить, а також текст «ЗАТ Повітряна куля», що має оформлення, описане в класі "revers".

Горизонтальний шар кольору mistyrose розташований поверх вертикального і містить текст, оформлений згідно стилю bluetext.

Приклад, який наведений нижче, демонструє використовування властивості z-index, яка дозволяє задати порядок (рівень) розташовує елемента. Дескриптор <div> використовується для визначення властивостей шару. Він є контейнерним елементом і дозволяє застосувати позиціонування і z-index для одного або декількох елементів, що містяться в ньому.

В прикладі на Web-сторінці виводиться текст і шар <div> червоного кольору.

Приклад:

<head><title>Web-документ</title>

<!--

.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>

<div class="div_text" style="top:50;">Наша Таня громко плачет...(Приклад використання шарів)</div>

</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>

<!--

.overflow

{

position: absolute; top:190;left: 50;

width:80;

height:80;

border:2 solid black;

overflow:hidden;

}

-->

</style>

</head>

<body>

<b>Приклад</b><br><br>

</body>

</html>

Приклад:

<html>

<head><title>Web-документ</title>

<!--

.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>