Общие сведения

CSS (Cascading Style Sheets — каскадные таблицы стилей) – одна из базовых технологий в современном Интернете. Нечасто можно встретить сайт, свёрстанный без примененения CSS.

CSS-код – это список инструкций для браузера, – как и где отображать элементы веб-страницы, написанный особым образом. Под «элементами» обычно подразумеваются теги XHTML/HTML и их содержимое.

Инструкции CSS удобно хранить в виде отдельного текстового файла с расширением «.css», либо в виде отдельного текстового фрагмента в начале XHTML/HTML-документа (см. Включение CSS в HTML документ).

Основная идея CSS в том, чтобы отделить дизайн документа от его содержимого. CSS отвечает за оформление и внешний вид, а XHTML/HTML — за содержание и логическую структуру документа.

Посмотрим на фрагмент XHTML-документа:

<h1>Сказка про Красную Шапочку</h1>
<p>Жила однажды в далекой деревушке маленькая прелестная девочка. …</p>

Из служебной XHTML разметки мы видим только элемент заголовка h1 и абзаца p, и ни слова об оформлении — шрифтах, цвете текста, фоне, отступах и прочем дизайне. Всё это возложено на CSS:

/* оформляем заголовки: */
h1 {
color: red;
background-color: yellow;
font: Tahoma 2em;
}
/* оформляем абзацы текста: */
p {
color: grey;
line-height: 150%;
}

Включение CSS в HTML документ

Для того, чтобы применить таблицу стилей к HTML-документу, мы можем избрать один из трёх способов, либо комбинировать их:

применить внешние стили (в виде отдельного текстового .css-файла) с помощью элемента link

встроить стили непосредственно в HTML-документ (в виде блока css-текста) с помощью элемента style

применить inline-стиль, то есть назначить стиль конкретному HTML-элементу непосредственно в документе, с помощью HTML-атрибута style

Разберём эти способы подробнее.

Внешние стили (external style sheets)

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

<link rel=”stylesheet” type=”text/css” href=”mystyle.css” media=”all” />

Встретив в HTML-документе этот тег, браузер загрузит с сайта CSS-файл (в нашем случае это mystyle.css) и применит к документу содержащиеся в нём стили. Файл не должен содержать ничего, кроме CSS-инструкций.

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

Таблицы стилей документа (document style sheets)

Называются так потому, что располагаются непосредственно в HTML-документе и применяются только к нему. Иногда называются embedded style sheet (встроенный стиль).

CSS-стили и комментарии располагаются между открывающим и закрывающим тегами элемента style:

<style type=”text/css”>
...
</style>

Сам тег style (в отличие от link) может находиться в любой части документа, но обычно его размещают внутри элемента head. Стили, подставляемые в строку (inline styles)

Иногда нужно назначить стиль отдельному элементу на странице, не применяя внешних стилей и элемента style. Типичный случай — элемент встречается единожды в документе или на сайте, но требует особого оформления. Воспользуемся атрибутом style (именно атрибутом элементов, а не элементом!):

<p style=”color: red”>Я абзац, выделенный красным цветом, других таких на сайте нет</p>

Атрибут style есть почти у всех HTML-элементов. Кроме тех, что располагаются вне элемента body.

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

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

Синтаксис CSS

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

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

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

a {text-decoration: none;}
p.announce {border: 1px dashed black;} /* здесь селектор - p.announce */
p.note {
display: block; /* да, объявлений может быть несколько */
float: right; /* и их не обязательно писать на одной строке */
}

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

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

Селекторы

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

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

HTML селекторы

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

<h1> селектором будет h1, и так далее. Теперь мы можем переопределить внешний вид всех таких элементов в нашем документе:
strong {font-weight: normal; color: red;}
h1 { font: bold 10pt verdana; }

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

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

.myClass { font: bold 10pt verdana; } /* меняем шрифт для всех тегов с классом myClass */

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

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

#myObj { margin: 1em; } /* изменяем поля для элемента, у которого id=”myObj” */
span#today { margin: 1em; } /* изменяем поля для элемента span, у которого id=”today” */

Применение одного стиля к нескольким селекторам

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

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

/* все параграфы и списки делаем красными, шрифтом Tahoma */
p, li, ul, ol {color:red; font-face: Tahoma, sans-serif;}
/* переопределяем цвет на синий для нумерованных списков */
ol {color: blue;}

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

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

Вот, посмотрите: /* все ссылки, находящиеся внутри списков, станут красными: */ li a {color: red;} /* все ссылки в параграфах, находящихся внутри таблиц, станут зелеными: */ table p a {color: green;}

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

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

«Потомками» элемента 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

Определяет шрифт(ы) для отображения текста.

font-size

Управляет размером шрифта.

font-style

Управляет наклоном шрифта (курсив).

font-variant

Управляет внешним видом строчных букв (строчные как прописные, "капитель").

font-weight

Управляет толщиной (насыщенностью) шрифта.

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

position

Определяет порядок, в соответствии с которым элемент отображается на веб-странице.

bottom

Сдвигает элемент относительно нижнего края. Используется совместно со свойством position.

left

Сдвигает элемент относительно левого края. Используется совместно со свойством position.

page-break-before

Сдвигает элемент относительно верхнего края. Используется совместно со свойством position.

right

Сдвигает элемент относительно правого края. Используется совместно со свойством position.

z-index

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

Форматирование

clear

Запрещает/разрешает элементу обтекать "floated" объекты.

clip

Определяет область элемента, которая должна отображаться на странице.

display

Изменяет базовые свойства элементов.

float

Сдвигает элемент к правому или левому краю.

height

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

overflow

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

visibility

Управляет настройкой видимости элемента.

width

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

Списки

list-style

позволяет одновременно задать три параметра для маркеров пунктов списка: list-style-type, list-style-position и/или list-style-image.

list-style-image

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

list-style-position

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

list-style-type

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

Текст

direction

Применяется при создании сайтов на языках, в которых чтение страницы идет справа налево.

letter-spacing

Определяет длину интервала между буквами.

page-break-inside

Определяет размер межстрочного интервала.

text-align

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

text-decoration

Определяет, какой оформительский прием нужно применить к тексту.

text-indent

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

text-transform

Управляет написанием прописных или строчных букв в тексте.

vertical-align

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

white-space

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

word-spacing

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

[collapse collapsed]

Печать

widows

Позволяет избежать появления висячей строки.

orphans

Позволяет избежать появления одинокой первой строки.

page-break-after

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

page-break-before

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

page-break-inside

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

Поля

padding

Сокращенный способ задать следующие параметры: padding-top, padding-right, padding-bottom и/или padding-left.

padding-bottom

Определяет ширину пространства между содержимым элемента и нижним бордюром.

padding-left

Определяет ширину пространства между содержимым элемента и левым бордюром.

padding-right

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

padding-top

Определяет ширину внешнего пространства между верхним бордюром и невидимой границей прямоугольника.

Прочее

caption-side

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

color

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

content

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

counter-increment

Задает значения приращений счетчика.

counter-reset

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

cursor

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

empty-cells

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

margin

Сокращенный способ задать следующие параметры: margin-top, margin-right, margin-bottom и/или margin-left

margin-bottom

Определяет ширину внешнего пространства между нижним бордюром и невидимой границей прямоугольника.

margin-left

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

margin-right

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

margin-top

Определяет ширину внешнего пространства между верхним бордюром и невидимой границей прямоугольника.

max-height

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

max-width

Определяет максимальную ширину элемента.

min-height

Определяет минимальную высоту элемента.

min-width

Определяет минимальную ширину элемента.

outline

Это быстрый способ задать следующие параметры: outline-width, outline-style и/или outline-color.

outline-color

Определяет цвет контура вокруг элемента.

outline-style

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

outline-width

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

quotes

Определяет вид открывающей и закрывающей кавычки в тексте.

table-layout

Определяет ширину столбцов в таблице.

Сокращённые свойства CSS

Некоторые свойства CSS принято называть сокращениями или сокращёнными свойствами (shorthand property). Они предоставляют короткий, компактный способ записи для нескольких других, более узкоспециализированных свойств. Например, сокращённое свойство border управляет внешним видом рамки вокруг элемента, позволяя определить в одной строке сразу несколько атрибутов: цвет, стиль и ширину рамки. Иначе для этого понадобились бы свойства border-width, border-style и border-color. Список сокращённых свойств:

font - сокращенное свойство для свойств шрифта:

font-style

font-variant

font-weight

font-size

line-height

font-family

background - сокращенный вариант записи для свойств фона:

background-color

background-image

background-repeat

background-attachment

background-position

margin - сокращенное свойство для управления внешними отступами:

margin-top

margin-right

margin-bottom

margin-left

padding - сокращенное свойство для управления внутренними отступами:

padding-top

padding-right

padding-bottom

padding-left

border - сокращенный вариант записи для свойств бордюра:

border-width

border-style

border-color

Приоритет в каскаде стилей (!important)

Объявление !important переводится на русский как !важно.

Если к паре свойство - значение приписать объявление !important, тогда это значение CSS-свойства получит максимальный приоритет в каскаде стилей. Проще говоря, это объявление сработает для элемента независимо от наличия других правил CSS для этого же элемента.

!important добавляется вот так:

Внимание! Очень распространённая ошибка – располагать !important после точки с запятой. Браузер игнорирует такие записи.

Задание цвета в CSS

CSS предлагает нам четыре удобных способа указать цвет.

По имени. Используются англоязычные названия цветов, например blue или red (см. Именованные цвета).

В шестнадцатиричном RGB (например, #71C354 или #3C9). Этот способ широко используется в HTML (см. Безопасные (browser-safe) цвета в CSS).

В десятичном формате RGB (например, rgb (126, 6, 9)), где значение каждой компоненты цвета может варьироваться от 0 до 255.

В формате RGB с указанием величин в процентах, например, rgb (30%, 40%, 70%)), где значение каждой компоненты цвета может варьироваться от 0 до 100.

Пример

/* Несколько способов сделать параграфы зелеными: */
p {color: lime}
p {color: rgb(0,255,0)}
p {color: #0f0}
p {color: #00ff00}
p {color: rgb(0%, 100%, 0%)}

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

Задание размеров (длина, ширина) в CSS

Размеры задаются в числовых значениях - отрицательных и положительных. Допустимы десятичные дроби, дробная часть пишется через знак «.» (точка).

Сразу после числа необходимо указать единицу измерения.

Существует множество единиц измерения.

em

Ширина буквы m в настоящем шрифте. Например, p {text-indent: 3em} задаст красную строку абзаца шириной в три буквы m.

ex

Высота буквы x в настоящем шрифте. Применяется аналогично em.

px

Размер в пикселах.

in

Размер в дюймах. Один дюйм = 2.54 сантиметра.

cm

Размер в сантиметрах.

mm

Размер в миллиметрах.

pt

Размер в пунктах. Один пункт = 1/72 дюйма (в CSS 2.1).

pc

Размер в пиках. (12 пунктов).

Примеры

body {margin: 1in}
table {padding: 1.5cm}
p {text-indent: -2pt}
img.logo {height: 12px}
p {text-indent: 3em}
blockquote {padding-bottom: 2ex}
table {border-width: 7.5pc}