connecting xslt to external css

i have xml file which i styled using xslt .. i have an external css file to style the table in xslt .. how do i connect this external css file to my xslt ?

this is my InternetTv.xml code

<?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>

and my InternetTvXSLT.xsl file

 <?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>

and here is 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;}

where do i connect it ? in xml or xslt ? i tried different codes but none worked :(

can someone help please ?

回答1:

Use a link element in the head, same as you would if you wrote the HTML by hand:

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

If you need to insert it into the HTML output (and you're using XSLT 2.0):

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

See http://www.w3.org/TR/xslt20/#unparsed-text

回答2:

If you want to view the desired layout within the browser directly (rather than first converting it to HTML externally), you may be able to include the css in your generated html using an entity reference:

<?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>