Post on 06-Jan-2016
description
IST 221 Internet Concepts and Applications
Introduction to XML II
CSS and XSLT Style Sheets
Display XML Documents with Style Sheets
• Two type of style sheets could be used to provide style information for the elements in the xml document– CSS : lists element’s css attributes and
associated values– XSLT: contains templates that describe the
desired document structure into which the data of an xml document can be inserted.
Display XML Documents with CSS
• Create a CSS that lists all the style rules for the Elements in the xml document.
element_1{style_ attr1: value1; style_att2:value_2}
• Examples of style attributes: color, font-size, margin-left, and display.– Attribute “display” takes on two values: inline
(default) and block.
Display XML Documents with CSS
• To connect the external CSS to the xml document, include the following statement in the xml document
• <? xml-stylesheet type = “text/css” href = “style_sheet.css” ?> where would you add this statement? Put this after xml declare and before root element.
Display XML Documents with XSLT Style Sheets
• XSL Extensible Stylesheet Language
• XSL transformation (XSLT) – Transform an XML document into
different form, in particular, HTML
• A XSLT style sheet contains one or more templates that describe the desired document format and structure.
XSLT Structure
• A XSLT style sheet is an xml document containing one root element: xsl:stylesheet and one or more templates under the root element.– i.e. XML declaration needs to be included:what is this?
• Stylesheet tags <xsl:stylesheet version = “1.0” xmlns:xsl = “http://www.w3.org/1999/XSL/Format” xmlns = “http://www.w3.org/TR/xhtml1/strict”>…………….template goes here.
</xsl:stylesheet>
XSLT Structure (continued)
• Template tags: to specify the structure and display for elements on the associated xml file<xsl:template match = “/”> structure rules for root element<xsl:template match = “plane”>
structure rules for element “plane”
• Close with </xsl:template> tag
XSLT Structure (continued)
• value-of tag: to display the value of a element value of select = “plane/[year]”<xsl:value-of select =
“element[/child_element]”>• for-each tag: to display siblings.
– select each child-element of a specific element<xsl:for-each select =
“root_element[/child_element]” >and create a loop.
• HTML tags could be used to specify content.
Merge an XSLT stylesheet into an XML Document like a mail merge
• An XSL style sheet is saved as an .xsl file
• Add the following statement into the corresponding XML document<? xml-stylesheet type = “text/xsl” href =
“xslstyle_sheet.xsl” ?>
Exercises
• 8.2 Implement an external planes.css for planes.xml. Include the following style rules:
• ad ( style attributes and associated values)– display: block – margin-top: 15 px– color: blue
• year, make and model– color: red– font-size: 16pt
• color, description– display: block – margin-left: 20 px– font-size: 16pt
Exercises
• seller– display: block – margin-left: 15 px– font-size: 14pt
• location– display: block – margin-left: 40 px
• city, state– font-size: 12pt
• Connect the CSS to planes.xml from Ex 8.1 • Display the file planes.xml
Exercises
• Exercises 8.3: download xslplane.xml and xslplane.xsl
• Exercise 8.4: download xslplanes.xml and xslplanes.xsl
• We will be discussing the structures of the two set of files
• Question: What are the differences between using CSS and XSL style sheets for an XML document?