将xslt连接到外部css

时间:2014-10-16 15:19:23

标签: css xml xslt

我有xml文件,我使用xslt设置..我有一个外部css文件来设置xslt中的表格..我如何将这个外部css文件连接到我的xslt?

这是我的InternetTv.xml代码

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="InternetTvXSL.xsl" ?>

<InternetTelevision xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="InternetTvXSD.xsd">
<subscription subscriber_IP="1.2.3"  Server_IP="10.144.50.55">
    <info>
        <name>
            <first>lama</first>
            <last>tatwany</last>
        </name>
        <id>1234567890</id>
        <dob>1999-12-01</dob>
        <phone>1111111</phone>
    </info>
    <channel name="aaa" id="1" favorite="true">
        <program broadcast_frequency="Daily" broadcast_time="11:50:00" >
            <name>vvv</name>
            <id>aaa</id>
            <description>eeeeee</description>
        </program>
    </channel>
    <channel name="aaa" id="1" favorite="false">
        <program broadcast_frequency="Daily" broadcast_time="11:50:00" >
            <name>vvv</name>
            <id>aaa</id>
            <description>eeeeee</description>
        </program>
        <program broadcast_frequency="Daily" broadcast_time="11:50:00" >
            <name>vvv</name>
            <id>aaa</id>
            <description>eeeeee</description>
        </program>
    </channel>
</subscription>
</InternetTelevision>

和我的InternetTvXSLT.xsl文件

 <?xml version="1.0" encoding="ISO-8859-1"?>
 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

 <xsl:template match="/">
 <html>
 <head>
 <style>

 body {
font-family: Georgia;
 }
 h1 {
color: orange;
 } 
 h2 {
color: gray;
 }
 h5 {
background: #D5ECFD;
 } 
 </style>
 </head>
<body>

<h1>Subscriber Profile</h1>
<h4>This profile provides all the information you need to know about <xsl:value-of select="InternetTelevision/subscription/info/name/last"/>&#160;<xsl:value-of select="InternetTelevision/subscription/info/name/first"/></h4>
<h2>General Information</h2>
<h5>Server IP: <xsl:value-of select="InternetTelevision/subscription/@Server_IP"/> &#160; User IP: <xsl:value-of select="InternetTelevision/subscription/@subscriber_IP"/></h5> 
<h5>Name: <xsl:value-of select="InternetTelevision/subscription/info/name/last"/>&#160;<xsl:value-of select="InternetTelevision/subscription/info/name/first"/> &#160; ID: <xsl:value-of select="InternetTelevision/subscription/info/id"/> &#160; Date of Birth: <xsl:value-of select="InternetTelevision/subscription/info/dob"/> &#160; Phone: <xsl:value-of select="InternetTelevision/subscription/info/phone"/></h5>
<h2>Channels Subscriptions:</h2>
<xsl:for-each select="InternetTelevision/subscription/channel">
<xsl:choose>
     <xsl:when test="@favorite = 'true'">
<h3>Channel Name: <font color="green"><xsl:value-of select="@name"/></font></h3>
    </xsl:when>
     <xsl:otherwise>
        <h3>Channel Name: <xsl:value-of select="@name"/></h3>
     </xsl:otherwise>
   </xsl:choose>
<h4>Channel ID: <xsl:value-of select="@id"/></h4>

<h3>Programs:</h3>
    <xsl:for-each select="program">
 <table>
  <tr>
    <th>Program Name:</th>
    <td><xsl:value-of select="name"/></td>
  </tr>
  <tr>
    <th>Broadcast Time:</th>
    <td><xsl:value-of select="@broadcast_frequency"/> at <xsl:value-of select="@broadcast_time"/></td>
  </tr>
  <tr>
    <th>Description:</th>
    <td><xsl:value-of select="description"/></td>
  </tr>
 </table>
</xsl:for-each>
</xsl:for-each>
</body>
</html>

 </xsl:template>
 </xsl:stylesheet>

这里是table_style.css

  #gradient-style{
  font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
  font-size:13px;
  width:90%;
  text-align:left;
  border-collapse:collapse;
  margin:10px;}

  #gradient-style th{
  font-size:18px;
  font-weight:normal;
  background:#b9c9fe url("http://media.smashingmagazine.com/images/express-css-table-                  design/table-images/gradhead.png") repeat-x;
  border-top:2px solid #d3ddff;
  border-bottom:1px solid #fff;
  color:#039;
  padding:2px;}

  #gradient-style td{
  border-bottom:1px solid #fff;
  color:#669;
  border-top:1px solid #fff;
  background:#e8edff url("http://media.smashingmagazine.com/images/express-css-table-design/table-images/gradback.png") repeat-x;
  padding:2px;}

  #gradient-style tfoot tr td{
  background:#e8edff;
  font-size:12px;
  color:#99c;}

  #gradient-style tbody tr:hover td{
  background:#d0dafd url("http://media.smashingmagazine.com/images/express-css-table-design/table-images/gradhover.png") repeat-x;
  color:#339;}

我在哪里连接它?在xml或xslt?我尝试了不同的代码但没有工作:(

有人可以帮忙吗?

2 个答案:

答案 0 :(得分:1)

使用link中的head元素,就像手动编写HTML一样:

<link rel="stylesheet" type="text/css" href="table_style.css" />

如果您需要将其插入HTML输出(并且您正在使用XSLT 2.0):

<style>
  <xsl:value-of select="unparsed-text('table_style.css')"
                disable-output-escaping="yes"/>
</style>

请参阅http://www.w3.org/TR/xslt20/#unparsed-text

答案 1 :(得分:0)

如果您想直接在浏览器中查看所需的布局(而不是首先在外部将其转换为HTML),您可以使用实体引用将css包含在生成的html中:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE stylesheet [
 <!ENTITY mscGridStylesPrint SYSTEM "c:/temp/table_style.css">
]>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" indent="no"/>

  <xsl:template match="/">
    <style>
       &mscGridStylesPrint;
    </style>
    ...
  </xsl:template>
<xsl:stylesheet>