ホームページ  >  記事  >  ウェブフロントエンド  >  HTML_html/css_WEB-ITnose のスタイルシートとして XSLT を使用する

HTML_html/css_WEB-ITnose のスタイルシートとして XSLT を使用する

WBOY
WBOYオリジナル
2016-06-24 12:07:431112ブラウズ

はじめに

スタイルシートという言葉を聞くと、おそらくCSSスタイルシートを思い浮かべるでしょう。 XSLT スタイルシートは、Web サービス間のデータのマッピングなどの XML 変換によく使用されます。 XSLT はこの目的に適しているため、最上位要素 のエイリアスが作成されましたが、これはほとんど使用されません。この XSLT 変換の入力構造は、出力構造とは大きく異なります。最も重要なのは、名前空間が異なることです。

XSLT スタイルシートの入力構造は出力構造と似ていますが、より単純です。一部のタグは拡張されていますが、ほとんどはそのまま出力にコピーされます。入力名前空間と出力名前空間は同じです (HTML)。入力ドキュメントには、別の名前空間に属し、出力には渡されないスタイルシート ディレクティブ (脚注の作成など) を含めることもできます。

一般的な略語

CSS: カスケード スタイル シート XHTML: 拡張可能なハイパーテキスト マークアップ言語 XPath: XML パス言語例では、ディレクティブの使用方法、他のソース ドキュメントの一部を参照する方法、リンクを使用してメイン ドキュメント内を移動する方法を示します。さらに、ページの解釈と編集の違いについても調査します。

CSS スタイルシートの制限事項

XSLT スタイルシートは、JavaScript や CSS などの他のテクノロジーの使用を妨げるものではありません。 CSS は、フォント、太字、色、間隔などを操作します。脚注、モジュール、目次の生成など、異なる場所からの情報を結合するのには適していません。ここで XSLT が登場し、CSS を置き換えるのではなく補完します。

XSLT の使用例

実際には、XSLT コードを 1 つのファイルに集中させることができます。わかりやすくするために、この記事の各例は、一部の必要なコードを除き、個別の XSLT ファイルにあります。リスト 1 に必要なコードを示します。

リスト 1. 必要なコード (samples/common.xml にあります)

< s:stylesheet

xmlns = " http://www.w 3.org/19 99 /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"

http-equiv = "コンテンツタイプ"

content = "text/html ; charset = utf-8 " />

タイプ=" text /css " /&gt;

< s:コピー >

< s:copy-of select = "@*" />

XHTML 名前空間は、デフォルトの定義と h: の 2 回定義されています。デフォルトの名前空間は、出力 XHTML マークアップの書き込みに使用されます。名前空間プレフィックスは避けてください。 h: XPath 式で使用されます。

この記事ではXSLTバージョン1.0を使用しています。現在、ほとんどのブラウザは XSLT 2.0 を解釈できません。ただし、XSLT がサーバー上で実行されている場合は、これが実用的なオプションになる可能性があります。 XSLT 2.0 では、

セクションも提供され、CSS スタイル シートへのリンクが追加されました。 XML のデフォルトのエンコーディングは UTF-8 ですが、一部のブラウザーではそれを表示するためにコンテンツ タイプが必要です。 s:template match="*" はデフォルトの詳細コピーです。原則として、すべてがターゲットドキュメントにコピーされます。このテンプレートを省略すると、マークされたテキスト コンテンツのみがターゲット ドキュメントにコピーされます。処理命令ノードはコピーされません。

この記事の他のすべての例は、common.xsl をインポートするスタンドアロン ファイルです。

Extension

拡張機能により、ソースドキュメントで明示的に要求されていない機能が追加されます。例としては、リスト 1 の CSS スタイルシートへのリンクがあります。別の例を試して、各内部リンクに小さな矢印 (^ v) を追加して、ターゲットがその前にあるのか後ろにあるのかを示します。リスト 2 にスタイル シートを示します。

リスト 2. スタイルシート (samples/linkUpDown.xsl 内)

< s:stylesheet

xmlns = " http://www.w3.org/19 99/xhtml"

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

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

バージョン = "1.0 「

< )" />

< s:text >/ s:text >

:text >v apply-templates / >

:

まず、リスト 2 の共通スタイルシートをインポートします。テンプレートは内部リンク (「#」で始まる) と一致します。リンクがそのリンクの前にあるアンカーを指している場合は、上矢印 (逆の場合は下矢印) でリンクを展開します。

s:copy-of と s:apply-templates は、途中で何もドロップされないことを保証します。

リスト 3 は、リスト 2 のスタイルシートで拡張されたサンプルドキュメント (内部リンクを含む) を示しています。 gurese

ソースドキュメント(samples/linkupdown.xml) ; & gt; このリンクは & lt;/ a & gt; に移動します。 br/ & gt;

& lt; p >リンクが実際に機能することを確認します。

リスト 4 のエントリを除いて、ターゲットのドキュメントは同じに見えます。 リスト 4. ターゲット ドキュメント (samples/linkUpDown.html 内)

… < a href = "#b" >v lowers.

… < a href = "#a" >^ 上向き。

ディレクティブ

ソースドキュメントにいくつかのディレクティブを追加して、スタイルシートに何を行うかを指示できます。これらは別の名前空間 (この場合は接頭辞 a:) に属しており、ターゲット ドキュメントにはコピーされません。

リスト 5 では、ソース文書内の任意の場所にあるディレクティブ タグ a:ref によって脚注が作成されます。

リスト 5. スタイルシート (samples/footnote.xsl 内)

< s:stylesheet

xmlns = " http://www.w 3.org/199 9/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"

バージョン = "1.0"

" h:body" >

a:references ディレクティブがない場合 -->

< ;

gt;

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

< s:variable

name = "number"

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

name = "ref-{$number}" >

< a class = "footnote" href = "#reference-{ $number}" >

< s:value-of select = "concat('v ',$number)" />

最後にボディの --> "//a:ref" >

;

ソース文書で a:references ディレクティブを使用すると、references という名前のテンプレートが、テンプレートがそのディレクティブと一致する箇所に脚注を割り当てます。このようなディレクティブが欠落している場合、本文に一致する最初のテンプレートは、references という名前の同じテンプレートを呼び出すことによって、本文の最後にフッターを割り当てます。どちらの場合も、脚注の内容がリストされ、上向き矢印で表される上向きリンクが生成されます。

2 番目のテンプレート (a:ref に一致) は、下矢印を使用して脚注へのリンクを作成します。脚注には番号が付けられています。その内容はここでは無視されます。

class="footnote" 属性は、XSLT スタイルシート common.xsl にリンクされている CSS スタイルシートによって XSLT 変換後に解析されます。

リスト 6 のソース文書では、a:ref ディレクティブを使用して脚注を作成しています。リスト 6. ソース文書 (SAMPLES/FOOTNOTE.XML 内)

& & & LT ;? XML スタイルシート Href = "Text/XSL"

< html

xmlns = " http://www.w3.org/1999/xhtml" xmlns:a = " http://sourceforge.net/projects/arbalo/"

<ラテン語から

;

リスト 7 に示すように、ターゲット文書の下部には脚注のリストが含まれています。 gristingリスト7.ターゲットドキュメント(samples/footnote.html)

xmlns:h = " http://www.w3.org/1999/xhtml" xmlns:a = " http://sourceforge.net/projects/arbalo/" > < link type = "text/css" rel = "stylesheet" href = "common.css" />

<科学的な名前 = "ref-2" />>

< p > >scientia

= "脚注" >2 a > ;ギリシャのアカデミアから < p < / a > <脚注 を使用します。

ソースドキュメントの境界を突破する

他のソースドキュメントの一部を引用することもできます。 a:include ディレクティブは、別のソース文書に属する可能性のある要素を取得し、それを変換します (リスト 8 を参照)。

リスト 8. スタイルシート (samples/include.xsl 内)

< s:stylesheet

xmlns = " http://www.w 3.org/19 99/xhtml "

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

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

バージョン = " 1.0 「

when test = "0!=string-length(@src)" > " />

< s: apply-templates

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

select =" //*[@id = current()/@refid] "/&gt; s:スタイルシート >

ソース文書内の a:include ディレクティブは、ソース要素の ID を参照します。この要素を含むドキュメントには、src 属性で名前を付けることができます。この属性が欠落している場合は、a:default ディレクティブの src 属性が使用されます。 src 属性がどこにもない場合は、同じソースドキュメントが使用されます。したがって、refid は無限再帰を避けるために id を参照します。

インポートされた要素は複雑な型を持ち、(apply-templates) をインクルードした後に変換される可能性があります。リスト 9、リスト 10、およびリスト 11 に例を示します。 9. ソースドキュメント (Samples/Include.xml 内)

& & & & LT ;? XML-Stylesheet Href = "Include.xsl" Type = "Text/XSL"

< html

xmlns = " http://www.w3.org/1999/xhtml" xmlns:a = " http://sourceforge.net/projects/arbalo/" > > ;次のテキストが含まれます:< ;/ p >

「 i」 >double

&g

ソースドキュメントの一部 (samples/includeY.xml 内)

< h2 id = "y2" > 私は < em >include h2

< h1 id = "y1" > 私は < em >h1

清单 11. 目标文档(samples/include.html 中)

<本体>

< p >次のテキストが含まれます:

私は 含まれています段落。

私は 含まれています h1

< p id = "i" >double

< h2 id = "y2" > 私は < em > 含まれています h2

< p id = "i" >double

主文档と导航航

If您が複数の面を含む演示、一つの主文が含まれる面とその接続。导航、从每个页面へその他これらのバージョンは、ここでのマニュアルの範囲には含まれていませんが、リファレンス ドキュメントでは、.xml を .html に置き換えてバージョンを取得できます。ブラウザは、.xml の全体的なソースコードを表示します。生成されたソースコードの量は奇妙に感じられます。そのコンテンツ タイプは文本/xml またはアプリケーション プログラム/xml) であり、処理命令で参照される XSLT サンプル形式テーブルはブラウザ内で実行できます。 、コンテンツ タイプは document/html)、これは、要求面の前に、有名な公開環境またはサーバー上の XML 変換が行われます。Xalan と Saxon は両方とも有名な XSLT プロセッサです。すべてのブラウザは XSLT をサポートしており、次のような利点があります。 テスト時に F5 を押すだけですぐに結果が得られ、ソース 面、CSS、および XSLT が反映されます。クライアントに送信される情報量が減少しました。 有料コンテンツも生成されていないため、クライアントから見えるのは、完全なネットワークです。 XSLT はサポートされていません。 制御された環境 (内部ネットワーク) に配信する場合、問題は発生しません。 (SVG や iframe など)一部のブラウザでは問題が発生する可能性があります。ほとんどのブラウザは XSLT 2.0 またはプッシュされた 3.0 をサポートしていないため、新しい機能を使用できません。ユーザ記述の XPath 機能。

テストを行う必要はなく、XSLT 変換の後に実行されます。 XSLT 样式表を使用して XHTML 文を档する方法

文章と XML の例をダウンロードする

作者について

Jürgen M. Regel は、国内の TUI InfoTec GmbH に所属していますアーキテクチャ管理とアーキテクチャ;ソフトウェアエンジニアリング部の有名な高級ソフトウェア工程。他は主に旅行中の計画的アプリケーションプログラム集 (EAI) を研究しています。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。