Язык CSS в настоящее время широко используется для отображения HTML-страниц, и с не меньшим успехом может быть использован для отображения XML-документов. Создание таблицы каскадных стилей и связывание её с вашим XML-документом - это один из способов сообщить браузеру, как отображать каждый из элементов XML-документа. XML-документ со связанной таблицей каскадных стилей может быть открыт непосредственно в Internet Explorer. Таблица каскадных стилей представляет собой текстовый файл с расширением .css, который содержит инструкции для форматирования элементов в XML-документе. Простейший пример отображения XML-документа с помощью таблицы каскадных стилей приведён в статье "Синтаксис и основные понятия языка XML, создание валидных документов".
Вы можете быстро адаптировать один XML-документ к различным условиям отображения (различным контекстным ситуациям) простым присоединением соответствующей таблицы каскадных стилей. Вы также можете быстро обновить формат для группы сходных XML-документов, внеся изменения в присоединённую к этим документам таблицу стилей, не редактируя при этом каждый из документов.
Таблицы каскадных стилей имеют ограничения: они не дают возможности модифицировать или реорганизовывать содержимое XML-документа и не позволяют вам осуществить доступ к атрибутам, примитивам, инструкциям по обработке и другим компонентам XML-документа.
Таблица стилей состоит из одного или нескольких правил (иногда их называют наборами правил). Правило содержит
информацию по отображению определённого типа элемента XML-документа. Правило состоит из селектора и блока
объявлений. Пример правила:
PRODUCT
{display:block;
font-style:italic}
Селектор представляет собой имя типа элемента, к которому относится информация по отображению. За селектором следует блок объявлений, который ограничивается фигурными скобками и содержит одно или несколько объявлений, разделяемых точкой с запятой. Каждое объявление задаёт установку определённого свойства, например такого, как размер шрифта. Объявление состоит из свойства, вслед за которым идёт двоеточие, после которого следует значение данного свойства.
Таблица стилей может иметь комментарии, которые начинаются с символов /* и заканчиваются символами */. Вы можете использовать комментарии в процессе разработки таблицы стилей, чтобы временно отключить правило или его часть.
Таблицы каскадных стилей являются нечувствительными к регистру символов. Если вы предполагаете отображать ваш XML-документ с использованием таблицы каскадных стилей, у вас не должно быть типов элементов, имена которых отличаются только регистром одной или нескольких букв.
Набор свойств, который вы присвоили определённому элементу, действует на все дочерние элементы, вложенные в него. Следующие свойства, однако, являются исключениями и не наследуются дочерними элементами:
Поскольку большинство свойств являются наследуемыми, при разработке таблицы каскадных стилей вам лучше начать с элементов верхнего уровня.
Вы можете применить одно правило к нескольким элементам, включив все имена элементов в селектор и отделив имена
запятыми. Например:
PRODUCT, TITLE, PRICE
{display:block;
font-style:italic}
Вы также можете включить определённый тип элемента в более, чем одно правило внутри той же самой таблицы стилей.
В селекторе вы можете предварить имя элемента именами одного или нескольких элементов-предков (родительский,
родительский плюс родительский родителя и т.д.), и правило будет применено только к элементам, которые вложены
подобным образом. Селектор, который включает один или несколько элементов-предков, называется контекстуальным
(contextual). Остальные селекторы называются родовыми (generic). Например, к такому XML-документу:
<MAPS>
<CITY>
<NAME> Santa Fe </NAME>
<STATE> New Mexico </STATE>
</CITY>
<STATE> California </PRODUCT>
</MAPS>
можно применить такую таблицу каскадных стилей:
CITY STATE
{font-style:italic}
STATE
{font-style:normal}
Селектор CITY STATE является более конкретным, и следовательно, имеет приоритет.
Вы можете использовать специальный атрибут STYLE в вашем XML-документе вместо того, чтобы устанавливать одно или
несколько свойств элемента в таблице стилей. Установка свойств с помощью атрибута STYLE имеет наивысший приоритет.
Например:
<STATE STYLE='font-style:normal; font-size:14pt'> New Mexico </STATE>
Для валидных документов вам необходимо объявить атрибут STYLE в DTD, например:
<!ATTLIST STATE STYLE CDATA #IMPLIED>
Вы можете включить в вашу таблицу каскадных стилей другие таблицы каскадных стилей. Вот форма записи директивы
@import:
@import url(ТаблСтил);
Здесь "ТаблСтил" - полный или относительный URL файла, содержащего таблицу каскадных стилей, которую вы хотите
импортировать. Директива @import должна располагаться в начале таблицы стилей перед правилами. Вы можете поместить
несколько директив @import. Основная таблица стилей (файл, в который осуществляется импорт) имеет приоритет перед
импортируемыми таблицами стилей. Если директив @import несколько, приоритет имеют более "поздние" таблицы стилей.
Чтобы связать таблицу каскадных стилей с XML-документом, вы должны вставить в пролог XML-документа зарезервированную
инструкцию по обработке xml-stylesheet, например:
<?xml-stylesheet type="text/css" href="Sample.css"?>
Если браузер не может найти указанный файл таблицы стилей, он отображает текст документа с использованием своего собственного набора свойств. Если XML-документ не связан с таблицей стилей, Internet Explorer отобразит исходный код документа.
Вы можете включить в XML-документ более одной таблицы стилей, вставив для каждой из них инструкцию по обработке xml-stylesheet в пролог XML-документа. Если отдельные таблицы стилей содержат конфликтующие правила, приоритет имеют правила из последней связываемой с XML-документом таблицы стилей.
Уровни приоритетов правил таблиц стилей, представленные в порядке от высшего к низшему:
Основной принцип приоритетов следующий: браузер отдаёт предпочтение более конкретизированному правилу. Если для определённого свойства установлены конфликтующие значения на одном и том же уровне приоритетов, браузер использует последнюю установку, которую он обработал. Это противоположно правилу, применяемому XML-процессором в случае наличия множественных объявлений атрибутов или примитивов (в этом случае XML-процессор использует первое объявление и игнорирует все последующие).
В Internet Explorer пользователь может присвоить установке свойств в браузере наивысший приоритет (приоритет перед установкой свойств в таблице стилей), выбрав соответствующие опции в меню "Сервис" - "Свойства обозревателя", вкладка "Общие", кнопка "Оформление".
Порядок, в котором браузер обрабатывает правила таблицы стилей:
Для многих свойств CSS вы должны присваивать значение с использованием предопределённых ключевых слов CSS, например:
PRODUCT {color:fuchsia}
Значение какого-либо свойства в процентах задаёт размер обычно как процент от размера шрифта самого элемента.
Исключение составляет свойство font-size, где значение берётся как процент от размера шрифта родительского
элемента. Пример задания значения свойства в процентах:
PRODUCT {font-size:75%}
Задание значений свойств в размерных единицах:
cm | in | mm | pc | pt | |
cm | 1 | 0.3937 | 10 | 2.3622 | 28.3465 |
in | 2.54 | 1 | 25.4 | 6 | 72 |
mm | 0.1 | 0.0393 | 1 | 0.2362 | 2.8346 |
pc | 0.4233 | 0.1666 | 4.2333 | 1 | 12 |
pt | 0.0352 | 0.0138 | 0.3527 | 0.0833 | 1 |
Пример задания значения свойства в размерных единицах:
PRODUCT {font-size:12pt}
Значение какого-либо свойства можно задавать в относительных размерных единицах:
Исключение составляет свойство font-size, где значение "em" или "ex" берётся относительно размера шрифта
родительского элемента. Пример задания значения свойства в относительных размерных единицах:
PRODUCT {margin-top:1em}
Значения цветов можно задавать с использованием четырёх форматов:
PRODUCT {color:red}
PRODUCT {color:rgb(255,0,0)}
PRODUCT {color:#FF0000}
PRODUCT {color:rgb(100%,0%,0%)}
Последние три формата задают цвет путём установки относительной интенсивности компонентов красного, зелёного и
синего в составе цвета (именно в таком порядке). Таблица соответствия способов задания цвета:
красный | red | rgb(255,0,0) | #FF0000 | rgb(100%,0%,0%) |
коричневый | maroon | rgb(128,0,0) | #800000 | rgb(50%,0%,0%) |
светло-зелёный | lime | rgb(0,255,0) | #00FF00 | rgb(0%,100%,0%) |
зелёный | green | rgb(0,128,0) | #008000 | rgb(0%,50%,0%) |
голубой | blue | rgb(0,0,255) | #0000FF | rgb(0%,0%,100%) |
тёмно-синий | navy | rgb(0,0,128) | #000080 | rgb(0%,0%,50%) |
светло-жёлтый | yellow | rgb(255,255,0) | #FFFF00 | rgb(100%,100%,0%) |
тёмно-жёлтый | olive | rgb(128,128,0) | #808000 | rgb(50%,50%,0%) |
светло-голубой | aqua | rgb(0,255,255) | #00FFFF | rgb(0%,100%,100%) |
тёмно-голубой | teal | rgb(0,128,128) | #008080 | rgb(0%,50%,50%) |
светло-фиолетовый | fuchsia | rgb(255,0,255) | #FF00FF | rgb(100%,0%,100%) |
тёмно-фиолетовый | purple | rgb(128,0,128) | #800080 | rgb(50%,0%,50%) |
белый | white | rgb(255,255,255) | #FFFFFF | rgb(100%,100%,100%) |
чёрный | black | rgb(0,0,0) | #000000 | rgb(0%,0%,0%) |
светло-серый | silver | rgb(192,192,192) | #C0C0C0 | rgb(75%,75%,75%) |
тёмно-серый | gray | rgb(128,128,128) | #808080 | rgb(50%,50%,50%) |
Свойство | Описание | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
display |
Устанавливает способ отображения элемента. Не наследуется дочерними элементами, кроме установки "none". Возможные
значения:
|
||||||||||
font-family |
Определяет имя шрифта (гарнитуру). Если браузер не сможет найти требуемый шрифт, он заменит его на похожий. Если имя
шрифта содержит пробелы, заключите его в кавычки:
PRODUCT {font-family:"Times New Roman"} Вы можете привести несколько вариантов допустимых шрифтов в порядке приоритета, разделяя их запятыми: PRODUCT {font-family:Arial, Helvetica} Вы можете включить в конец списка ключевое слово CSS, указывающее на тип шрифта (имя родового семейства), который вы хотите использовать: PRODUCT {font-family:Arial, Helvetica, sans-serif} Перечень родовых семейств шрифтов:
|
||||||||||
font-size |
Устанавливает высоту шрифта. Возможные способы задания значения:
|
||||||||||
font-style |
Управляет стилем начертания символов - обычный или курсив. Возможные значения:
|
||||||||||
font-weight |
Определяет, насколько жирными будут символы. Возможные значения:
|
||||||||||
font-variant |
Для преобразования всех символов текста в прописные буквы. Возможные значения:
|
||||||||||
font |
В одном свойстве font можно указать несколько параметров шрифта. Во избежание проблем указывайте значения свойств в
следующем порядке: font-style, font-weight, font-variant, font-size, font-family. Значения свойств можно пропускать.
Пример:
PRODUCT {font:italic bold small-caps 35pt Fantasy} |
||||||||||
color | Устанавливает цвет текста. | ||||||||||
background-color | Устанавливает цвет фона (заливку). Если задано "transparent", будет виден фон родительского элемента (или браузера). | ||||||||||
background-image |
Вы можете добавить элементу фоновый рисунок, назначив этому свойству URL файла с рисунком:
PRODUCT {background-image:url(Picture.bmp)} Рисунок повторяется, заполняя всю область элемента. Любая часть изображения, выступающая за пределы элемента, обрезается. Установка свойства в none приведёт к тому, что будет виден фон родительского элемента (или браузера). Если одновременно используется свойство background-color, рисунок будет располагаться поверх заливки. |
||||||||||
background-repeat |
Если свойству background-image назначен файл рисунка, можно управлять повторами изображения, назначив свойству
background-repeat одно из следующих ключевых слов:
|
||||||||||
background-position |
Если свойству background-image назначен файл рисунка, по умолчанию верхний левый угол фонового изображения
совмещается с верхним левым углом элемента. Можно изменить такое совмещение, назначив свойству background-position
значение одним из следующих способов:
|
||||||||||
background |
Позволяет задать несколько свойств фона сразу. Пример:
PRODUCT {background:url(pict.gif) no-repeat 70%} |
||||||||||
letter-spacing |
Позволяет увеличить или уменьшить просвет между символами в тексте элемента. Для увеличения просвета следует
присвоить свойству положительное значение в размерных единицах, для уменьшения - отрицательное. Значение normal
обеспечивает обычную величину просвета. Пример:
PRODUCT {letter-spacing:-.5pt} |
||||||||||
vertical-align |
Служит для создания верхних или
нижних индексов. Оказывает действие только на элементы
inline. Дочерние элементы не наследуют это свойство. Возможные значения:
|
||||||||||
text-align | Служит для управления горизонтальным выравниванием текста элемента. Работает только для элементов block и воздействует на дочерние элементы, причём уже независимо от того, относятся ли они к типу block или inline. Возможные значения: left, right, center. | ||||||||||
text-indent | Позволяет задать отступ для первой строки текста элемента. Может задаваться в любых размерных единицах или процентах от полной ширины текста элемента. Отрицательное значение обеспечивает "выступ" первой строки. В случае с "выступом" может потребоваться установить для элемента левое поле с помощью свойства margin-left для того, чтобы строка была видна полностью. | ||||||||||
line-height | Служит для задания междустрочного интервала (разбивки строк по вертикали). Может получать значение в любых размерных единицах или в процентах от высоты текста элемента. | ||||||||||
text-transform |
Служит для управления стилем прописных букв текста элемента. Возможные значения:
|
||||||||||
text-decoration |
Служит для рисования линий внутри текста элемента. Возможные значения:
PRODUCT {text-decoration:underline overline} |
||||||||||
Группы свойств текстовых областей: margin, border, padding, height, width, float и clear. Три группы свойств margin, border и padding наиболее предсказуемо работают с элементами типа block. В некоторых версиях браузеров данные свойства могут не работать с элементами типа inline. | |||||||||||
margin |
Эта группа свойств служит для добавления полей с одной или нескольких сторон элемента. Для свойств margin-left,
margin-right, margin-top и margin-bottom может быть задано значение в любых размерных единицах или в процентах от
ширины родительского элемента. Зона полей всегда прозрачна, т.е. через неё видна фоновая заливка или фоновый рисунок
родительского элемента или браузера. Вы можете назначить одинаковые величины полей по всем четырём сторонам элемента
путём присвоения одного значения в размерных единицах или процентах свойству margin. Два значения будут
интерпретированы как верхнее и нижнее поля. Четыре значения будут интерпретированы как верхнее, правое, нижнее и
левое поля. Пример:
PRODUCT {margin:10mm 0mm 5mm 30mm} |
||||||||||
border-style |
Служит для добавления видимого обрамления с одной или нескольких сторон элемента, а также для установки стиля рамки.
Возможные значения:
PRODUCT {border-style:solid none solid none} |
||||||||||
border-width |
Если вы установили видимые линии рамки с одной или нескольких сторон элемента с помощью свойства border-style, вы
можете изменить толщину рамки путём задания свойства border-width. Можно задавать значение в размерных единицах или
с помощью ключевых слов:
PRODUCT {border-style:solid; border-width:1px thick 1px thick} |
||||||||||
border-color |
По умолчанию рамки, которые созданы с помощью свойства border-style, имеют тот же цвет, что и цвет, установленный
для свойства color элемента. Вы можете менять этот цвет для рамки путём присвоения свойству border-color любого
допустимого значения цвета. Кроме того, вы можете задавать различный цвет для каждой из границ рамки, присваивая
четыре различных значения свойству border-color:
PRODUCT {border-style:solid; border-color:red green red green} |
||||||||||
padding |
Свойства просвета (padding-top, padding-right, padding-bottom и padding-left) добавляют пространство непосредственно
вокруг содержимого элемента внутри имеющейся вокруг элемента рамки. Добавление просвета может улучшить восприятие
рамки. По умолчанию ширина просвета устанавливается близкой к нулю. Для свойств просвета вы можете устанавливать
значения в любых размерных единицах или в процентах относительно ширины родительского элемента. Вы можете добавить
просвет одинаковой ширины со всех сторон элемента, присвоив единственное значение в размерных единицах или в
процентах свойству padding. Пример:
PRODUCT {padding:2em} Для просвета отображается любой фон в виде заливки или рисунков, которые назначены для элемента. (В отличие от области полей, для которой отображается фон родительского элемента.) |
||||||||||
width height |
Эти свойства управляют размерами зоны содержимого элемента плюс областями, занимаемыми просветом и обрамлением.
Этим свойствам могут быть заданы следующие типы значений:
|
||||||||||
float |
Позволяет отобразить содержимое элемента типа block слева или справа от следующего за элементом текста. Возможные
значения:
|
||||||||||
clear |
Влияет на обтекание элемента текстом. Возможные значения:
|
||||||||||
first-letter first-line |
Только для Internet Explorer. Вы можете создать правило, которое применяется только в первой букве элемента типа
block с помощью добавления указателя first-letter к имени элемента в селекторе. Аналогично для первой строки
элемента - с помощью добавления указателя first-line. Подобные выражения создают так называемый "псевдо-элемент" -
правило применяется к фрагменту текста, который на самом деле не является отдельным элементом. Примеры:
PRODUCT:first-letter {font-size:large} PRODUCT:first-line {font-size:large} |
||||||||||
cursor | Задаёт форму курсора при его наведении на элемент. Возможные значения: default, wait, ne-resize, sw-resize, se-resize, nw-resize, n-resize, e-resize, s-resize, w-resize, text, help, hand, move, crosshair. |
Когда вы отображаете XML-документ с помощью присоединённой таблицы стилей, вы можете вставить в него любой стандартный элемент HTML и заставить браузер отобразить его.
Язык XML позволяет использовать пространства имён. Два разных типа элемента могут иметь одно и то же имя, если они
принадлежат разным пространствам имён. Пространство имён объявляется следующим образом:
<my-namespace:MY-ELEMENT xmlns:my-namespace='http://my_domain.com'>
content
</my-namespace:MY-ELEMENT>
Элемент с именем "my-namespace:MY-ELEMENT" и элемент с именем "MY-ELEMENT" могут существовать в одном и том же XML-документе и считаются элементами различных типов, т.к. элемент "my-namespace:MY-ELEMENT" принадлежит к пространству имён "my-namespace", а элемент "MY-ELEMENT" по умолчанию принадлежит к пространству имён документа.
Если имя XML-элемента совпадает с именем стандартного HTML-элемента (например, IMG, A или HR) и если он
принадлежит пространству имён "html", Internet Explorer интерпретирует и отобразит его как HTML-элемент. В любом
другом случае Internet Explorer интерпретирует его как обычный XML-элемент. Пространство имён "html" является
специальным зарезервированным пространством имён, которое объявляется следующим образом:
xmlns:html='http://www.w3c.org/TR/REC-html40/'
Вот пример XML-элемента, который указывает Internet Explorer вставить HTML-элемент IMG:
<html:IMG xmlns:html='http://www.w3c.org/TR/REC-html40/' src='pict.bmp' />
Это корректно сформированный пустой XML-элемент. Его имя включает указание пространства имён, и он имеет два атрибута. Первый атрибут объявляет пространство имён, а второй атрибут является стандартным HTML-атрибутом.
Если вы вставляете HTML-элемент описанным выше способом, XML-документ должен иметь присоединённую таблицу стилей, и вы должны открыть его непосредственно в браузере.
Людоговский Александр