Слайд 1Вывод документов XML с использованием CSS и XSL
Слайд 2Цели занятия
Применение таблиц стилей типа CSS в документах XML
Преобразование документов
XML с помощью таблиц стилей типа XSL
Применение шаблонов
Переключение стилей в
документе
Слайд 3Таблицы стилей – 1
Документ XML может быть выведен в различных
форматах на различные устройства вывода, такие, как компьютер, принтер и
т.д.
Документ, который должен быть выведен
Слайд 4Таблицы стилей – 2
Таблица стилей – это набор инструкций для
вывода документов
Таблицы стилей
Данные
Уровень представления
Отделяет уровень представления от данных, содержащихся в
документе
Один документ XML может иметь несколько таблиц стилей
Слайд 5Таблицы стилей – 3
Некоторые таблицы стилей, предлагаемые на рынке:
CSS –
Каскадные таблицы стилей
XSL – Расширяемые таблицы стилей
DSSL – Document Style
Semantics and Specification Language (Язык семантических стилей и спецификаций документа)
Слайд 6Использование CSS и XSL
Каскадная
таблица стилей,
используемая
для обработки
Видимость элемента
Позиции
и размеры элементов
Цвета и фон
Шрифт и текст
Пробелы
XSL используется для преобразования
документов, написанных на одном XML DTD, в другое DTD и для форматирования
Слайд 7XML и таблицы стилей
Документы XML – это обычные текстовые файлы
Таблицы
стилей используются для форматирования и просмотра документа XML
Для XML широко
используются два типа таблиц стилей :
Cascading Style Sheets (CSS) – Каскадные таблицы стилей – расширение языка HTML
Extensible Style sheet Language (XSL) – Расширяемый язык таблиц стилей – специальный язык стилей для XML
Слайд 8Работа с языками форматирования в XML
Файл XML
Таблицы стилей CSS
XML +
Браузер, понимающий CSS
Форматиро-ванный документ
Слайд 9Вывод документа XML с помощью CSS – 1
Документ XML
type="text/css" href="/hello.css"?>
Hello!
How were you!
Fine Thank you.
Слайд 10Вывод документа XML с помощью CSS – 2
xsampdoc
{ margin-top:.7in;
margin-bottom:
.7in;
margin-left:1.5in;
margin-right:1in;
color: navy;
background-color:white;
display: block }
greeting
{ display:block;
font-family: Arial,
Helvetica, sans-serif;font-size: 32pt;
width: 30em;
color: red }
question
{ display:block;
font-size: x-large;
color: black; }
answer.ans
{ display: block;
font-size: 20pt;
color: blue
}
Документ CSS для документа XML
Слайд 11Правила стиля CSS
Синтаксис для правил стилей в каскадных таблицах стилей:
Selector{declaration}
Селектор
(selector) идентифицирует тэг, к которому применяется заданный стиль
Объявление (declaration) представляет
правила стилей, применяемые к данному селектору
Такой селектор обозначается, как "Простой селектор" (‘Simple Selector’)
Пример:
greeting
{display:block;font-family: Arial, Helvetica,sans-serif;
font-size: 32pt; width: 30em; color: red }
Слайд 12Множественный селектор
Используется для применения одного правила стиля к различным элементам
Синтаксис:
selector,selector…….{declaration}
Пример:
greeting,question
{font-family:
sans-serif;
font-size: 32pt; }
Правило стиля
Селектор 1
Селектор 2
Одно Правило
стиля использует и Селектор1, и Селектор2
Слайд 13
Контекстные селекторы – 1
Помогает отличать друг от друга различные вхождения
одного тэга
MADE IN
U.S.A
tag (тэг)
Вхождение 1
Вхождение 2
Вхождение 1
tag([declaration]}
Вхождение 2
tag([declaration]}
Контекстный
селектор
Слайд 14Контекстные селекторы – 2
Пример:
Hello! there
Finehere
Thank you.
Контекстные селекторы позволяют отличать разные вхождения
элемента
greeting.extension{[declarations]}
answer.ans.extension{[declaration]}
Слайд 16Связывание CSS с XML
В документе XML должны быть организованы ссылки
на каскадные таблицы стилей
Для этого мы используем инструкции обработки
Синтаксис:
href=“url”?>
Пример:
Слайд 17Свойства и значения
Значением свойства стиля CSS может быть строка, число
с единицей измерения, целое число или цветовое значение
Значения могут быть
абсолютными или относительными, наследуемыми или не наследуемыми
Пример абсолютного значения
P{margin-left:3cm;}
Создаётся поле в 3 сантиметра независимо от размера страницы
Пример относительного значения
P{margin-left:10%}
Создаётся поле шириной 10% от общей ширины страницы
Слайд 18Цветовые значения
Цветовые значения, поддерживаемые в XML
Слайд 19Форматирование текста
Свойства CSS позволяют определить, какой шрифт следует использовать для
вывода элемента, размер и цвет текста
Ключевые слова и
используются в свойствах шрифта
xx-small
x-small
small
medium
larger
smaller
Слайд 20Форматирование текста
Различные свойства шрифта, которые могут быть установлены:
font-family
(семейство шрифта)
font-size
(размер шрифта)
font-style
(стиль
шрифта)
font-weight
(плотность шрифта)
font-variant
(видоизменение шрифта)
Font (Шрифт)
Слайд 21Панели – 1
Блоки текста могут быть помещены в панель
Для панелей
существуют три свойства:
Margins (Поля)
Border (Рамка)
Padding (Заполнение)
Расстояние между содержимым панели и
её границей называется заполнением (padding)
Расстояние между рамкой и внешним краем смежной панели или между рамкой и содержащей её панелью называется её полями (margin)
Слайд 22Панели – 2
Верхнее поле
Левое
поле
Заполнение
слева
Заполнение
справа
Правое
поле
Заполнение по верхней
границе
Текст
Заполнение по нижней границе
Нижнее поле
Слайд 23Поля, рамка и заполнение
margin-top (верхнее поле)
margin-bottom (нижнее поле)
margin-left (левое поле)
margin-right
(правое поле)
margin (поле)
Поля
Рамка
border-top (рамка сверху)
border-bottom (рамка снизу)
border-left (рамка слева)
border-right (рамка
справа)
border (рамка)
padding-bottom (по нижней границе)
padding-top (по верхней границе)
padding-right (по правой границе)
padding-left (по левой границе)
padding (заполнение)
Заполнение
Панели
Свойство padding (заполнение) используется для определения расстояния или пространства между рамкой и содержимым панели.
Слайд 24Управление макетом
Свойства макета CSS могут управлять панелью на экране
Панели могут
перекрываться при использовании свойства z-index
Выводится абзац, который имеет размеры два
дюйма на один дюйм, а также полосу прокрутки.
Слайд 25XSL
XSL – это реализация таблиц стилей, созданная специально для языка
XML.
Функциональные возможности XSL:
Предоставляет язык преобразования (XSLT)
XSL может быть использован,
как язык форматирования
XSL может быть использован для сортировки и фильтрации
XSL может быть использован для поиска совпадений образцов, что может помочь нам при поиске записей
Слайд 26XSL – 2
Документ XML
XSL
Документ HTML, выведенный в web
Слайд 27Пример использования XSL
Код таблицы стилей XSL
Icons In Cricket
Icons
In Cricket
Player | No. Of Catches | No. Of 100's | No. Of 50's |
| | | |
Слайд 28Образцы (Patterns)
Образцы, поддерживаемые в языке XSL:
Sorting (Сортировка)
Operators (Операторы)
Filtering (Фильтрация)
Письма после
сортировки
Слайд 29Сортировка
По умолчанию сортировка выполняется в порядке возрастания
Знак ‘-’ используется для
сортировки в порядке убывания
Таблица организована в порядке убывания количества перехватов
Слайд 30Операторы
Различные типы операторов, которые поддерживаются в XSL:
/
./
//
.//
*
@
=
/*/name
*/*
@*
//name
Слайд 31Фильтрация и логические операторы
Операции фильтрации могут содержать такие выражения, как
логические выражения с применением операторов AND, OR и NOT
Различные логические
операторы, которые могут быть использованы:
Слайд 32
Шаблоны
Инструкции в таблице стилей XSL, которые управляют преобразованием элемента и
его содержимого, называются шаблонами (templates)
Представлены тэгами …
Используются при помощи элемента
Шаблон содержит две части
Часть проверки на совпадение (matching part)
Часть обработки (processing part)
Часть проверки на совпадение
Часть обработки
Слайд 33Типы совпадений
Совпадение
Совпадение по имени
Совпадение по предку
Совпадение по нескольким именам
Совпадение по
корневому элементу
Совпадение по шаблонным символам
Совпадение по идентификатору ID
Совпадение по атрибуту
Слайд 34Обработка выражений
XSL поддерживает пять типов выражений. Вот они:
Node Sets –
Наборы узлов
Booleans – Логические выражения
Strings – Строки
Numbers – Числовые выражения
Result
Tree Fragments – Фрагменты дерева результата
Слайд 35Переключение стилей
Островки данных 1
Документ Xml
Островки данных 2
Островки данных 3
Слайд 36xsl:import и xsl:include
Таблицы стилей, созданные другими разработчиками, могут быть импортированы
с использованием xsl:import
Синтаксис импортирования таблиц стилей:
href= ‘another stylesheet1.xsl’/>
Все импортированные таблицы стилей организуются в дерево импортирования.
При импортировании таблицы стилей в дереве импортирования создаётся новый узел
Слайд 38Итоговый обзор – I
XML является переносимым языком. Мы можем переслать
документ XML с одной системы на другую и даже от
приложения к приложению, без изменения содержания.
Таблица стилей (style sheet) – это набор инструкций, используемый для вывода документов.
Таблицы стилей могут быть написаны на нескольких языках. Вот два примера таких языков:
Cascading Style Sheets (CSS), расширение HTML
Extensible Stylesheet Language (XSL), разработанный специально для XML язык стилей
Селектор идентифицирует тэг, к которому применяется стиль, а объявление содержит правила стиля, применяемого к селектору.
Существуют три вида селекторов – Simple (Простые), Multiple (Составные) и Contextual (Контекстные) селекторы.
Блок текста может быть помещён в панель, а эта панель может быть затем размещена в браузере настольного компьютера.
Слайд 39Итоговый обзор – II
XSL – это язык описания таблиц стилей,
созданный специально для XML. Он используется для преобразования XML‑данных в
HTML‑документ.
XSL обеспечивает поддержку следующих образцов (patterns):
Sorting (Сортировка)
Operators (Операторы)
Filtering (Фильтрация)
Типы совпадений образцов:
Совпадение по атрибуту
Совпадение по идентификатору ID
Совпадение по образцу с шаблонными символами (wildcard)
Совпадение по корневому элементу (root)
Совпадение по имени
Совпадение по предку
Совпадение по нескольким именам
XSLT и CSS являются стандартами, совместимыми друг с другом