Экспресс-урок CSS

CSS

C помощью каскадых таблиц стилей CSS (Cascading Style Sheets) можно переопределить практически любой тег, включая массу тех настроек, которые не доступны через собственные средства HTML. CSS - это обычный текстовый файл с расширением .css, либо отдельная часть HTML-документа (см. ниже). Структура CSS-файла проще, она не требует никаких специальных обозначений начала или конца файла и не имеет особых разделов, содержит только перечисление стилей с определениями.
1. Правила описания стилей

Принципиальная схема записи стиля:
селектор {
свойство1: значение;
свойство2: значение;
свойство3: значение
} Семантика CSS подчиняется простому правилу: селектор {описание}. Селектором выступает тег HTML, а описание состоит из одного или нескольких пар свойство: значение.

Имя свойства и его значение пишутся через двоеточие, после которого допускается пробел, и разделяются точкой с запятой. Запись с новой строки или в строку не имеет значения. Как и HTML, CSS не чувствителен к регистру символов.

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

Стилевое описания может быть адресовано HTML-тегу несколькими способами:

Пример:
<тег style="описание">... 1. Стиль записывается как значение параметра style. В этом случае стиль относится только к данному экземпляру тега.

Пример:

тег1 {описание}
тег2 {описание}
2. Стили записываются в теге-контейнере ... в разделе Head HTML-документа. В этом случае стили применяются ко всем описанным тегам данного документа.

Пример ссылки на файл стилей:
3. Стили записываются в виде отдельного текстового файла с расширением .css, а ссылка на файл указывается в разделе Head с помощью специального тега . В этом случае стили будут применяться к тегам любого HTML-документа, который ссылается на данный CSS-файл.
3. Каскадность

Все 3 способа подключения стиля могут свободно сочетаться в одном документе. При этом возможны случаи, когда одному и тому же тегу определены конфликтующие стили в разных местах. Конфликт решается по принципу "каскадности" - довольно сложному правилу, кратко суть которого состоит в том, что различные способы задания стиля имеют различный приоритет. Браузер просматривает все назначения стиля для элемента и выбирает стиль с наивысшим приоритетом. Иными словами, общие способы назначения стиля имеет меньший приоритет, чем конкретные. Например, стиль, описанный в самом теге, имеет приоритет перед стилем для этого же тега в разделе Head, а тот, в свою очередь, имеет приоритет перед "прилинкованной" таблицей стилей. Более детальное описание смотрите в справочниках, но для начала можно обойтись тем, что выбрать только один из 3-х способов, руководствуясь следующим:

*
Первый способ не рекомендуется для широкого использования, т.к. лишает автора страниц гибкости в назначении стилей и усложняет редактирование. Тем не менее, он может быть удобен на этапе обучения или отладки стиля. С точки зрения традиционной вёрстки можно приравнять этот способ к локальному форматированию.
*
Второй способ предпочтителен для стилевой разметки одной веб-страницы.
*
Третий способ наиболее выгоден для разметки группы страниц, имеющих общее оформление, или для всего веб-сайта.
*
Второй и третий способы при необходимости относительно легко преобразуются друг в друга.

4. Расширенные возможности определения стиля

До сих пор говорилось о том, что один стиль определяется (тем или иным способом) для одного тега. Но если бы было только так, то все элементы HTML-документа, размеченные этим тегом, отображались бы одинаково. Это значительно уменьшило бы преимущество CSS перед обычными параметрами HTML, и "палитра стилей" ограничивалась бы количеством тегов. Однако CSS имеет ряд средств, которые позволяют значительно расширить эту палитру и, главное, - сделать её гибкой.
Контекстный селектор

Пример определения контекстного селектора:
p {color: black}
p em {color: red} Первая возможность сделать стили более гибкими - это указать, что вложенные теги могут быть отформатированны иначе. Например, гиперссылка в тексте параграфа оформляется одним способом, в таблице - другим, в заголовке - третим и т.п. Этот способ реализуется в CSS через специальный "составной" селектор, который называется контекстным.

В данном примере текст обычного параграфа будет чёрным, а выделение курсивом в параграфе - красным. Отдалённо напоминает возможности Nested Styles в Adobe InDesign CS.
Селекторы class

Пример определения классов:
тег1 {описание}
тег1.класс1 {описание}
тег1.класс2 {описание} Вторая возможность - создать несколько стилей для одного тега, различая их с помощью специального имени, которое в селекторе присоединяется к имени тега через точку. Это имя называется класс (class). Имя классу можно дать произвольное, из допустимых символов.(*)

<тег1 class="класс1">...
<тег1 class="класс2">...

(*) Название класса не должно начинаться с цифры, содержать пробелов и символов подчёркивания.

Пример:
p {color: black}
p.mygray {color: #cccccc} В разметке HTML-документа имя класса указывается как значение параметра class (без лидирующей точки). В зависимости от имени класса, к тегу подключается то или иное описание стиля.
Вариант использования селекторов class

Пока всё было похоже на работу со стилями в программе вёрстки: назначение элементу стиля отображения по умолчанию, возможность создать различные стили для одного элемента (собственно, именно это и понимается в программах вёрстки под использованием стилей). Но вот кое-что особое - стиль, который может быть применён к элементу любого типа (если он поддерживает указанное оформление). Это уже больше похоже на стили некоторых графических пакетов.

Пример:
.класс1 {описание}
.класс2 {описание} По сути, это тот же класс (class), но без указания тега, к котому он относится.

Пример:
.mystyle1 { color: blue; background-color: yellow}
.mystyle2 {font-family: arial; color: red; text-align: center} Результат отображения различных элементов из примера:

Текст заголовка

Текст параграфа

1.
Заголовок первого уровня с текстом синего цвета на желтом фоне.
2.
Горизонтальная линия красного цвета; шрифт и выравнивание текста не поддерживаются этим элементом, поэтому будут проигнорированы; кроме того, некоторые браузеры не поддерживают назначение линии цвета.
3.
Параграф с текстом красного цвета и выключкой по центру.

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

Есть и еще один способ уточнить назначение стиля - так называемые псевдоклассы. (Это относительно новое средство, и оно может не поддерживаться некоторыми старыми браузерами или реализовано в них частично.)

Пример псевдоклассов:
a:link {color: blue}
a:visited {color: red}
a:active {color: lightblue}
a:hover {color: darkblue}
Можно сказать, что псевдоклассы определяют форматирование элемента в зависимости от того, к какому классу относит их браузер. Например, браузер может определить, просмотрена ссылка пользователем или нет - и отнести её, соответственно, к классу просмотренных, непросмотренных или активных (пользователь нажал на ссылку). При этом нет ни необходимости, ни возможности специально определять это в HTML-разметке.

Понятно, что имена псевдоклассов, в отличие от имён классов, не являются произвольными, они стандартизированы. В селекторе они отделяются от имени тега двоеточием. А в HTML-разметке документа никак не обозначаются, поскольку, как мы сказали, браузер сам определяет их класс (псевдокласс).

Самые употребимые псевдоклассы используются для форматирования текстовых ссылок: подчёркивание, изменение цвета, кегля, шрифта и других текстовых параметров (подробнее см. ниже о форматировании текста).

Псевдоклассы тега :

Имя псевдокласса Значения
link Непосещённая ссылка.
visited Посещённая ссылка.
active Активная ссылка.
hover Ссылка, над которой находится указатель мыши.

(*) Рекомендуется соблюдать именно такой порядок описания свойств: link, visited, hover, active. Подробности см. в Спецификации CSS.

Кроме псевдоклассов надо упомянуть и псевдоэлементы (правила записи те же). Различие состоит в том, что псевдоэлемент ссылается на несуществующий класс элемента в HTML-документе. Например, первая строка абзаца - это элемент, понятный читателю интуитивно, но в действительности никак не обозначенный в HTML-разметке (тогда как выделение курсивом, для сравнения, обозначено явно). Упомянем здесь только 2 псевдоэлемента, которые ценны для верстальщика, т.к. затрагивают форматирование текста.

Имя псевдоэлемента Значения
first-letter Задаёт различные свойства текста, цвета, фона и др. для первой буквы элемента.
Может быть использован для создания буквицы.
first-line Задаёт различные свойства текста, цвета, фона и др. для первой строки элемента.

Таковы, вкратце, основые принципы каскадных таблиц стилей.
5. Программа для создания стилей CSS

Такие программы существуют - от простеньких бесплатных утилит до довольно развитых программ. Кроме того, функции редактирования стилей входят в состав визуальных редакторов веб-страниц (например, DreamWeaver). Условно эти программы можно разделить на два вида. В программах первой группы вы пишете код - и видите отображение результата в окне предварительного просмотра. В программах второй группы - вы отмечаете нужные опции (цвет, шрифт, расположение, поведение элемента и т.п.) - и программа сама формирует код. Даже не зная всех программ, можно уверенно сказать, что в любом случае у вас будет возможность отредактировать код вручную (*).

(*) Впрочем, оба принципа вообще характерны для программ-редакторов HTML-документов.

В качестве первой утилиты, которую вы можете попробовать, можно посоветовать - TopStyle от Bradbury Software (её версия Lite распространяется бесплатно). По нашей условной классификации её можно отнести к первой группе.
2. Управление свойствами элементов в CSS

Какими же свойствами элементов можно управлять с помощью CSS? Выделим четыре основных группы свойств:

1.
Форматирование текста.
2.
Фон и фоновое изображение.
3.
Рамки, поля, отступы.
4.
Позиционирование, наложение, отображение, обрезка.

1. Форматирование текста

Свойство Описание Значение (*)
font-family Гарнитура или тип шрифта Имя шрифта: "Arial", "Times New Roman", "Verdana", … Ключевые слова: serif, sans-serif, monospace, cursive, fantasy. Обратите внимание: в отличие от всех других свойств, значения свойства font-family записываются через запятую, чтобы подчеркнуть альтернативность выбора. При этом названия шрифтов, особенно содержащих пробелы, надо заключать в кавычки. Кроме названия гарнитур, настоятельно рекомендуется указывать также ключевое слово для типа гарнитуры, т.к. если требуемой гарнитуры не окажется в системе пользователя, будет использован шрифт по умолчанию соответствующего типа. Использование типов cursive и fantasy в русскоязычных документах ограничено из-за отсутствия в системе таких шрифтов, содержащих кириллицу.
font-size Кегль Число с указанием единиц измерения. Ключевые слова: xx-small, x-small, small, medium (умолчание), large, x-large, xx-large, а также smaller и larger. Smaller и larger задают размер шрифта относительно его размера в элементе-родителе; т.е. полужирное выделение со значением smaller будет меньшего типового размера, чем шрифт в содержащем его параграфе).
font-style Начертание Ключевые слова: normal, italic, oblique.
font-weight Насыщенность Ключевые слова: normal, bold, bolder, lighter. Ряд чисел: 100, 200, 300, 400 (=normal), 500, 600, 700, 800, 900 (=bold). Примечания: выбранный вариант насыщенности (особенно заданный числом) может отсутствовать в гарнитуре; значения bolder и lighter подчиняются тому же правилу, что и smaller/larger в свойстве font-size.
font-variant Капитель Ключевые слова: normal (=без капители), small-caps.
При отсутствии таких символов в шрифте формируется масштабированием прописных символов.
color Цвет текста Синтаксис см. в Приложении 2.
text-decoration Дополнительное оформление Ключевые слова: none (умолчание), underline, overline, line-through, blink (не рекомендуется).
text-align Выключка, горизонтальное выравнивание параграфа Ключевые слова: left, right, center, justify.
text-indent Красная строка Число с указанием единиц измерения
line-height Интерлиньяж, расстояние между строками Число с указанием единиц измерения
vertical-align Выравнивание относительно строки Ключевые слова: top, bottom, sub, super, baseline и др.
letter-spacing Трекинг, изменение расстояния между символами (затрагивает и пробелы). Ключевое слово: normal. Число с указанием единиц измерения, обычно в относительных единицах.
word-spacing Расстояние между словами Ключевое слово: normal. Число с указанием единиц измерения, обычно в относительных единицах.
text-transform Изменение регистра символов Ключевые слова: uppercase, lowercase, capitalize, none (=без изменений).

(*) В виде списка представлены альтернативные, взаимоисключающие варианты (кроме свойства font-family, где оба варианта могут использоваться вместе).

Некоторые атрибуты текста могут быть заданы перечислением в одном свойстве font: font-weight, font-size, font-style, font-family, line-height (без запятых, кроме разделения названий шрифтов, а font-size и line-height - через дробь, как это принято в традиционной вёрстке).

Пример:
p {font: "Verdana", sans-serif 12pt/15pt italic} Пример задаёт для абзаца шрифт Verdana (или другой рубленый) курсивного начертания, 10-го кегля, с интерлиньяжем 12 п., капитель и насыщенность не указаны (будут использованы значения по умолчанию - normal или параметры элемента-родителя).
Форматирование списков

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

Свойство Описание Значение (*)
list-style-type Тип маркера списка Ключевые слова: none, disk, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha.
Примечание: Свойство реализуется, если это позволяют значение свойства list-style-image: недоступно изображение для маркера и/или оно задано none.
list-style-image Изображение в качестве маркера списка URL (синтаксис см. в Приложении 3). Ключевое слово: none.
list-style-position Положение маркера в списке Ключевые слова: inside, outside.

(*) В виде списка представлены альтернативные, взаимоисключающие варианты.

Пример:
UL, OL {list-style: свойство1 свойство2 свойство3} Все три свойства могут быть записаны в виде перечисления значений одного свойства list-style.
2. Цвет фона и фоновое изображение

Свойство Описание Значение (*)
background-color Цвет фона Синтаксис см. в Приложении 2.
Исключение - доступно ключевое слово transparent (значение по умолчанию).
background-image Фоновое изображение URL (синтаксис см. в Приложении 3). Ключевое слово: none.
background-repeat Режимы повтора фонового изображения Ключевые слова: no-repeat (изображение не повторяется), repeat (изображение повторяется по вертикали и по горизонтали до заполнения элемента), repeat-x (изображение повторяется по горизонтали), repeat-y (изображение повторяется по вертикали).
background-attachment Поведение фонового изображения при прокрутке документа Ключевые слова: fixed (изображение неподвижно), scroll (изображение перемещается вместе с докуметом).
background-position Начальное положение фонового изображения в блоке элемента Число с указанием единиц измерения (указывает на положение верхнего левого угла изображения по отношению к верхнему левому углу элемента), по умолчанию эти точки изображения и элемента совмещены. Комбинации ключевых слов: top, bottom, left, right, center.

(*) В виде списка представлены альтернативные, взаимоисключающие варианты.

Пример:
h1 {background: gray url(mybg1.gif) left} Все свойства фона могут быть записаны также в виде перечисления значений одного свойства background.
3. Рамки, поля, отступы

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

Свойство Описание Значение (*)
margin margin-top
margin-right
margin-bottom
margin-left Величина полей 4 числовых значения (начиная с верхнего поля, по часовой стрелке, через пробел). Отдельно для любой комбинации четырёх свойств.
padding padding-top
padding-right
padding-bottom
padding-left Величина отступов 4 числовых значения (начиная с верхнего отступа, по часовой стрелке, через пробел). Отдельно для любой комбинации четырёх свойств.
border-color border-top-color
border-right-color
border-bottom-color
border-left-color Цвет границы 4 значения цвета (начиная с верхней границы, по часовой стрелке, через пробел). Отдельно для любой комбинации четырёх свойств.
border-width border-top-width
border-right-width
border-bottom-width
border-left-width Ширина границы 4 числовых значения (начиная с верхней границы, по часовой стрелке, через пробел) или в виде ключевых слов: thin, medium, thick. Отдельно для любой комбинации четырёх свойств.
border-style border-top-style
border-right-style
border-bottom-style
border-left-style Тип границы 4 значения (начиная с верхней границы, по часовой стрелке, через пробел) в виде ключевых слов: none, solid (умолчание, когда задано свойство width), double, groove, ridge, inset, outset. Отдельно для любой комбинации четырёх свойств.

(*) В виде списка представлены альтернативные, взаимоисключающие варианты.

Пример:
div {
border-top: gray solid 2px
border-right: darkgray solid 2px
border-bottom: black solid 2px
border-left: gray solid 2px
}

Настройки границы могут быть заданы также перечислением в одном свойстве border или в произвольном наборе четырех свойств (см. пример).

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

Описание этой группы свойств также опирается на схему строения блокового элемента (см. выше), особенно в части позиционирования и размеров. Другие свойства являются довольно специфическими и используются, как правило, для динамических изменений элементов и их поведения через скрипты. Свойства этой группы довольно сложны по своему воздействию на элементы HTML, поэтому здесь даётся лишь минимум информации. Подробнее см. в Спецификации CSS.

Свойство Описание Значение (*)
left Смещение левого края элемента от левой стороны элемента-контейнера Числовое значение.
top Смещение верхнего края элемента от верхней стороны элемента-контейнера Числовое значение.
width Ширина элемента (от его левой стороны) Числовое значение.
height Высота элемента (от его верхней стороны) Числовое значение.
position Положение элемента относительно родительского Ключевые слова: absolute, relative, static (умолчание).
Значение absolute (совместно со свойствами left и top) позволяет извлечь элемент из естественного потока документа и разместить его независимо по заданным координатам.
Значение relative близко по действию к absolute (доступны свойства top и left), однако положение элемента отсчитывается от его естественного размещения в документе.
Значение static внешне действует так, как будто бы свойство position не задано (свойства top и left недоступны), однако может влиять на поведение элементов-потомков.
overflow Поведение элемента при его переполнении содержимым Ключевые слова: visible (заставляет элемент подстраиваться под размер содержимого), hidden (скрывает содержимое по размеру блока элемента), auto (не изменяет размер, но при необходимости добавляет полосы прокрутки), scroll (всегда добавляет полосы прокрутки).
clip Размеры видимой области (близкая аналогия в вёрстке - clipping mask). Выражение rect(top right bottom left), где в скобках - числовые значения. Ключевое слово: auto (умолчание).
visibility Управляет отображением элемента, не извлекая его из потока документа Ключевые слова: inherit (наследует свойство элемента-родителя), visible (виден), hidden (скрыт).
display Управляет отображением элемента в потоке документа Ключевые слова: block (как блок), inline (как элемент в составе строки), list-item (как элемент списка), none (не отображается).
z-index Управляет отображением элемента в вертикальной "стопе" (для верстальщика близкой аналогией могут быть слои) Числовое начение: целое положительное число (ноль и отрицательные числа распознаются не всеми браузерами). Большее значение "перемещает" элемент выше в "стопе". Ключевое слово: auto.
float Задаёт особое отображение элемента в виде "плавающего" объекта (в вёрстке близкой аналогии нет): элемент, оставаясь в пределах контейнера, смещается к его левой или правой стороне Ключевые слова: left, right, none (умолчание).

(*) В виде списка представлены альтернативные, взаимоисключающие варианты.
Приложения
Приложение 1. Единицы измерения

В CSS используются следующие единицы измерения (*):

Чаще Реже
px - пиксел em - высота шрифта
% - процент ex - высота буквы "x"
mm - миллиметр cm - сантиметр
pt - пункт pc - пика

(*) Не ставьте пробел между числовым значением и сокращенным обозначением единиц измерения. Для некоторых браузеров это является ошибкой и пара "свойство-значение" будет проигнорирована.
Приложение 2. Обозначение цвета

Способы обозначения цвета в CSS для свойств color и background-color:

Пример Описание
#ff0000 #rrggbb - шестнадцатиричное значение цвета.
#f00 #rgb - сокращённая запись предыдущего варианта.
rgb(255, 0, 0) Значение цвета в RGB. Числа в диапазоне 0—255.
rgb(100%, 0%, 0%) Значение цвета в RGB. Числа в диапазоне 0.0—100.0%.
red Зарезервированные имена (*)

(*) См. полный список с примерами.
Приложение 3. Обозначение URL

URL-адрес в CSS задаётся в виде выражения url(...), где в скобках указывается полный или относительный путь. Обратите внимание: в CSS адрес интерпретируется относительно расположения файла стилей, а не HTML-страницы, которая ссылается на этот файл.
Приложение 4. Обозначение комментариев

Комментарии в CSS заключаются между символами "/*" и "*/" (без кавычек). Между парами символов комментария могут находится несколько строк. Удобное средство для временного отключения любого элемента стилевого описания или нескольких стилей.
Приложение 5. Группирование свойств

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

Вариант 1 Вариант 2
h1 {font-family: Arial}
h2 {font-family: Arial}
h3 {font-family: Arial} h1, h2, h3 {font-family: Arial}
h1 {font-family: Arial}
h1 {font-weight: bold}
h1 {font-size: 14pt} h1 {
font-family: Arial;
font-weight: bold;
font-size: 14pt
}
или
h1 {font: Arial bold 14pt}
div {
border-top-width: 1;
border-right-width: 1;
border-bottom-width: 1;
border-left-width: 1;
} div {border-width: 1 1 1 1}
(с верхней по часовой стрелке)
или
div {border-width: 1}
div {
border-top-color: black;
border-right-color: white;
border-bottom-color: black;
border-left-color: white;
} div {border-color: black white black white}
(с верхней по часовой стрелке)
или
div {border-color: black white}
(недостающие значения берутся
с противолежащих сторон)