- Общие сведения о CSS
- Правила описания стилей
- Способы подключения стилей к HTML-файлу
- Каскадность
- Расширенные возможности определения стиля
- Программы редактирования стилей CSS
- Управление свойствами элементов в CSS
- Форматирование текста
- Цвет фона и фоновое изображение
- Рамки, поля, отступы
- Позиционирование и другие свойства отображения блоковых элементов
- Приложения
1. Общие сведения о 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. В этом случае стиль относится только к данному экземпляру тега.
Пример:
<head><style type=text/css>
тег1 {описание}
тег2 {описание}
</style></head>
2. Стили записываются в теге-контейнере <style>...</style> в разделе Head HTML-документа. В этом случае стили применяются ко всем описанным тегам данного документа.
Пример ссылки на файл стилей:
<link rel="styleshet" type="text/css" href="URL_файла_стилей">
3. Стили записываются в виде отдельного текстового файла с расширением .css, а ссылка на файл указывается в разделе Head с помощью специального тега <link>. В этом случае стили будут применяться к тегам любого 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 {описание}
<тег1 class="класс1">...</тег1>
<тег1 class="класс2">...</тег1>
Вторая возможность - создать несколько стилей для одного тега, различая их с помощью специального имени, которое в селекторе присоединяется к имени тега через точку. Это имя называется класс (class). Имя классу можно дать произвольное, из допустимых символов.(*)
(*) Название класса не должно начинаться с цифры, содержать пробелов и символов подчёркивания.
Пример:
p {color: black}
p.mygray {color: #cccccc}
<p>Параграф без указания класса. Отображается черным цветом.</p>
<p class="mygray">Параграф со стилем класса "mygray". Отображается серым цветом.</p>
В разметке HTML-документа имя класса указывается как значение параметра class (без лидирующей точки). В зависимости от имени класса, к тегу подключается то или иное описание стиля.
Вариант использования селекторов class
Пока всё было похоже на работу со стилями в программе вёрстки: назначение элементу стиля отображения по умолчанию, возможность создать различные стили для одного элемента (собственно, именно это и понимается в программах вёрстки под использованием стилей). Но вот кое-что особое - стиль, который может быть применён к элементу любого типа (если он поддерживает указанное оформление). Это уже больше похоже на стили некоторых графических пакетов.
Пример:
.класс1 {описание}
.класс2 {описание}
По сути, это тот же класс (class), но без указания тега, к котому он относится.
Пример:
.mystyle1 { color: blue; background-color: yellow}
.mystyle2 {font-family: arial; color: red; text-align: center}
<h1 class="mystyle1">Текст заголовка</h1>
<hr class="mystyle2">
<p class="mystyle2">Текст параграфа</p>
Результат отображения различных элементов из примера:
- Заголовок первого уровня с текстом синего цвета на желтом фоне.
- Горизонтальная линия красного цвета; шрифт и выравнивание текста не поддерживаются этим элементом, поэтому будут проигнорированы; кроме того, некоторые браузеры не поддерживают назначение линии цвета.
- Параграф с текстом красного цвета и выключкой по центру.
Превдоклассы и псевдоэлементы
Есть и еще один способ уточнить назначение стиля - так называемые псевдоклассы. (Это относительно новое средство, и оно может не поддерживаться некоторыми старыми браузерами или реализовано в них частично.)
Пример псевдоклассов:
a:link {color: blue}
a:visited {color: red}
a:active {color: lightblue}
a:hover {color: darkblue}
Можно сказать, что псевдоклассы определяют форматирование элемента в зависимости от того, к какому классу относит их браузер. Например, браузер может определить, просмотрена ссылка пользователем или нет - и отнести её, соответственно, к классу просмотренных, непросмотренных или активных (пользователь нажал на ссылку). При этом нет ни необходимости, ни возможности специально определять это в HTML-разметке.
Понятно, что имена псевдоклассов, в отличие от имён классов, не являются произвольными, они стандартизированы. В селекторе они отделяются от имени тега двоеточием. А в HTML-разметке документа никак не обозначаются, поскольку, как мы сказали, браузер сам определяет их класс (псевдокласс).
Самые употребимые псевдоклассы используются для форматирования текстовых ссылок: подчёркивание, изменение цвета, кегля, шрифта и других текстовых параметров (подробнее см. ниже о форматировании текста).
Псевдоклассы тега <a>:
| Имя псевдокласса | Значения |
|---|---|
| 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. Форматирование текста
| Свойство | Описание | Значение (*) |
|---|---|---|
| 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} (недостающие значения берутся с противолежащих сторон) |
Приложение 6. Ссылки
Cascading Style Sheets, level 2. CSS2 Specification
Каскадные таблицы стилей второго уровня. Спецификация CSS2 (русский перевод)
TopStyle Lite. Бесплатная программа для создания файлов CSS.
Пример веб-страницы, сделанной специально для урока. В основе верстки - таблица и CSS.
Дополнительно пара иллюстраций к примеру: эскиз, с которого брались размеры и схема сложной нерегулярной структуры таблицы.
© 2005 Концепция урока, текст и html-вёрстка - Алексей Чмель aka arhip, ProDTP.