Таблица стилей CSS

Здесь собраны все основные CSS стили. Следует учитывать что некоторые стили есть в стандарте, но пока не поддерживаются основными браузерами. В описании указано, как обращаться к стилю из объектной модели JavaScript.

Текст

color Цвет текста.
b {color: red;}
i {color: #ff0000;}
a {color: rgb(255, 0, 0);}

font Определяет сразу несколько параметров шрифта:
[font-style||font-variant||font-weight] font-size [/line-height] font-family
body {font: 14px sans-serif;} /* обязательные параметры */
span {font: italic normal bold 12px/1.2em Tahoma, Arial, sans-serif;} /* все параметры */

font-family Задает шрифт или шрифтовое семейство, которым будет отображаться элемент.
Если перечислены несколько шрифтов, то браузер сначала пытается отобразить текст первым из шрифтов, если же его нет на компьютере конечного пользователя, то - следующим, а если нет ни одного их перечисленных, то любым шрифтом из указанного семейства: "serif" (с засечками) или "sans-serif" (без засечек).
th {font-family: Georgia, Times New Roman, serif;}
td {font-family: Micra, Helvetica, Arial, sans-serif;}

@font-face Внедрение в документ шрифта из внешнего файла.
@font-face {
font-family: CyrillicOld;
src: url("/fonts/CYRILLIC_OLD.eot");
src: url("/fonts/CYRILLIC_OLD.eot?#iefix") format("embedded-opentype"),
url("/fonts/CYRILLIC_OLD.woff") format("woff"),
url("/fonts/CYRILLIC_OLD.ttf") format("truetype"),
url("/fonts/CYRILLIC_OLD.svg#JournalRegular") format("svg");
}

font-size Размер шрифта.
Значение может указываться как в относительной (em, %), так и в абсолютной величине (pt, px).
h1 {font-size: 200%;}
h2 {font-size: 1.5em;}
h3 {font-size: 20pt;}
h4 {font-size: 30px;}

font-style

Способ начертания шрифта. Возможные значения:

normal - нормальный (по умолчанию),
italic - курсив,
oblique - наклонный.

p {font-style: italic;}
Объектная модель:
Object.style.fontStyle = "italic";
document.getElementById("elementID").style.fontStyle = "italic";

font-variant

Варианты начертания шрифта. Возможные значения:

normal - нормальный (по умолчанию),
small-caps - все буквы малые заглавные (капитель).

h1 {font-variant: small-caps;}

font-weight Степень жирности шрифта. Возможные значения:
bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
i {font-weight: bolder;}

letter-spacing Интервал между буквами текста.
p {letter-spacing: 50px}
p {letter-spacing:-.4pt} /* интервал, уменьшенный на 0.4 пункта */

line-height Интервал между строками текста. Возможные значения:
line-height: normal | множитель | значение | проценты (от высоты шрифта)
p {line-height: 1.5em}

quotes Вид кавычек в теге q. Например:
q {quotes: "\00AB" "\00BB";} /* Кавычки "ёлочки" */
q {quotes: "\201E" "\201C";} /* Кавычки "лапки" */
q {quotes: "\2039" "\203A";} /* Одинарные угловые кавычки */

text-align Определяет выравнивание элемента. Возможные значения:
center | justify | left | right
p {text-align:justify}
H5 {text-align: center}

text-decoration

Устанавливает эффекты оформления шрифта. Возможные значения:

blink - мигающий текст,
line-through - перечеркнутый текст,
overline - надчеркнутый текст,
underline - подчеркнутый текст,
none - отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.

text-transform

Задает преобразование регистра текста при отображении. Возможные значения:

capitalize - каждое слово в предложении будет начинаться с заглавной буквы,
lowercase - все буквы текста будут строчными (нижний регистр),
uppercase - Все буквы текста будут прописными (верхний регистр).
none - отменяет все эффекты.

text-indent Отступ первой строки. Чаще всего используется для создания абзацев с красной строкой.
text-indent: значение | проценты (от ширины блока)
p {text-indent: 50px;}

vertical-align

Вертикальное выравнивание элемента (не только текста).
Применяется к ячейкам таблицы, элементам table-cell, inline и inline-block.
Возможные значения:

baseline - выравнивает базовую линию элемента по базовой линии родительского элемента (по умолчанию),
sub - элемент сдвигается вниз (как нижний индекс, но размер шрифта не меняется),
super - элемент сдвигается вверх (как верхний индекс, но размер шрифта не меняется),
text-top - верхняя граница элемента выравнивается по самой высокой части текста в текущей строке,
text-bottom - нижняя граница элемента выравнивается по самой нижней части текста в текущей строке,
top - верхняя граница элемента и его потомков выравнивается по верхней границе строки,
middle - центр элемента по вертикали выравнивается по нижней границе родительского элемента + половина высоты строчной буквы,
bottom - нижняя граница элемента и его потомков будет выравниваться по нижней границе строки,
значение - элемент сдвигается на указанную величину вверх или вниз относительно базовой линии,
проценты - элемент сдвигается на указанную величину (процент от значения line-height) вверх или вниз относительно базовой линии.

Возможные значения (для ячеек таблиц):

top - ячейка выравнивается по верху строки таблицы,
middle - ячейка выравнивается по середине строки таблицы,
bottom - ячейка выравнивается по низу строки таблицы.

td {vertical-align: top;}
div {vertical-align: middle} /* бесполезно, т.к. div - блок */
input {vertical-align: 100px;}
span {vertical-align: 50%;}
img {vertical-align: -300px;}

white-space

Устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на Web-странице как один. Исключением является тег <pre>, помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем.
Возможные значения:

normal - текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
nowrap - переносы строк в коде HTML игнорируются, весь текст отображается одной строкой, вместе с тем, добавление тега <br> переносит текст на новую строку.
pre - текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. Таким образом, white-space:pre; имитирует работу тега <pre>, но в отличие от него не меняет шрифт на моноширинный.

Браузер IE6 и младше не поддерживает аргумент pre. IE7 понимает значение pre только в "строгом" режиме (<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">).

word-spacing Интервал между словами. Можно использовать отрицательные значения.
p {word-spacing: 10px;}

Фон

background-attachment

Устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом. Возможные значения:

fixed - делает фоновое изображение элемента неподвижным,
scroll - позволяет перемещаться фону вместе с содержимым (по умолчанию).

background-clip
IE ≥ 9
FF ≥ 4
Opera ≥ 12
Safari ≥ 5
Chrome ≥ 1

Устанавливает, где будет отображаться фон. Возможные значения:

border-box - фон отображается до внешнего края границы элемента,
padding-box - фон отображается до внутренного края границы элемента,
content-box - фон отображается только внутри контента.

Для более старых версий:

-moz-background-clip	/* FF */
-webkit-background-clip	/* Safari */

background-color Цвет фона элемента.
body {background-color:yellow;}
th {background-color:#ffff00;}
td {background-color:rgba(255, 255, 0, 0.5);}
Объектная модель:
Object.style.backgroundColor = "#ffff00";
[window.]document.getElementById("elementID").style.backgroundColor = "#ffff00"; Пример

background-image Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, то он будет виден, если фоновая картинка меньше, чем сам элемент, или пока фоновая картинка не загрузится полностью.
background-image: url(/images/bg.gif);

background-origin
IE ≥ 9
FF ≥ 4
Opera ≥ 10.5
Safari ≥ 5
Chrome ≥ 1

Устанавливает, где будет начинаться фоновое изображение. Возможные значения:

border-box - фоновое изображение начинается от внешнего края границы элемента,
padding-box - фоновое изображение начинается от внутреннего края границы элемента,
content-box - фоновое изображение начинается только в зоне контента.

Для более старых версий:

-moz-background-origin	/* FF */
-webkit-background-origin	/* Safari */

background-position Задает начальное положение фонового изображения. По умолчанию - в левом верхнем углу.
У этого параметра два значения: положение по горизонтали (может быть - left, center, right) и вертикали (может быть - top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее:
top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (слева по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (справа по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)
В скобках указано, где располагается фоновый рисунок относительно контейнера.

background-repeat

Определяет, как будет повторяться фоновое изображение. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. Возможные значения:

no-repeat - одно фоновое изображение в элементе без его повторений, положение которого определяется атрибутом background-position,
repeat - фоновое изображение повторяется по горизонтали и вертикали,
repeat-x - фоновый рисунок повторяется только по горизонтали,
repeat-y - фоновый рисунок повторяется только по вертикали.

background-size
IE ≥ 9
FF ≥ 4
Opera ≥ 10.5
Safari ≥ 5
Chrome ≥ 4

Определяет ширину и высоту фонового изображения.
Возможные значения:

значение - ширина и высота фонового изображения в прямом виде,
проценты - ширина и высота фонового изображения в процентном отношении от ширины и высоты элемента,
contain - изображение масштабируется, сохраняя пропорции, по большей стороне так, чтобы картинка целиком поместилась внутрь блока,
cover - изображение масштабируется, сохраняя пропорции, по меньшей стороне так, чтобы его ширина или высота равнялась ширине или высоте блока,
auto - если задано для ширины и высоты (auto auto), то размеры фонового изображения остаются исходными (по умолчанию); если только для одной стороны (100px auto), то размер вычисляется автоматически исходя из пропорций изображения.

Для более старых версий:

-moz-background-size	/* FF */
-o-background-size	/* Opera */
-webkit-background-size	/* Safari, Chrome */
-khtml-background-size	/* Konqueror ≥ 3.5.4 */

Пример

background Позволяет установить до пяти атрибутов стиля фона одновременно. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.
div {background:url(images/bg.png) no-repeat 100% 0 #e56623;}

opacity Определяет уровень прозрачности элемента.
При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.
В качестве аргумента выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1 - его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.

Поля и отступы

margin

Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента Можно использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл.

Число значений	Результат
1	Поля будут установлены для всех сторон содержимого элемента.
2	Первое значение устанавливает поле от верхнего и нижнего края содержимого, второе - от левого и правого.
3	Первое значение задает поле от верхнего края содержимого, второе - одновременно от левого и правого края, а третье - от нижнего края.
4	Поочередно устанавливаются поля от верхнего, правого, нижнего и левого края содержимого.

margin-bottom,
margin-left,
margin-right,
margin-top Отступы соответственно снизу, слева, справа, сверху элемента.
Объектная модель: [window.]document.getElementById("elementID").style.marginRight

padding

Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое. Поля и отступы

Можно использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл.

Число значений	Результат
1	Поля будут установлены для всех сторон содержимого элемента.
2	Первое значение устанавливает поле от верхнего и нижнего края содержимого, второе - от левого и правого.
3	Первое значение задает поле от верхнего края содержимого, второе - одновременно от левого и правого края, а третье - от нижнего края.
4	Поочередно устанавливаются поля от верхнего, правого, нижнего и левого края содержимого.

padding-bottom,
padding-left,
padding-right,
padding-top Поля соответственно снизу, слева, справа, сверху.

Границы

border-color Цвет границы. Может принимать значение transparent для задания невидимой, но имеющей ширину, границы, что иногда полезно
table {border-color: green;}

border-bottom-color,
border-left-color,
border-right-color,
border-top-color Цвет границы соответственно снизу, слева, справа, сверху элемента.
div {border-right-color: red; border-left-color: green;}

border-style Задает стиль границы. Может принимать следующие значения: none (по умолчанию),
hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
table {border-style: dashed;}
table {border-style: groove;}

border-bottom-style,
border-left-style,
border-right-style,
border-top-style Стиль границы соответственно снизу, слева, справа, сверху элемента.
div {border-right-style: dashed; border-left-style: solid;}

border-width Ширина границы. Может быть задана значением в пикселях или с помощью зарезервированных слов:
thin | medium | thick
table {border-width: 2px;}

border-bottom-width,
border-left-width,
border-right-width,
border-top-width Ширина границы соответственно снизу, слева, справа, сверху элемента.
div {border-right-width: 1px; border-left-width: 2px;}

border Ширина, стиль и цвет границы вокруг элемента.
border: [border-width || border-style || border-color]
div {border: 4px double #990;}

border-bottom,
border-left,
border-right,
border-top Ширина, стиль и цвет границы соответственно снизу, слева, справа, сверху элемента.
div {border-right: 2px solid red;}

border-radius
IE ≥ 9
FF ≥ 4
Opera ≥ 10.5
Safari ≥ 5
Chrome ≥ 4

Pадиус скругления углов рамки и фона элемента.
Можно использовать одно, два, три или четыре значения, разделяя их между собой пробелом.

Число значений	Результат
1	Радиус устанавливается для всех четырех углов.
2	Первое значение устанавливает радиус верхнего левого и нижнего правого угла, второе - верхнего правого и нижнего левого угла.
3	Первое значение устанавливает радиус верхнего левого угла, второе - одновременно верхнего правого и нижнего левого, а третье - нижнего правого угла.
4	Поочередно устанавливаются радиусы верхнего левого, верхнего правого, нижнего правого и нижнего левого угла.

Также допустимы два значения через слэш (/), при этом первое задает радиус по горизонтали, а второе - по вертикали (эллиптические углы).
Для более старых версий:

-moz-border-radius	/* FF */
-webkit-border-radius	/* Safari, Chrome */
-khtml-border-radius	/* KHTML */

Пример

Горизонтальная разделительная линия

width Длина линии. Может быть задана значением в пикселях или процентах.
hr {width: 200px;}
hr {width: 50%;}

background-color Цвет линии
hr {background-color: #green;}

border: none; Убирает тень от линии

height Толщина линии для браузеров
hr {height: 1px;}

Отображение

visibility

Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойством display.

hidden - элемент становится невидимым или, точнее, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы,
visible - отображает элемент как видимый,
collapse Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено стилевое свойство display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой.

Объектная модель:
[window.]document.getElementById("elementID").style.visibility = "visible";
[window.]document.all["elementID"].style.visibility = "visible";

display

block - Блочный элемент. Соответствует блочным элементам HTML, т. е. отображается как отдельный абзац. При его отображении генерируется главный прямоугольник блока, в котором располагаются объемлющие прямоугольники потомков данного элемента.
inline - Строчный элемент. Соответствует текстовым элементам HTML, т. е. отображается как текстовые строки внутри текущего абзаца, точнее внутри главного прямоугольника соответствующего блока.
inline-block - Это значение генерирует блочный элемент, который обтекается другими элементами Web-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на <img>. При этом его внутренняя часть форматируется как блочный элемент, а сам элемент - как строчный.
inline-table - Определяет, что элемент является таблицей, как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.
list-item - Элемент списка. Отображается как блочный элемент с добавлением к нему маркера элемента списка.
none - Элемент и все его потомки игнорируются при отображении.
run-in - Устанавливает элемент как блочный или встроенный в зависимости от контекста.
table - Определяет, что элемент является блочной таблицей подобно <table>.
table-caption - Задает заголовок таблицы подобно <caption>.
table-cell - Указывает, что элемент представляет собой ячейку таблицы подобно <td>.
table-column - Назначает элемент колонкой таблицы подобно <col>.
table-column-group - Определяет, что элемент является группой одной или более колонок таблицы подобно <colgroup>.
table-header-group - Группа надзаголовков таблицы подобно <thead>.
table-footer-group - Группа подзаголовков таблицы подобно <tfoot>.
table-row - Элемент отображается как строка таблицы подобно <tr>.
table-row-group - Создает структурный блок, состоящий из нескольких строк таблицы подобно <tbody>.

overflow

Управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

visible – Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
hidden – Отображается только область внутри элемента, остальное будет обрезано.
scroll – Всегда добавляются полосы прокрутки.
auto – Полосы прокрутки добавляются только при необходимости.

Браузер Internet Explorer поддерживает также параметр overflow-x, который отображает полосу прокрутки по горизонтали и overflow-y, он отвечает за полосу прокрутки по вертикали. Аргументы те же, что и для overflow. Объектная модель:
[window.]document.getElementById("elementID").style.overflowX
[window.]document.all["elementID"].style.overflowX="scroll";

clear

Параметр устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено обтекание элемента с помощью параметра float, свойство clear отменяет его действие для указанных сторон.

both – Отменяет обтекание элемента одновременно с правого и левого края. Этот аргумент рекомендуется установить, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.
left – Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
right – Отменяет обтекание с правой стороны элемента.
none – Отменяет действие данного свойства и обтекание элемента происходит, как задано с помощью параметра float или других настроек.

clip

Параметр clip определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственно доступная форма области – прямоугольник. Все остальное остается только в мечтах. Параметр clip работает только для абсолютно позиционированных элементов.

clip: rect(Y1, X1, Y2, X2) | auto

В качестве аргументов используется расстояние от края элемента до области вырезки, которое задается в единицах CSS - пикселы (px), проценты (%) и др. Если край области нужно оставить без изменений, следует поставить параметр auto, положение остальных значений показано на рисунке:

Рис. Значения параметра clip

<style type="text/css">
#layer {
 position: absolute; /* Абсолютное позиционирование */
 clip: rect(40px, auto, auto, 40px); /* Прячем часть текста */
 width: 200px; /* Ширина блока */
 color: white; /* Цвет текста */
 background: #7f4c3e; /* Цвет фона */
 border: 1px solid black; /* Параметры рамки */
 padding: 10px; /* Поля вокруг текста */
}
</style>
<div id="layer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna
aliguam erat volutpat. Ut wisis enim ad minim veniam,
quis nostrud exerci tution ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.</p>
</div>

float

Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение параметра float равно none, элемент выводится на странице как обычно, самое большое - одна строка обтекающего текста может быть на той же линии, что и сам элемент.

left Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, огибают его по правой стороне.
right Выравнивает элемент по правому краю, а все остальные элементы огибают его по левой стороне.
none Обтекание элемента не задается.

Объектная модель:
[window.]document.getElementById("elementID").style.styleFloat
[window.]document.getElementById("elementID").style.cssFloat

height Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег <img>).
значение | проценты | auto
По умолчанию высота не включает значения границ (border), полей (padding) и отступов (margin).
Изменить метод расчета высоты можно с помощью свойства box-sizing.

max-height Устанавливает максимальную высоту элемента
div.block {max-height: 200px;}

min-height Устанавливает минимальную высоту элемента
div.block {min-height: 100px;}

width Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег <img>).
значение | проценты | auto
По умолчанию ширина не включает значения границ (border), полей (padding) и отступов (margin).
Изменить метод расчета ширины можно с помощью свойства box-sizing.

max-width Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от установленных параметров width, max-width и min-width.

min-width Устанавливает минимальную ширину элемента. Если окно браузера достигает заданной минимальной ширины элемента, то его ширина остается неизменной и появляется горизонтальная полоса прокрутки.

box-sizing

Устанавливает метод расчета ширины и высоты элемента.

content-box – Свойства width и height задают ширину и высоту содержимого элемента, не включая в себя значения границ (border), полей (padding) и отступов (margin).
border-box – Свойства width и height задают ширину и высоту элемента вместе со значениями границ (border) и полей (padding), не включая значения отступов (margin).
padding-box – Свойства width и height задают ширину и высоту элемента вместе со значениями полей (padding), не включая значения границ (border) и отступов (margin).

Позиционирование

bottom

Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от параметра position, он обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).

При относительном позиционировании элемента, отсчет ведется от нижнего края исходного положения элемента, а при абсолютном - относительно нижнего края окна документа.

left Устанавливает расстояние от левого края родительского элемента (не включая границу, поле и отступ) до левого края дочернего элемента.
Отсчет зависит от значения параметра position.
Если position: absolute, и нет родительского элемента, то положение элемента определяется от левого края окна браузера.
Если position: absolute, а у родительского элемента position: relative, то положение элемента определяется от левого края родительского элемента.
Если position: relative, то left отсчитывается от левого края исходного положения элемента, при этом место, которое элемент должен был занимать, остается пустым.

position

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на Web-странице.

absolute Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на Web-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.
fixed По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании Web-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
relative Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.
static Элементы отображаются как обычно. Использование параметров left, top, right и bottom не приводит к каким-либо результатам.

right Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента. Отсчет координат зависит от значения параметра position. Если его аргумент равен absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его правого края. В случае значения relative, аргумент right отсчитывается от правого края исходного положения элемента.

top Устанавливает расстояние от верхнего края родительского элемента (не включая границу, поле и отступ) до верхнего края дочернего элемента.
Отсчет зависит от значения параметра position.
Если position: absolute, и нет родительского элемента, то положение элемента определяется от верхнего края окна браузера.
Если position: absolute, а у родительского элемента position: relative, то положение элемента определяется от верхнего края родительского элемента.
Если position: relative, то left отсчитывается от верхнего края исходного положения элемента, при этом место, которое элемент должен был занимать, остается пустым.

z-index Любые позиционированные элементы на Web-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов Web-страницы, их размещением по z-оси и управляет атрибут z-index.
Обращение из javascript: this.style.zIndex=100

Таблицы

border-collapse

Способ отображения границы вокруг ячеек таблицы. Ячейка таблицы может иметь общую рамку с соседними ячейками или свою собственную (в месте стыка получится линия двойной толщины, если для таблицы установлено свойство border-spacing со значением 0). Возможные значения:

separate - каждая ячейка имеет свою рамку (по умолчанию),
collapse - общая граница для ячеек таблицы.

border-spacing

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

Число значений	Результат
1	Расстояние по вертикали и горизонтали между границами ячеек.
2	Первое значение определяет горизонтальное расстояние, второе значение - вертикальное.

Не работает, если для таблицы установлено свойство border-collapse со значением collapse.

table-layout

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

auto Браузер загружает всю таблицу, анализирует ее для определения размеров ячеек и только после этого отображает.
fixed Значение повышает производительность построения таблиц. Ширина колонок в этом случае определяется либо с помощью тега <col>, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого параметра содержимое, которое не помещается в ячейку указанной ширины, будет обрезано либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет.

caption-side

Определяет положение заголовка таблицы, который задается с помощью тега CAPTION, относительно самой таблицы. Параметр caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через атрибут text-align.

top Располагает заголовок по верхнему краю таблицы.
bottom Заголовок располагается под таблицей.
right Заголовок размещается справа от таблицы. Это значение работает только в Firefox.
left Заголовок размещается слева от таблицы. Это значение работает только в Firefox.

Списки

list-style Атрибут, позволяющий одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера.

list-style-image Устанавливает адрес изображения, которое служит в качестве маркера списка. Этот атрибут наследуется, поэтому для отдельных элементов списка для восстановления маркера используется значение none.
list-style-image: none | url('путь к файлу')

list-style-position

Определяет, как будет размещаться маркер относительно текста.

outside - маркер вынесен за границу элемента списка
inside - маркер обтекается текстом.

list-style-type

Изменяет вид маркера для каждого элемента списка. Этот атрибут используется только в случае, когда значение свойства list-style-image установлено как none. Маркеры различаются для маркированного списка (тег UL) и нумерованного (тег OL).

disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none

Эффекты

cursor

Может принимать значения (Наведите курсор на соответствующее описание!)

all-scroll. Курсор со стрелками во все четыре стороны и точкой в центре, показывающий на возможность скроллинга страницы в любом направлении
I {cursor: all-scroll;}
auto.По умолчанию. Браузер определяет самостоятельно, какой курсор требуется в данном контексте.
col-resize. Курсор со стрелками влево-вправо и вертикальной разделяющей полоской. Используется для индикации возможности изменения размеров по горизонтали.
crosshair. Курсор-крест.
default. Стандартный курсор, используемый системой.
hand. Рука с вытянутым указательным пальцем. Используется при гиперссылке
help. Стрелка с вопросительным знаком.
move. Курсор со 4 стрелками, показывающий возможность перемещения.
no-drop. Рука с перечеркнутым кружочком. Нельзя сбросить объект в текущую позицию курсора.
not-allowed. Перечеркнутый круг. Данная операция не поддерживается.
pointer. Идентична стилю hand.
progress. Песочные часы, показывающие на продолжение операции.
row-resize. Курсор со стрелками вверх-вниз и вертикальной разделяющей полоской. Используется для индикации возможности изменения размеров по вертикали.
text. Текстовый курсор-каретка.
url(uri). Ваш собственный курсор. Поддерживаются файлы .cur и .ani
{cursor:url(elogo.cur);}
vertical-text. Горизонтальная текстовая каретка для вертикального текста.
wait. Курсор, показывающий, что система занята и требуется подождать.
N-resize, NE-resize, NW-resize, S-resize, SE-resize, SW-resize, E-resize, W-resize. Курсоры-стрелки с определением направления стрелок
{cursor: n-resize;}

scrollbar-3dlight-color Определяет или устанавливает цвет верха и левой части ползунка и кнопок со стрелками на полосе прокрутки
body {scrollbar-3dlight-color: green;}

scrollbar-arrow-color Устанавливает или определяет цвет стрелок на кнопке со стрелками
body {scrollbar-arrow-color: red;}

scrollbar-base-color Устанавливает или определяет цвет основных элементов ползунка: ползунка, кнопок со стрелками, дорожки для ползунка, если не определены параметры в scrollbar-face-color
body {scrollbar-base-color: green;}

scrollbar-darkshadow-color Устанавливает или определяет цвет тени для ползунка и кнопок со стрелками
body {scrollbar-darkshadow-color: red;}

scrollbar-face-color Устанавливает или определяет цвет ползунка и кнопок со стрелками. Также, если вы не задали параметр SCROLLBAR-TRACK-COLOR, у вас изменится цвет дорожки
body {scrollbar-face-color: green;}

scrollbar-highlight-color Устанавливает или получает цвет подсветки, создающий эффект объёмности. Это цвет, который окаймляет освещённую часть кнопочки. Когда кнопка не нажата, то цвет заливает левый верхний угол и стороны между ним, когда нажата - нижний правый угол
body {scrollbar-highlight-color: green;}

scrollbar-shadow-color Схоже с scrollbar-darkshadow-color
body {scrollbar-shadow-color: green;}

scrollbar-track-color Устанавливает или получает цвет дорожки для ползунка
body {scrollbar-track-color: aqua;}