Властивості області розміщення елемента

 

Ім'я Значення Примітка
Margin <число><розмірність > або <число>% або auto Розмірність – px , in, cm , mm, pc пікселі, дюйми, см, мм, пункти. Наприклад, 25mm; % від базового розміру
Padding
Border-width
Border-color   Black, coral, orange, і так далі або через rgb   #rrggbb (наприклад, #00cc00 ) rgb(x,x,x), де х=0...255, rgb(x%,x%,x%), де х=0.0...100.0
Border-style   None, dotted, dashed, solid, double, groove, ridge, inset, outset Різні варіанти рамок: відсутня, пунктирна, штрихова і так далі

 

 

До пункту 3.

Рядкові елементі (display= inline) відображається як вбудований в рядок, вміст елементів починається з того місця, де закінчився попередній.

До елементів із значенням list-item можна додавати таки властивості (таблиця 11).

Таблиця 11

Таблиця властивостей елементів з display=list-item

Ім'я Значення Примітка
list-style <набір значень> узагальнена властивість
list-style-image url ("шлях"), none зображення маркера
list-style-position outside, inside розміщення маркера
list-style-type disc, circle, square ... вид маркера

 

До пункту 4.

При форматуванні тексту можна керувати, як відображенням літер (таблиця 12), так і тексту в целому (таблиця 13).

Таблиця 12

Властивості шрифтів

Ім'я Значення Примітка
font <набір значень> узагальнена властивість
font-family <список імен> список імен шрифтів або сімейств
font-size число, число %, число і ед. изм., xx-small, x-small, small .... розмір шрифту
font-style normal, italic, oblique зображення шрифту
font-variant normal, small-caps представлення рядкових букв
font-weight normal, bold, bolder, lighter, 100, 200 ... насиченість шрифту

 

Таблиця 13

Властивості тексту

Ім'я Значення Примітка
letter-spacing <число>, normal інтервал між символами
line-height <число>, <число>%, normal міжрядковий інтервал
text-align left, right, center, justify горизонтальне вирівнювання
text-decoration none, underline, overline, line-through, blink варіант оформлення
text-indent <число>, <число>% відступ першого рядка
vertical-align baseline, sub, super, top-text, top, middle, bottom, bottom-text, <число>% вирівнювання по вертикалі щодо батька або навколишнього тексту
word-spacing <число>, normal інтервал між словами

 

До пункту 5.

Класовий селектор складається з імені тега і імені класу, з'еднаних крапкою. Наприклад, для тегу <H1 CLASS="bl">TEXT</H1> можуть бути:

H1.bl {color:blue; size:20pt}

.bl {color:blue}
ID селектор починається з символу #. Наприклад, для тегу <H1 ID="rd">TEXT</H1>:

#rd {color:blue; size:20pt}

У тегі обидва атрибути (CLASS і ID) можуть використовуватися одночасно, довизначаючи стиль елементу.

Контекстні селекторискладаються з простих селекторів, розділених пропуском (всі описувані до цього селектори були простими селекторами). Вони застосовуються до елементів, зв'язаних спадковими стосунками і задають властивості тільки конкретного дочірнього елементу.

OL LI {list-style-type: decimal}

UL LI { list-style-type: square}

При використанні таких правил елементи в нумерованому списку (OL) матимуть один стиль, а в ненумерованому (UL) – інший.

Контекстні селектори можуть містити тип елементу, атрибути CLASS, атрибути ID або їх комбінацію:

DIV P { font: small sans-serif }

.reddish H1 { color: red }

#x78y CODE { background: blue }

DIV.sidenote H1 { font-size: large }

Псевдокласи розрізняють типи одного елементу (наприклад, посилання в різних станах, активна, вже відвідувалася, ще не відвідувалася), створюючи при визначенні власні стилі для кожного з них. Наприклад, псевдокласи елементу <а href=" "> :

link (посилання), active (активне посилання), visited (відвіданий раніше URL), hover (псевдоклас, що виникає при тому, що піднесло курсору до посилання).

a:link,a:visited {color:blue} - відвіданий раніше URL

a:active {color:red} - активне посилання

a:hover {text-decoration:none} - псевдоклас, що виникає при наведенні курсору до посилання.

Псевдоелементи є частями інших елементів, задаючи цим частинам відмінний від елементу в цілому стиль (наприклад, перший рядок в абзаці або перша літера рядка):

P:first-line {color: purple }

H1:first-letter { color: red }.