Лекции.Орг


Поиск:




Категории:

Астрономия
Биология
География
Другие языки
Интернет
Информатика
История
Культура
Литература
Логика
Математика
Медицина
Механика
Охрана труда
Педагогика
Политика
Право
Психология
Религия
Риторика
Социология
Спорт
Строительство
Технология
Транспорт
Физика
Философия
Финансы
Химия
Экология
Экономика
Электроника

 

 

 

 


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




 

Ім'я Значення Примітка
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 }.

 





Поделиться с друзьями:


Дата добавления: 2016-03-26; Мы поможем в написании ваших работ!; просмотров: 433 | Нарушение авторских прав


Поиск на сайте:

Лучшие изречения:

Жизнь - это то, что с тобой происходит, пока ты строишь планы. © Джон Леннон
==> читать все изречения...

2255 - | 2026 -


© 2015-2024 lektsii.org - Контакты - Последнее добавление

Ген: 0.006 с.