Материал: Лекція 9 CSS
5 Шрифти
font-family – сімейство шрифтів. Може бут`и декілька сімейств, відокремлених один від одного комами. Пріоритет визначається порядком в списку. Значенням може бути ім’я типового шрифту (serif/sans-serif/cursive/fantasy/monospace), а також шрифту, що належить одному з типів.
font-style – зображення шрифту. Можливі значення: normal – звичайне (за замовчанням); italic – курсив; oblique – похиле зображення.
font-variant – у вигляді малих прописних букв. Можливі значення: normal – звичайне (за умовчанням); small-caps – у вигляді малих прописних букв.
font-weight – товщина шрифту, що виводиться. Можливі значення: normal – звичайна (за замовчанням); bold – напівжирний; bolder – жирний; lighter – світлий; числові значення: 100 – світлий, 400 – звичайний, 700 – напівжирний, 900 – жирний.
font-size – висота символів (кегль). Значенням є будь-яка, відповідна стандартам висота або процентне значення, що визначає зменшення або збільшення у відсотках від кегля батьківського елемента. Значення абсолютного розміру можуть бути записані у вигляді ключових слів: xx-small – дуже малий; small – малий; medium – середній (за замовчанням); large – великий; x-large – дуже великий; xx-large – украй великий.
Значення відносного розміру можуть бути записані у вигляді ключових слів: larger – більше; smaller – менше.
Для опису відразу всіх параметрів шрифту можна використовувати властивість font: font-style font-variant font-weight font-size font-family
Приклад:
<html>
<head><title>Web-документ</title>
<style type="text/css">
<!--
body {font:italic bold 18pt impact;}
p1 {font: oblique xx-large impact;}
-->
</style>
</head>
<body>
<b>Приклад</b>
<p>Для виведення тексту абзацу застосований шрифт із зображенням italic, товщиною bold, розміром 18 пунктів і типом impact</p>
<p class="p1">Шрифт impact, oblique, xx-large</p>
</body>
</html>
6 Властивості блоків тексту
margin-top, margin-right, margin-bottom, margin-left – ширина верхнього, правого, нижнього і лівого поля. Значення за умовчанням – 0, значеннями є довжини, відповідні стандарту або процентне значення, що визначає відношення ширини поля до ширини елемента.
margin – ширина полів для всіх сторін елемента. У цієї властивості може бути від одного до чотирьох значень. Одне значення привласнюється всім полям, з двох значень перше привласнюється верхньому і нижньому полю, а друге – лівому і правому. При трьох: перше – верхньому полю, друге – лівому і правому, а третє – нижньому.
padding-top, padding-right, padding-bottom, padding-left – ширина проміжку між вмістом елемента і певною ділянкою його межі. Значення за умовчанням – 0, значеннями є довжини, відповідні стандарту або процентне значення, що визначає відношення ширини проміжку до ширини елемента.
padding – ширина проміжку для всіх сторін елемента. У цієї властивості може бути від одного до чотирьох значень. Одне значення привласнюється всім проміжкам, з двох значень перше привласнюється верхньому і нижньому проміжку, а друге – лівому і правому. При трьох: перше – верхньому полю, друге – лівому і правому, а третє – нижньому.
border – рамка. Для опису всіх властивостей рамки можна використовувати це конструкцію: border: border-width border-style border-color.
Властивостями є border-width (ширина рамки), border-style (стиль рамки) і border-color (колір рамки).
border-width – ширина рамки. Можливі значення: thin – тонка лінія; medium – середня (за умовчанням); thick – товста, а також стандартні значення ширини.
Можна також встановлювати значення ширини рамки для певної сторони. Для цього використовуються властивості: border-top-width, border-right-width, border-bottom-width, border-left-width з аналогічними значеннями.
border-style – стиль рамки. Можливі значення: none – відсутність (за умовчанням); hidden – прихована; dotted – пунктир; solid – суцільна; double – подвійна; dashed – штрих-пунктир; groove – подвійна борозна; ridge – гребінь; inset – врізка; outset – орнамент.
Можна також встановлювати значення стилю рамки для певної сторони. Для цього використовуються властивості: border-top-style, border-right-style, border-bottom-style, border-left-style.
border-color – колір рамки. Значенням є будь-хто, відповідний стандарту.
Можна також встановлювати значення кольору рамки для певної сторони. Для цього використовуються властивості: border-top-color, border-right-color, border-bottom-color, border-left-color.
Приклад:
<html>
<head><title>Web-документ</title>
<style type="text/css"><!--
P {
border: 10 double red;
margin: 50px 100px 100px 50px;
padding: 20px 20px 20px 20px
}
--></style>
</head>
<body>
<b>Приклад</b>
<p>Текст абзацу поміщений в подвійну рамку червоного кольору, завтовшки 10 пікселів. Встановлені поля шириною 100 пікселів справа і знизу і 50 пікселів зверху і зліва, а проміжок між текстом абзацу і рамкою встановлений 20 пікселів з усіх боків.</p>
</body>
</html>
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>