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