На самом простом уровне, стиль является всего лишь правилом, сообщающим браузеру, как интерпретировать отдельные теги HTML. С каждым тегом связан ряд свойств, значения которых определяют его вид при выводе браузером. Так, например, у большинства тегов (<P>, <TD>, и т. д.) есть свойство COLOR, значение которого определяет цвет, используемый для отображения содержимого тега.
Таблица (лист) стилей CSS -- набор правил отображения, применяемых в документе, к которому присоединяется соответствующая таблица стилей. Все свойства, использующиеся в таблицах стилей, условно можно разделить на несколько групп:
· управляющие видом шрифта (гарнитура, кегль, цвет, наклон, жирность,..);
· управляющие форматированием абзаца (отступ красной строки, выравнивание, интерлиньяж, расстояние между словами,..);
· другие (цвет ссылок, изменение внешнего вида курсора,..).
Использование стилей
Одним из способов подключения стиля к HTML-странице (остальные способы рассматриваются в параграфе "Каскадные таблицы стилей") является использование в заголовке документа контейнера <STYLE>:
<HEAD>...<STYLE TYPE="text/css"> ... описание стилей ...</STYLE>...</HEAD>
Включение в этот контейнер атрибута TYPE="text/css" указывает браузеру, что в нем содержится описание стилей. В настоящее время атрибут TYPE может принимать только указанное значение, однако если он будет опущен, то некоторые браузеры могут проигнорировать всю таблицу стилей.
Само описание стиля включает селектор тега, указывающий имя тега, на который распространяется правило стиля, и фигурные скобки, содержащие одну или более пар объявлений вида "свойство_стиля:значение", разделенных точкой с запятой:
Если в фигурных скобках указано всего одно правило, то точку с запятой можно опустить.
Пример
<HTML><HEAD><TITLE>Первый пример использования стилей</TITLE><STYLE TYPE="text/css"><!-- H1 {text-align: center}--></STYLE></HEAD><BODY><H1>Заголовок</H1><P>Какой-то текст</BODY></HTML>
В данном примере в секции заголовка документа <HEAD> ... </HEAD> задан стиль (правило), согласно которому браузер должен выравнивать по центру страницы содержимое контейнера <H1> ... </H1>: свойству text-align присвоено значение center.
Обратите внимание на использование тегов комментария (<!-- и -->). Все содержимое контейнера <STYLE> находится между ними. Это позволяет скрыть информацию о стиле от браузеров, которые не распознают тег <STYLE> (в противном случае они могут принять правила за текст и вывести их на экран).
В таблицах стилей также можно использовать комментарии, позволяющие описать то или иное свойство: текст, расположенный между символами /* и */ не обрабатывается браузером и не рассматривается, как элемент таблицы стилей (не путайте теги комментария и комментарии таблиц стилей, они имеют разный синтаксис и разное назначение).
Пример Рассмотрим пример оформления текста. Установим белый цвет фона документа (свойство background-color), затем задействуем свойства управления шрифтом: color (цвет), font-family (гарнитура шрифта) и font-size (размер шрифта), например,
· цвет -- серый;
· семейство шрифта (гарнитура) -- Times, шрифт с засечками;
· размер шрифта -- 14 пунктов.
Добавим свойства, связанные с форматированием абзаца: text-indent (отступ красной строки), text-align (выравнивание), padding-left (отступ слева), например,
· дополнительный отступ красной строки -- 10pt;
· выравнивание -- по ширине документа;
· отступ от левого края -- 20pt.
Установим темно-красный цвет (свойство color) заголовков с первого по третий уровень.
Документ примет вид:
<HTML><HEAD><TITLE>Второй пример использования стилей</TITLE><STYLE TYPE="text/css"><!-- BODY {background-color: white} H1, H2, H3 {color: red} P { /* шрифт */ color: gray; font-family: Times, serif; font-size: 14pt; /* абзац */ text-indent: 10pt; text-align: justify; padding-left: 20pt; }--></STYLE></HEAD><BODY>...</BODY></HTML>
Задание значений
Для задания значений в правилах таблиц стилей важно использовать корректный синтаксис.
Задание цвета (color), также как и в тегах HTML, возможно двумя способами: наименованием и численным значением. Спецификация CSS1 ("Спецификации каскадных таблиц стилей, уровень 1"), разработанная Консорциумом World Wide Web (W3C), перечисляет только 16 наименований цветов, которые можно использовать в таблицах стилей:
aqua gray navy silverblack green olive tealblue lime purple whitefuchsia maroon red yellow
Другие наименования из полного списка цветов, приведенного ниже, также могут поддерживаться некоторыми браузерами.
Web-цвета по оттенкам
black white Нейтральные/холодные darkgray ghostwhite silver darkslategray gray slategraydimgray lightgrey snowgainsboro lightslategray Нейтральные/теплые antiquewhite ivory papayawhipcornsilk linen seashellfloralwhite oldlace Коричневые/бронзовые beige chocolate rosybrownbisque khaki siennablanchedalmond moccasin tanbrown navajowhite wheatburlywood peru
Красные crimson firebrick maroondarkred indianred red
При задании цвета численным значением используют либо шестнадцатеричное значение, либо тройку вида rgb(red, green, blue), где red, green и blue являются числами в диапазоне от 0 до 255, либо процентными величинами, определяющими яркость каждой составляющей цвета в RGB. Значения 255 или 100% указывают, что соответствующая составляющая цвета имеет максимальную яркость; значения 0 или 0% -- соответствующая составляющая полностью отсутствует.
Во втором примере используется трехзначный синтаксис, при использовании которого три цифры преобразуются в шесть путем дублирования каждой из них.
При задании единиц длины (length) используют число, за которым без пробелов следует двухсимвольное обозначение единицы измерения (em, ex, in, cm и др.) Обозначения единиц измерения еm и ех относятся к общей высоте шрифта и высоте буквы "х" соответственно. Единица измерения рх соответствует величине пиксела на экране, а in, cm, mm, pt и рс обозначают дюймы, сантиметры, миллиметры, пункты и цицеро соответственно. В дюйме 25,4 миллиметра или 72,27 пункта, а в цицеро -- 12 пунктов. Если значение равно нулю, обозначение единицы измерения можно опустить.
Пример
P {font-size: 12pt}H3 {text-indent: 20em}
Некоторые значения могут быть заданы в процентах (percent). При этом они вычисляются как процент от другого свойства элемента, обычно его размера.
Пример
P {line-height: 120%}
Для указания местоположения ресурса используется его URL-адрес. В этом случае после ключевого слова url сразу (без пробелов) следует открывающая круглая скобка, а за ней - URL, заключенный, при желании, в одиночные или двойные кавычки, и закрывающая правая скобка.
Пример
BODY { background: url(http://www.image.ru/image/pic1.gif) }
Наконец, некоторые значения являются последовательностью (list) других величин и описываются как "список" некоторых значений. Список состоит из одного или более допустимых значений, разделяемых запятыми.
Пример
P {font-family: Times, serif}
Все указанные обозначения используются в кратком справочнике по таблицам стилей, приведенном далее. Справочник по свойствам таблиц стилей
Свойство и его описание
Браузер
background: list
Составное свойство, определяющее привязку фона (background-attachment), цвет фона (background-color), изображение для фона (background-image), положение фона и повторение фона (background-position, background-repeat); list представляет собой значения этих свойств, указанные в любом порядке
N, IE
background-attachment: scroll
Указывает, должно ли фоновое изображение фиксироваться или прокручиваться вместе с документом. Допустимые значения: fixed (фиксированный), scroll (прокручиваемый)
IE
background-color: transparent
Устанавливает цвет фона для элемента. Допустимые значения: color, transparent (прозрачный)
N, IE
background-image: none
Указывает фоновое изображение элемента. Допустимые значения: url, transparent (прозрачный), none
N, IE
background-position
Устанавливает исходное положение фонового изображения элемента; как правило, указываются парные значения для определения координат х, у. Положение по умолчанию 0%,0%. Допустимые значения: length, percent, top, center, bottom, left, right
IE
background-repeat: repeat
Определяет, каким образом фоновое изображение заполняет элемент. Допустимые значения: repeat, repeat-x, repeat-y, no-repeat
N, IE
border: list
Устанавливает все четыре границы элемента; значением может быть одна или более величин цвета, ширины границы и стиля границы
N, IE
border-bottom: list
Устанавливает нижнюю границу элемента; значением может быть одна или более величин цвета, ширина нижней границы и стиль границы
IE
border-bottom-width: medium
Устанавливает толщину нижней границы элемента. Допустимые значения: length, medium, thin, thick
N, IE
border-color: list
Устанавливает цвет всех четырех границ элемента; значением по умолчанию является цвет элемента
N
border-left: list
Устанавливает левую границу элемента; значением может быть одна или более величин цвета, ширина левой границы и стиль границы
IE
border-left-width: medium
Устанавливает толщину левой границы элемента. Допустимые значения: length, medium, thin, thick
N, IE
border-right: list
Устанавливает правую границу элемента; значением может быть одна или более величин цвета, ширина правой границы и стиль границы
IE
border-right-width: medium
Устанавливает толщину правой границы элемента. Допустимые значения: length, medium, thin, thick
N, IE
border-style: none
Устанавливает стиль всех четырех границ элемента. Допустимые значения: none (отсутствует), dashed (штриховая), dotted (пунктир), double (двойная), groove (канавка), inset (утопленная), outset (возвышающаяся), ridge (гребень), solid (сплошная)
N, IE
border-top: list
Устанавливает верхнюю границу для элемента; значением может быть одна или более величин цвета, ширина верхней границы и стиль границы
IE
border-top-width: medium
Устанавливает толщину верхней границы элемента. Допустимые значения: length, medium, thin, thick
N, IE
border-width: medium
Устанавливает толщину всех четырех границ элемента. Допустимые значения: length, medium, thin, thick
N, IE
clear: none
Определяет, какие поля элемента не должны примыкать к плавающему элементу. Элемент будет перемещен вниз на такую величину, чтобы это поле оказалось свободным. Допустимые значения: none (нет), both (оба), left (левое), right (правое)
float: none
Определяет, является ли элемент плавающим с выравниванием по левому или правому краю, позволяя тексту обтекать его, либо выводится внутристрочно (при указании none). Допустимые значения: left (слева), right (справа), none (нет)
N, IE
font: list
Определяет все атрибуты шрифта для элемента; значениями могут быть стиль шрифта, тип шрифта, насыщенность, размер, высота строки и семейство шрифтов в указанном порядке
N, IE
font-family: список имен шрифтов
Определяет шрифт, используемый в элементе. Значение может быть как специфическим именем, так и одним из родовых шрифтов serif, sans-serif, cursive, fantasy или monospace
N, IE
font-size: medium
Определяет размер шрифта. Допустимые значения: length, percent, xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller
N, IE
font-style: normal
Определяет начертание шрифта как нормальное или один из видов наклонного. Допустимые значения: italic (курсив), oblique (наклонный), normal (нормальный)
N, IE
font-variant: normal
Указывает, должен ли шрифт выводиться маленькими прописными буквами. Допустимые значения: smallcaps, normal
IE
font-weight: normal
Определяет насыщенность начертания шрифта. Если используется число, оно должно быть кратным 100 и находиться между 100 и 900; 400 соответствует нормальному шрифту, а 700 равносильно ключевому слову bold (полужирный). Допустимые значения: number, bold, bolder, lighter, normal
N, IE
height: auto
Задает высоту элемента. Допустимые значения: length, auto
N
letter-spacing: normal
Вставляет дополнительные промежутки между символами текста. Допустимые значения: length, normal
IE
line-height: normal
Устанавливает расстояние между базовыми линиями соседних строк. Допустимые значения: length, number, percent, normal
N, IE
list-style: list
Определяет стили списка с использованием любых значений для изображения, положения и типа списка - list-style-image, list-style-position, list-style-type
N, IE
list-style-image: none
Определяет изображение, используемое в качестве маркера элемента списка вместо устанавливаемого типом списка list-style-type. Допустимые значения: url, none
IE
list-style-position: outside
Устанавливает отступ или выступ (по умолчанию) маркера элемента списка относительно его содержания. Допустимые значения: inside (отступ), outside (выступ)
list-style-type: disk
Определяет маркер элемента списка для неупорядоченных списков (circle, disc, square - окружность, круг, квадрат соответственно) или упорядоченных списков (все остальные). Допустимые значения: circle (окружность), square (квадрат), decimal (десятичные цифры), disc (круг), lower-alpha (строчные буквы), lower-roman (строчные римские цифры), none (нет), upper-alpha (прописные буквы), upper-roman (прописные римские цифры)
N, IE
margin
Определяет все четыре поля элемента. Допустимые значения: length, percent, auto
IE
margin-bottom
Определяет нижнее поле элемента; значением по умолчанию служит 0. Допустимые значения: length, percent, auto
N IE
margin-left
Определяет левое поле элемента; значением по умолчанию служит 0. Допустимые значения: length, percent, auto
N, IE
margin-right
Определяет правое поле элемента; значением по умолчанию служит 0. Допустимые значения: length, percent, auto
N, IE
margin-top
Определяет верхнее поле элемента; значением по умолчанию служит 0. Допустимые значения: length, percent, auto
N, IE
padding: list
Задает величину всех четырех отступов вокруг элемента
IE
padding-bottom
Указывает величину отступа от элемента снизу; значением по умолчанию служит 0. Допустимые значения: length, percent
N, IE
padding-left
Указывает величину отступа от элемента слева; значением по умолчанию служит 0. Допустимые значения: length, percent
N, IE
padding-right
Указывает величину отступа от элемента справа; значением по умолчанию служит 0. Допустимые значения: length, percent
N, IE
padding-top
Указывает величину отступа от элемента сверху; значением по умолчанию служит 0. Допустимые значения: length, percent
N, IE
text-align: стиль
Определяет тип выравнивания для элемента. Значение по умолчанию зависит от элемента. Допустимые значения: center (по центру), justify (по всей доступной области), left (к левому краю), right (к правому краю)
N, IE
text-decoration: none
Определяет виды украшения текста; значения можно объединять. Допустимые значения: blink (мерцание), none (нет), line-through (перечеркнутый), overline (надчеркивание), underline (подчеркивание)
text-indent
Задает отступ первой строки в элементе; значением по умолчанию служит 0. Допустимые значения: length, percent
N, IE
text-transform: none
Преобразует указанным образом текст в элементе. Допустимые значения: capitalize (прописные буквы), lowercase (нижний регистр), none (нет), uppercase (верхний регистр)
N, IE
vertical-align: позиция
Выравнивание элемента по вертикали. Значение по умолчанию зависит от элемента. Допустимые значения: percent, baseline (базовая линия), bottom (низ), middle (середина), sub (подстрочный), super (надстрочный), text-bottom (низ текста), text-top (верх текста), top (верх)
N, IE
word-spacing: normal
Вставляет дополнительный промежуток между словами. Допустимые значения: length, normal
white-space: normal
Определяет, как обрабатываются символы пробелов, табуляции и пустой строки в элементе. Допустимые значения: normal, nowrap (без переноса), pre
N
width: auto
Определяет ширину элемента. Допустимые значения: length, percent, auto
N, IE
Классы стилей
При написании HTML-документов довольно часто встречается необходимость каким-либо образом выделять блоки информации, подчеркивать их уникальность или логическую нагрузку. Например, в учебнике по математике кроме обычного описания материала могут присутствовать теоремы, задания, примеры и др. Стандартный HTML предоставляет нам теги логической разметки, например, тег <BLOCKQUOTE> предназначен для длинных цитат. CSS дает возможность самим придумывать логические конструкции и описывать их внешний вид.
Допустим, мы хотим создать страницу, на которой будет два вида абзацев (тег <P>), причем оба вида будут постоянно чередоваться и часто повторяться. Типичный пример такой страницы - интервью, в котором чередуются вопросы журналиста и ответы интервьюируемого. Естественно, при создании такой страницы мы захотим визуально отделить вопросы и ответы друг от друга.
Сначала выделим абзацы (вопросы журналиста и ответы интервьюируемого) с помощью селектора классаCLASS.
Вопросы журналиста будут отображаться шрифтом серии sans-serif серого цвета, полужирным начертанием, размером 12 пунктов, с отступом 100 пикселов от левого края страницы, с выравниванием по ширине. Ответы же будут отображены шрифтом Times, размером 14 пунктов черного цвета, с отступом 20 пикселов от левого края страницы, с выравниванием по ширине.
Вложенные элементы наследуют правила, заданные для родительских элементов. Так, например, если в абзац, содержащий вопрос журналиста, включить фрагмент текста, выделенный курсивным начертанием, то этот фрагмент при отображении браузером уже будет иметь выделение как курсивом, так и полужирным шрифтом. Это связано с тем, что текст, заключенный между тегами <I> и </I>, входит в состав абзаца и наследует его свойства.
