css|xml| Display CSS (stacked style sheet) and XSL (extensible Style language) can define the display of XML files, what are the differences between these two ways and how they are used, which we will give in this article.
In an XML file, which is basically a custom tag, it's obvious that a browser doesn't understand the tags, and now the browser is just a parser for an XML file--as long as your XML file is well-formed, it shows you the file intact. Content is separate from representation in XML, and there is no information about its representation in an XML source file. The most important feature of XML is to reveal the meaning of the information itself, for automated electronic document exchange is optimal, if an XML file is used only for exchanging information, it does not need to consider its display problem. To edit an XML file, we just need to focus on the contents of the file, the structure of the information, and how it is displayed, to CSS (stacked style sheet) and XSL (extensible Style language) to complete. This allows the user to define the presentation of the data as needed.
Using CSS to represent XML
CSS already works well in HTML, and in XML, CSS also plays a powerful role in stylesheets. CSS in XML is similar to CSS in HTML. The current version is CSS 2.0.
Let's take a look at the CSS code--The FIRST.CSS in Example 1. It is a CSS file for the XML file in Example 1, 2.xml.
In the 2.xml source file for this XML file, there is one line: 〈?xml-stylesheet href= "First.css" type= "Text/css", which indicates that the XML file is referenced in the CSS file when displayed, the specific syntax is as follows: Xml-stylesheet href= "url" type= "Text/css"? of which, Xml-stylesheet is the keyword that indicates the reference style sheet setting; href= "url" is used to specify the location of the stylesheet, in Example 1, Because First.css and 2.xml are in the same directory, you can write its name directly, relative to the address; Type= "Text/css" indicates that the stylesheet is a CSS style sheet. Before applying CSS, the browser appears as shown in Figure 1, and when the stylesheet is applied, the display looks like Figure 2.
Figure 1 below we analyze the First.css this file in Example 1. As you can see, CSS in XML is actually the same as CSS syntax in HTML. All are tagged to set how the markup text is displayed.
Tables 1 and 2, to analyze this document. In this file, each chunk is set for different tags in the XML file, and each block is separated by the {} symbol. Like the first block, sets the color of the text in the title tag, the display state (whether it is segmented: block or inline; hide not displayed: none), Font (font-family), size (Font-size and Font-weigh), There is no top/underline (text-decoration). Other blocks, you can use the comparison of some common properties to analyze. We can use the various attributes of CSS to combine colorful display effects. This has little to do with programming, because the syntax is too simple, the key to see your imagination.
For the same XML file, if we give it a different CSS, then it has a different display effect, if your Web page in XML to make, so in order to change the appearance of the Web page, you can edit multiple CSS files, alternate period of time to replace. You only need to change the CSS file specified by URL in front of the XML file.
Using XSL to represent XML
XSL (extensible Style language) is also a specification for displaying XML files. Unlike CSS, XSL is designed to conform to XML specifications. In other words, the XSL file itself conforms to the syntax of XML. XSL is more powerful than CSS in typesetting style functions. For example: CSS for those elements of the same sequence of files, it can not change the order of the elements in the XML file--elements in the XML file in the order of what is arranged, then through the CSS display order can not be changed. For those files that need to be sorted frequently by different elements, we'll use XSL.
How does XSL work? After the XML file is expanded, it is a tree structure called the "raw Tree", the XSL processor (now only IE 5 supports XSL, and the processor in IE 5 is called: XSL Stylesheet Processor) reads information from this tree structure, according to the instructions of the XSL style to the "original tree" After the sorting, copying, filtering, deletion, selection, operation, and so on, produce another "result tree", and then add some new display control information in the result tree, such as table, other text, graphics and some information about the display format. The XSL processor reads the information in the XML file based on the instructions of the XSL stylesheet and then slipstreams it to produce a well-formed HTML file. The browser's HTML file is definitely fine, so the information in the XML file will be displayed in a certain form in front of us.
Figure 2 Also, let's look at an example of an XSL and then analyze its structure and syntax. The XML source file and the XSL source file, shown in Example 2, show the effect as shown in Figure 3. You can see that in order for XML files to behave using XSL, precede the XML file with the following sentence: 〈?xml-stylesheet href= "URL" type= "text/xsl", which is the same as referencing CSS, except that it is specified type= "text/xsl "。
Looking at the XSL file, you can see that the structure of the XSL file is the same as the structure of the XML file, because the rules of the XSL are based on the rules of the XML. An XSL file must also be well-foemed, because the markup used in the XSL file is defined by the definition of the consortium. Therefore, the XSL file does not need a DTD. In addition, you can see the markup that inserts some HTML in the XSL file to help the XML file display, and the markup for the HTML must be well-formed, for example: You must have the correct closing tag (not as lazy as in an HTML file).
The XSL file itself is an XML file, so it has the same declaration as the XML file at the beginning of the XSL file. The consortium defines many tags (elements) for the XSL, and the XSL file is the combination of these tags and HTML tags. In the XSL file, you must have: 〈xsl:stylesheet xmlns:xsl= "http://www.w3.org/TR/WD-xsl".
Where xsl:stylesheet is the root element of the XSL file and contains all the typographic styles in the root element, which is composed of the style sheets; xmlns:xsl= "Http://www.w3.org/TR/WD-xsl" This sentence is mainly used to illustrate that the XSL stylesheet is the XSL that is used by the consortium, and that the set value is the URL address of the XSL specification.
XSL file, except for HTML tags, the other is XSL's own markup. tags have different capabilities. The following describes the various tags available in the XSL, and you can refer to their functional descriptions and use examples to see the source files of the XSL in Example 3.
1.Xsl:stylesheet: As the root element in an XSL stylesheet, you must have it in each XSL file.
Properties: Default-space: Determines whether whitespace in the XML file is preserved, only when the value is "default".
Indent-result: Determines whether to keep white space in the XSL file and keep the value "yes".
Language: Sets the scripting language used in the XSL file.
Example: 〈xsl:stylesheet default-space= "Default"
2.Xsl:template: Specifies a specific tag in the XML file to define the layout style.
Properties: Language: Specifies which scripting language to use.
Match: Sets which tag to read information from the XML file, and if the value is "/", the message is read from the root element of the XML file.
Example: 〈xsl:template mach= "Data/book": represents reading information from the 〈book〉 tag in an XML file.
3.Xsl:value-of: Read the information from a specific tag in the XML file. Properties: Select: Sets the information in which tag to read.
Example: 〈xsl:template select= "title": means to read information from the 〈title〉 tag.
Figure 3 4.Xsl:for-each: Applies a layout style to the same markup (similar to a circular statement) in an XML file.
Properties: Select: Sets the tag from which to read the data.
Order-by: After reading the information is complete, set according to what tag to sort, the value is a specific mark, such as in front of the tag name with "+" is the order of the large to small, in contrast with "-" number. Example: 〈xsl:for-each select= "Data/book" order-by= "-price": because there are multiple 〈book〉 tags in the XML file, this setting repeatedly reads the information from the child elements under the 〈book〉 tag, The information read out is sorted by price from small to large.
5.Xsl:comment: The content in this element, XSL takes it as annotation information and does not appear in the browser.
6.Xsl:apply-templates: Instructs the XSL processor to look for the style set in the appropriate 〈xsl:template〉 in the XSL style sheet.
Properties: Order-by and select: Same as properties in Xsl:for-each.
Cases:.......
〈tr〉〈xsl:apply-templates/〉〈/tr〉
..........
〈xsl:template match= "book"
〈td〉〈xsl:value-of select= "Author"/〉〈/td〉
〈/xsl:template〉
......... |
7.Xsl:copy: The information in the copy tag from the XML file to the output file. No attributes.
Cases:.......
〈xsl:template〉
〈xsl:copy〉
〈xsl:value-of/〉
〈/xsl:copy〉
〈/xsl:template〉
........... |
This example first uses 〈xsl:copy〉 to read all the unlabeled information in the XML file and then displays the replicated information through 〈xsl:value-of/〉.
8.Xsl:if: With the general program in the If ... Then similar.
Properties: script: Sets the expression of the script.
Language: Set which scripting language to use.
Test: A descriptive expression that sets the condition. The contents of the 〈xsl:if〉 are processed by the XSL processor only if the set value of the script property is passed back to "true" (or the condition of the Test property setting is set).
Cases:
〈xsl:if test= ". [@sex = ' Male '] "
〈td〉 male 〈xsl:value-of/〉〈/td〉
〈/xsl:if〉 |
9.Xsl:choose, Xsl:when, xsl:otherwise: These three elements are used to set more complex conditions, commonly used in conjunction. The Xsl:when has three properties of script, language, test, and the same attribute meaning in the preceding xsl:if.
Cases:
〈xsl:choose〉
〈xsl:when test= "wife"
〈td〉 wife 〈xsl:value-of/〉〈/td〉
〈/xsl:when〉
〈xsl:when test= "Husband"
〈td〉 〈xsl:value-of/〉〈/td〉
〈/xsl:when〉
〈xsl:otherwise〉
〈td〉 Unmarried 〈/td〉
〈/xsl:otherwise〉
〈/xsl:choose〉 |
Ten.Xsl:attribute and xsl:element: You can attach a property name or create a new tag in the tag. Not only can the XSL Stylesheet reference HTML tags, but it can also create new tags and attributes, and then combine the information in the XML file to display. where Xsl:attribute is adding a property to the tag, xsl:element is creating a new tag. They have a common attribute.
Property: Name: Specifies the property name for the newly created property.
Example: If we don't have 〈img〉 HTML tag for this display graphics file, now we want to add one such tag in the XSL file, named 〈img〉, with the SRC attribute.
〈xsl:template match= "Image"
〈xsl:element name= "img"
〈xsl:attribute name= "src"
〈xsl:value-of/〉
〈/xsl:attribute〉
〈/xsl:element〉 |
XSL is the best way to display XML files. Because it conforms to the standards of XML files, all of the advantages of XML, XSL have, and functionally more than CSS, so we want to display the content of XML file, we'd better give priority to use xsl--for future expansion.
Example 2 2.xml source files
〈?xml version= "1.0" encoding= "GB2312"?
〈?xml-stylesheet href= "first.xsl" type= "text/xsl"?
〈data〉
〈book〉
〈title〉xml Introductory Fine Solution 〈/title〉
〈author〉 John 〈/author〉
〈price unit= "RMB" 〉20.00〈/price〉
〈/book〉
〈book〉
〈title〉xml Syntax 〈/title〉
!--will be published--〉
〈author〉 Dick 〈/author〉
〈price unit= "RMB" 〉18.00〈/price〉
〈memo〉 This book is a famous computer science expert,
Very authoritative. In the book and interspersed with many wonderful examples
, so the readability is very strong.
〈/memo〉
〈/book〉
〈/data〉
First.xsl Source Files
〈?xml version= "1.0" encoding= "GB2312"?
〈xsl:stylesheet xmlns:xsl= "Http://www.w3.org/TR/WD-xsl"
〈xsl:template match= "/"
〈html〉〈body〉
〈center〉〈h2〉 Book Information 〈/h2〉〈/center〉
〈div align= "center" 〉〈center〉
〈table border= "1" cellpadding= "5" bgcolor= "#4EB7DE"
〈tr〉
〈th〉 Title 〈/th〉〈th〉 author 〈/th〉〈th〉 Price (RMB) 〈/th〉
〈th〉 Notes 〈/th〉
〈/tr〉
〈xsl:for-each select= "Data/book" order-by= "title"
〈tr〉
〈td〉〈xsl:value-of select= "title"/〉〈/td〉
〈td〉〈xsl:value-of select= "Author"/〉〈/td〉
〈td〉〈xsl:value-of select= "Price"/〉〈/td〉
〈TD width= "150" 〉〈xsl:value-of select= "Memo"/〉〈/td〉
〈/tr〉
〈/xsl:for-each〉
〈/table〉
〈/center〉〈/div〉
〈/body〉〈/html〉
〈/xsl:template〉
〈/xsl:stylesheet〉 |
Table 1 Common text-related properties
Property name |
Function description |
Setting values |
Cases |
Color |
The color of the text |
The English name of the color or the hexadecimal RGB color |
Color:red Color: #f00f01 |
Font-family |
Text font |
Font Name |
Font-family: Song Body |
Font-size |
Text Size |
PT, in, CM, PX, xx-small, x-small, small, medium, large, X-large, Xx-large |
Font-size:x-large font-size:1cm |
Font-weight |
Text weight |
Extra-light, light, Demi-light, Medium, Demi-bold, Bold, Extra-bold |
Font-weight:light |
Font-style |
Font style |
Normal, italic |
Font-style:italic |
Text-align |
Text position |
Center, right, left |
Text-align:left |
Text-indent |
Text indent |
PT (point) in (inches) cm (cm) px (pixel) |
Text-indent:20pt |
Text-transform |
Case conversion |
Capitalize, uppercase, lowercase |
Text-transform:uppercase |
Text-decoration |
Text Plus line settings |
Underline, Ouerline, Line-through |
Text-decora:underline |
table 2 Common layout Properties
Property name |
Function description |
Set values and units |
Display |
Display Status of components |
None, block, inline |
Width |
Width of the component |
PT, in, CM, px |
Background-color |
The background color of the component |
Color English name or hexadecimal RGB |
Padding |
The distance between the component and the four edges |
PT, in, CM, px |
Padding-left |
The distance between the component and the left |
PT, in, CM, px |
Padding-right |
The distance between the component and the right |
PT, in, CM, px |
Padding-top |
The distance between the component and the top |
PT, in, CM, px |
Padding-bottom |
The distance between the component and the bottom |
PT, in, CM, px |
Border |
Square border |
|
Border-left |
Square left Border |
|
Border-right |
Square left Border |
|
Border-top |
Square Top Border |
|
Border-bottom |
Square Bottom Border |
|
Border-color |
Color of square border |
The English name of the color or the hexadecimal RGB |
Border-wide |
Width of square border |
Thin, medium, thick, PT, in, CM, px |
Border-style |
The style of a square border |
None, dotted, solid, double |
