Заголовок

Основные положения
Объединение | Несколько селекторов через запятую. Объединение позволяет применить одинаковый стиль сразу нескольким элементам (селекторам). Всем четырем тегам заголовков определен красный цвет шрифта. `h1, h2, h3, h5 {color: red;}`
Селекторы по контексту | Несколько селекторов через пробел. В примере ниже текст внутри элемента `<b>...</b>` будет красным только если он будут внутри элемента `<h1>...</h1>`. `h1 b {color: red;} <h1>Здесь <b>красный</b>.</h1> <p>Здесь <b>нет</b>.</p>`

Class
(атрибут тега `class=""`)

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

`.example {color: red;}
<p class="example">Этот текст красный.</p>`

ID
(атрибут тега `id=""`)

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

`#i5 {color: red;}
<p id="i5">Этот текст с ID 'i5'.</p>`

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

Тэги `<div>` и `<span>`

Эти два HTML-тэга, для которых поддержка стилей особенно актуальна.
`<div>...</div>` используется для формирования структуры документа в виде блоков текста.

`<div style="color:green; font-weight:bold"><h1>Это заголовок</h1></div>`

`<span>...</span>` используется для оформления внутри строк.

`<p>Это <span style="color:red;">красный текст</span> внутри параграфа</p>`

Упрощенный синтаксис

Многие свойства можно описать кратко. Их значения читаются: сверху-справа-снизу-слева (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>` будет 75% от размера шрифта по умолчанию. `h2 {font-size: 75% }`
Ключевые слова | В CSS используются ключевые слова как значения для различных свойств. Например: bolder, lighter, larger, x-large, xx-large, x-small.
Значения цвета | Шестнадцатиричное значение; в процентах; по названию. `color: #FF00FF; /* такое значение может быть сокращено до #F0F */ color: rgb(100%,0%,100%); color: chocolate`
URLs (ссылки) | Используются в различных свойствах для обозначения местоположения изображения. Относительные ссылки указывают размещение файлов относительно CSS, а не HTML документа. `url(picture.gif) url(http://www.xhtml.ru/lib1/pic278.gif) list-style-image: url(bullet3.gif)`

Каскадность
!important | Свойство стиля объявлено как `!important`. Это свойство перекроет все другие свойства: исходные или переопределенные. `h1 {color: maroon !important;}`
Наследование | Свойства форматирования любого элемента наследуются от элемента, в котором он размещается. CSS свойства всегда имеют некоторые значения, даже если автор их не определил. Этим можно пользоваться для минимизации описания стилей. Но следует помнить, что в различных браузерах могут быть различные значения по умолчанию и отображение страницы при этом будет различаться.
Связь с внешней таблицей стилей | Внешние таблицы стилей используются для управления внешним видом нескольких страниц с помощью одного файла CSS. Используйте тэг <link> в секции <head> HTML документа. Например: `<link rel="stylesheet" type="text/css" href="style.css" />`

Каскадный порядок и синтаксис

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

1. style="что-то там" свойства стилей задано в атрибуте тэга
   Например: `<p style="color: red; font-family: 'Times New Roman', serif">строка текста</p>`
2. Тэг <style> в секции <head> HTML документа
   Например:
   `<style>
   .title { font-family: 'Snap ITC', cursive; font-size: 60pt;}
   </style>`
3. Тэг <link> для привязки внешней таблицы стилей в секции <head> HTML документа
   Например: `<link rel="stylesheet" type="text/css" href="style.css">`
4. Стили браузера по умолчанию

Media

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

`/* css для печати, элементы с атрибутом` `class="noprint"` не будут напечатаны */
<style media="print">
.noprint {display: none;}
</style>
/* css для экрана, элементы с атрибутом `class="noshow"` будут скрыты */
<style media="screen">
.noshow {display:none;}
</style>

Шрифты
font-family | Используется для объявления шрифта или семейства шрифтов. Семейства шрифтов: serif, sans-serif, monospace, cursive и fantasy. Если название шрифта состоит из нескольких слов - его следует заключить в кавычки. `P {font-family: "Times New Roman", serif;}`
font-style | Два значения: курсив (italic) или обычный (normal). `EM {font-style: italic;}`
font-variant | В настоящее время два значения: small-caps и normal. В будущем, вероятно, добавятся еще значения. `H3 {font-variant: small-caps;}`
font-weight | Значения: bold, normal, lighter, bolder и числовое (100-900). `B {font-weight: 700;}`
font-size | Устанавливает размер шрифта: абсолютный (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 {font-style font-variant font-weight font-size/line-height font-family;}. Можно не указывать любое из значений, не нарушая порядок их следования. `P {font: bold 12pt/14pt Helvetica,sans-serif;}`

Цвет и фон
color | Устанавливает цвет элемента. Для текста это будет цвет текста, для других элементов,например HR, это будет цвет линии. `H6 {color: green;}`
background-color | Устанавливает цвет фона элемента. Значение по умолчанию: transparent. `P { background-color: #CCCC00; }`

background-image

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

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

background-repeat | Указывает как повторять фоновое изображение. Возможные значения: repeat (повторять по вертикали и по горизонтали), no-repeat (не повторять), repeat-x (по горизонтали), repeat-y (по вертикали). По умолчанию: repeat. `BODY { background-repeat: repeat-y; }`
background-attachment | Если задано фоновое изображение, то данное свойство определяет, будет ли оно фиксироваться относительно окна просмотра (значение "fixed") или будет перемещаться вместе с документом (значение "scroll") в процессе его прокрутки. `BODY {background-attachment: fixed;}`
background-position | Устанавливает начальную позицию для фонового изображения или цвета. Значения: Position (x y) or (x% y%); top, center, bottom, left, right. `BODY {background-position: top center;}`
background | Краткое описание свойств фона элемента. Значения могут быть написаны в произвольном порядке. `BODY {background: white url(bg.gif) fixed center;}`

Свойства текста
letter-spacing | Устанавливает расстояние между символами. `P {letter-spacing: 0.5em;}`
line-height | Устанавливает расстояние между линиями в элементе (высоту строк). Значение не может быть отрицательным. `P {line-height: 18pt;} H2 {line-height: 200%;}`
text-decoration | Значения: none (нет), underline (подчеркнутый текст), overline (черта над текстом), line-through (текст перечеркнут), blink (мерцающий). Значения можно комбинировать. `U {text-decoration: underline;} .old {text-decoration: line-through;}`
text-transform | Изменяет регистр символов в элементе. Значения: capitalize (Первый Символ Каждого Слова Прописной), uppercase (ВСЕ БУКВЫ ПРОПИСНЫЕ), lowercase (все буквы строчные). `H1 {text-transform: uppercase;}`
text-align | Устанавливает горизонтальное положение текста. Может быть применено только к блочным элементам. `P {text-align: justify;} H4 {text-align: center;}`
text-indent | Устанавливает начальный отступ первой строки элемента. Применяется только к блочным элементам. Не может быть отрицательным. `P {text-indent: 5em;} H2 {text-indent: -25px;}`
vertical-align | Изменяет вертикальное выравнивание текста в строке или ячейке таблицы. Ключевые слова: baseline; middle; sub; super; top; text-top; bottom; text-bottom. `.super {vertical-align: super;}`
word-spacing | Устанавливает расстояние между словами, которые определены как строки символов, разделенные пробелами. `P {word-spacing: 0.5em;}`

Блочная модель, контейнеры, блоки...

Блочная модель

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

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

Свойства блока
margin-top | Устанавливает размер отступа сверху от элемента. Возможны отрицательные значения. `UL {margin-top: 0.5in;}`
margin-right | Устанавливает размер отступа справа от элемента. Возможны отрицательные значения. `IMG {margin-right: 30px;}`
margin-bottom | Устанавливает размер отступа снизу от элемента. Возможны отрицательные значения. `UL {margin-bottom: 0.5in;}`
margin-left | Устанавливает размер отступа слева от элемента. Возможны отрицательные значения. `P {margin-left: 3em;}`
margin | Краткая форма. Устанавливает размеры отступов снаружи элемента. Возможны отрицательные значения. Несколько значений читаются сверху по часовой стрелке: top-right-bottom-left. `H1 {margin: 2em;} P {margin: 0% 5% 0% 5%;}`
padding-top | Устанавливает размер отступа сверху внутри элемента, который наследует фон элемента. Отрицательные значения не возможны. `UL {padding-top: 0.5in;}`
padding-right | Устанавливает размер отступа справа внутри элемента, который наследует фон элемента. Отрицательные значения не возможны. `DIV {padding-right: 30px;}`
padding-bottom | Устанавливает размер отступа снизу внутри элемента, который наследует фон элемента. Отрицательные значения не возможны. `UL {padding-bottom: 0.5in;}`
padding-left | Устанавливает размер отступа слева внутри элемента, который наследует фон элемента. Отрицательные значения не возможны. `P {padding-left: 3em;}`
padding | Краткая форма. Устанавливает размеры отступов внутри элемента. Отрицательные значения не возможны. Несколько значений читаются сверху по часовой стрелке: top-right-bottom-left. `H1 {padding: 2ex;}`

Свойства блока (продолжаем...)
border-top-width | Устанавливает ширину верхней границы элемента, которая наследует фон элемента и может иметь свой цвет. Отрицательные значения не возможны. `UL {border-top-width: 0.5in;}`
border-right-width | Устанавливает ширину правой границы элемента, которая наследует фон элемента и может иметь свой цвет. Отрицательные значения не возможны. `IMG {border-right-width: 30px;}`
border-bottom-width | Устанавливает ширину нижней границы элемента, которая наследует фон элемента и может иметь свой цвет. Отрицательные значения не возможны. `UL {border-bottom-width: 0.5in;}`
border-left-width | Устанавливает ширину левой границы элемента, которая наследует фон элемента и может иметь свой цвет. Отрицательные значения не возможны. `P {border-left-width: 3em;}`
border-width | Устанавливает ширину границ элемента по периметру, которые наследуют фон элемента и могут иметь свой цвет. Отрицательные значения не возможны. `H1 {border-width: 2ex;}`
border-color | Устанавливает цвет границ элемента. Все четыре границы могут иметь различные значения. `H1 {border-color: silver black;}`
border-style | Устанавливает стиль отображения границ элемента. Значения: dashed; dotted; double; groove; inset; outset; ridge; solid; none. По умолчанию: none (границы не показываются, ширина равна 0). `H1 {border-style: solid; border-color: purple;}`

Свойства блока (продолжаем...)
border-top | Краткая форма записи, которая устанавливает ширину (width), цвет (color) и стиль (style) верхней границы элемента. `UL {border-top: 0.5in solid black;}`
border-right | Краткая форма записи, которая устанавливает ширину (width), цвет (color) и стиль (style) правой границы элемента. `IMG {border-right: 30px dotted blue;}`
border-bottom | Краткая форма записи, которая устанавливает ширину (width), цвет (color) и стиль (style) нижней границы элемента. `UL {border-bottom: 0.5in grooved green;}`
border-left | Краткая форма записи, которая устанавливает ширину (width), цвет (color) и стиль (style) левой границы элемента. `P {border-left: 3em solid gray;}`
border | Краткая форма записи, которая устанавливает ширину (width), цвет (color) и стиль (style) границ элемента по периметру. `H1 {border: 2px dashed tan;}`
width | Устанавливает ширину элемента. Не может иметь отрицательные значения. `TABLE {width: 80%;}`
height | Устанавливает высоту элемента. Не может иметь отрицательные значения. `IMG.icon {height: 50px;}`
float | Свойство "плавающего" элемента. Данное свойство определяет, будет ли блок перемещен влево, вправо или вообще не будет перемещен. Значения: left; right; none. `IMG {float: left;}`
clear | Это свойство определяет, какие стороны блока, порожденного элементом, не могут соседствовать с предшествующим перемещаемым блоком. Значения: both (обе стороны); left; right; none. По умолчанию: none. `H1 {clear: both;}`

Свойства классификации
display | Используется для изменения заданной по умолчанию формы представления HTML элементов. Некоторые значения: block; inline; list-item; none. Когда display="none" - элемент не отображается совсем и место для него не резервируется. `.hide {display: none;}`
white-space | Определяет поведение пробелов и переноса текста на новую строку внутри элемента. Значения: normal, pre, nowrap. `TD {white-space: nowrap;} TT {white-space: pre;}`

list-style-type

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

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

list-style-image | Используется для объявления изображения, используемого в качестве маркера неупорядоченных и упорядоченных списков. Применяется к элементам, у которых свойство display="list-item". `UL {list-style-image: url(bullet3.gif);}`
list-style-position | Используется для позиционирования маркеров или нумерации списков внутри или снаружи элементов списка. Значения: inside; outside. По умолчанию: outside. `LI {list-style-position: inside;}`
list-style | Краткая форма записи, собирающая все возможные свойства list-style. Применяется к элементам, у которых свойство display="list-item". `UL {list-style: square url(bullet3.gif) outer;}`

Псевдо-классы и Псевдо-элементы

anchor

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

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

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

`A.external:link { color: magenta }
<A CLASS="external" HREF="http://out.side/">внешняя ссылка</A>`

first-line | Применяется к первой линии текста в элементе и только к блочным элементам. `P:first-line {color: red;} <P>Первая строка параграфа красная. Далее что-то там там там...</P>`
first-letter | Применяется к первой букве в элементе и только к блочным элементам. `P:first-letter {color: red;} <P>Эта заглавная 'Э' в начале параграфа красная.</P>`

Свойства печати

page-break-after

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

`Пример:
<STYLE>
.page {page-break-after: always}
</STYLE>
...
<P CLASS="page">
...
`

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

Разное

cursor

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

Значения: 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 }`