Замечание: Стоит избегать использования вышеописанного способа. Inline-стили смешивают содержимое документа и его дизайн, в то время как идеологически более правильно отделять содержимое документа и информацию о его оформлении.

Синтаксис CSS

Все CSS-правила  состоят из селектора и блока объявлений (заключённого в фигурные скобки). Внутри блока объявлений (внутри фигурных скобок, проще говоря) может находиться одно или несколько объявлений, разделённых точкой с запятой. Объявление – это строка, составленная из css-свойства и его значения.

Как обычно выглядит css-правило

Как это может  выглядеть на практике? Вот три  примера CSS-правил:

Каждое правило  начинается с селектора (по-русски –  указателя), указывающего на те html-элементы, к которым мы собираемся применить css-правило.

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

Селекторы

Чтобы применить css-оформление к HTML-элементу или множеству  элементов, обычно используются селекторы – специальные указатели на HTML-объекты, к которым мы планируем применить css-правило.

Вот три основных вида селекторов.

HTML селекторы

Это простейший случай – в качестве селектора  мы используем имя того html-элемента, который хотим изменить. Например, для тега   селектором будет .  Соответственно, для тега селектором будет , и так далее. Теперь мы можем переопределить внешний вид всех таких элементов в нашем документе:

Селекторы класса

«Класс» - это  некое имя, строка, которое мы можем  применить к любым HTML-тегам, чтобы впоследствии ссылаться на них по имени класса. В качестве имени класса вы можете использовать практически любую строку. Удобство таких селекторов в том, что можно присвоить одно имя класса множеству html-тегов в документе и затем управлять их внешним видом, обращаясь к ним по имени класса:

ID селекторы (или  идентификаторы)

Любой идентификатор (ID) – это некое имя, которое  вы, так же, как и в случае с  классами, можете применить к любому HTML-тегу. Основное отличие – ID должен быть уникален в рамках html-документа:

Как применить один стиль  к нескольким селекторам

Очень распространённая задача – применить один набор  правил к нескольким разным селекторам. Это делается элементарно – достаточно перечислить селекторы через  запятую:

Впоследствии оформление для селекторов можно переопределить индивидуально:

Селекторы, зависящие от контекста

Мы научились  устанавливать стили для элементов HTML независимо от того, где именно в  документе они расположены. Но CSS чуть гибче, чем кажется. Мы можем  «прицеливаться» точнее и определять стили для элементов в зависимости от контекста (англ. Contextual Selectors).

Вот, посмотрите:

Это самый распространённый метод создания контекстуальных  селекторов, который называется «селектором  потомков». Разберём его подробнее.

Селекторы потомков

«Потомками» элемента HTML называются любые вложенные в  него элементы: это его «дети» (то есть непосредственно вложенные), дети его детей, и так далее, вглубь иерархии тегов.

Правильно используя  селекторы, мы можем прицельно применить CSS стили к нужным элементам, сославшись на их родительский элемент. Для этого перед селектором искомого элемента надо вставить селекторы его «предков», разделив их пробелом.

В приведённом  примере мы вроде бы создали список селекторов, разделённый пробелами. На самом деле это один селектор потомков. Он указывает на все гиперссылки (элементы A) вложенные в списки (элементы LI), в свою очередь находящиеся внутри элемента с идентификатором footer. У всех таких гиперссылок мы меняем толщину шрифта на bold (полужирный шрифт).

Селекторы детей

«Детьми» или  «дочерними элементами» элемента HTML называются непосредственно вложенные  в него элементы, он для них является «родительским» элементом. Элементы, находящиеся  на 2-м и более глубоких уровнях  вложенности, «детьми» не являются – это дети детей, то есть «потомки» (см. предыдущий раздел).

CSS позволяет  нам создать селектор для выбора  дочерних элементов любого элемента  и изменить их свойства, применив CSS стили. Для этого перед селектором  искомого элемента надо вставить селекторы его «предков», разделив их знаком >.

В приведённом  примере мы находим все элементы B, вложенные непосредственно в  элементы I, и выключаем для них  полужирный шрифт. Все остальные  элементы B в документе останутся  без изменений.

Селекторы смежных элементов (Adjacent Sibling Selectors)

Иногда нам  надо выбрать элемент, расположенный  в HTML-документе непосредственно  за другим элементом. Так, например, чтобы  выбрать все заголовки H1, следующие  за параграфами P, и изменить их верхний  отступ, мы напишем следующее правило CSS:

Важно: будет выбран только первый (!) заголовок H1, расположенный непосредственно после P. Если между элементами P и H1 встретится любой элемент, хоть один (даже если это  
) – то селектор не сработает и правило не применится.

Важно: селекторы смежных элементов появились в CSS v2 и поддерживаются, увы, не во всех браузерах. В Internet Explorer они появились только с 7-й версии, в Opera – с 5-й версии.

Обзор свойств CSS

Справочник опирается  на актуальную сейчас спецификацию CSS 2.1, соответственно, приведенный ниже список css-свойств ограничен рамками спецификации.

Основные  свойства

Список базовых  свойств, которые должен знать даже начинающий веб-мастер:

margin, padding, border, background-color, color, font-family, font-size, float

Фон

background

Сокращенный вариант записи для свойств background-color, background-image, background-repeat, background-attachment и background-position.

background-attachment

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

background-color

Устанавливает цвет фона для элемента.

background-image

Устанавливает фоновую картинку для элемента.

background-position

Устанавливает первоначальное положение для фоновой  картинки.

background-repeat

Управляет циклическим  повторением фоновой картинки.

Рамка (граница, бордюр)

Влияют  на все четыре рамки

border

Краткий вариант  записи для свойств border-width, border-style и border-color. Влияет на все четыре границы элемента.

border-color

Устанавливает цвет рамки со всех сторон элемента.

border-width

Устанавливает толщину рамки со всех сторон элемента.

border-style

Определяет  стиль оформления рамки вокруг элемента.

border-collapse

Указывает ячейкам  таблицы, иметь ли собственный бордюр или общий с соседней ячейкой.

border-spacing

Устанавливает расстояние между ячейками таблицы.

Верхняя рамка

border-top

Краткий вариант доступа к свойствам border-top-width, border-top-style и border-top-color.

border-top-color

Устанавливает цвет верхнего бордюра.

border-top-style

Устанавливает стиль линии верхнего бордюра.

border-top-width

Устанавливает ширину верхнего бордюра.

Нижняя рамка

border-bottom

Краткий вариант доступа к свойствам border-bottom-width, border-bottom-style и border-bottom-color.

border-bottom-color

Устанавливает цвет нижнего бордюра.

border-bottom-style

Устанавливает стиль линии нижнего бордюра.

border-bottom-width

Устанавливает ширину нижнего бордюра.

Левая рамка

border-left

Краткий вариант доступа к свойствам border-left-width, border-left-style and border-left-color.

border-left-color

Устанавливает цвет левого бордюра.

border-left-style

Устанавливает стиль линии левого бордюра.

border-left-width

Устанавливает ширину левого бордюра.

Правая  рамка

border-right

Краткий вариант  доступа к свойствам volume, border-right-style и border-right-color.

border-right-color

Устанавливает цвет правого бордюра.

border-right-style

Устанавливает стиль линии правого бордюра.

volume

Устанавливает ширину правого бордюра.

Шрифт

font

Краткий вариант записи свойств font-style, font-variant, font-weight, font-size, line-height и font-family.

font-family