Свойства таблиц стилей

http://www.w3.org/TR/1998/REC-CSS2/

Единицы Измерения

В тех случаях, когда значение свойства задается числовой величиной, могут быть использованы определенные единицы измерения.

Единицы длины	Сантиметры	Дюймы	Миллиметры	Пики	Пункты
cm	1	0.3937	10	2.3622	2833465
in	2.54	1	25.4	6	72
mm	0.1	0.0363	1	0.2362	2.8346
рс	0.4233	0.166	4.2333	1	12
pt	0.0352	0.0138	0.3527	0.0833	1

рх — пиксель, em – высота текущего шрифта элемента, ex – высота строчной буквы x текущего шрифта элемента.

Единицы времени: ms — миллисекунда, s — секунда.

Величины, заданные в процентах, обозначаются знаком %.

Шрифты

font-family

Значения: названия шрифтов, которые могут быть использованы на веб-странице; типы шрифтов: serif, sans-serif (без засечек), cursive, fantasy, monospace. Пример: <p style=”font-family: Arial, Helvetica, sans-serif”>

font-style

Стиль шрифта.

• normal — обычный;

• italic, oblique — курсив.

font-variant

Еще одно свойство для задания стиля шрифта. Значения:

• normal — обычный;

• small-caps — малые прописные.

Пример: Н2 {font-variant: small-caps}

font-weight

Толщина (“жирность”) символов шрифта.

Значения:

• normal — обычный (400);

• bold — полужирный (600 или 700);

• bolder — более жирный, чем в родительском элементе:

• lighter — менее жирный, чем в родительском элементе;

• 100, 200, 300, 400, 500, 600, 700, 800, 900 — допустимые числовые значения.

font-size

Размер шрифта. Значение:

• относительно размера шрифта браузера: xx-small, x-small, small, medium, large, x-large, xx-large

• относительно размера родительского шрифта: smaller, larger, % — значение, выраженное в процентах;

• абсолютное, выраженное в пунктах pt

Пример: <P style = "font-size: 16pt ">

font

Задание определенного шрифта применительно к конкретным задачам. Вид шрифта определяется настройками программы. В качестве значений могут использоваться величины свойств font-style, font-variant, font-weight, font-size, line-height, font-family. Другие значения:

• caption — шрифт для элементов управления (полужирный);

• icon — шрифт для пиктограмм;

• menu — шрифт для меню;

• messagebox — шрифт для окон диалога;

• smallcaption — шрифт для небольших элементов управления;

• statusbar — шрифт для строки состояния.

Текст

text-indent

Величина отступа первой строки абзаца. Значения: числа, %.

Пример: <P style = "text-indent: -3em">

text-align

Выравнивание текста. Значения:

• left — по левому краю;

• right — по правому краю;

• center — по центру;

• justify — по ширине.

text-decoration

Оформление текста. Значения:

• nоnе — без оформления;

• underline — подчеркивание;

• overline — черта сверху;

• line-through — перечеркивание;

• blink — мигание (не поддерживается некоторыми браузерами).

Пример: <P style = "text-decoration: underline overline">

text-shadow

Создание тени для букв. Значение свойства представляет собой список величин, которые определяют характеристики тени. Данное свойство не поддерживается большинством популярных браузеров.

Примеры:

Создание тени справа и снизу от букв: Н1 {text-shadow: Зрх Зрх}

Создание тени зеленого цвета справа и снизу и задание радиуса размытия (3 пикселя) тени: Р {text-shadow: 2px 2рх Зрх green}

letter-spacing

Задание межбуквенного интервала. Значения:

• normal — определяется браузером;

• числовые;

• auto — интервал изменяется так, чтобы текст уместился в одной строке. Не поддерживается рядом браузеров.

Пример: Н2 {letter-spacing: -.5pt}

line-height

Расстояние между базовыми линиями соседних строк текста. Значения:

• normal — определяется браузером (обычно лежит в пределах 1.0-1.2);

• числовое с указанием единиц измерения — абсолютное значение;

• число — размер шрифта (значение свойства font-size) умножается на эту ве­личину;

• процентное — по отношению к значению свойства font-size. Примеры:

{line-height: 1.2; font-size: 16pt} {line-height: 2em}

{line-height: 150%; font-size: 10pt}

vertical-align

Создание надстрочных и подстрочных индексов

• baseline (по умолчанию)

• sub – нижний индекс

• super – верхний индекс

word-spacing

Выбор расстояния между словами. Значения:

• normal — определяется браузером;

• числовые.

text-transform

Изменение вида букв. Значения:

• none — без изменения;

• capitalize — первая буква каждого слова прописная;

• uppercase — все буквы прописные;

• lowercase — все буквы строчные.

white-space

Определение вида пробелов. Значения:

• normal — автоматическое форматирование текста. Например, удаляются про­белы, следующие друг за другом;

• рге — текст остается без изменения (по аналогии с элементом PRE);

• nowrap — запрет на автоматический разрыв строк.

direction

Направление текста. Значения:

• ltr — слева направо;

• rtl — справа налево.

Списки

list-style-type

Определение вида маркеров в списке. Значения:

• nоnе — без маркеров;

• disc — круги;

• circle — окружности;

• square — квадраты;

• decimal — арабские цифры;

• lower-roman — римские цифры на основе строчных латинских букв;

• upper- roman — римские цифры на основе прописных латинских букв;

• lower-alpha — строчные латинские буквы (а, b, с...);

• upper-alpha — прописные латинские буквы (А, В, С...).

Пример: OL {list-style-type: lower-alpha}

list-style-image

Определение рисунка, который будет использоваться в качестве маркера. Значения:

• nоnе — рисунок не используется;

• адрес (URL) графического файла.

Пример: UL {list-style-image: url(marker.gif)}

list-style-position

Положение маркера относительно списка. Значения:

• inside — маркер внутри списка (компактная форма);

• outside — маркер вне списка.

list-style

Определяет вид маркеров. В качестве значения могут использоваться несколь­ко величин свойств list-style-type, list-style-position, list-style-image (пере­численных выше).

Пример: UL {list-style: circle outside}

Таблицы

display

Задает поведение элемента страницы. Значения:

• none – элемент не будет присутствовать на странице;

• inline — элемент страницы ведет себя как отдельный символ текста;

• block — элемент страницы ведет себя как абзац текста;

• list-item — элемент страницы ведет себя как пункт списка;

• marker — маркер списка;

• run-in — встраивающийся элемент. Становится первым символом блочного элемента или сам становится блочным элементом;

• compact — компактный элемент. Форматируется как однострочный встроенный элемент и помещается на левой границе блочного элемента или сам форматируется как блочный элемент;

• table — таблица (аналог элемента TABLE);

• table-caption — заголовок таблицы (аналог элемента CAPTION);

• table-column — колонка таблицы (аналог элемента COL);

• table-column-group — группа колонок (аналог элемента COLGROUP);

• table-row — строка таблицы (аналог элемента TR);

• table-row-group — группа строк (аналог элемента TBODY);

• table-header-group — группа строк в начале таблицы (аналог элемента THEAD);

• table-footer-group — группа строк в конце таблицы (аналог элемента TFOOT);

• table-cell — ячейка таблицы (аналог элемента TD);

row-span

Количество строк, которые должна занять ячейка.