Справка по CSS

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

Устройство таблицы стилей

Таблица устроена довольно просто: она состоит из двух полей (столбцов) и множества записей
Пример:

Селектор	Стили
A	{text-decoration: underline;}
H1 A	{color: red; text-decoration: none;}
PRE.code	{font-family: Courier; font-size 0.8em;}

Записывается таблица в простом текстовом файле с расширением css.

A {text-decoration: underline;}
H1 A {color: red; text-decoration: none;}

Можно использовать переносы строки и табуляцию для удобочитаемости:

A {
	color: red;
	text-decoration: none;
}

Рассмотрим сначала селекторы.

Селекторы

Селекторы определяют каким элементам (элемент — это то что расположено между открывающим и закрывающим тегом) будет приписан стиль (то что в правой колонке таблицы).

Самый простейший селектор представляет из себя просто имя тега. Например в первой строке верхней таблицы указан тег A. Это значит что стиль справа от него будет применяться ко всем ссылкам, более точно ко всем кускам вашего HTML документа, которые лежат между <A> </A>.
Итак, в качестве селектора вы можете написать любое имя тега (даже BODY).

В селекторе можно перечислять группы тегов с помощью запятой: H1,H2,H3,H4,H5,H6 — запись означает что стиль будет применяться ко всем заголовкам.

Если нужно применить стиль не ко всем элементам используют операторы "больше" и "пробел":
P A — все элементы A, которые вложенны в P.
P>A отличается от предыдущего тем, что А должен быть вложен непосредственно в P: <P><ul><A> </A></ul></P> — здесь сработает P A, но не P>A.

Для того, чтобы выделить один конкретный элемент используют выбор по идентификатору:
A#id1 применит стиль к элементу <A id="id1"> </A>

Если нужно выбрать несколько элементов используйте селектор по классу:
A.class1 выберет <A class="class1"> </A>

Спец. символ "звездочка" * обозначает "любомй элемент". Его можно употреблять везде вместо имен тегов.

Стили

Стилями является то, что заключено в фигурные скобки: { }.

Cинтаксис:

{имя_стиля: значение; другое_имя_стиля: значение;}

Возможные стили и значения можно изучить в редакторе CSS Eclipse.

Опишем часто используемые стили и их возможные значения.

Цвета

color: — задает основной цвет элемента (будь-то цвет текста, горизонтальной линии или маркеров списка).
background-color: — цвет фона элемента.

Цвет можно задавать словом, например: color: red
или же в формате RGB — Red Green Blue, задавая яркость каждого канала в шестнадцатеричной кодировке от 00 до ff.
Например: color: #AAAACC; даст серо-голубой цвет.

Шрифты

font-size: например 14pt;
font-family: Arial или Courier или Sans;

Границы элементов

margin-[top,left,right,bottom]: расстояние
padding-[top,left,right,bottom]: расстояние

Писать можно что-то одно из квадратных скобок, например: margin-top: 10px;

Margin определяет отступ от границы соседнего элемента.
Padding определяет отступ содержимого элемента от его границы изнутри.

Растояние измеряется в

пикселях (px)
в em — размер символа текущего шрифта
в процентах (%) от размера элемента