CSS (laminated style sheet) and XSL (extensible style language) can define display of XML files, which differ in both ways and their specific methods in use, we will introduce this article.
In the XML file, it is basically a customized tag, apparently a browser is unable to understand these tags, now, the browser is just a parser as an XML file ?? As long as your XML file is Well-Formed , Then it will show you the files. The content and expression form in XML are separated, and there is no information in the form of expression in an XML source file. The biggest feature of XML is to reveal the meaning of the information itself, and the electronic document exchange for automation is optimal. If an XML file is only used to exchange information, there is no need to consider its display problem. Edit the XML file, we only need to pay attention to the contents of the file, the structure of the information, as for how it is displayed, then handed over to the CSS (laminated style sheet) and XSL (Extensible style language) to complete. This allows the user to define the form of expression of the data as needed.
■ Use CSS to express XML
CSS has a good role in HTML, in XML, CSS also plays its powerful style sheet. CSS and HTML in XML are similar. The current version is CSS 2.0.
Let's first look at the first.css of the CSS code. It is a CSS file made in Example 2.XML this XML file.
In the source file of the 2.xml this XML file, there is a line: , It specifically references the CSS file when the XML file is displayed, The specific syntax is as follows: Where XML-Stylesheet is a keyword, indicating reference style sheet settings; href = "url" is used to specify a style sheet The location, in Example 1, because first.css and 2.xml in the same directory, it can be written directly, it is the relative address; type = "text / css" indicates that the style sheet is CSS Style sheet. Before applying CSS, the browser displays as shown in Figure 1. After the style sheet is applied, the display effect is shown in Figure 2.
Below we come to analyze the file of first.css in Example 1. As you can see, the CSS syntax in the XML and the CSS syntax in HTML is actually the same. It is all how to set the tag text by some tags.
Controls Table 1 and Table 2 to analyze this file. In this file, each block is set for different tags in the XML file, and each block is separated by {} symbol. Like the first block, set the color (color) of the Title tag, display status (whether segmentation: block or inline; hidden: none), Font-Family, Size (FONT- Size and font-weigh, there is no upper / underline (Text-Decoration). Other blocks, you can analyze some common attributes in the table. We can use the various attributes of CSS to combine colorful display effects. This is not big in programming, because the syntax is too simple, the key to see your imagination.
For the same XML file, if we give it different CSS, then there is a different display effect. If your web is made with XML, then in order to transform the web page, you can edit the plurality of CSS files, the segmentation time replace. It is only necessary to change the "URL" specified in the XML file to change the CSS file. ■ Use XSL to express XML
XSL (Extensible Styles Language) is also a specification that displays an XML file. Unlike CSS: XSL is formulated in accordance with XML specification. That is, the XSL file itself meets XML's grammatical provisions. XSL is powerful than CSS in the typographic style. For example: CSS is suitable for files that are constant in elements, it cannot change the order of elements in the XML file. The elements are arranged in the XML file, then the order in which CSS is expressed. We must use XSL for files that need to be sorted by different elements.
How is XSL work? The XML file is a tree structure after the expansion is called "original tree", the XSL processor (now only IE 5 supports XSL, the processor called: XSL Stylesheet Processor) from this tree structure Information, sort this "original tree" according to the instructions of the XSL style, copy, filter, filter, delete, select, another "result tree" after the operation, etc., then add some new display control information in the "Result Tree". For forms, other texts, graphics, and some information about display formats. The XSL processor reads the information in the XML file based on the instruction of the XSL style sheet, and then recombines the HTML file to generate a Well-Formed HTML file. The browser shows that the HTML file is definitely no problem, so that the information in the XML file is displayed in front of us in a certain form.
Similarly, let's first look at an example of XSL, then analyze its structure and syntax. XML source files and XSL source files As shown in Example 2, the display effect is shown in Figure 3. It can be seen that if you want the XML file to use XSL to perform, you should add a sentence in front of the XML file: , And reference CSS is the same, only But it is specified Type = "text / xsl".
Take a look at the XSL file, you can find that the structure of the XSL file and the structure of the XML file are the same, because XSL rules are based on XML rules. A XSL file must also be Well-FoeMed because the tags used in the XSL file are defined by W3C. So, the XSL file does not require DTD. Alternatively, you can see that some HTML tags can be inserted in the XSL file to help the XML file display, these HTML tags must also be Well-Formed, for example, must have the correct end tag (not like files in HTML file) It can be lazy as it is.
The XSL file itself is an XML file, so the same statement is the same as the XML file at the beginning of the XSL file. W3C defines a lot of tags (elements) for XSL, and the XSL file is a combination of these tags and HTML tags. In the XSL file, you must have: .
Among them, XSL: Stylesheet is the root element of the XSL file, which contains all typesetting styles in the root element. The style sheet is combined by these typesetting styles; XMLns: XSL = "http://www.w3.org/tr / WD-XSL "This sentence is mainly used to indicate that the XSL style sheet is the XSL developed using W3C, and the set value is the URL address where the XSL specification is located. In the XSL file, in addition to the HTML tag, others are marked by XSL. Marks have different functions. The following describes a variety of available tags in XSL, you can refer to the functional description and use examples of the example 3, to see the source files of XSL in Example 3.
1. XSL: Stylesheet: As the root element in the XSL style sheet, there must be in each XSL file.
Property: Default-space: Decide if the blank in the XML file is retained, only when the value is "default".
Indent-result: Decide whether to keep blank in the XSL file, the value is reserved when "Yes".
Language: Set the scripting language used in the XSL file.
Example:
2. XSL: Template: Specify specific tags in the XML file to define the typographic style.
Property: Language: Which scripting language is specified.
Match: Set which tag from the XML file begins to read the information, if the value is "/", then the root element from the XML file begins to read information.
Example: : Indicates that read information from the tag in the XML file.
3. XSL: value-of: reads the information from the specific tag in the XML file. Property: SELECT: Sets the information in which one tag is read.
Example: : Indicates that the information is read from the tag.</p>
<p>image 3</p>
<p>4. XSL: For-Each: Apply the typographic style to the same tag in the XML file (similar to a loop statement).</p>
<p>Property: SELECT: Sets it to read data from which tag.</p>
<p>ORDER-BY: After reading the information is completed, the setting is sorted according to what tag, the value is a particular tag, such as using the " " number before the tagnap, is sorted by large to small, "-" number. Example: <xsl: for-each select = "data / book" ORDER-BY = "- price">: Because there are multiple <book> tags in the XML file, here is set repeatedly from <book> marked Read information in child elements, and sort the read information according to the price from a small to large.</p>
<p>5. XSL: Comment: In this element, XSL uses it as an comment message and is not displayed in the browser.</p>
<p>6. XSL: Apply-Templates: Indicates the XSL processor to find the style set by the appropriate <XSL: Template> in the XSL style sheet.</p>
<p>Properties: ORDER-BY and SELECT: like XSL: for-EACH.</p>
<p>example:.......</p>
<p><TR> <XSL: Apply-Templates /> </ TR></p>
<p>........</p>
<p><XSL: Template Match = "BOOK"></p>
<p><TD> <XSL: Value-of Select = "Author" /> </ td> </ xsl: template></p>
<p>.........</p>
<p>7. XSL: Copy: Information from the XML file in the information in the output to the output file. No properties.</p>
<p>example:.......</p>
<p><XSL: Template></p>
<p><XSL: COPY></p>
<p><XSL: Value-of /></p>
<p></ XSL: COPY></p>
<p></ Xsl: template></p>
<p>...........</p>
<p>This example first reads all the non-marked information in the XML file all in <XSL: COPY>, then displayed by <XSL: Value-of />.</p>
<p>8. XSL: IF: Similar to the IF ... THEN in the general program.</p>
<p>Property: Script: Sets the formula expressed by the Script program.</p>
<p>Language: Set which scripting language to use.</p>
<p>Test: Descript of setting conditions. Only when the setting value of the Script property is transmitted back to "TRUE" (or the condition of TEST property settings), the content in <XSL: if> is processed by the XSL processor.</p>
<p>Example: <XSL: if Test = ". [@ Sex = 'Men']"></p>
<p><TD> Male <XSL: Value-of /> </ TD></p>
<p></ Xsl: if></p>
<p>9. XSL: Choose, XSL: WHEN, XSL: OtherWise: These three elements are used to set more complicated conditional formulas, which generally cooperate together. The xsl: when there is three properties of Script, Language, Test, which is the same as the attribute meaning in the previous XSL: IF.</p>
<p>Example: <XSL: Choose></p>
<p><XSL: WHEN TEST = "Wife"></p>
<p><TD> Wife <XSL: Value-of /> </ TD></p>
<p></ Xsl: when></p>
<p><XSL: WHEN TEST = "Husband"></p>
<p><TD> Fu <XSL: Value-of /> </ TD></p>
<p></ Xsl: when></p>
<p><XSL: OtherWise></p>
<p><TD> Unmarried </ TD></p>
<p></ Xsl: OtherWise></p>
<p></ Xsl: choose></p>
<p>10.xsl: Attribute and XSL: ELEMENT: You can add a property name or create a new tag in the tag. The XSL style sheet can not only reference HTML tags, but also create new tags and properties, and then display the information in the XML file together. Where XSL: Attribute is a new attribute in the tag, XSL: Element is a new tag. They have a common attribute.</p>
<p>Property: Name: Specifies the name of the property for the newly built attribute.</p>
<p>Example: If we don't have the HTML tag of the graphic file, we want to add such tags in the XSL file, named <img>, with SRC properties.</p>
<p><XSL: Template Match = "Image"></p>
<p><XSL: Element Name = "IMG"></p>
<p><XSL: Attribute Name = "SRC"></p>
<p><XSL: Value-of /></p>
<p></ Xsl: attribute></p>
<p></ Xsl: element></p>
<p>XSL is the best way to display XML files because it meets the standard of XML files, and all XML has the advantages, XSL has, and there is also a more CSS than CSS, so we want to put XML file content When it is displayed, it is best to give priority to the use of XSL ?? for future expansion.</p>
<p>Example 2 2.XML Source File</p>
<p><? XML Version = "1.0" encoding = "gb2312"?> <? Xml-stylesheet href = "first.xsl" type = "text / xsl"?></p>
<p><Data></p>
<p><Book></p>
<p><Title> XML Getting Started </ Title></p>
<p><Author> Zhang 3 </ author></p>
<p><Price unit = "RMB"> 20.00 </ price></p>
<p></ Book></p>
<p><Book></p>
<p><Title> XML syntax </ title></p>
<p><! - will be published-></p>
<p><Author> Li 4 </ author></p>
<p><Price unit = "RMB"> 18.00 </ price></p>
<p><Memo> This book is a famous computer science expert, which is very authoritative. In the book, we will insert a lot of exciting examples, so you can readability. </ Memo></p>
<p></ Book></p>
<p></ Data></p>
<p>First.xsl source file</p>
<p><? XML Version = "1.0" encoding = "GB2312"?></p>
<p><XSL: Stylesheet XMLns: XSL = "http://www.w3.org/tr/wd-xsl"></p>
<p><XSL: Template Match = "/"></p>
<p><Html> <body></p>
<p><Center> <H2> Book information </ h2> </ center></p>
<p><Div align = "center"> <center></p>
<p><Table border = "1" cellpadding = "5" bgcolor = "# 4eb7de"></p>
<p><Tr></p>
<p><TH> Title </ TH> <TH> Author </ TH> <TH> Price (RMB) </ TH></p>
<p><TH> Remarks </ TH></p>
<p></ TR></p>
<p><Xsl: for-each select = "data / book" ORDER-by = "title"></p>
<p><Tr></p>
<p><TD> <XSL: Value-of Select = "Title" /> </ td></p>
<p><TD> <XSL: Value-of Select = "Author" /> </ td></p>
<p><TD> <XSL: Value-of Select = "Price" /> </ td></p>
<p><TD width = "150"> <xsl: value-of select = "memo" /> </ td></p>
<p></ TR></p>
<p></ Xsl: for-energy></p>
<p></ TABLE></p>
<p></ Center> </ div></p>
<p></ Body> </ html></p>
<p></ Xsl: template></p>
<p></ Xsl: stylesheet></p>
<p>Table 1 Common text-related property attribute name function description setting</p>
<p>Color text color color of English name or hex RGB Color: Red Color: # f00f01</p>
<p>FONT-FAMILY text word type Dictionary name font-family: Song</p>
<p>Font-Size Word Size PT, In, CM, PX, XX-Small, X-Small, Small, Medium, Large, X-Large, XX-Large Font-Size: X-Large Font-size: 1cm</p>
<p>Font-Weight Words Extra-Light, Light, Demi-Light, Medium, Demi-Bold, Bold, Extra-Bold Font-Weight: Light</p>
<p>Font-Style Font Style Normal, Italic Font-Style: Italic</p>
<p>TEXT-Align text location center, right, left text-align: Left</p>
<p>TEXT-INDENT Word Congections PT (Point) In (inch) cm (cm) PX (Pixel) Text-Indenter Size Capitalize, Uppercase, LowerCase Text-Transform: Uppercase</p>
<p>Text-Decoration Wire Setting Underline, Ouerline, Line-Through TEXT-DECORA: Underline</p>
<p>Table 2 Common Layout Properties Attribute Name Function Description Settings and Units</p>
<p>Display Components Display Status None, Block, Inline</p>
<p>Width components Width PT, IN, CM, PX</p>
<p>Background-Color Component Background Color Color English name or hex</p>
<p>Padding components and four sides of PT, In, CM, PX</p>
<p>Padding-left components with left distance PT, In, CM, PX</p>
<p>Padding-right components and right distance PT, in, cm, px</p>
<p>Padding-TOP components with tops of PT, In, CM, PX</p>
<p>Padding-bottom components and below PT, IN, CM, PX</p>
<p>Border square border</p>
<p>Brader-Left square left box</p>
<p>Brader-Right Square left box</p>
<p>Border-top square top box</p>
<p>Border-bottom square down block</p>
<p>Border-Color Square Border Color Color English Name or Hexagon RGB</p>
<p>Border-Wide Square Border Width Thin, Medium, Thick, PT, IN, CM, PX</p>
<p>Border-style square border style None, Dotted, Solid, Double</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-129403.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="129403" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.057</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'uQ6dmVM45AyM9WkiAYXoiGMv5iOJvQEvN0nA121JDy2pUBWUnDjR_2BiiukpHTjH6OcvZI1w370trlXJeDZ3KgsQ_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
