Несколько селекторов через запятую. Объединение позволяет применить одинаковый стиль сразу нескольким элементам (селекторам). Всем четырем тегам заголовков определен красный цвет шрифта.

h1, h2, h3, h5 {color: red;}

Несколько селекторов через пробел. В примере ниже текст внутри элемента ... будет красным только если он будут внутри элемента

...

h1 b {color: red;}


Здесь красный.

Селекторы классов могут быть использованы как атрибуты тегов. Селектор класса — строка, начинающаяся с точки. Не нужно использовать точку ссылаясь на класс. Название класса (значение атрибута class="") не должно начинаться с цифры.

.example {color: red;}


Этот текст красный.

Селекторы ID могут быть использованы как атрибуты тегов. Селектор ID — строка, начинающаяся с символа #. Не нужно использовать # ссылаясь на селектор ID. Значение атрибута id="" не должно начинаться с цифры и должно быть уникальным в пределах документа.

#i5 {color: red;}


Этот текст с ID 'i5'.

Отличная идея оставлять комментарии в таблице стилей. В комментарии можно писать любой текст, даже в несколько строк.

/* Это комментарии. */

Эти два HTML-тэга, для которых поддержка стилей особенно актуальна.

... используется для оформления внутри строк.

Это красный текст внутри параграфа

Многие свойства можно описать кратко. ?х значения читаются: сверху-справа-снизу-слева (top-right-bottom-left).

Например:

div { padding: 5px 10% 0 3%; }

означает то же самое, что и:

div { padding-top:5px; padding-right:10%;
padding-bottom:0; padding-left:3%; }

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

Абсолютные:

• in: дюйм - 1 дюйм равен 2.54 сантиметрам.
• cm: сантиметр
• mm: миллиметр
• pt: точка - 1 точка, используемая в CSS2, равна 1/72 дюйма.
• pc: пика - 1 пика равна 12 точкам.

Относительные:

• em: свойство 'font-size' соответствующего шрифта
• ex: свойство 'x-height' соответствующего шрифта
• px: пиксели, относительно устройства просмотра

Например:
width: 50px;
margin-left: 2em;

Любое значение, задаваемое в процентах, всегда определяется относительно некоторого другого значения, например, значения длины. Например, размер шрифта элемента

h2 {font-size: 75% }

В CSS используются ключевые слова как значения для различных свойств.
Например: bolder, lighter, larger, x-large, xx-large, x-small.

Шестнадцатиричное значение; в процентах; по названию.

color: #FF00FF; /* такое значение может быть сокращено до #F0F */
color: rgb(100%,0%,100%);
color: chocolate

?спользуются в различных свойствах для обозначения местоположения изображения. Относительные ссылки указывают размещение файлов относительно CSS, а не HTML документа.

url(picture.gif)
url(/lib1/pic278.gif)
list-style-image: url(bullet3.gif)

Свойство стиля объявлено как !important. Это свойство перекроет все другие свойства: исходные или переопределенные.

h1 {color: maroon !important;}

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

Внешние таблицы стилей используются для управления внешним видом нескольких страниц с помощью одного файла CSS. ?спользуйте тэг в секции

Например:

Наибольший приоритет имеет свойство, определенное в атрибуте style у элементов. Внутри таблицы стилей последнее определение имеет наивысший приоритет. Ниже приведен порядок применения таблиц стилей к документу. Первый способ в списке имеет наивысший приоритет:

1. style="что-то там" свойства стилей задано в атрибуте тэга
   Например:

   строка текста

2. Тэг
   Например:
   
3. Тэг для привязки внешней таблицы стилей в секции HTML документа
   Например:
4. Стили браузера по умолчанию

CSS2 позволяет определять различные таблицы стилей для отображения страниц на разных устройствах.

/* css для печати, элементы с атрибутом class="noprint" не будут напечатаны */


/* css для экрана, элементы с атрибутом class="noshow" будут скрыты */

?спользуется для объявления шрифта или семейства шрифтов. Семейства шрифтов: serif, sans-serif, monospace, cursive и fantasy. Если название шрифта состоит из нескольких слов - его следует заключить в кавычки.

P {font-family: "Times New Roman", serif;}

Два значения: курсив (italic) или обычный (normal).

EM {font-style: italic;}

В настоящее время два значения: small-caps и normal. В будущем, вероятно, добавятся еще значения.

H3 {font-variant: small-caps;}

Значения: bold, normal, lighter, bolder и числовое (100-900).

B {font-weight: 700;}

Устанавливает размер шрифта: абсолютный (pt, in, cm, px), относительный (em, ex), в процентах.
Значением могут быть и ключевые слова: xx-large, x-large, large, medium, small, x-small, xx-small, larger, smaller

H2 {font-size: 200%;}
H3 {font-size: 36pt;}

Краткое описание свойств шрифта. Порядок следования значений важно соблюдать:
font {font-style font-variant font-weight font-size/line-height font-family;}. Можно не указывать любое из значений, не нарушая порядок их следования.

P {font: bold 12pt/14pt Helvetica,sans-serif;}

Устанавливает цвет элемента. Для текста это будет цвет текста, для других элементов,например HR, это будет цвет линии.

H6 {color: green;}

Устанавливает цвет фона элемента. Значение по умолчанию: transparent.

P { background-color: #CCCC00; }

Фоном элемента должно быть изображение. Совместно с другими свойствами background, изображение может повторяться по горизонтали, по вертикали, в обоих направлениях. Совместно с этим свойством следует использовать background-color на случай, когда изображение не может быть загружено или показано.

BODY {background-image: url(bg.gif);}

Указывает как повторять фоновое изображение. Возможные значения: repeat (повторять по вертикали и по горизонтали), no-repeat (не повторять), repeat-x (по горизонтали), repeat-y (по вертикали). По умолчанию: repeat.

BODY { background-repeat: repeat-y; }

Если задано фоновое изображение, то данное свойство определяет, будет ли оно фиксироваться относительно окна просмотра (значение "fixed") или будет перемещаться вместе с документом (значение "scroll") в процессе его прокрутки.

BODY {background-attachment: fixed;}

Устанавливает начальную позицию для фонового изображения или цвета. Значения: Position (x y) or (x% y%); top, center, bottom, left, right.

BODY {background-position: top center;}

Краткое описание свойств фона элемента. Значения могут быть написаны в произвольном порядке.

BODY {background: white url(bg.gif) fixed center;}

Устанавливает расстояние между символами.

P {letter-spacing: 0.5em;}

Устанавливает расстояние между линиями в элементе (высоту строк). Значение не может быть отрицательным.

P {line-height: 18pt;}
H2 {line-height: 200%;}

Значения: none (нет), underline (подчеркнутый текст), overline (черта над текстом), line-through (текст перечеркнут), blink (мерцающий). Значения можно комбинировать.

U {text-decoration: underline;}
.old {text-decoration: line-through;}

?зменяет регистр символов в элементе. Значения: capitalize (Первый Символ Каждого Слова Прописной), uppercase (ВСЕ БУКВЫ ПРОП?СНЫЕ), lowercase (все буквы строчные).

H1 {text-transform: uppercase;}

Устанавливает горизонтальное положение текста. Может быть применено только к блочным элементам.

P {text-align: justify;}
H4 {text-align: center;}

Устанавливает начальный отступ первой строки элемента. Применяется только к блочным элементам. Не может быть отрицательным.

P {text-indent: 5em;}
H2 {text-indent: -25px;}

?зменяет вертикальное выравнивание текста в строке или ячейке таблицы. Ключевые слова: baseline; middle; sub; super; top; text-top; bottom; text-bottom.

.super {vertical-align: super;}

Устанавливает расстояние между словами, которые определены как строки символов, разделенные пробелами.

P {word-spacing: 0.5em;}

Самый простой путь к пониманию блочной модели это рассматривать каждый элемент (

,

, и т.д.) как блок. С помощью CSS можно изменять: длину (width), ширину (height), отступы внутри (padding) и снаружи (margin), ширину границ (border); а также позиционировать блок относительно документа или другого блока.

Замечание относительно IE6.0: этот браузер в Standards mode рассматривает ширину блока не прибавляя к ней значения padding и border. Т.е. использует блочную модель W3C.

Устанавливает размер отступа сверху от элемента. Возможны отрицательные значения.

UL {margin-top: 0.5in;}

Устанавливает размер отступа справа от элемента. Возможны отрицательные значения.

IMG {margin-right: 30px;}

Устанавливает размер отступа снизу от элемента. Возможны отрицательные значения.

UL {margin-bottom: 0.5in;}

Устанавливает размер отступа слева от элемента. Возможны отрицательные значения.

P {margin-left: 3em;}

Краткая форма. Устанавливает размеры отступов снаружи элемента. Возможны отрицательные значения. Несколько значений читаются сверху по часовой стрелке: top-right-bottom-left.

H1 {margin: 2em;}
P {margin: 0% 5% 0% 5%;}

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

UL {padding-top: 0.5in;}

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

DIV {padding-right: 30px;}

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

UL {padding-bottom: 0.5in;}

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

P {padding-left: 3em;}

Краткая форма. Устанавливает размеры отступов внутри элемента. Отрицательные значения не возможны. Несколько значений читаются сверху по часовой стрелке: top-right-bottom-left.

H1 {padding: 2ex;}

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

UL {border-top-width: 0.5in;}

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

IMG {border-right-width: 30px;}

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

UL {border-bottom-width: 0.5in;}

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

P {border-left-width: 3em;}

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

H1 {border-width: 2ex;}

Устанавливает цвет границ элемента. Все четыре границы могут иметь различные значения.

H1 {border-color: silver black;}

Устанавливает стиль отображения границ элемента. Значения: dashed; dotted; double; groove; inset; outset; ridge; solid; none. По умолчанию: none (границы не показываются, ширина равна 0).

H1 {border-style: solid; border-color: purple;}

Краткая форма записи, которая устанавливает ширину (width), цвет (color) и стиль (style) верхней границы элемента.

UL {border-top: 0.5in solid black;}

Краткая форма записи, которая устанавливает ширину (width), цвет (color) и стиль (style) правой границы элемента.

IMG {border-right: 30px dotted blue;}

Краткая форма записи, которая устанавливает ширину (width), цвет (color) и стиль (style) нижней границы элемента.

UL {border-bottom: 0.5in grooved green;}

Краткая форма записи, которая устанавливает ширину (width), цвет (color) и стиль (style) левой границы элемента.

P {border-left: 3em solid gray;}

Краткая форма записи, которая устанавливает ширину (width), цвет (color) и стиль (style) границ элемента по периметру.

H1 {border: 2px dashed tan;}

Устанавливает ширину элемента. Не может иметь отрицательные значения.

TABLE {width: 80%;}

Устанавливает высоту элемента. Не может иметь отрицательные значения.

IMG.icon {height: 50px;}

Свойство "плавающего" элемента. Данное свойство определяет, будет ли блок перемещен влево, вправо или вообще не будет перемещен. Значения: left; right; none.

IMG {float: left;}

Это свойство определяет, какие стороны блока, порожденного элементом, не могут соседствовать с предшествующим перемещаемым блоком. Значения: both (обе стороны); left; right; none. По умолчанию: none.

H1 {clear: both;}

?спользуется для изменения заданной по умолчанию формы представления HTML элементов. Некоторые значения: block; inline; list-item; none. Когда display="none" - элемент не отображается совсем и место для него не резервируется.

.hide {display: none;}

Определяет поведение пробелов и переноса текста на новую строку внутри элемента. Значения: normal, pre, nowrap.

TD {white-space: nowrap;}
TT {white-space: pre;}

?спользуется для объявления типа маркеров или нумерации, используемых в неупорядоченных и упорядоченных списках. Значения: disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none.

UL {list-style-type: square;}
OL {list-style-type: lower-roman;}

?спользуется для объявления изображения, используемого в качестве маркера неупорядоченных и упорядоченных списков. Применяется к элементам, у которых свойство display="list-item".

UL {list-style-image: url(bullet3.gif);}

?спользуется для позиционирования маркеров или нумерации списков внутри или снаружи элементов списка. Значения: inside; outside. По умолчанию: outside.

LI {list-style-position: inside;}

Краткая форма записи, собирающая все возможные свойства list-style. Применяется к элементам, у которых свойство display="list-item".

UL {list-style: square url(bullet3.gif) outer;}

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

A:link {color: #900}
A:link IMG { border: solid blue }
A:hover { background:#ffff00; }
A:visited {}
A:active {} /* стиль, видимый только в момент клика по ссылке */

Комбинирование: обычные имена классов размещаются до псевдо-классов.

A.external:link { color: magenta }
внешняя ссылка

Применяется к первой линии текста в элементе и только к блочным элементам.

P:first-line {color: red;}


Первая строка параграфа
красная. Далее что-то там там там...

Применяется к первой букве в элементе и только к блочным элементам.

P:first-letter {color: red;}


Эта заглавная 'Э' в начале параграфа красная.

Значения:
auto начинать с новой страницы после элемента только если на текущей не остается места;
always всегда начинать с новой страницы после элемента;
left начинать с новой страницы после элемента только на странице, которая будет слева;
right начинать с новой страницы после элемента только на странице, которая будет справа;

Пример:



...



...


Значения: те же, что и вышеописанные. Замечание: эти свойства не работают внутри таблиц. Также, могут быть глюки при использовании с тегом
. Лучше всего использовать разрыв страниц в структурных тегах (H1, P, DIV, и т.п.).

Определяет внешний вид курсора при наведении указателя мыши на элемент.

Значения: auto (браузер сам определяет по контексту); crosshair; default (обычно стрелка - определено операционной системой); help; move; pointer; text; wait; e-resize; ne-resize; nw-resize; n-resize; se-resize; sw-resize; s-resize; w-resize.
?спользование 'hand' возможно для отображения курсора в виде руки для IE4, IE5, и Opera 3.5, хотя и не рекомендуется W3C. Лучше использовать, 'pointer', это понимают современные браузеры.

P { cursor: help }