Using XSLT as a stylesheet for HTML_html/css_WEB-ITnose-HTML Tutorial-php.cn

Table of Contents

Introduction

Commonly used abbreviations

< >

Directives

Break the boundaries of the source document

< p >The following text is included:</ p >

< h1 id = "y1" >I'm the < em >included</ em > h1</ h1 >

Home

Web Front-end

HTML Tutorial

Using XSLT as a stylesheet for HTML_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:07 PM

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:stylesheet

xmlns = " http://www.w3.org/1999/xhtml"

xmlns:h = " http:// www.w3.org/1999/xhtml"

xmlns:a = " http://sourceforge.net/projects/arbalo/"

xmlns:s = " http://www .w3.org/1999/XSL/Transform"

exclude-result-prefixes = "a h"

version = "1.0"

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,'#')" />

< s:choose >

< s:when test = "preceding::h:a[@name=$name]" >

< s:text >^

< s:when test = "following::h:a[@name=$name]" >

< s:text >v

< s:apply-templates />

< 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" <🎜 > <🎜> > "name" select = "substring-after(@href,'#')" /> :h:a[@name=$name]" > < ; <🎜> <🎜> < 🎜> <🎜 > >

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.

Listing 5. Style sheet (in samples/footnote.xsl)

< s:stylesheet

xmlns = " http://www.w3.org/1999/xhtml"

xmlns:a = " http://sourceforge .net/projects/arbalo/"

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:body" >

🎜>

descendant::a:references)" >

> :template match = "a:ref" >

< s:variable

name = "number"

select = "count(preceding::a:ref ) 1" />

< a name = "ref-{$number}" >

< 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)

< html

xmlns = " http://www.w3.org/1999/xhtml"

xmlns:a = " http://sourceforge.net/projects/arbalo/"

< head />

< body >

< p >

This example looks a little scientific

< a:ref >

From Latin

< em >scientia

and academic

< a:ref >From Greek akademia.

< p >

Do you know why?

< a:ref >

It uses

< em >footnotes.

< p >Reduce size of window to verify links are generated.

🎜 > From Latin and academic a:ref >From Greek akademia. 🎜> >

The target document contains a list of footnotes at the bottom, as shown in Listing 7.

Listing 7. Target document (in samples/footnote.html)

< 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

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.

　Listing 8. Style sheet (in samples/include.xsl)

< s:stylesheet

xmlns = " http://www.w3.org/1999/xhtml"

xmlns:a = " http://sourceforge.net/projects/arbalo/"

xmlns:s = " http://www.w3.org/1999/XSL/Transform"

version = "1.0"

< s:import href = "common.xsl" />

< s:template match = "a:include" >

< s:choose >

< s:when test = "0!=string-length(@src)" >

< s:apply-templates

select = "document(@src)//*[@id=current()/@refid]" />

< s:when test = "not(@src) and //a:default[1]/@src" >

< s:apply-templates

select = "document(//a:default[1]/@src)//*[@id=current()/@refid]" />

< s:when test = "0=string-length(@src) or not(//a:default[1]/@src)" >

< s:apply-templates

select = "//*[@id=current()/@refid]" />

< s:stylesheet <🎜> <🎜> xmlns = " http://www.w3.org/1999/xhtml" <🎜> <🎜> xmlns:a = " http:// sourceforge.net/projects/arbalo/" <🎜> <🎜> xmlns:s = " http://www.w3.org/1999/XSL/Transform" <🎜> <🎜> version = "1.0" <🎜> <🎜> ; <🎜> <🎜> select = " document(@src)//*[@id=current()/@refid]" /> "not(@src) and //a:default[1]/@src" > [1]/@src)//*[@id=current()/@refid]" /> test = "0=string-length(@src) or not(//a:default[1]/@src)" > = "//*[@id=current()/@refid]" /> >

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)

< html

xmlns = " http://www.w3.org/1999/xhtml"

xmlns:a = " http://sourceforge.net/projects/arbalo/" >

< head >

< a:default src = "includedY.xml" />

< body >

< p >The following text is included:

< a:include refid = "x" src = "includedX.xml" />

< a:include refid = "y1" />

< p id = "i" >double

< a:include refid = "y2" />

< a:include refid = "i" src = "" />

xmlns:a = " http://sourceforge.net/projects/arbalo/" > < head >

; p >The following text is included:

< h2 id = "y2" >I'm the < em >included h2

< h1 id = "y1" >I'm the < em >included h1

< a:include refid = "x" src = "includedX.xml" /> < a:include refid = "y1" /> > 🎜>

　Listing 10. Part of the source document (in samples/includeY.xml)

< h2 id = "y2" >I'm the < em >included< / em > h2 < h1 id = "y1" >I'm the < em >included h1

　　清单 11. 目标文档（在 samples/include.html 中）

< body >

< p >The following text is included:

< p id = "x" >I'm the < em >included paragraph.

< h1 id = "y1" >I'm the < em >included h1

< p id = "i" >double

< h2 id = "y2" >I'm the < em >included h2

< p id = "i" >double

< body >

< p >The following text is included:

< p id = "x" >I'm the < em >included paragraph.

< h1 id = "y1" >I'm the < em >included h1

< p id = "i" >double

< h2 id = "y2" >I'm the < em >included h2

< p id = "i" >double

主文档和导航

　　如果您有一个包含多个页面的演示，有一个主文档包含页面标题及其链接。您可以生成完整的导航，从每个页面到任何其他页面，以及到前一个和后一个页面。这些细节不属于本文的介绍范围，但参考资料中提供了使用主文档的 HTML 演示的链接。可将 .xml 替换为 .html 来获得编译后的版本。让浏览器向您显示 .xml 的整洁源代码。您会对它生成的源代码量感到惊奇。

解释与编译的对比

　　解释意味着页面为 XML 格式（其文件扩展名为 .xml，其内容类型为文本/xml 或应用程序/xml），并且处理指令所引用的 XSLT 样式表可在浏览器中执行。

　　编译意味着浏览器看到的是 HTML（其文件扩展名为 .html，内容类型为文本/html），它是在请求页面之前从您的开发环境中或服务器上的 XML 转换而来的。Xalan 和 Saxon 都是著名的 XSLT 处理器。　　解释是未来的发展方向。所有现代浏览器都支持 XSLT，并且它具有一些优点：当测试时，您会立即获得结果。只需在您测试的每个浏览器中按下 F5，即可反映源页面、CSS 和 XSLT 样式表的更改。要传递给客户端的信息量减少了。客户端看到的是一个干净、整洁的网页，因为还未生成扩充内容。　　但也要注意一些缺点：有一些旧浏览器可能不支持 XSLT。如果向一个受控的环境（内部网）发布页面，就不会出现问题。一些现代浏览器禁止 XSLT 样式表引用另一个目录中的另一个样式表。将 XSLT 域其他功能相结合（比如 SVG 或 iframe）可能在一些浏览器中导致问题。因为大部分浏览器都不支持 XSLT 2.0 或即将推出的 3.0，所以您无法使用新功能。没有 XPath 2.0 if () then … else，也没有用户编写的 XPath 功能。　　无论进行编译还是解释，页面的其他转换 (CSS、JavaScript) 都会在 XSLT 转换之后执行。结束语　　在本文中，您学习了如何使用 XSLT 样式表来扩充 XHTML 文档。您可以使用本文中的示例作为起点，构建您自己的 XSLT 样式表。下载　　文章和XML示例关于作者　　Jürgen M. Regel 是位于德国汉诺威的 TUI InfoTec GmbH 的 Architecture Management & Software Engineering 部门的一名高级软件工程师。他主要研究旅游行业中的企业应用程序集成 (EAI)。

Statement of this Website

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Repo: How To Revive Teammates

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7337

Java Tutorial

1627

CakePHP Tutorial

1352

Laravel Tutorial

1265

PHP Tutorial

1209

Related knowledge

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What are the best practices for cross-browser compatibility in HTML5? Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

How to efficiently add stroke effects to PNG images on web pages? Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

How do I use the HTML5 <time> element to represent dates and times semantically? Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

See all articles