Приклад:
<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>
ВЛАСТИВОСТІ БЛОКІВ ТЕКСТУ
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 – ширина рамки.
Можливі значення: 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>
ПОЗИЦІОНУВАННЯ І ВІЗУАЛІЗАЦІЯ
Застосування позиціонування припускає використання ряду понять:
Обмежена область (блок) – невидима прямокутна область, визначена браузером. Таблиці стилів дозволяють управляти цією областю, встановлюючи її положення на сторінці з використанням абсолютних або відносних значень позиціонування.
Абсолютне позиціонування – технологія, що дозволяє задавати координати блоку щодо верхнього лівого кута браузера.
Відносне позиціонування – технологія, що дозволяє задавати координати блоку щодо зовнішнього блоку.
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:blue; 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>
Приклад:
<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 src="flower.gif" width=150 height=150 alt=flower border=1>
<img class="overflow" src="flower.gif" width=150 height=150 alt=flower>
</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>