КЛАСИ
Приклад:
<html>
<head><title>Web- документ</title>
<style type="text/css"> <!--
p.big
{
text-align:center; font-style:italic; font-size:50;
}
p.middle
{
text-align:left; color:green; font-size:40;
}
p.small
{
text-align:right; text-decoration:underline; font-size:30;
} -->
</style>
</head>
<body>
<b>Приклад<b/>
<p class="big">Великий абзац</p>
<p class="middle">Середній абзац</p>
<p class="small">Малий
абзац</p>
</body>
</html>
ІДЕНТИФІКАТОРИ
Ідентифікатори. Окрім класів стилі можна описувати з використанням ідентифікаторів (#id). Параметр id задає унікальне ім’я елемента, яке використовується для посилань на нього у сценаріях та таблицях стилів. Для цього перед ім’ям записується символ #.
Слід зауважити, що при використанні ідентифікаторів необхідно також застосовувати закриваючі теги, оскільки якщо залишити їх відкритими, можна абсолютно несподівано оформити текст, який знаходиться нижче, до якого слід було застосувати інший стиль.
Приклад
<html> <head><title>Web-документ</title> <style type="text/css">
<!-- #iddate
{ font-size:30; font-weight:bold; font-style:italic; color:black; }
#idivent
{ |
font-size:20; |
|
|
color:black; |
|
|
margin-left:30; |
} --> |
</style>
</head>
<body>
<b>Приклад<b/>
<p id="iddate">Дата написана одним шрифтом.</p> <p id="idivent">А подія - іншим.</p>
<p id="iddate">Зима.</p>
<p id="idivent">Святкування Нового року.</p> <p id="iddate">Літо.</p>
<p id="idivent">ВІДПОЧИВАТИ!!!</p> </body>
</html>
ТЕКСТОВІ ВЛАСТИВОСТІ
text-align – вирівнювання тексту.
Можливі значення: left – по лівому краю, right – по правому краю, сеnter – по центру, justify – з обох боків.
text-indent – відступ в першому рядку блоку (абзацу, розділу) із стандартними значеннями довжини (pt, px, cm, mm).
text-decoration – оформлення тексту підкресленням.
Можливі значення: none – відсутній (за умовчанням); underline – підкреслення; overline – лінія над текстом; line-through – перекреслювання; blink – мерехтіння.
text-transform – переведення букв у верхній або нижній регістр. Можливі значення: none – відсутній (за замовчанням);
capitalize – перша буква кожного слова стає прописною; uppercase – переводить всі букви у верхній регістр; lowercase – переводить всі букви в нижній регістр.
text-shadow –ефект затінювання тексту.
Можливі значення: none – відсутній (за замовчанням);
color left top radius – колір затінювання з відстанями зліва (справа), вниз (вгору) від тексту і радіусом нерізкості.
letter-spacing – відстань між символами тексту із стандартними значеннями довжини (pt, px, cm, mm, em,ex).
word-spacing – відстань між словами із стандартними значеннями довжини (pt, px, cm, mm).
Окрім стандартних одиниць вимірювання довжини px, pt (рівний 0,36 мм), mm, cm, може використовуватися em (1em рівний ширині букви m в шрифті, що використовується), ex (1ex рівний висоті шрифту), px (1px рівний ширині пікселя).
Приклад:
<html> <head><title>Web-документ</title> <style type="text/css">
<!—
p.class1
{
text-align:justify; text-indent:20pt; color:#c0c0c0; background-color:#000000;
}
.class2 { text-decoration:underline; }
.class3 { letter-spacing:5; }
.class4 { text-transform:uppercase; } -->
</style>
</head>
<body>
<b>Приклад</b>
<p class="class1">Текст абзацу вирівнюється з обох боків, має відступ першого рядка 20 пунктів і використовує білий колір символів на чорному фоні.</p>
<p>В тексті абзацу <span class="class2">використовується підкреслення, </span> <span class="class3"> збільшення відстані між символами</span>
<span class="class4">, а також переведення символів у верхній регістр.</span></p>
</body>
</html>
КОЛІР І ФОН
color – колір тексту – будь-яке значення, відповідне стандарту.
background-color – колір фону – будь-яке значення, відповідне стандарту.
background-image:URL("URL") – фонове зображення – будь-яке значення URL, відповідне стандарту.
background-repeat – напрям повторення фонового зображення.
Можливі значення: repeat – повторення по горизонталі і вертикалі (за замовчанням); repeat-x – повторення тільки по горизонталі; repeat-у – повторення тільки по вертикалі; no-repeat – відсутність повторення.
background-position – положення фонового зображення щодо верхнього лівого кута елемента, що містить його.
Можливі значення: відстань по горизонталі, відстань по вертикалі в стандартних одиницях довжини або в процентному співвідношенні. Значення 50% по горизонталі і 50% по вертикалі дає той, що розташовує фонового зображення по центру. Розміщення фонового зображення може бути також top – по верхньому краю; center – по центру; bottom – по нижньому краю; left
– по лівому краю; right – по правому краю.
background-attachment – прокрутка фонового зображення разом з документом.
Можливі значення: scroll – прокрутка (за замовчанням); fixed – фіксація зображення у вікні браузера.
Для опису відразу всіх параметрів фону можна використовувати властивість background: background-color background-image background-repeat background-attachment background- position
Приклад
<html> <head><title>Web-документ</title>
<style type="text/css">
<!--
body {background-color: pink;} p
{
color:#ffffcc;
background-image: url("64.jpg");
}
-->
</style>
</head>
<body>
<b>Приклад</b>
<p>Текст абзацу на фоні зображення, що повторюється по вертикалі і горизонталі. Фон для body -синій. Текст абзацу на фоні зображення, що
повторюється по вертикалі і горизонталі. Фон для body - синій. Текст
абзацу на фоні зображення, що повторюється по вертикалі і горизонталі. Фон для body - синій. Текст абзацу на фоні зображення, що повторюється
по вертикалі і горизонталі. Фон для body - синій. Текст абзацу на фоні
зображення, що повторюється по вертикалі і горизонталі. Фон для body - синій. Текст абзацу на фоні зображення, що повторюється по вертикалі і
горизонталі. Фон для body - синій. </p>
</body>
</html>
ШРИФТИ
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