Bazaprogram.ru

Новости из мира ПК
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Xml css пример

Отображение XML с помощью CSS

XML расшифровывается E xtensible M arkup L anguage. Это динамический язык разметки. Он используется для преобразования данных из одной формы в другую форму.
Файл XML может быть отображен двумя способами. Это следующие: —

  1. Каскадная таблица стилей
  2. Расширяемое преобразование языка таблиц стилей

Отображение XML-файла с использованием CSS:
CSS может использоваться для отображения содержимого документа XML в четкой и точной форме. Это дает дизайн и стиль всему документу XML.

  • Основные этапы определения таблицы стилей CSS для XML:
    Для определения правил стиля для документа XML необходимо сделать следующее:
    1. Определите правила стиля для текстовых элементов, таких как font-size, color, font-weight и т. Д.
    2. Определите каждый элемент как блок, встроенный элемент или элемент списка, используя свойство display CSS.
    3. Определите названия и выделите их жирным шрифтом.
  • Связывание XML с CSS:
    Чтобы отобразить XML-файл с помощью CSS, свяжите XML-файл с CSS. Ниже приведен синтаксис для связи XML-файла с помощью CSS:
  • Пример 1
    В этом примере создается файл XML, содержащий информацию о пяти книгах и отображающий файл XML с использованием CSS.
    • XML-файл:
      Создание Books.xml как: —

    xml version = «1.0» encoding = «UTF-8» ?>

    xml-stylesheet type = «text/css» href = «Rule.css» ?>

    heading >Welcome To GeeksforGeeks heading >

    title >Title -: Web Programming title >

    author >Author -: Chrisbates author >

    publisher >Publisher -: Wiley publisher >

    edition >Edition -: 3 edition >

    price > Price -: 300 price >

    title >Title -: Internet world-wide-web title >

    author >Author -: Ditel author >

    publisher >Publisher -: Pearson publisher >

    edition >Edition -: 3 edition >

    price >Price -: 400 price >

    title >Title -: Computer Networks title >

    author >Author -: Foruouzan author >

    publisher >Publisher -: Mc Graw Hill publisher >

    edition >Edition -: 5 edition >

    price >Price -: 700 price >

    title >Title -: DBMS Concepts title >

    author >Author -: Navath author >

    publisher >Publisher -: Oxford publisher >

    edition >Edition -: 5 edition >

    price >Price -: 600 price >

    title >Title -: Linux Programming title >

    author >Author -: Subhitab Das author >

    publisher >Publisher -: Oxford publisher >

    edition >Edition -: 8 edition >

    price >Price -: 300 price >

    В приведенном выше примере Books.xml связан с Rule.css, который содержит соответствующие правила таблицы стилей.

    CSS FILE:
    Создание Rule.css как: —

    heading, title, author, publisher, edition, price <

  • Выход :
  • Пример 2
    В этом примере создается файл XML, который содержит информацию о различных разделах в Geeks for Geeks и темах, которые они содержат, и после этого отображает файл XML с помощью CSS.
    • XML-файл:
      Создание Section.xml как: —

    xml version = «1.0» encoding = «UTF-8» ?>

    xml-stylesheet type = «text/css» href = «Geeks.css» ?>

    title >Hello Everyone! Welcome to GeeksforGeeks title >

    XML + CSS = счастье

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

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

    Примеси! Я же знаю, вы так устали без наследования. Приходится внедрять лишние классы в элементы или даже, переходить на тёмную сторону силы — копипастить по чёрному.

    Отныне! Ваша душа будет чиста как у младенца. Руки в золоте как у царевичей. Дети послушными и приветливыми.

    Вам ведь уже не терпится попробовать и узнать секрет мироздания? Всё очень просто! Достаточно лишь стряхнуть пыть с технологий древних и применить их ко своим нуждам.

    CSS не поддерживает всего этого богатста. HTML поддерживает ENTITIES, но HTML-парсеры — слишком топорные, чтобы их воспринять. XML тоже унаследовал их поддержку и (о чудо!) все XML-парсеры умеют с ними работать.

    Вы уже умеете вставлять CSS в HTML, превращать HTML в XML без потери возможностей, инклудить один XHTML в другой на стороне клиента? Умеете, я вижу это по вашим ясным глазам, зачарованно внимающим моим словам.

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

    Подключение стилей ничего нового из себя не представляет:

    DOCTYPE t:stylesheet [ ATTLIST t:stylesheet id ID # REQUIRED > ] >
    xml-stylesheet type =»text/xsl» href =»#t:stylesheet» ? >
    t:stylesheet id =»t:stylesheet» version =»1.0″ xmlns:t =»http://www.w3.org/1999/XSL/Transform» >
    t:output doctype-public =»-//W3C//DTD XHTML 2.0//EN» />
    t:template match =» @* | node() » >
    t:copy >
    t:apply-templates select =» @* | node() » />
    t:copy >
    t:template >
    t:template match =» *[ @src and contains( @srctype, ‘xml’ ) ] » >
    t:copy >
    t:apply-templates select =» @* » />
    t:apply-templates select =’ document( @src )//body/node() ‘ />
    t:copy >
    t:template >
    t:template match =» / » >
    t:apply-templates select =» document( ‘#t:stylesheet’ )//html » />
    t:template >
    t:template name =»content» >
    html >
    head >
    title > xml-css demo page title >
    style src =»styles.xml» srctype =»text/xml» > style >
    head >
    body >
    h1 > Заголовок раздела h1 >
    p > Дополнительный текст описывающий этот раздел p >
    body >
    html >
    t:template >
    t:stylesheet >

    Самое интересное же — в самом стилевом файле:

    ENTITY color . main «#eee » >
    ENTITY color . add «#369 » >

    ENTITY width . padding «32» >
    ENTITY width . border «16» >
    ENTITY width . decor «8» >

    ENTITY mixin . header «margin: 0; text-align: center;» >

    XSL-таблицы стилей: отображение XML-документа

    Основы использования XSL-таблиц стилей

    XSL-таблица стилей (eXtensible Stylesheet Language — расширяемый язык таблиц стилей) связывается с XML-документом и сообщает браузеру, как отображать данные XML. XSL позволяет открывать XML-документ непосредственно в браузере без посредничества HTML-страницы. XSL позволяет осуществлять отбор и сортировку данных XML при их отображении, предоставляет доступ ко всем компонентам XML (элементам, атрибутам, комментариям и инструкциям по обработке), даёт возможность включать в таблицу стилей сценарии.

    Существуют два основных шага для отображения XML-документа при использовании XSL-таблицы стилей:

    1. Создание файла XSL-таблицы стилей. XSL является приложением XML, т.е. XSL-таблица представляет собой корректно сформированный XML-документ, который отвечает правилам XSL.
    2. Связывание XSL-таблицы стилей с XML-документом. В XML-документ включается инструкция по обработке xml-stylesheet, которая имеет следующую форму записи:

    Здесь «xslFileURL» — URL файла XSL-таблицы стилей. Если вы используете полный (не относительный) URL, таблица стилей должна размещаться в том же домене, что и сам XML-документ. Инструкция по обработке xml-stylesheet добавляется в пролог XML-документа вслед за объявлением XML.

    Если вы связываете с XML-документом более одной XSL-таблицы стилей, браузер использует первую таблицу и игнорирует все остальные. Если вы связываете с XML-документом одновременно CSS-таблицу и XSL-таблицу стилей, браузер использует только XSL-таблицу стилей.

    Если XML-документ не связан ни с CSS-таблицей, ни с XSL-таблицей стилей, Internet Explorer отобразит документ с помощью встроенной XSL-таблицы, которая используется по умолчанию. Эта таблица расположена на вашем локальном компьютере по такому адресу:

    Вы можете просмотреть эту таблицу, введя указанный URL в адресную строку Internet Explorer.

    XSL-таблица включает один или несколько шаблонов, каждый из которых содержит информацию для отображения определённой ветви элементов в XML-документе. XSL-таблица должна иметь корневой элемент xsl:stylesheet, содержащий все шаблоны и имеющий следующую форму записи:

    Элемент xsl:stylesheet служит не только хранилищем всех других элементов, но также идентифицирует документ как XSL-таблицу стилей. Все XSL-элементы принадлежат пространству имён xsl — т.е. имя каждого элемента предваряется префиксом xsl. Это пространство имён определено в начальном тэге элемента xsl:stylesheet.

    Шаблоны имеют следующую форму:

    Браузер использует каждый шаблон для отображения определённой ветви элементов в иерархии XML-документа. Атрибут match шаблона указывает на определённую ветвь и аналогичен селектору в правиле CSS. Значение атрибута match называется образцом (pattern). Образец в приведённом выше примере («/») представляет «элемент», для которого является дочерним корневой элемент XML-документа (т.е. представляет «сам» XML-документ). Этот шаблон будет таким образом служить для отображения всего XML-документа. Каждая XSL-таблица стилей должна содержать один и только один шаблон с образцом «/». Вы также можете включить один или несколько дополнительных шаблонов для отображения определённых подчинённых ветвей XML-документа.

    Шаблон может содержать два вида XML-элементов:


      XML-элементы, представляющие HTML-разметку, например:

    Каталог товаров

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

    Браузер отличает XML-элемент от HTML-элемента, поскольку первый имеет префикс xsl.

XSL-элемент value-of добавляет текстовое содержимое определённого XML-элемента и всех его дочерних элементов в выходной модуль HTML. Вы указываете определённый XML-элемент заданием образца, который присваиваете атрибуту select элемента value-of. XML-элемент в образце задаётся с помощью оператора пути (в примере — «PRODUCT/TITLE»). Оператор пути аналогичен неполному пути к файлу, задающему местонахождение файла относительно текущей рабочей папки. Текущим элементом («текущей папкой») является значение атрибута match самого шаблона. Если вы опустите атрибут select для XSL-элемента value-of, будет использоваться этот текущий элемент.

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

Вам не нужно включать в XSL-шаблон HTML-элементы «HTML» и «BODY», поскольку они будут сформированы автоматически.

Чтобы отобразить все отвечающие образцу XML-элементы, а не только первый из них, следует использовать XSL-элемент for-each, например:

Заголовок

Атрибут select элемента for-each задаёт текущий элемент, поэтому внутри элемента for-each все образцы (пути к элементам в атрибутах select) задаются уже относительно этого текущего элемента.

Другой способ отображения всех отвечающих образцу XML-элементов, а не только первого из них, состоит в использовании XSL-элемента apply-templates:

Заголовок

В приведённом выше примере XSL-элемент apply-templates сообщает браузеру, что для каждого элемента PRODUCT внутри корневого элемента PRODUCTS он должен обрабатывать шаблон, для атрибута match которого установлено значение «PRODUCT».

Если вы не укажете атрибут select для элемента apply-templates, браузер будет обрабатывать соответствующий шаблон (если таковой имеется) для каждого дочернего элемента текущего элемента.

XSL трактует любой атрибут, принадлежащий любому элементу в XML-документе, как дочерний элемент. Однако, когда вы ссылаетесь на атрибуты, вы должны предварять имя атрибута символом @. Например, вот так может выглядеть ссылка на атрибут import элемента PRODUCT:

Пример отображения XML-документа

Попробуем отобразить с помощью XSL-таблицы стилей следующий XML-документ, представляющий из себя некий абстрактный упрощённый каталог товаров:

XSL-таблица стилей (файл Sample.xsl) для отображения приведённого выше XML-документа может выглядеть следующим образом:

Фильтрация и сортировка данных

Вы можете ограничить количество элементов, отвечающих шаблону, введя фильтр — выражение, заключённое в квадратные скобки и следующее непосредственно за оператором пути. Например, следующий образец указывает, что обрабатывать надо только те элементы PRODUCT, у которых есть сорт серого цвета (элемент SORT имеет дочерний элемент COLOR, который содержит текст «gray»):

Следующий образец указывает, что обрабатывать надо только импортные товары (т.е. только те элементы PRODUCT, у которых атрибут import равен «yes»:

Если в фильтр включено только имя элемента (без знака равенства и «контрольного» значения), проверяется только наличие этого дочернего элемента. Если элемент имеет более одного дочернего элемента с именем, указанным в условии фильтрации, проверяется только первый дочерний элемент.

Вы можете использовать атрибут order-by для сортировки данных XML при выводе. Вы можете назначить атрибуту order-by один или несколько образцов, разделяя их точкой с запятой. Браузер будет сортировать элементы с использованием образцов в том порядке, в котором они перечислены. Для указания направления сортировки (по возрастанию или убыванию) следует предварять образец префиксом + или -. Например, вот так выглядит сортировка товаров по возрастанию по признаку импорта, а для товаров с одинаковым признаком импорта — сортировка (по убыванию) по наименованию:

Читать еще:  Вертикальный список css
Ссылка на основную публикацию
Adblock
detector