Глава 5. Каскадные таблицы стилей

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

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

ПРИМЕЧАНИЕ                 Во всех текстовых процессорах имеется таблица стилей, по умолчанию назначающая предопределенный стиль вновь открываемым документам, их абзацам и тексту. В Microsoft Word for Windows этот шаблон стилей называется Normal (Обычный) и устанавливает гарнитуру Times New Roman, кегль 10 пунктов, выравнивание абзаца по левой стороне и одинарный шаг между строками.

Каждое правило состоит из двух частей селектора   ( selector ), т. е. объекта, к которому применяется правило, и объявления  ( declaration ), содержащего параметры ( properties ) и их значения ( values ). В примере PARA { FONT: 12pt "Century Schoolbook" } селектором является PARA (объект « абзац» ), а в объявлении содержится параметр FONT (« шрифт» ) и его значения 12pt и "Century Schoolbook" .

ПРИМЕЧАНИЕ                 В этом примере размер шрифта имеет лишь приблизительное значение. Реальный размер шрифта заголовка часто зависит от приложения, в котором создан этот заголовок, и от броузера, который будет выводить его на экран. Пользователи, искушенные в вопросах работы с таблицами стилей, рекомендуют использовать не абсолютные, а относительные размеры шрифта. Устанавливая абсолютный размер шрифта , мы указываем конкретную цифру (например, 12 пунктов), тогда как, работая с относительным размером шрифта , мы указываем, насколько больше или меньше — относительно текущей величины — будет этот размер.

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

В мае 1996 года Интернет-консорциум W3C (The World Wide Web Consortium) объявил о разработке каскадных таблиц стилей   (Cascading Style Sheets — CSS )  — наборов таблиц стилей документов, позволяющих разработчикам форматировать и изменять внешний вид XML- (и HTML-) документов таким же образом, как это делается в текстовом процессоре. Стало возможным привязывать несколько каскадных таблиц стилей к одному документу и определять несколько стилей для отдельного объекта. В общем случае конкретному объекту назначается последний из стилей, примененных к предшествующим объектам. Сейчас полностью или частично таблицы стилей поддерживаются только некоторыми броузерами, остальные должны обеспечить такую поддержку в ближайшее время.

Эпоха каскадных таблиц стилей для XML- (и HTML-) документов только еще началась. Существуют два стандарта каскадных таблиц стилей: CSS1 и CSS2. Изначально был внедрен стандарт CSS1 — простой набор правил форматирования и размещения текста, абзацев и документов.

Текущий стандарт, CSS2, дополнил CSS1 набором стилей для визуальных броузеров, устройств озвучивания текстов, принтеров, приспособлений Брэйля и т. п. Кроме того, были определены стили представления табличных данных, стили для работы с неанглийскими (так называемыми « локализованными» ) источниками и многое другое. Пока стандарт CSS2 не будет поддерживаться большей частью броузеров, предпочтительнее руководствоваться стандартом CSS1, требования и особенности которого рассматриваются в настоящей главе.

Более подробно о различиях между стандартами CSS1 и CSS2 см. приложение 2 «Редакторы и утилиты XML», а также спецификацию каскадных таблиц стилей (Level 2) в Интернете (http://www.w3.org/TR/REC-CSS2/ ).

В этой и последующих главах речь пойдет о двух языках, используемых при написании каскадных таблиц стилей: CSS и DSSSL Online. Последний представляет собой диалект языка DSSSL (Document Style Semantics and Specification Language — язык семантики и спецификации стиля документа). Сейчас ведутся работы над созданием языка XSL (XML Stylesheeet Language — язык таблиц стилей XML), на котором таблицы стилей для XML-документов будут составляться с использованием приемов и объектов XML.

Обратите внимание на перечисленные в разделе « Таблицы стилей» приложения 4 «Web–библиография» Интернет–адреса первоисточников по различным языкам для написания таблиц стилей: DSSSL, DSSSL-O, CSS1, CSS2 и XSL. Кроме того, постоянно обновляемые справочные материалы и ссылки на другие источники по таблицам стилей находятся на сайте W3C (http://www.w3c.org/ ).

Преимущества таблиц стилей

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

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

ПРИМЕЧАНИЕ                 Разработчики XML-документов должны, насколько это возможно, предотвращать конфликты создаваемых ими таблиц стилей с таблицами, создаваемыми пользователями. Надо также учитывать, что часть броузеров не поддерживают таблицы стилей. Во всех случаях полезно убедиться, что ваш документ выглядит удовлетворительно как с присоединенной таблицей стилей, так и без нее.

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

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

Определение стилей

Определить стиль объекта документа достаточно просто. Для этого достаточно связать с объектом одно или несколько правил. В качестве примера задания абзацного стиля установим стиль объекта PARA :

PARA { color: red; font-family: Arial, "Century

Gothic",sans-serif;font-style: italic }

Чтобы сделать код более читабельным, воспользуемся отступами:

PARA {

    color: red;

    font-family: Arial, "Century Gothic", sans-serif;

    font-style: italic

}

В соответствии с этим набором параметров предполагается, что весь текст абзаца будет выведен в красном цвете шрифтом курсивного начертания с использованием гарнитуры Arial, или гарнитуры Century Gothic, или — если таковые не инсталлированы — иной гарнитуры без засечек из числа имеющихся на данном компьютере. Поскольку размер шрифта (параметр font-size ) явно не указан, броузер назначит величину, используемую по умолчанию.

ПРИМЕЧАНИЕ                 Если строковый параметр состоит из двух слов (скажем, название гарнитуры Century Gothic) или включает знаки препинания, он должен быть заключен в кавычки (например, “Century Gothic” ).

Чтобы задать одно и то же правило для нескольких объектов, нужно их перечислить, а затем описать требуемое правило. Этот прием можно использовать тогда, когда надо назначить один и тот же цвет нескольким уровням заголовков документа:

HEAD1, HEAD2, HEADS, HEAD4 { color: red }

Можно также определить специальные свойства объектов, вложенных в другие объекты. Возьмем для примера пункт списка ( LI ) внутри упорядоченного списка ( OL ) в документе HTML:

OL LI { font-style: Arial; font-size: small }

ПРИМЕЧАНИЕ                 Обратите внимание: при перечислении однородных объектов (таких, как заголовки) мы разделяем их запятыми, в то время как объекты разного порядка (такие, как список OL и пункт списка LI ) отделяются друг от друга пробелом.

Комментарии к таблицам стилей заключаются в наклонные скобки со звездочками ( /* */ ), например:

UL { font-weight: demi-bold } /* Все неупорядоченные списки */

Привязка каскадной таблицы стилей к XML-документу осуществляется в форме объявления особого типа документа:

<!doctype style-sheet

PUBLIC "-//A. Author//DTD CSS Style Sheet//EN">

Документ, являющийся таблицей стилей, должен содержать определения элементов и правила задания стилей.

Привязка каскадной таблицы стилей к XML-документу

К HTML-документу внешний файл с описанием стилей привязывается с помощью элемента LINK . Одна или более таблиц стилей могут быть привязаны к XML–документу тем же способом. Для этого в пролог XML-документа достаточно включить таблицу стилей с помощью инструкции xml:style sheet или xml:alternate-style sheet . Синтаксис:

<?xml:style sheet|alternate-style sheet

    href={"|'} stylename .css {"|'}

    type={"|'} text /css {"|'}

    [charset={"|'} charset {"|'}]

    [media={"|'} media {"|'}]

    [title={"|'} doctitle {"|'}]?>

Аргументы:

·        style sheet  — ключевое слово, указывающее, что присоединенный документ представляет собой таблицу стилей.

·        alternate-style sheet  — ключевое слово, указывающее, что присоединенный документ представляет собой альтернативную таблицу стилей.

·        href задает URL ссылки на внешний документ, являющийся таблицей стилей.

·        type задает тип имени ссылки, используемый для информации в пределах текущего документа.

·        charset устанавливает набор символов для отображения данных, получаемых по ссылке, заданной атрибутом href .

·        media идентифицирует тип устройства, назначенного для воспроизведения информации.

·        title задает имя заголовка для документа, являющегося внешней таблицей стилей.

Пример:

<?xml:style sheet href="styler.css" type="text/css"?>

ПРИМЕЧАНИЕ                 Дополнительную информацию по использованию инструкций xml:style sheet и xml:alternate style sheet см. в соответствующих разделах главы 2 «XML».

Поиск нужного параметра

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

Таблица 5.1. Параметры каскадных таблиц стилей

Параметры таблиц стилей

В этом разделе перечислены документированные к настоящему времени параметры каскадных таблиц стилей. Как и в табл. 5.1, все параметры приведены в алфавитном порядке, в описание каждого параметра включены пункты о его назначении, синтаксисе, аргументах, а также пункты с комментариями и примерами. Если вы хотите иметь самую свежую информацию по данному вопросу, рекомендуем обратиться к источникам в Интернете, приведенным в разделе «Таблицы стилей» приложения 4 «Web-библиография».

ПРИМЕЧАНИЕ                 Далее по тексту главы все значения параметров, назначаемые им по умолчанию, выделены подчеркиванием.

background    совокупность параметров фона

Назначение

Задает одновременно до пяти параметров оформления фона страницы.

Синтаксис

background: { background-attachment_value

    | background-color_value

    | background-image_value

    | background-position_value

    | background-repeat_value }

Аргументы

·        background-attachment_value задает, будет ли фоновый рисунок прокручиваться вместе с текстом (см. параметр background-attachment ).

·        background-color_value задает цвет фона элемента (см. параметр background-color ).

·        background-image_value задает фоновое изображение для элемента (см. параметр background-image ).

·        background-position_value задает начальную позицию фонового изображения (см. параметр background-position ).

·        background-repeat_value задает число повторений фонового изображения на экране (см. параметр background-repeat .

Комментарии

Данный параметр устанавливает свойства фона так же, как если бы они были установлены при раздельном задании параметров background-attachment , background-color , background-image , background-position и background-repeat .

Имя параметра не требует явного указания. Броузер должен самостоятельно интерпретировать введенные значения и назначить их соответствующим параметрам.

Шестнадцатеричные значения, соответствующие отдельным цветам, приведены в табл. 5.2.

Значения, присвоенные данному параметру, не наследуются.

Пример

P.image {background: url (pattern.gif) silver repeat fixed }

Таблица 5.2. Отдельные оттенки цвета и соответствующие шестнадцатеричные значения

background attachments             способ привязки фонового рисунка

Назначение

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

Синтаксис

background-attachment:{ scroll | fixed }

Аргументы

·        scroll задает режим, при котором фоновый рисунок перемещается одновременно с содержимым текущей страницы при ее прокрутке в окне. Это значение придается данному параметру по умолчанию.

·        fixed привязывает фоновый рисунок к границам окна.

Комментарии

Значения, присвоенные данному параметру, не наследуются.

Пример

BODY { background-image: url (pattern.gif);

    background-color: silver;

    background-attachment: fixed }

background-color         цвет фона

Назначение

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

Синтаксис

background-color: { color-name |#rgb |# rrggbb

|rgb( rrr , ggg , bbb )

|rgb( rrr %, ggg %,bbb %)| transparent }

Аргументы

n       color-name задает цвет фона посредством выбранного значения ключевого слова. Система воспринимает следующие значения: red (красный) maroon (малиновый), yellow (желтый), green (зеленый), lime (салатный), teal (бирюзовый), olive (оливковый), aqua (голубой), blue (синий), navy (темно-синий), purple (сиреневый), fuchsia (розовый), black (черный), gray (серый), silver (светло-серый) и white (белый).

·        #rgb представляет собой трехзначный код назначаемого композитного цвета. Код составлен из трех однозначных шестнадцатеричных цифр, каждая из которых может принимать значения от 0  (ноль) до F  (шестнадцатеричное 15) и задает уровень интенсивности соответствующих компонентов цвета: r  — красного, g  — зеленого и b  — синего.

·        #rrggbb представляет собой шестизначный код назначаемого композитного цвета. Код составлен из трех пар двузначных шестнадцатеричных цифр, каждая из которых может принимать значения от 00  (ноль) до FF  (шестнадцатеричное 255) и задает уровень интенсивности соответствующих компонентов цвета: rr  — красного, gg  — зеленого и bb  — синего.

·        rgb(rrr, ggg, bbb) представляет собой абсолютные значения уровня интенсивности соответствующих компонентов цвета: красного ( rrr ), зеленого ( ggg ) и синего ( bbb ), выраженные трехзначными десятичными цифрами, каждая из которых может принимать значения в пределах от 000 (ноль) до 255.

·        rgb(rrr.d%, ggg.e%, bbb.f%) представляет собой относительные значения уровня интенсивности соответствующих компонентов цвета: красного ( rrr ), зеленого ( ggg ) и синего ( bbb ), выраженные в процентах к максимуму с точностью до первого десятичного знака. Максимум интенсивности (100.0%) соответствует десятичному значению 255; минимум (0.0%) — десятичному значению 000 (ноль).

·        transparent  — ключевое слово, обозначающее, что цвет фона специально не назначен. Данный параметр получает это значение по умолчанию.

Комментарии

Исходный цвет назначается в соответствии с настройками броузера.

Шестнадцатеричные значения, соответствующие отдельным цветам, приведены в табл. 5.2.

Значения, присвоенные данному параметру, не наследуются.

Пример

BODY { background-color: silver }

background-image        фоновый рисунок

Назначение

Задает фоновый рисунок для текущего документа или части документа.

Синтаксис

background-image: {url( url_name )|none }

Аргументы

·        url_name сообщает местоположение (URL) графического файла, используемого в качестве фонового изображения.

·        none указывает на то, что фоновое изображение не назначено (значение по умолчанию).

Комментарии

Значения, присвоенные данному параметру, не наследуются.

Пример

ONEPAGE { background-image: url (pattern.gif);

        background-color: silver }

background-position    расположение фонового рисунка

Назначение

Задает точку отсчета для координат местоположения фонового рисунка.

Синтаксис

background-position:{ [+|-] percent %|[+|-]length |{1,2}

    |[0%|[+|-] vert_pos ]|[0%|[+|-]horiz_pos ] }

Аргументы

n       percent  — положительное число, задающее масштаб выведенного изображения в процентах к размерам исходного. Обязательно указывайте символ процента ( % ).

·        length  — длина, положительное число, за которым следует двухбуквенное обозначение используемой единицы измерения.

·        1,2  — значения координат верхнего левого или нижнего правого угла рисунка.

·        vert_pos  — определяет расположение изображения на экране по вертикали. Возможные значения: top (сверху), center (в центре) и bottom (снизу).

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

Комментарии

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

Относительные измерения:

n       em  — текущий кегль (высота шрифта);

n       ex  — высота буквы x для текущего кегля;

n       px  — пикселы (относительно координат окна).

Абсолютные измерения:

n       in  — дюймы;

n       cm  — сантиметры;

n       mm  — миллиметры;

n       pt  — пункты;

n       pc  — пики.

Указав один процент или задав значение length , вы определяете горизонтальное расположение рисунка.

По умолчанию назначается величина 0% 0% , что эквивалентно значениям top-left и left-top .

Величина 0% 50% эквивалентна значениям left , left-center и center-left .

Величина 50% 0% эквивалентна значениям top , top-center и center-top .

Величина 100% 0% эквивалентна значениям right-top и top-right .

Величина 0% 100% эквивалентна значениям left-bottom и bottom-left .

Величина 100% 100% эквивалентна значениям bottom-right и right-bottom .

Значения, присвоенные данному параметру, не наследуются.

Пример

ONEPAGE { background-image: url (pattern.gif);

        background-position: 50% 50%;

        background-color: silver }

background-repeat       повторение фонового рисунка

Назначение

Повторяет фоновый рисунок при выводе на экран заданное число раз.

Синтаксис

background-repeat: { repeat |repeat-x|repeat-y

|no-repeat }

Аргументы

n       repeat заполняет рисунком всю площадь страницы. Это значение дается данному параметру по умолчанию.

·        repeat-x заполняет страницу рисунком по горизонтали, от левого края к правому.

·        repeat-y заполняет страницу рисунком по вертикали, от верхнего края к нижнему.

·        no-repeat не повторяет рисунок при заполнении страницы.

Комментарии

Значения, присвоенные данному параметру, не наследуются.

Пример

BIGPAGE { background-image: url(pattern.gif);

background-repeat: repeat-x; background-color: teal

}

border              свойства всех сторон рамки

Назначение

Устанавливает цвет, стиль и/или толщину всех четырех сторон рамки.

Синтаксис

border: { [ border-color_value ]|[border-style_value ]

    [ border-width_value ] }

Аргументы

·        border-color_value задает цвет всех четырех сторон рамки (см. параметр border-color property ).

·        border-style_value задает стиль всех четырех сторон рамки (см. параметр border-style property ).

·        border-width_value задает толщину всех четырех сторон рамки (см. параметр border-top-width property ).

Комментарии

Этот параметр устанавливает одновременно несколько правил оформления четырех сторон рамки так же, как если бы эти правила были заданы путем раздельной установки параметров border-color , border-style и border-width .

Имя параметра не требует явного указания.

Броузер должен самостоятельно интерпретировать введенные значения и назначить их соответствующим параметрам.

Шестнадцатеричные значения, соответствующие отдельным цветам, приведены в табл. 5.2.

Данному параметру изначально не присваивается никакого значения.

Значения, присвоенные данному параметру, не наследуются.

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

Пример

S { border: red double medium }

border-bottom                свойства нижней стороны рамки

Назначение

Устанавливает цвет, стиль и/или толщину нижней стороны рамки.

Синтаксис

border-bottom: { [ border-color_value ]

    |[ border-style_value ]

    [ border-bottom-width_value ] }

Аргументы

n       border-color_value задает цвет рамки (см. параметр border-color ).

·        border-style_value устанавливает стиль рамки (см. параметр border-style ).

·        border-bottom-width_value задает толщину рамки (см. параметр border-bottom-width ).

Комментарии

Этот параметр устанавливает одновременно несколько правил для нижней стороны рамки так же, как если бы эти правила были заданы путем раздельной установки параметров border-color , border-style и border-bottom-width .

Имя параметра не требует явного указания. Броузер должен самостоятельно интерпретировать введенные значения и назначить их соответствующим параметрам.

Шестнадцатеричные значения, соответствующие отдельным цветам, приведены в табл. 5.2.

Данному параметру изначально не присваивается никакого значения.

Значения, присвоенные данному параметру, не наследуются.

Параметр border-bottom воспринимает только один стиль — в отличии от параметра border-style , где может быть указано до четырех стилей.

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

Пример

IMG { border-bottom: black solid thick }

border-bottom-width     толщина нижней стороны рамки

Назначение

Устанавливает толщину нижней стороны рамки.

Синтаксис

border-bottom-width:{ thin| medium |thick| length }

Аргументы

n       thin соответствует толщине меньшей, чем medium или thick .

·        medium шире, чем thin , но уже, чем thick . Это значение дается данному параметру по умолчанию.

·        thick шире, чем thin или medium .

·        length  — толщина, положительное число, за которым следует двухбуквенное обозначение используемой единицы измерения.

Комментарии

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

Реально отображаемая толщина рамки может различаться в зависимости от используемого броузера.

Значения, присвоенные данному параметру, не наследуются.

Пример

TEXT { border-bottom-width: thick }

border-color   цвет всех сторон рамки

Назначение

Задает цвет одной, двух, трех или четырех сторон рамки.

Синтаксис

border-color: { [ color-name_t |#rgb_t |# rrggbb_t

    |rgb ( rrr_t , ggg_t , bbb_t )

    |rgb ( rrr_t %, ggg_t %, bbb_t %)]

    [ color-name_r |#rgb_r |# rrggbb_r

    |rgb( rrr_r , ggg_r , bbb_r )

    |rgb( rrr_r %, ggg_r %, bbb_r %)]

    [ color-name_b |#rgb_b |# rrggbb_b

    |rgb( rrr_b , ggg_b , bbb_b )

    |rgb( rrr_b %, ggg_b %, bbb_b %)]

    [ color-name_l |#rgb_l

    |# rrggbb_l |rgb (rrr_l , ggg_l , bbb_l )

    |rgb ( rrr_l %, ggg_l %, bbb_l %)] }

Аргументы

n       color-name_t , color-name_r , color-name_b и color-name_1 задают цвета верхней, правой, нижней и левой сторон рамки. Для этого могут использоваться следующие ключевые слова: red (красный), maroon (малиновый), yellow (желтый), green (зеленый), lime (салатный), teal (бирюзовый), olive (оливковый), aqua (голубой), blue (синий), navy (темно-синий), purple (сиреневый), fuchsia (розовый), black (черный), gray (серый), silver (светло-серый) и white (белый).

·        #rgb_t , #rgb_r , #rgb_b и #rgb_l представляют собой трехзначные коды компонентов цвета для, соответственно, верхней, правой, нижней и левой сторон рамки. Код составлен из трех однозначных шестнадцатеричных цифр, каждая из которых может принимать значения от 0  (ноль) до F  (шестнадцатеричное 15) и задает уровень интенсивности соответствующих компонентов цвета: r  — красного, g  — зеленого и b  — синего.

·        #rrggbb_t , #rrggbb_r , #rrggbb_b и #rrggbb_l представляют собой шестизначные коды компонентов цвета для, соответственно, верхней, правой, нижней и левой сторон рамки. Код составлен из трех пар двузначных шестнадцатеричных цифр, каждая из которых может принимать значения от 00  (ноль) до FF  (шестнадцатеричное 255) и задает уровень интенсивности соответствующих компонентов цвета: rr  — красного, gg  — зеленого и bb  — синего.

·        rgb (rrr_t, ggg_t, bbb_t) , rgb (rrr_r, ggg_r, bbb_r) , rgb (rrr_b ,ggg_b ,bbb_b) и rgb (rrr_l, ggg_l, bbb_l) представляют собой абсолютные значения уровня интенсивности соответствующих компонентов цвета для верхней, правой, нижней и левой сторон рамки: красного ( rrr ), зеленого ( ggg ) и синего ( bbb ), выраженные трехзначными десятичными цифрами, каждая из которых может принимать значения в пределах от 000 (ноль) до 255.

·        rgb (rrr.d_t%, ggg.e_t%, bbb.f_t%) , rgb (rrr.d_r%, ggg.e_r%, bbb.f_r%) , rgb (rrr.d_b%, ggg.e_b%, bbb.f_b%) и rgb (rrr.d_l%, ggg.e_l%, bbb.f_l%) представляют собой относительные значения уровня интенсивности соответствующих компонентов цвета для верхней, правой, нижней и левой сторон рамки: красного ( rrr ), зеленого ( ggg ) и синего ( bbb ), выраженные в процентах к максимуму с точностью до первого десятичного знака. Максимум интенсивности (100.0%) соответствует десятичному значению 255; минимум (0.0%) — десятичному значению 000 (ноль).

Комментарии

За назначение исходного цвета рамки отвечают внутренние настройки броузера.

Шестнадцатеричные значения, соответствующие отдельным цветам, приведены в табл. 5.2.

Значения, присвоенные данному параметру, наследуются.

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

Пример

HEAD4 { border-color: blue; border-width: thin }

border-left      свойства левой стороны рамки

Назначение

Устанавливает цвет, стиль и/или толщину левой стороны рамки.

Синтаксис

border-left: { [ border-color_value ]

    |[ border-style_value ]

    [ border-left-width_value ] }

Аргументы

n       border-color_value задает цвет рамки (см. параметр border-color ).

·        border-style_value задает стиль рамки (см. параметр border-style ).

·        border-left-width_value задает толщину рамки (см. параметр border-left-width ).

Комментарии

Этот параметр устанавливает одновременно несколько правил для левой стороны рамки так же, как если бы эти правила были заданы путем раздельной установки параметров border-color , border-style и border-left-width .

Имя параметра не требует явного указания. Броузер должен самостоятельно интерпретировать введенные значения и назначить их соответствующим параметрам.

Шестнадцатеричные значения, соответствующие отдельным цветам, приведены в табл. 5.2.

Данному параметру изначально не присваивается никакого значения.

Значения, присвоенные данному параметру, не наследуются.

Параметр border-left воспринимает только один стиль — в отличии от параметра border-style , где может быть указано до четырех стилей.

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

Пример

INS { border-left: blue solid thin }

border-left-width           толщина левой стороны рамки

Назначение

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

Синтаксис

border-left-width:{ thin | medium | thick | length }

Аргументы

·        thin соответствует толщине меньшей, чем medium или thick .

·        medium шире, чем thin , но уже, чем thick . Это значение дается данному параметру по умолчанию.

·        thick шире, чем thin или medium .

·        length  — положительное число, за которым следует двухбуквенное обозначение используемой единицы измерения.

Комментарии

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

Реально отображаемая толщина рамки может различаться в зависимости от используемого броузера.

Значения, присвоенные данному параметру, не наследуются.

Пример

HEAD1 { border-left-width: 0.25in }

border-right   свойства правой стороны рамки

Назначение

Устанавливает цвет, стиль и/или толщину правой стороны рамки.

Синтаксис

border-right: { [ border-color_value ]

 | [ border-style_value ]

 [ border-right-width_value ] }

Аргументы

·        border-color_value задает цвет рамки (см. параметр border-color ).

·        border-style_value задает стиль рамки (см. параметр border-style ).

·        border-right-width_value задает толщину рамки (см. параметр border-right-width ).

Комментарии

Этот параметр устанавливает одновременно несколько правил для правой стороны рамки так же, как если бы эти правила были заданы путем раздельной установки параметров border-color , border-style и border-right-width .

Имя параметра не требует явного указания. Броузер должен самостоятельно интерпретировать введенные значения и назначить их соответствующим параметрам.

Шестнадцатеричные значения, соответствующие отдельным цветам, приведены в табл. 5.2.

Данному параметру изначально не присваивается никакого значения.

Значения, присвоенные данному параметру, не наследуются.

Параметр border-right воспринимает только один стиль — в отличии от параметра border-style , где может быть указано до четырех стилей.

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

Пример

SPAN { border-right: teal dotted medium }

border-right-width        толщина правой стороны рамки

Назначение

Устанавливает толщину правой стороны рамки.

Синтаксис

border-right-width: { thin| medium |thick| length }

Аргументы

·        thin соответствует толщине меньшей, чем medium или thick .

·        medium шире, чем thin , но уже, чем thick . Это значение дается данному параметру по умолчанию.

·        thick шире, чем thin или medium .

·        length  — положительное число, за которым следует двухбуквенное обозначение используемой единицы измерения.

Комментарии

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

Реально отображаемая толщина рамки может различаться в зависимости от используемого броузера.

Значения, присвоенные данному параметру, не наследуются.

Пример

LONGQUOTE { border-right-width: 2pt }

border-style    стиль всех сторон рамки

Назначение

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

Синтаксис

border- style: {

[none|dotted|dashed|solid|double|groove|ridge

|inset|outset][none|dotted|dashed|solid|double

|groove|ridge|inset|outset][none|dotted|dashed

|solid|double|groove|ridge|inset|outset][none

|dotted|dashed|solid|double|groove|ridge|inset

|outset] }

Аргументы

n       none указывает на то, что рамки нет. Это значение имеет приоритет по отношению к любым иным установкам толщины рамки, которые в данном случае игнорируются.

·        dotted задает пунктирную рамку из точек, проходящих по краям фона данного объекта.

·        dashed задает штрих-пунктирную рамку, проходящую по краям фона данного объекта.

·        solid задает одинарную сплошную рамку, проходящую по краям фона данного объекта.

·        double задает двойную сплошную рамку, проходящую по краям фона данного объекта.

·        groove создает трехмерный эффект « заглубленной» рамки, проходящей по краям фона данного объекта, воспроизводя оттенок цвета на основе значения, установленного для рамки.

·        ridge создает трехмерный эффект « возвышающейся» рамки, проходящей по краям фона данного объекта, воспроизводя оттенок цвета на основе значения, установленного для рамки.

·        inset создает трехмерный эффект « заглубленности» фона данного объекта, воспроизводя оттенок цвета на основе значения, установленного для рамки.

·        outset создает трехмерный эффект « выпуклости» фона данного объекта, воспроизводя оттенок цвета на основе значения, установленного для рамки.

Комментарии

Если броузер не может интерпретировать ключевые слова, задающие стиль рамки, он должен воспроизвести ее в одну сплошную линию.

Значения, присвоенные данному параметру, не наследуются.

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

Если для стиля указан только один аргумент, то в соответствии с ним форматируются все стороны рамки.

Объекты группируются попарно: верх — низ; левая сторона — правая сторона.

Пример

HEAD1 { border-style: inset outset }

border-top       свойства верхней стороны рамки

Назначение

Устанавливает цвет, стиль и/или толщину верхней стороны рамки.

Синтаксис

border-top: { [ border-color_value ]

    | [ border-style_value ]

    [ border-top-width_value ] }

Аргументы

·        border-color_value задает цвет рамки (см. параметр border-color ).

·        border-style_value задает стиль рамки (см. параметр border-style ).

·        border-top-width_value задает толщину рамки (см. параметр border-top-width ).

Комментарии

Этот параметр устанавливает одновременно несколько правил для верхней стороны рамки так же, как если бы эти правила были заданы путем раздельной установки параметров border-color , border-style и border-top-width .

Имя параметра не требует явного указания. Броузер должен самостоятельно интерпретировать введенные значения и назначить их соответствующим параметрам.

Шестнадцатеричные значения, соответствующие отдельным цветам, приведены в табл. 5.2.

Данному параметру изначально не присваивается никакого значения.

Значения, присвоенные данному параметру, не наследуются.

Параметр border-top воспринимает только один стиль —в отличие от параметра border-style , где может быть указано до четырех стилей.

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

Пример

PARA.intro { border-top: red dotted thin }

border-top-width            толщина верхней стороны рамки

Назначение

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

Синтаксис

border-top-width:{ thin | medium | thick | length }

Аргументы

·        thin соответствует толщине меньшей, чем medium или thick .

·        medium шире, чем thin , но уже, чем thick . Это значение дается данному параметру по умолчанию.

·        thick шире, чем thin или medium .

·        length  — положительное число, за которым следует двухбуквенное обозначение используемой единицы измерения.

Комментарии

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

Реально отображаемая толщина рамки может различаться в зависимости от используемого броузера.

Значения, присвоенные данному параметру, не наследуются.

Пример

BIGQUOTE { border-top-width: thin }

border-width   толщина всех сторон рамки

Назначение

Устанавливает толщину одной, двух, трех или четырех сторон рамки.

Синтаксис

border-width: {

    [ thin | medium | thick | length ]

    [ thin | medium | thick | length ]

    [ thin | medium | thick | length ]

    [ thin | medium | thick | length ] }

Аргументы

·        thin соответствует толщине меньшей, чем medium или thick .

·        medium шире, чем thin , но уже, чем thick . Это значение дается данному параметру по умолчанию.

·        thick шире, чем thin или medium .

·        length  — положительное число, за которым следует двухбуквенное обозначение используемой единицы измерения.

Комментарии

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

Задание параметра border-width эквивалентно заданию следующей последовательности параметров для отдельных сторон рамок: border-width-top , border-width-right , border-width-bottom и/или border-width-left .

Если указан только один аргумент, то соответствии с ним устанавливается толщина всех сторон рамки.

Объекты группируются попарно: верх — низ; левая сторона — правая сторона.

Реально отображаемая толщина рамки может различаться в зависимости от используемого броузера.

Значения, присвоенные данному параметру, не наследуются.

Пример

UL { border-width: thin }

clear                очистка полей для растекающегося объекта

Назначение

Задает отображение растекающегося объекта следом за текущим объектом или ниже него.

Синтаксис

clear: { none | left | right | both }

Аргументы

n       none означает, что растекающийся объект будет размещен в соответствии с текущими установками выравнивания, не ожидая очистки полей. Это значение присваивается данному параметру по умолчанию.

·        left размещает растекающийся объект после очистки левого поля.

·        right размещает растекающийся объект после очистки правого поля.

·        both размещает растекающийся объект после очистки левого и правого полей.

Комментарии

Значения, присвоенные данному параметру, не наследуются.

Пример

IMG.clearex.gif { clear: left }

color                цвет объектов переднего плана

Назначение

Устанавливает для текущего документа или части документа цвет шрифта и других объектов переднего плана.

Синтаксис

color: { color-name |#rgb |# rrggbb |rgb(rrr , ggg , bbb )

    |rgb( rrr %, ggg %, bbb %) }

Аргументы

·        color-name задает цвет фона посредством выбранного значения ключевого слова. Система воспринимает следующие значения: red (красный) maroon (малиновый), yellow (желтый), green (зеленый), lime (салатный), teal (бирюзовый), olive (оливковый), aqua (голубой), blue (синий), navy (темно-синий), purple (сиреневый), fuchsia (розовый), black (черный), gray (серый), silver (светло-серый) и white (белый).

·        #rgb представляет собой трехзначный код назначаемого композитного цвета. Код составлен из трех однозначных шестнадцатеричных цифр, каждая из которых может принимать значения от 0  (ноль) до F  (шестнадцатеричное 15) и задает уровень интенсивности соответствующих компонентов цвета: r  — красного, g  — зеленого и b  — синего.

·        #rrggbb представляет собой шестизначный код назначаемого композитного цвета. Код составлен из трех пар двузначных шестнадцатеричных цифр, каждая из которых может принимать значения от 00  (ноль) до FF  (шестнадцатеричное 255) и задает уровень интенсивности соответствующих компонентов цвета: rr  — красного, gg  — зеленого и bb  — синего.

·        rgb(rrr, ggg, bbb) представляет собой абсолютные значения уровня интенсивности соответствующих компонентов цвета: красного ( rrr ), зеленого ( ggg ) и синего ( bbb ), выраженные трехзначными десятичными цифрами, каждая из которых может принимать значения в пределах от 000 (ноль) до 255.

·        rgb(rrr.d%, ggg.e%, bbb.f%) представляет собой относительные значения уровня интенсивности соответствующих компонентов цвета: красного ( rrr ), зеленого ( ggg ) и синего ( bbb ), выраженные в процентах к максимуму с точностью до первого десятичного знака. Максимум интенсивности (100.0%) соответствует десятичному значению 255; минимум (0.0%) — десятичному значению 000 (ноль).

Комментарии

Исходный цвет назначается в соответствии с настройками броузера.

Шестнадцатеричные значения, соответствующие отдельным цветам, приведены в табл. 5.2.

Значения, присвоенные данному параметру, наследуются.

Пример

PARA.intro { color: teal; font-size: lOpt;

font-style: italic }

display             отображение объекта

Назначение

Заданным образом выводит текущий объект на экран или на печать.

Синтаксис

display: { inline | block | list-item | none }

Аргументы

n       inline создает рамку вокруг строки, в которую был выведен последний из предыдущих объектов.

·        block создает рамку, в которую будет выведен текущий объект. Это значение присваивается данному параметру по умолчанию.

·        list-item создает рамку, в которую будет выведен текущий объект, и добавляет маркер объекта списка.

·        none указывает, что объект, его дочерние объекты и рамка выводиться не будут.

Комментарии

Размеры рамки строки достаточны для размещения объекта. Если содержимое не умещается в одну строку, для каждой последующей строки создается новая рамка.

Значения, присвоенные данному параметру, не наследуются.

Этот стиль определенно следует задавать для объектов XML, так как параметры блока, устанавливаемые по умолчанию, не всегда могут оказаться приемлемыми.

Помимо параметра display размещение объектов в XML-документах задается атрибутом xml:space . Для получения дополнительной информации об атрибуте xml:space см. соответствующий раздел главы 2 «XML».

Пример

Q { display: block }

float  отображение растекающегося объекта

Назначение

Отображает растекающийся объект или вставляет его в документ.

Синтаксис

float: { left | right | none }

Аргументы

n       left отображает растекающийся объект на левой стороне, перенося текст к правой границе объекта.

·        right отображает растекающийся объект на правой стороне, перенося текст к левой границе объекта.

·        none отображает объект вставленным в страницу. Это значение присваивается данному параметру по умолчанию.

Комментарии

Значения, присвоенные данному параметру, не наследуются.

Пример

IMG.float.gif { float: left }

font   параметры шрифта

Назначение

Задает одновременно до шести параметров шрифта.

Синтаксис

font: { font-size_value |font-family_value |

    [[ font-style_value ]|[font-variant_value ]

    |[ font-weight_value ]]|[/line-height_value ] }

Аргументы

n       font-size_value задает размер шрифта (см. параметр font-size ).

·        font-family_value задает семейство гарнитур (см. параметр font-family ).

·        font-style_value задает стиль шрифта (см. параметр font-style ).

·        font-variant_value задает необходимость режима small-caps , при котором все строчные буквы представляются в виде прописных букв меньшего кегля, чем буквы, изначально введенные в строку как прописные (см. параметр font-variant ).

·        font-weight_value задает толщину начертания шрифта (см. параметр font-weight ).

·        line-height_value задает расстояние между базовыми линиями соседних строк (см. параметр line-height ).

Комментарии

Этот параметр устанавливает одновременно несколько правил отображения шрифта так же, как если бы эти правила были заданы путем раздельной установки параметров font-size , font-style , font-variant , font-weight и line-height .

Имя параметра не требует явного указания. Броузер должен самостоятельно интерпретировать введенные значения и назначить их соответствующим параметрам.

Если конкретное значение не указано, броузер применяет изначально использовавшуюся величину.

По умолчанию параметру line-height присваивается значение, равное высоте одной строки текста.

Данному параметру изначально не присваивается никакого значения.

Значение, выраженное в процентах, может присваиваться только параметрам font-size и line-height .

Значения, присвоенные данному параметру, наследуются.

Пример

PARA {FONT: small-caps/90% "times new roman", serif }

font-family      семейство гарнитур

Назначение

Задает шрифт по имени гарнитуры, семейства гарнитур или того и другого одновременно.

Синтаксис

font-family:{ ["] family_name_1 ["]|serif|sans-serif

|cursive|fantasy|monospace }[, ["]family_name_2 ["]

|serif|sans-serif|cursive|fantasy|monospace]

[..., ["] family_name_n ["]|serif|sans-serif|cursive

|fantasy|monospace] }

Аргументы

n       family-name наименование конкретного семейства гарнитур.

·        serif , sans-serif , cursive , fantasy и monospace представляют собой наименования основных типов гарнитур. К этим группам могут относиться одно или более семейств гарнитур, которым, в свою очередь, принадлежат шрифты, установленные на данном компьютере.

Комментарии

Указанный параметр задает шрифт по имени гарнитуры и/или семейства гарнитур.

Разрешается указывать несколько наименований семейств гарнитур.

Добавив для подстраховки к списку семейств гарнитур хотя бы одно наименование основного типа ( serif , sans-serif и т. д.), вы гарантируете, что будет назначен хотя бы один шрифт соответствующего семейства.

Изначальное значение параметра font-family задается пользователем в параметрах броузера.

Если наименование семейства гарнитур состоит из двух и более разделенных пробелом слов (например, "Courier New" или 'Bookman Old Style' ), то оно должно быть заключено в кавычки.

Значения, присвоенные данному параметру, наследуются.

Пример

BIGPAGE { FONT-FAMILY: "Times New Roman",

        Book Antiqua",

        serif }

font-size          размер шрифта

Назначение

Задает абсолютный или относительный размер шрифта (кегль).

Синтаксис

font-size: { length | percent % | absolute_size

    | relative_size }

Аргументы

n       length  — положительное число, за которым следует двухбуквенное обозначение используемой единицы измерения.

·        percent  — положительное число, задающее размер шрифта в процентном отношении к размеру, который был назначен объекту, непосредственно предшествующему данному. Обязательно указывайте символ процента ( % ).

·        absolute_size  — ключевое слово из набора пользовательских установок броузера. Здесь могут использоваться следующие значения : xx–small , x–small , small , medium , large , x-large , xx-large .

·        relative_size устанавливает, что размер шрифта текущего объекта будет больше ( larger ) или меньше ( smaller ), чем размер шрифта объекта, непосредственно предшествующего данному.

Комментарии

Для обозначения единиц измерения могут быть использованы следующие двухбуквенные аббревиатуры:

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

Относительные измерения:

n       em  — текущий кегль (высота шрифта);

n       ex  — высота буквы x для текущего кегля;

n       px  — пикселы (относительно координат окна).

Абсолютные измерения:

n       in  — дюймы;

n       cm  — сантиметры;

n       mm  — миллиметры;

n       pt  — пункты;

n       pc  — пики.

Значения, присвоенные данному параметру, наследуются.

Пример

HEAD4 { FONT-SIZE: 14pt }

HEAD5 { FONT-SIZE: 125% }

HEAD6 { FONT-SIZE: larger }

font-style         стиль начертания шрифта

Назначение

Устанавливает один или несколько параметров, определяющих варианты стиля начертания шрифта.

Синтаксис

font-style: { normal | italic | oblique }

Аргументы

·        normal соответствует основному, не имеющему дополнительного наклона, начертанию. Это значение присваивается данному параметру по умолчанию.

·        italic соответствует стандартному курсивному начертанию.

·        oblique соответствует наклонному начертанию с углом наклона меньшим, чем обычный курсив.

Комментарии

Данный параметр задает степень увеличения наклона символов относительно заданного в основном варианте начертания.

Если курсив со степенью наклона, задаваемой аргументом italic , отсутствует в данной гарнитуре, то фактическая степень наклона, возможно, будет соответствовать значению аргумента oblique (с меньшим наклоном).

Значения, присвоенные данному параметру, наследуются.

Пример

HEAD2, HEAD4 { FONT-STYLE: italic; FONT-WEIGHT: bold}

font-variant     смешение регистров символов

Назначение

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

Синтаксис

font-variant: { normal | small-caps }

Аргументы

·  &nbs