1

Network Europe - Russia - Asia ofMasters in Informatics as a Second Competence

159025-TEMPUS-1-2009-1-FR-TEMPUS-JPCR

XML

PRESENTATION OF DOCUMENTS

Sergio Luján MoraDepartment of Software and Computing SystemsUniversity of Alicante

2

Contents

Introduction Cascading Style Sheets (CSS) XSL

Introduction

Style sheets define how to display a document:

◦ On a screen

◦ On a printer

◦ On a mobile device

◦ On …

3

IntroductionXML

document

Stylesheet

Style sheetprocessor

Introduction

Two technologies:

◦ CSS

◦ XSL

4

Introduction

CSS and XSL overlap to some extent XSL is more powerful than CSS, but XSL is also

more complex and harder to learn and use than CSS

CSS is more broadly supported than XSL But CSS only allows to format element content:

◦ CSS does not allow you to change or reorder the content

◦ CSS only apply to element content, not to attributes

Introduction

Feature CSS XSL

Can it be used with HTML? Yes No

Can it be used with XHTML? Yes Yes

Can it be used with XML? Yes Yes

Is it a transformation language? No Yes

What is its syntax? Own XML

5

CSS

Cascading Style Sheets (CSS) is a declarative language used to format the presentation of web pages (HTML)

CSS can also be used to format any XML document

CSS

A CSS style sheet contains a list of rules Each rule gives the names of the elements

it applies to and the styles to apply to those elements

6

CSS

Fundamental properties:◦ display

◦ position

◦ width, height

◦ float, clear

◦ overflow

◦ margin (margin-top, margin-right, etc.)

◦ border (border-top, border-right, etc.)

◦ padding (padding-top, padding-right, etc.)

◦ font (font-family, font-size, font-weight, etc.)

◦ background (background-color, background-image, etc.)

◦ color

CSS

Length values:◦ Inches: in◦ Centimeters: cm◦ Millimeters: mm◦ Points: pt◦ Picas: pc◦ Pixels: px◦ Ems: em (the width of the letter “m” in the current

font)◦ Exs: ex (the height of the letter “x” in the current

font)◦ Percentage: %

7

CSS

Color values:

◦ Color name

◦ Decimal RGB

◦ Hexadecimal RGB

◦ Short hexadecimal RGB

◦ Percentage RGB

CSS

Color name

Decimal RGB Hexadecimal RGB

Short hexadecimal RGB

Percentage RGB

red rgb(255, 0 , 0) #FF0000 #F00 rgb(100%, 0%, 0%)

green rgb(0, 255, 0) #00FF00 #0F0 rgb(0%, 100%, 0%)

blue rgb(0, 0, 255) #0000FF #00F rgb(0%, 0%, 100%)

white rgb(255, 255, 255) #FFFFFF #FFF rgb(100%, 100%, 100%)

black rgb(0, 0, 0) #000000 #000 rgb(0%, 0%, 0%)

yellow rgb(255, 255, 0) #FFFF00 #FF0 rgb(100%, 100%, 0%)

magenta rgb(255, 0, 255) #FF00FF #F0F rgb(100%, 0, 100%)

cyan rgb(0, 255, 255) #00FFFF #0FF rgb(0%, 100%, 100%)

8

CSS

How to attach a style sheet to a document:

...

...

CSS

Example: XML document about a library and its books

9

XML 1.1 Bible

3

Elliotte Rusty Harold

Wiley Publishing, Inc.

1022

2004

0-7645-4986-3

El elemento

sir Ken Robinson

Lou Aronica

Random House Mondadori, S.A.

359

2011

978-84-9908-390-2

Ruso fácil

7

Claudio Klotchkov

Espasa Calpe, S.A.

254

2009

978-84-670-3115-7

10

11

library {

display: block;

}

book {

display: block;

}

title {

display: block;

margin: 15px;

font-weight: bold;

font-size: 2em;

}

edition, author, editor, pages, year, isbn {

display: list-item;

margin-left: 3em;

list-style-type: disc;

}

edition:before {

content: "Edition: ";

}

author:before {

content: "Author: ";

}

editor:before {

content: "Edition: ";

}

pages:before {

content: "Pages: ";

}

year:before {

content: "Year: ";

}

isbn:before {

content: "ISBN: ";

}

12

XSL

13

XSL

Extensible Stylesheet Language (XSL) is divided into two parts:

◦ XSL Transformations (XSLT)

◦ XSL Formatting Objects (XSL-FO)

XSL

XSLT:

◦ XSLT enables you to replace one tag with another

◦ XSLT can reorder elements in the document

◦ XSLT can add additional content not present in the XML document

14

XSL

XSL-FO:

◦ XSL-FO enables you to specify the appearance and layout of a page: multiple columns, text flow around objects, line spacing, widow and orphan lines, font faces, sizes, etc.

◦ No current web browser yet support XSL-FO

XSL

How to attach a XSLT to a document:

...

...

15

XSL

Example: XML document about a library and its books

XSLT instructions:◦

◦

◦

◦

XML 1.1 Bible

3

Elliotte Rusty Harold

Wiley Publishing, Inc.

1022

2004

0-7645-4986-3

El elemento

sir Ken Robinson

Lou Aronica

Random House Mondadori, S.A.

359

2011

978-84-9908-390-2

16

Ruso fácil

7

Claudio Klotchkov

Espasa Calpe, S.A.

254

2009

978-84-670-3115-7

17

Edition:

Authors:

Editor:

Pages:

Year:

ISBN:

18