Подготовка к сертификации по XML и смежным технологиям, часть 4: XML-преобразования

Страница 5 из 9  Опции документа Обсудить Выскажите мнение об этом учебном пособии Помогите нам улучшить содержание

CSS

Дурак и мудрец видят разные деревья в одном.
Вильям Блейк

Правила, правила, и еще раз правила

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

Правила представления CSS позволяют отделить информацию (элементы XML) от ее представления, то есть в различных условиях к набору данных можно применить любое правило. Следует учесть, что CSS нельзя сравнивать по эффективности с XSLT относительно применения стилей или преобразования XML; к тому же CSS не однородно интерпретируются на различных платформах или в Web-браузерах, особенно относительно поддержки использования XML стилей. CSS рассматривается здесь, поскольку предоставляет более простой подход к решению необходимых задач. CSS основаны на простом синтаксисе, не связанном с XML, и их довольно легко использовать. В данном учебном руководстве документы CSS будут просто называться "таблицами стилей."

XML в браузерах

Откройте XML-документ в Internet Explore и увидите что-то вроде представленного на рисунке 2.

Если нажать значок "плюс" или "минус", можно свернуть или развернуть элементы, родительские для других элементов. Очень функционально, но представление может понравиться только компьютерным специалистам. В Firefox картина не лучше, но по крайней мере приводится зацепка, представленная на рисунке 3.

В сообщении, расположенном в Firefox над деревом, говорится, что если бы имелась информация о стиле, связанном с данным XML-документом, то документ выглядел бы по-другому. Замечательно. Но как это сделать?

В HTML-документах информацию о стиле можно включить в следующем виде:

• В тегах HTML, использующих эту информацию, или линейно на языке CSS;
• В теге <style/> для внутренних стилей HTML-документа;
• Внешне в другом файле и установить на него ссылку в HTML-теге <link/>.

<?xml-stylesheet type="text/css" href="catalog.css"?>

Разместите эту директиву в начале (прологе) XML-документа сразу после директивы <?xml version="1.0"?>. Директива таблицы стилей ссылается на CSS-файл catalog.css, расположенный в той же папке, что и XML-файл. Значение атрибута href также может быть абсолютным. В предыдущей директиве можно использовать другие атрибуты, одним из которых является media. Возможные значения этого атрибута - all, braille, embossed, handheld, print, projection, screen, speech, tty и tv.

Таким образом, можно ссылаться на различные правила каскадных таблиц стилей из одного XML-документа. Это позволяет форматировать XML для различных сред, в которых документ будет просматриваться (или прослушиваться!). Можно протестировать текущую среду (и обслужить ее с помощью той же таблицы стилей) с помощью правила @media. В следующем коде представлен пример:

@media print {
  body { font-size: 10pt; }
}
@media screen {
  body { font-size: x-small; }
}

В начало

Синтаксис

Основная грамматика для определения стиля в каскадной таблице стилей: селектор {свойство: значение;}. Селектор представляет собой XML-элемент, для которого определяется внешний вид на основе значения одного или нескольких свойств. Можно сгруппировать несколько селекторов, разделенных запятой.

Можно также использовать универсальный селектор, выделенный звездочкой (*); его можно применять к любым элементам в XML-документе, для которого правило не задано явно. Значение свойства выражено в одном из набора допустимых единиц. Данные единицы представляют цвет, длину и т.д. Как правило, пробелы в CSS роли не играют, что позволяет форматировать эти файлы удобным образом. Но значение свойства и единицы, квалифицирующие это свойство, не должны разделяться пробелами.

CSS предоставляет некоторую гибкость для определения селекторов. Например, если требуется задать правила стилей для элемента title, дочернего элементу dvd, можно использовать следующую нотацию:

dvd title {font-weight: bold;}

В примере объявляется текстовое значение элемента DVD title, который отображается полужирным шрифтом. Не требуется использовать синтаксис (элемент title можно определить как селектор), но следует помнить, что при необходимости изменения стиля элемента, отображающегося в различных контекстах (то есть элемент отображается как дочерний одного элемента, но также может отображаться как дочерний другого элемента). На рисунке 4 показан результат в Internet Explore 6.0.

Для удобства чтения предположим, что каждый элемент dvd отображается в отдельном абзаце с небольшими отступами:

dvd {
   display: block;
   padding: 5px;
}

Немного рассмотрим эти свойства и их значения. Теперь если требуется выделить элементы dvd, включающие атрибут genre, следует объявить следующее правило:

dvd[genre] {color: blue;}

Сообразительные читатели заметят сходство данного синтаксиса с предикатами XPath. Internet Explore 6.0 не распознает данный синтаксис, а в Firefox 1.0.7 результаты выглядят так, как показано на рисунке 5.

Теперь наш любимый коллекционер хочет выделить драмы своим предпочтительным цветом:

dvd[genre="Drama"] {color: purple;}

Результат применения этого правила, а также более общего правила относительно отображения элементов dvd с атрибутом genre, представлены на рисунке 6. Данные правила работают в Firefox и недействительны в Internet Explore 6.0.

Документ выглядит лучше, но довольно сложно определить стоимость каждого DVD. Установим знак доллара перед значением элемента price:

price:before {content: "$";}

Зададим в скобках год создания фильма. Для этого можно использовать тот же метод псевдоэлемента, используемый для элемента price:

year:before {content: "  (";}
year:after {content: ")";}

На рисунке 7 представлены предыдущие правила, выводимые в Firefox.

Internet Explore 6.0 не распознает псевдоэлементы selector:before и selector:after, поэтому результаты обработки не отображаются.

Добавим еще немного форматирования:

                    
/*
**  catalog.css
**  This stylesheet visually formats our DVD collection XML doc.
*/

catalog {
   font-family: Verdana, Arial, Helvetica, Sans-serif;
   font-size: x-small;
   padding: 25px;
   background-color: #DDDDCC;
}

dvd {
   display: block;
   padding-bottom: 8px;
   border-top:     1px solid gray;
   border-left:    2px solid #666666;
   border-right:   2px solid white;
   border-bottom:  1px solid white;
   background-color: #E8E8FF;
}

dvd:first-child {
   border-top:     2px solid #666666;
}

dvd:last-child {
   border-bottom:  2px solid white;
}

dvd title {
   display: block;
   font-weight: bold;
}

dvd[genre] {
   color: blue;
}

dvd[genre="Drama"] {
   color: purple;
}

dvd[genre="Action"] {
   display: none;
}

price:before {content: "$";}

year:before {content: "  (";}
year:after {content: ")";}

Здесь добавлено несколько свойств к элементу catalog (являющемуся корневым элементом) для определения всего документа. Свойства задают общие правила для задания фонового цвета, границ, borders, font-family и font-size. Как видно в отображаемом документе, свойства шрифта наследуются всеми дочерними элементами элемента catalog. Поскольку catalog является корневым элементом, эти правила применяются ко всему документу. Для вложенных элементов могут существовать собственные правила свойств шрифтов, переопределяющие правила родительских элементов.

Далее добавим к элементам dvd некоторые правила для выделения этих элементов на фоне документа (элемент catalog). Для описания цвета используются два различных способа: по имени и по шестнадцатеричному значению. Вкратце рассмотрим эти и другие способы описания цвета в CSS позднее. Используйте свойство display со значением "block" для элементов catalog и dvd для выделения их в абзац и задания padding. Можно поэкспериментировать с селекторами first-child и last-child псевдоклассов для выделения первого и последнего элементов dvd жирной рамкой (border). (Селекторы пседоклассов соответствуют условиям элементов вместо их имен). Наконец, коллекционер фильмов хочет скрыть все фильмы жанра action; это выполняется с помощью значения и свойства display: hidden. На рисунке 8 и 9 показано, как Firefox и Internet Explore 6.0 обрабатывают эту таблицу стилей.

Обратите внимание, что в Firefox удалось успешно скрыть DVD, значение атрибута genre которого соответствует Action (Raiders of the Lost Ark), с помощью задания свойству display значения "none". Фактически Firefox отлично выполнет все правила в таблице стилей. В Internet Explore 6.0 большая часть правил выполняется неудачно. Это особенно справедливо после применения свойства background-color к каталогу catalog; серое пятно, покрывающее большую часть содержимого, на рисунке 9. Как видно, не очень приверженный стандартам Internet Explore 6.0 невозможно сравнить с Firefox относительно поддержки CSS XML.

Наконец, как видно в верхней части предыдущей таблицы стилей (листинг 3), в CSS-файлах можно использовать комментарии. Они должны начинаться символом /* и заканчиваться */ подобно комментариям, используемым в C и Java.

В начало

Цвет

Цвет в CSS как правило задается тройкой значений красного, зеленого и синего цветов, представленных в этом порядке одним из трех способов:

• Шестнадцатеричный: В этом методе используются шестнадцатеричные значения от 0 до F, соответствующего десятичному числу 15. Обозначение шестнадцатеричного цвета начинается со знака фунта (#), далее следуют двухзначные значения красного, зеленого и синего цветов. Например, #FF0000 соответствует ярко-красному, #000000 - черному, #336699 - темно-бирюзовому;
• Десятичный: В этом методе в обозначении из красного, зеленого и синего цветов используются десятичные целые числа от 0 до 255: rgb(rr,gg,bb). Например, rgb(255,0,0) соответствует ярко-красному;
• Процентный: Этот метод аналогичен десятичному, но для каждой компоненты цвета используется процентное значение от 0 до 100. Например, rgb(100%,0%,0%) соответствует ярко-красному.

В начало

Отображение

Как показано в листинге 3, свойство display позволяет показать элемент различными способами с помощью следующих значений:

• block: Селектор отображается в прямоугольной области. Перед и после данного содержимого выполняется разрыв строки;
• inline: Текстовое значение элемента отображается в той же строке, что и соседние элементы без разрыва строки в начале или конце. Если содержимое достаточно велико, возможны внутренние разрывы строк. Это поведение отображения по умолчанию;
• none: При этом содержимое элемента не только скрывается, также удаляется место, выделенное для этого элемента, в противоположность свойству и значению visibility: hidden, где выделенное пространство сохраняется;
• list: Отображаемые элементы используются для создания упорядоченных или неупорядоченных списков.

Элементы таблиц имеют некоторую поддержку CSS в отличие от таблиц HTML; они вызывают поведение элементов подобно элементам HTML table, tr и td при соответствующей вложенности. Впрочем, об этом следует забыть, если требуется точный аналог функций HTML-таблиц rowspan или colspan; в этом случае будут страдать вложенные элементы со стилем, отличным от табличного.

В начало

Длина

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

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

Процентное отношение описывает длину объекта относительно длины другого объекта. Часто таким объектом является максимально допустимое пространство. Свойство width со значением 60% соответствует 60% допустимого пространства. Например, можно заменить правила для предыдущего элемента catalog на следующие:

catalog {
   font-family: Verdana, Arial, Helvetica, Sans-serif;
   font-size: x-small;
   background-color: #DDDDCC;
   width: 60%;
}

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

Можно заметить, что элемент catalog на самом деле занимает 60% доступного пространства, в данном случае окна браузера, в соответствии с новым добавленным свойством width.

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

В таблице 1 перечислены абсолютные и относительные единицы измерения длины.

В начало

Шрифт

Свойства шрифта управляют отображением гарнитуры шрифта. Доступные свойства шрифта:

• font-family: Список имен семейств шрифтов, разделенных запятыми, в порядке присутствия. Примеры значений включают Arial, Verdana, Sans-serif, Times New Roman и Serif. Имена семейств шрифтов, состоящие из нескольких слов, должны заключаться в кавычки. Последний шрифт в списке всегда должен быть Sans-serif или Serif;
• font-size: Измеряется в относительных или абсолютных единицах измерения. В дополнение к абсолютным или относительным единицам измерения, перечисленным в таблице 1, используются значения xx-small, x-small, small, medium, large, x-large и "xx-large". Хотя эти значения иногда называют абсолютными, браузеры могут их масштабировать;
• font-style: Как правило, normal (по умолчанию) или italic;
• font-weight: Отображение шрифта как normal (по умолчанию) или как bold. Некоторые браузеры позволяют масштабировать степень выделения полужирного шрифта bolder и lighter.

В начало

Текст

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

• color: Задание цвета в соответствии с описанием в разделе Цвет;
• background-color: Задание фонового цвета текста. Эту область можно увеличить с помощью свойств padding: , описанных в разделе Отступы;
• text-align: Допустимые значения left (по умолчанию), right, center или justify;
• text-decoration: Как правило, используется значение none (по умолчанию) или underline. Другие возможные значения - overline или line-through. (Ходят слухи о значении blink, но по правилам хорошего тона данное значение в данном руководстве не обсуждается).

В начало

Фон

Обработку фона можно применять к различным линейным элементам, элементам блоков и таблиц с помощью свойства background-color или с помощью использования фоновых изображений. Значения свойства background-color соответствуют предыдущем описанию цвета. Можно также использовать изображения. Свойства, используемые для описания фонового изображения:

• background-image: Синтаксис url(' URI-адрес изображения ') для указания пути к изображению;
• background-position: Указание ориентации изображения относительно элемента. Синтаксис включает два следующих значения: left или right и top или bottom;
• background-repeat: Управление мозаичного размещения фонового изображения, и использование мозаики по вертикали или по горизонтали. Синтаксис: no-repeat для отсутствия мозаики, repeat-x для горизонтальной мозаики или repeat-y для вертикальной мозаики.

background-image: url("../images/tubeTile.gif"); 
background-position: left top;
background-repeat: repeat-x;

В начало

Отступы

Свойства отступов используются для линейных элементов и элементов блоков. Можно задать отдельное свойство padding: или можно указать несколько направлений из четырех: padding-top:, padding-left:, padding-right: и padding-bottom:. Можно использовать единицы измерения, описанные ранее в разделе Длина. Для одного свойства padding: можно явным образом задать отступ по каждому из четырех направлений с помощью размещения значений в определенном порядке. Например,

• Если задано только одно значение, оно применяется ко всем четырем направлениям;
• Если задано два значения, первое описывает отступ сверху и снизу, второе - отступ слева и справа;
• Если задано три значения, порядок значений следующий: сверху, слева и справа, снизу;
• Если задано четыре значения, порядок значений следующий: сверху, справа, снизу, слева.

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

В начало

Границы

Аналогично свойству padding: можно описать border: либо со всех сторон элемента, либо для одного или нескольких из четырех направлений: border-top:, border-left:, border-right: и border-bottom:. Синтаксис значения: ширина стиль границы цвет. Допустимые единицы ширины обсуждались ранее в разделе Длина. Значения стиля границы: dashed, double, dotted, groove, inset, outset или solid. Пример синтаксиса представлен в следующих правилах:

border-left:   1px solid #EEEEEE;
border-right:  1px solid #999999;

В начало

Положение

С помощью свойств положения CSS можно точно определить положение элементов при выводе документа. Например, если требуется, чтобы первый элемент dvd в каталоге отображался в фиксированном положении относительно всех других элементов, можно использовать следующий код:

dvd:first-child {
   border-top: 2px solid #666666;
   position: absolute;
   left:  80px;
   top:  150px;
}

Обратите внимание, что свойству position задано значение absolute. Затем можно указать абсолютное положение элемента от верхнего левого угла страницы. В предыдущем правиле задано 80 пиксел от левого края и 150 пиксел от верхнего края страницы. На рисунке 11 показано, как этот код выглядит в Firefox.

На рисунке 11 Terminator 2 является первым элементом dvd в порядке документов, поэтому к нему применяется правило абсолютного позиционирования, объявленное для первого элемента dvd. В дополнение к свойствам left и top можно добавить свойства right и bottom; при этом элемент размещается относительно правого или нижнего края страницы. Можно использовать любую комбинацию этих свойств, если это имеет смысл для данной страницы. Другое значение свойства положения - relative, используемое для смещения нормального положения элемента с помощью свойств top, left, right и bottom. Например, следующий код можно использовать для размещения первого элемента dvd выше и левей нормального положения на 10 пиксел:

dvd:first-child {
   border-top: 2px solid #666666;
   position: relative;
   left: -10px;
   top:  -10px;
}

На рисунке 12 показано, как этот код выглядит в Firefox.

Можно выполнять наложение одного элемента на другой. Отображение верхнего элемента определяется свойством z-index: . Используются целые числа, элемент с большим значением размещается над остальными элементами.

Другим способом абсолютного позиционирования элементов является фиксированное позиционирование. Поскольку свойство position: absolute задает положение элемента относительно компоновки других элементов на странице, свойство position: fixed задает положение элементов относительно окна браузера. Это сложно продемонстрировать без примера с прокруткой, но можно попробовать самостоятельно; синтаксис довольно прост - position: fixed. Свойства top, left, right и bottom позволяет задать положение элемента при прокрутке страницы.

В начало

CSS: Заключение

Хотя это и не применяемый в большинстве случаев способ назначения стилей XML-документам, не поддерживающий расчеты или преобразования, как, например, XSLT, по крайней мере CSS предоставляет простой способ визуального форматирования XML-элементов. Поскольку поддержка CSS (особенно для XML) в различных браузерах отличается, используйте CSS для вывода на экран с осторожностью. Как показано в данном руководстве, поддержка XML для CSS реализована лучше в Mozilla Firefox. Статьи, написанные о CSS для печатных носителей, пользуются огромным успехом; таблицы стилей особенно удобно использовать, если требуется избежать сложностей, связанных с XSLT.

В начало

	Страница 5 из 9