Displaying XML Documents Using CSS and XSL

Displaying XML Documents Using CSS and XSL Chapter 3

Review-1 ,[object Object],[object Object],[object Object],[object Object],[object Object]

Review-2 ,[object Object],[object Object],[object Object],[object Object]

Review-3 ,[object Object],[object Object],[object Object],[object Object]

Objectives ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Style Sheets - 1 An XML document can be displayed in different formats in different display devices such as computer, printer, and the like. Document to be displayed

Style Sheets - 2 ,[object Object],It separates presentation layer from the content data of the document. A single XML document can have multiple style sheets Style sheets Data Presentation Layer

Style Sheets - 3 ,[object Object],[object Object],[object Object],[object Object]

Uses of CSS and XSL Cascading style sheet is used to manipulate Visibility of an element Positioning and sizing of elements Colors and Background Font and Text Spacing XSL is used for formatting and converting documents written in one XML DTD into another DTD.

XML and Style Sheets ,[object Object],[object Object],[object Object],[object Object],[object Object]

Working of XML XML File CSS (XML + CSS) aware Browser Formatted Document

Displaying an XML Document Using CSS -1 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Displaying an XML Document Using CSS -1 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],question { display:block; font-size: x-large; color: black; } answer.ans { display : block; font-size: 20pt; color: blue } The CSS document for the XML document

Displaying an XML Document Using CSS -2 OUTPUT

CSS Style Rules ,[object Object],[object Object],[object Object],[object Object],Example: greeting {display:block;font-family: Arial, Helvetica,sans-serif; font-size: 32pt; width: 30em; color: red }

Multiple Selector ,[object Object],[object Object],[object Object],Example greeting,question {font-family: sans-serif; font-size: 32pt; } Style Rule Selector 1 Selector 2 The same Style Rule is being used by Selector1 and Selector2

Contextual Selectors -1 ,[object Object],MADE IN U.S.A tag Occurrence 1 Occurrence 2 Occurrence 1 tag([declaration]} Occurrence 2 tag([declaration]} Conceptual Selector

Contextual Selectors -2 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Contextual Selectors to differentiate between the different occurrences of <extension> greeting extension{[declarations]} answer ans extension{[declaration]}

Characters used in CSS Separates multiple selectors in a style rule Comma , Identifies selector context Period . Separates multiple property/value combinations Semicolon ; Separates property and its value Colon : Function Name Character

Linking the CSS to XML ,[object Object],[object Object],[object Object],[object Object],Example <?xml-stylesheettype="text/css“ href="hello.css"?>

Properties and Values ,[object Object],[object Object],Example Absolute value P{margin-left:3cm;} A margin of 3 centimeter is created irrespective of the margin size. Example Relative value P{margin-left:10%} A margin of 10% of the width of the page is created.

Color Values XML supports the following color values: Gray White Red Short form #888 #FFF #F00 Decimal Integer rgb(136,136,136) rgb(255,255,255) rgb(255,0,0) Percentage rgb(55%,55%,55%) rgb(100%,100%,100%) rgb(100%,0,0)

Formatting the Text - 1 ,[object Object],[object Object],<absolute-size> xx-small x-small small medium <relative-size> large smaller

Formatting the Text - 2 ,[object Object],font-family font-size font-style font-weight font-variant Font

Boxes -1 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Margins, Border and Padding ,[object Object],Boxes margin-top margin-bottom margin-left margin-right margin Margins Border border-top border-bottom border-left border-right border padding-bottom padding-top padding-right padding-left padding Padding

Controlling Layout ,[object Object],[object Object],A paragraph that is two inches by one inch and with a scroll bar is displayed

XSL ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

XSL - 2 XML Document XSL HTML document displayed in the Web HTML CSS

Example for XSL ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Patterns ,[object Object],[object Object],[object Object],[object Object],Letters after sorting

Sorting ,[object Object],[object Object],The chart is organized in the descending order of catches

Operators XSL supports the se operators: / ./ // .// * @ = /*/name */* @* //name

Filtering and Logical Operators ,[object Object],[object Object],Operator Description AND Logical and OR Logical or NOT Negation = Equal != Not equal > Greater than < Less than >= Greater than or equal to <= Less than or equal

Templates ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Matching part Processing part

Types of Matching Matching Matching by name Matching by ancestry Matching several names Matching the root Wildcard matches Matching by ID Matching by attributes

Handling Expressions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Switching Styles Data Islands 1 XML document Data Islands 2 Data Islands 3 XML document with XSL style sheet 1 XML document with XSL style sheet 2 XML document with XSL style sheet 3

xsl:import and xsl:include ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Difference Between XSL and CSS It transforms XML into structures such as lists or tables It does not change the structure of the document XSLT lets us to map a certain pattern in the source document CSS determines the visual appearance of a page XSL provides means of transforming of XML documents CSS work by assigning a set of display properties to an HTML element

Summary-1 ,[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object]

Summary-2 ,[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object]

Summary-3 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Displaying XML Documents Using CSS and XSL

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (13)

Semelhante a Displaying XML Documents Using CSS and XSL

Semelhante a Displaying XML Documents Using CSS and XSL (20)

Mais de Bình Trọng Án

Mais de Bình Trọng Án (17)

Último

Último (20)

Displaying XML Documents Using CSS and XSL

Notas do Editor