外部スタイルシート(.css)を使う

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