XML and CSS

We can view the content in the XML file in IE. The display of the content is the same as the original format. It is a hierarchical structure. For XML files with large data volumes and complex structures, this viewing method is not user-friendly. What should we do if we need to display XML data in a certain format? One way is to compile an HTML file for it and use the XML data island to introduce the data in XML into HTML. You can view the content in XML through the HTML file. The disadvantage of this method is that if you still open the XML file using IE directly, you still see the original format in XML. Is there any way for users to open the XML file directly and see the format that meets our requirements? The answer is yes, that is, using XML with CSS (stacked style sheet ).

Friends who are familiar with HTML should be familiar with CSS. Many websites now use HTML + CSS to design frameworks for pages, so that they do not have to modify HTML files, different page la s can be obtained by using different CSS files. Similarly, CSS applies to XML files. In the past, the selector in CSS (if you are not familiar with this concept, you can view some CSS Documents First) is often a tag in HTML, such as table, TR, TD, Div, H2, and span. If you want CSS to work with XML, you need to change the selector to a node in the XML file. There is such an XML file:

<? XML version = "1.0" encoding = "gb2312"?>
<Books>
<Book id = "0001" bookcategory = "" amount = "150" remain = "80" discount = "8.7">
<Title> Romance of the Three Kingdoms </title>
<Author> Luo Guanzhong </author>
<Publisher> Literature and Art Publishing House </publisher>
<ISBN> 0-765-58007-8 </ISBN>
<Price> 80 </price>
</Book>
<Book id = "0002" bookcategory = "" amount = "100" remain = "70" discount = "9.8">
<Title> Dream of Red Mansions </title>
<Author> CAO Xueqin </author>
<Publisher> sanqin Publishing House </publisher>
<ISBN> 0-765-58007-9 </ISBN>
<Price> 22 </price>
</Book>
<Book id = "0003" bookcategory = "" amount = "120" remain = "60" discount = "8.5">
<Title> Journey to the West (previous and next) </title>
<Author> Wu chengen </author>
<Publisher> People's Literature Publishing House </publisher>
<ISBN> 0-765-58007-3 </ISBN>
<Price> 40.12 </price>
</Book>
</Books>

 

It contains some information about books. Each book contains information such as title, author, and ISBN. to display the title in bold, we need to add the following to the CSS file:

Title {...}{
Font-weight: blod;
}

"Title" is the name of the title node in the XML file. After the CSS file is written, how does XML know to use CSS to display its own data? Like HTML, we need to add a reference to the CSS file in the XML file. How to reference a CSS file in XML format before the root node

<? XML-stylesheet type = "text/CSS" href = "test07.css"?>

Success !!! You only need to double-click the XML file to view the data displayed according to the style in the referenced CSS file in IE. The above is just a simple example to illustrate how to use CSS to define the XML display format. You can write more abundant and beautiful CSS.