Using XSLT as a stylesheet for HTML_html/css_WEB-ITnose
WBOYOriginal
2016-06-24 12:07:431112browse
Introduction
When you hear the word style sheet, you probably think of CSS style sheets. XSLT stylesheets are commonly used for XML transformations, such as mapping data between Web services. Because XSLT is well suited for this purpose, an alias for the top-level element was created, although this is rarely used. The input structure of this XSLT transformation is very different from the output structure. Most importantly, the namespaces are different.
The input structure of an XSLT stylesheet is similar to the output structure, but simpler. Some tags have been augmented, but most are simply copied to the output as-is. The input and output namespaces are the same (HTML). Input documents can also contain stylesheet directives (such as creating footnotes) that belong to another namespace and are not passed to the output.
Commonly used abbreviations
CSS: Cascading Style Sheets XHTML: Extensible Hypertext Markup Language XPath: XML Path Language Enrich XHTML documents with XSLT stylesheets. Examples show how to use directives, how to reference parts of other source documents, and how to use links to navigate within the main document. Additionally, we explore the difference between interpretation and compilation of pages.
Limitations of CSS Stylesheets
XSLT stylesheets do not prevent you from using other technologies, such as JavaScript or CSS. CSS works with fonts, bolding, colors, spacing, and more. It is not suitable for combining information from different locations, such as footnotes, modules or generating a table of contents. This is where XSLT comes in, complementing rather than replacing CSS.
Examples of XSLT usage
You can actually concentrate your XSLT code in a single file. For simplicity, each example in this article is in a separate XSLT file, except for some necessary code. Listing 1 shows the necessary code.
Listing 1. Required code (located in samples/common.xml)
s:template match = "h:head" > < s:copy > 🎜> < link
href = "common.css"
rel = "stylesheet"
type = "text/css" />
s:copy > < s:copy >
< s:copy-of select = "@*" />
< s:apply-templates />
The XHTML namespace is defined twice: the default definition and h:. The default namespace is used for writing output XHTML markup, where namespace prefixes should be avoided. h: used in XPath expressions.
This article uses XSLT version 1.0. Currently, most browsers cannot interpret XSLT 2.0. However, if XSLT is running on a server, it may be a practical option. XSLT 2.0 also provides:
XPATH 2.0 (if…then…else and many built-in functions) Grouping of built-in and user-written XPATH functions
In Listing 1: The head section of the source document has been expanded to include a link to the CSS style sheet. Even though UTF-8 is the default encoding in XML, some browsers require a content type to render it. s:template match="*" is the default verbose copy. In principle, all content is copied to the target document. If this template is omitted, only the marked text content will be copied to the target document. Processing instruction nodes are not copied.
All other examples in this article are standalone files that import common.xsl.
Augmentation
With an augmentation, a feature is added that is not explicitly requested in the source document. An example is the link to the CSS stylesheet in Listing 1. Try another example and add a small arrow (^ v) to each internal link to indicate whether the target precedes or follows it. Listing 2 shows the style sheet.
Listing 2. Style sheet (in samples/linkUpDown.xsl)
< s:stylesheet
xmlns = " http://www.w3.org/1999/xhtml"
xmlns:h = " http://www.w3.org/1999/xhtml"
xmlns:s = " http://www.w3.org/1999/XSL/Transform"
version = "1.0"
< s:import href = "common.xsl" />
< s:template match = "h:a[starts-with(@href,'#')]" >
< s:copy >
< s:copy-of select = "@*" />
< s:variable name = "name" select = "substring-after(@href,'#')" />
First, import the common style sheet in Listing 2. Templates match internal links (starting with '#'). If the link points to an anchor that precedes the link, then expand the link with an up arrow (or a down arrow if the opposite is true).
s:copy-of and s:apply-templates ensure that nothing is dropped along the way.
Listing 3 shows an example document (with internal links) augmented with the stylesheet in Listing 2.
Listing 3. Source document (in samples/linkUpDown.xml)
< html xmlns = " http://www.w3.org/1999/xhtml" >
< head />
< body >
< a name = "a" />
< p >This link goes < a href = "vb" >downward.
< br />
< p >Reduce the size of the window to verify the link really works.
< br />
< a name = "b" />
< p >This link goes < a href = "^a" >upward.
< html xmlns = " http://www.w3. org/1999/xhtml" >
< >
< > < = "b" />
>
… < a href = "#b" >v downwards. …
… < a href = "#a" >^ upwards. …
The target documents look the same, except for the entries in Listing 4. Listing 4. Target document (in samples/linkUpDown.html)
… < a href = "#b" >v downwards. … … < a href = "#a" >^ upwards. …
Directives
You can add some directives to the source document to tell the stylesheet what to do. They belong to another namespace (in this case the prefix a:) and are not copied to the target document.
In Listing 5, the directive tag a:ref anywhere in the source document creates a footnote.
< a class = "footnote" href = " #reference-{$number}" >
;
; > < s:template match = "a:references" name = "references" > a:ref" >
< s:variable name = "number" select = "count(preceding::a:ref) 1" />
< p >
< a name = "reference-{$number}" >
< a class = "footnote" href = "#ref-{$number}" >
< s:value-of select = "concat(' ^',$number)" />
< s:apply-templates />
Using the a:references directive in the source document, a template named references will assign footnotes where the template matches that directive. If such a directive is missing, the first template matching body will assign a footer at the end of body by calling the same template named references. In both cases, the content of the footnote is listed and an upward link, represented by an upward arrow, is generated.
The second template (matching a:ref) creates a link to the footnote using a down arrow. Footnotes are numbered. Its content is ignored here.
The class="footnote" attribute is parsed after the XSLT transformation by a CSS stylesheet linked in the XSLT stylesheet common.xsl.
The source document in Listing 6 uses the a:ref directive to create footnotes.
Listing 6. Source document (in samples/footnote.xml)
< head >< link type = "text/css" rel = "stylesheet" href = "common.css" />
< body >
< p >This example looks a little scientific
< a name = "ref-1" />< a href = "#reference-1" class = "footnote" >v 1
and academic.
< a name = "ref-2" />< a href = "#reference-2" class = "footnote" >v 2lt;/a>
< p >Do you know why?
< a name = "ref-3" />< a href = "#reference-3" class = "footnote" >v 3
< p >Reduce size of window to verify links are generated.
br/>< br />
< hr />
< p >< a name = "reference-1" />< a href = "#ref-1" class = "footnote" > ^1
From Latin
< em >scientia
< p >< a name = "reference-2" />
< a href = "#ref-2" class = "footnote" > ^2From Greek akademia
< p >< a name = "reference-3" />< a href = "#ref-3" class = "footnote" > ^3
It uses
< em >footnotes.
< html <🎜> <🎜> xmlns = " http://www.w3.org/1999/xhtml" <🎜> <🎜> xmlns:h = " http://www. w3.org/1999/xhtml" <🎜> <🎜> xmlns:a = " http://sourceforge.net/projects/arbalo/" > < head >< link type = "text/css" rel = "stylesheet" href = "common.css" /> < body > < p >This example looks a little scientific < a name = "ref-1" />< a href = "#reference-1" class = "footnote" >v 1 href = "#reference-3" class = "footnote" >v 3 verify links are generated. br/>< br /> < a name = "reference-1" />< a href = "#ref-1" class = "footnote" > ^1 From Latin 🎜> ; a name = "reference-3" />< a href = "#ref-3" class = "footnote" > ^3 It uses 🎜>
Break the boundaries of the source document
You can also quote some parts of other source documents. The a:include directive takes an element that might belong to another source document and transforms it, as shown in Listing 8.
An a:include directive in the source document references the id of the source element. The document containing this element can be named in a src attribute. If this attribute is missing, the src attribute of the a:default directive will be used. If there is no src attribute anywhere, the same source document is used. Therefore, refid will refer to id to avoid infinite recursion.
The imported element may have a complex type and be converted after including (apply-templates). Listing 9, Listing 10, and Listing 11 give examples.
Listing 9. Source document (in samples/include.xml)
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
