Свойства таблиц стилей
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
Количество строк, которые должна занять ячейка.