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>
