・xslで外部スタイルシート(.cssファイル)にリンクし適用できる。
・スタイル設定が重複した場合、以下の順に優先される。
タグ内のstyle属性 > xsl内の<style>タグ
> 外部スタイルシート
[サンプルXML文書を表示](下のフレームに)
XMLソース
<?xml version="1.0" encoding="Shift_JIS"?> <?xml-stylesheet type="text/xsl" href="style03.xsl"?> <root> <title>KodayanHomepageのサイト構成</title> <contents> <web> <osaka>大阪日本橋DOS/Vプロムナード</osaka> <css>CSSとDynamicHTML</css> <cgi>PerlでCGI</cgi> <java>Java Applet</java> </web> <other> <link>お気に入りLinks</link> <etc>その他 <info>お知らせ</info> <prof>自己紹介</prof> <hist>ホームページの履歴</hist> </etc> </other> </contents> <end>以上です(01/4/17)</end> </root>
XSLソース
<?xml version="1.0" encoding="Shift_JIS"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <xsl:template match="/"> <html> <head> <title><xsl:value-of select="root/title"/></title> <link rel="stylesheet" type="text/css" href="style03.css" /> <style type="text/css"> H5 {background-color:silver;color:red;border:thin solid green} DIV.prof {margin-left:3cm;color:red} DIV.hist {margin-left:3cm;color:pink} </style> </head> <body> <center><H3><xsl:value-of select="root/title"/></H3></center> <xsl:apply-templates select="root/contents/web"/> <xsl:apply-templates select="root/contents/other"/> </body> </html> </xsl:template> <xsl:template match="web"> <H4>WEBプログラミング</H4> <DIV class="osaka"><xsl:value-of select="osaka"/></DIV> <DIV class="css"><xsl:value-of select="css"/></DIV> <DIV class="cgi"><xsl:value-of select="cgi"/></DIV> <DIV class="java"><xsl:value-of select="java"/></DIV> </xsl:template> <xsl:template match="other"> <H4>その他</H4> <DIV class="link"><xsl:value-of select="link"/></DIV> <DIV class="info"><xsl:value-of select="etc/info"/></DIV> <DIV class="prof"><xsl:value-of select="etc/prof"/></DIV> <DIV class="hist" style="margin-left:4cm;color:red"> <xsl:value-of select="etc/hist"/></DIV> </xsl:template> </xsl:stylesheet>
cssファイル
/*・・・・xsl/style03.xmlに使用する外部CSSファイル(style03.css)・・・*/ H4 {background-color:silver;color:red;border:thin solid green} DIV.osaka {margin-left:2cm;color:navy} DIV.css {margin-left:2cm;color:green} DIV.cgi {margin-left:2cm;color:brown} DIV.java {margin-left:2cm;color:gray} DIV.link {margin-left:2cm;color:black} DIV.info {margin-left:2cm;color:deeppink} DIV.prof {margin-left:2cm;color:magenta} DIV.hist {margin-left:2cm;color:white}
end(01/4/17)