Опубликован: 24.01.2007 | Уровень: для всех | Доступ: платный
Лекция 7:

Отображение XML-документов с использованием таблиц каскадных стилей

Аннотация: В этой лекции вы познакомитесь с первым из методов отображения XML-документов в браузере Microsoft Internet Explorer 5, рассматриваемых в этом курсе - таблицами каскадных стилей (CSS). Таблица каскадных стилей представляет собой файл, который содержит инструкции для форматирования элементов в XML-документе.
Ключевые слова: XML, браузер, создание таблицы, связывание, Internet, HTML, место, ПО, css, уровень поддержки, таблица, доступ, язык таблиц стилей, extensible, language, XSL, CSS1, CSS2, файл, таблица стилей, информация, блок объявлений, размер шрифта, значение, 'margin-top', 'font-style', регистр, 'background-image', 'background-repeat', 'background-position', 'vertical-align', generic, new, контекстный селектор, атрибут, тег, валидность, dtd, URL, uniform resource locator, директива, адрес, example code, инструкция, ПРОЛОГ, путь, поле, enter, Windows, поток, семейство шрифта, множественные объявления, спецификация CSS-P, изменение таблицы, перевод строки, 'dashed, 'groove', 'ridge', 'inset', 'outset', font-variant, шрифт, helvetica, ключевое слово, sans-serif, microsoft, serif, относительный размер, абсолютные размеры, oblique, цвет текста, foreground color, цвет фона, color, 'border-color', монитор, leaf, leave, 'letter-spacing', 'text-indent', 'text-transform', 'text-decoration', subtitle, отступ, 'margin-left', Дополнение, интервал, uppercase, 'margin-bottom', стиль рамки, thickness, padding, пространство, 'padding-top', 'padding-bottom', 'padding-left', форматирование, перенос текста, высота, Размещение, указатель, псевдоэлемент, IMG, пространство имен, идентификатор

Поскольку в XML вы создаете свои собственные элементы, браузер не имеет встроенных средств, позволяющих определить, как их правильно отобразить. Создание таблицы каскадных стилей и связывание ее с вашим XML-документом – это один из способов сообщить браузеру, как отображать каждый из элементов документа. XML-документ со связанной таблицей каскадных стилей может быть открыт непосредственно в Internet Explorer 5. Вам нет необходимости использовать HTML-страницу для доступа и отображения данных (как это имеет место в других методах отображения XML, о которых будет говориться в двух следующих лекциях).

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

Использование таблицы стилей, наверное, является самым простым методом отображения XML-документа. Язык CSS уже знаком многим Web-дизайнерам, поскольку именно он в настоящее время используется для HTML-страниц. Кроме того, современные Web-браузеры обеспечивают высокий уровень поддержки таблиц каскадных стилей, в то время как другие методы отображения XML все еще находятся в стадии развития, и браузеры только начинают их поддерживать.

Тем не менее, по сравнению с другими методами отображения XML, о которых вы узнаете в последующих лекциях, таблицы каскадных стилей имеют ряд ограничений. Хотя таблица каскадных стилей предоставляет достаточно высокий уровень управляемости способами, которыми браузер форматирует содержимое элементов в XML-документах, она не дает возможности модифицировать или реорганизовывать его содержимое. Она также не позволяет вам осуществлять доступ к атрибутам, примитивам, инструкциям по обработке и другим компонентам XML – а также не дает возможности обрабатывать информацию, которую эти компоненты содержат.

В последующих лекциях вы познакомитесь с более сложными – но и более гибкими – способами отображения XML-документов. В "Отображение XML-документов с использованием связывания данных" вы узнаете, как связывать XML-документ с HTML-страницей и отображать XML-элементы путем сцепления с ними стандартных HTML-элементов. В "Отображение XML-документов с использованием сценариев объектной модели документа" вы узнаете, как осуществлять доступ и отображать отдельные элементы, атрибуты и другие компоненты XML-документа путем написания кода сценария на HTML-странице. А в "Отображение XML-документов с использованием XSL-таблиц стилей" вы откроете для себя, как применять еще более мощный язык таблиц стилей – расширяемый язык таблиц стилей (Extensible Stylesheet LanguageXSL) – который позволяет вам не только форматировать содержимое XML-элемента, но и преобразовывать содержимое документа с достаточно высокой степенью гибкости.

Примечание. В этой лекции раскрывается большинство свойств CSS, поддерживаемых Internet Explorer 5, которые являются частью оригинальной версии CSS, установленной консорциумом World Wide Web (W3C) и известной как Cascading Style Sheets Level 1, или CSS1. Консорциум W3C также определил усовершенствованную версию CSS, которая значительно превосходит версию CSS1, известную как Cascading Style Sheets Level 2, или CSS2. CSS2 только частично поддерживается современными браузерами и не рассматривается в этом курсе. Полную спецификацию W3C для CSS1 вы можете найти по адресу http://www.w3.org/TR/REC-CSS1, а спецификацию для CSS2 – по адресу http://www.w3.org/TR/REC-CSS2

Основные этапы при использовании таблицы каскадных стилей

Вот два основных этапа при использовании таблицы каскадных стилей для отображения XML-документа:

  1. Создание файла таблицы стилей.
  2. Связывание таблицы стилей с XML-документом.

Шаг первый: создание файла таблицы стилей

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

Листинг 7.1 содержит пример простой таблицы каскадных стилей.

/* File Name: Inventory01.css */  

BOOK
	{display:block;
	margin-top:12pt;     
	font-size:10pt}  
TITLE        
	{font-style:italic}

AUTHOR   
   {font-weight:bold}
Листинг 7.1. Inventory01.css

Эта таблица стилей предназначена для присоединения к XML-документу, представленному в Листинге 7.2. Листинг 7.2 используется и в других примерах в данной лекции, поэтому вам придется не раз к нему обращаться.

<?xml version="1.0"?>

<!-- File Name: Inventory01.xml -->

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

<INVENTORY>
   <BOOK>
      <TITLE>The Adventures of Huckleberry Finn</TITLE>
      <AUTHOR>Mark Twain</AUTHOR>
      <BINDING>mass market paperback</BINDING>
      <PAGES>298</PAGES>
      <PRICE>$5.49</PRICE>
   </BOOK>
   <BOOK>
      <TITLE>Leaves of Grass</TITLE>
      <AUTHOR>Walt Whitman</AUTHOR>
      <BINDING>hardcover</BINDING>
      <PAGES>462</PAGES>
      <PRICE>$7.75</PRICE>
   </BOOK>
   <BOOK>
      <TITLE>The Legend of Sleepy Hollow</TITLE>
      <AUTHOR>Washington Irving</AUTHOR>
      <BINDING>mass market paperback</BINDING>
      <PAGES>98</PAGES>
      <PRICE>$2.95</PRICE>
   </BOOK>
   <BOOK>
      <TITLE>The Marble Faun</TITLE>
      <AUTHOR>Nathaniel Hawthorne</AUTHOR>
      <BINDING>trade paperback</BINDING>
      <PAGES>473</PAGES>
      <PRICE>$10.95</PRICE>
   </BOOK>
   <BOOK>
      <TITLE>Moby-Dick</TITLE>
      <AUTHOR>Herman Melville</AUTHOR>
      <BINDING>hardcover</BINDING>
      <PAGES>724</PAGES>
      <PRICE>$9.95</PRICE>
   </BOOK>
   <BOOK>
      <TITLE>The Portrait of a Lady</TITLE>
      <AUTHOR>Henry James</AUTHOR>
      <BINDING>mass market paperback</BINDING>
      <PAGES>256</PAGES>
      <PRICE>$4.95</PRICE>
   </BOOK>
   <BOOK>
      <TITLE>The Scarlet Letter</TITLE>
      <AUTHOR>Nathaniel Hawthorne</AUTHOR>
      <BINDING>trade paperback</BINDING>
      <PAGES>253</PAGES>
      <PRICE>$4.25</PRICE>
   </BOOK>
   <BOOK>
      <TITLE>The Turn of the Screw</TITLE>
      <AUTHOR>Henry James</AUTHOR>
      <BINDING>trade paperback</BINDING>
      <PAGES>384</PAGES>
      <PRICE>$3.35</PRICE>
   </BOOK>
</INVENTORY>
Листинг 7.2. Inventory01.xml

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

Таблица стилей состоит из одного или нескольких правил (иногда их называют набором правил). Правило содержит информацию по отображению определенного типа элемента в XML-документе. На рисунке 7.1 представлено правило для элементов BOOK с указанием его составных частей.


Рис. 7.1.

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

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

Каждое объявление задает установку определенного свойства, такого как размер шрифта, который будет использован для отображения элемента. Объявление состоит из свойства, вслед за которым идет двоеточие, после которого следует значение для данного свойства. Например, следующее объявление устанавливает для свойства font-size (размер шрифта) значение 10pt (10 пунктов) (см. рис. 7.2).


Рис. 7.2.

Таблица стилей может также содержать комментарии. Комментарии в таблице стилей начинаются с символов косой черты и звездочки ( /* ) и заканчиваются символами звездочки и косой черты ( */ ). Между этими парами символов-ограничителей вы можете поместить любой текст по вашему желанию. Когда браузер прочитывает таблицу стилей для форматирования документа, он игнорирует этот текст. Вы можете использовать комментарий для пояснений, указания назначения и действия таблицы стилей. В качестве примера можно привести комментарий в начале таблицы стилей из Листинга 7.1:

/* Имя файла: Inventory01.css */

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

BOOK
	{display:block;
	/* margin-top:12pt; */
	font-size:10pt}

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

Пример таблицы стилей, представленной в Листинге 7.1, содержит следующие объявления:

  • display:block. Помещает перевод строки перед и после текста элемента; (Эта установка имеет и другие назначения, о чем вы узнаете далее в этой лекции.)
  • margin-top:12pt. Добавляет верхнее поле (отбивку) высотой в 12 пт к тексту элемента;
  • font-size:10pt. Устанавливает размер шрифта, используемого для отображения текста элемента, в 10 пунктов;
  • font-style:italic. Отображает текст элемента курсивом;
  • font-weight:bold. Отображает текст элемента полужирным.

На рисунке 7.3 показано как Internet Explorer 5 отображает XML-документ, который использует данную таблицу стилей в соответствии с инструкциями, содержащимися в этих объявлениях.


Рис. 7.3.

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

Нечувствительность к регистру в CSS

В Internet Explorer 5 таблицы каскадных стилей являются нечувствительными к регистру, в котором набраны символы. То есть, когда Internet Explorer 5 обрабатывает таблицу стилей, он игнорирует регистр букв (строчные или прописные). Например, вы можете набрать следующее правило любым из трех приведенных ниже способов:

title
	{font-style:italic}
Title
	{FONT-STYLE:Italic}
title
	{Font-Style:ITALIC}

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

Максим Попов
Максим Попов

Почему при использовании скриптов, приведенных в курсе Основы XML

лекция Лекция 8: 

Отображение XML-документов с использованием связывания данных

не происходит связывания XLM документа с HTML?

Отображаются пустые поля. Браузер IE11

Владислав Нагорный
Владислав Нагорный

Подскажите, пожалуйста, планируете ли вы возобновление программ высшего образования? Если да, есть ли какие-то примерные сроки?

Спасибо!

Максим Самсоненко
Максим Самсоненко
Россия
Алексей Шибаев
Алексей Шибаев
Россия, г. Новошахтинск