建议从XSLT文件中分离CSS

时间:2011-10-13 15:30:42

标签: html css xml xslt xls

我想就如何改进我编写XSLT文件的方式征求意见。我还想问一下是否有人知道如何分离专用于使用XSLT文件的CSS文件。任何建议都会对我有很大的帮助。先谢谢你们。

 <?xml version="1.0" encoding="utf-8"?>
 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
     xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
>
     <xsl:output method="html" indent="yes"/>

     <xsl:template match="/">
       <html>
         <head>
           <title>This is my tes application</title>
           <style type="text/css">
             body
             {
             /*Background Properties*/
             background-color:#b0c4de;

             /*Font Properties*/
             font-family:Arial;
             font-size:14px;
             }

             .TitleStyle
             {
             /*Text Properties*/
             text-align:left;

             /*Font Properties*/
             font-size:24;

             /*Layout Properties*/
             margin-bottom: 5px;
             }

             .Wrapper
             {
             padding: 5px;
             border-width:2px;
             border-style:solid;
             }

             .WhiteHeader
             {
             color:white;
             }

             .ProviderStyle
             {
             font-size:18px;
             }

           </style>
         </head>
         <body>
           <xsl:for-each select="JobRequistions/JobRequisition">
             <hr />
             <div class="Wrapper">
               <div class="TitleStyle">
                 <font class="WhiteHeader">
                   <xsl:value-of disable-output-escaping="yes" select="title" />
                 </font>
                 <font class="ProviderStyle">
                   @ <xsl:value-of disable-output-escaping="yes" select="job_board_provider"/>
                 </font>
               </div>
               Number of openings: <xsl:value-of disable-output-escaping="yes" select="number_of_openings"/>
               <hr />
             </div>
             <hr />
           </xsl:for-each >
         </body>
       </html>
     </xsl:template>
 </xsl:stylesheet>

4 个答案:

答案 0 :(得分:2)

你可以像在html中一样使用外部样式表,只需在头部添加一个链接。

答案 1 :(得分:1)

您可以使用未解析的文本(以及未解析的文本可用来检查文件)来提取外部文本。但它只是XSLT 2.0。

答案 2 :(得分:1)

即使在XSLT 1.0 中,这也很自然而且几乎无关紧要。

<style>元素及其所有后代保存在另一个单独的XML文件中是最自然的。这个单独文件的文件路径可以作为参数传递给转换 - 因此可以完全配置:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
     xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
>
     <xsl:output method="html" indent="yes"/>

     <xsl:param name="pStylefilePath" select="'somedefaultUrl'"/>

     <xsl:variable name="vStyle"
          select="document($pStylefilePath)"/>

     <xsl:template match="/">
       <html>
         <head>
           <title>This is my tes application</title>
           <xsl:copy-of select="$vStyle/*"/>
         </head>
         <body>
           <xsl:for-each select="JobRequistions/JobRequisition">
             <hr />
             <div class="Wrapper">
               <div class="TitleStyle">
                 <font class="WhiteHeader">
                   <xsl:value-of disable-output-escaping="yes" select="title" />
                 </font>
                 <font class="ProviderStyle">
                   @ <xsl:value-of disable-output-escaping="yes" select="job_board_provider"/>
                 </font>
               </div>
               Number of openings: <xsl:value-of disable-output-escaping="yes" select="number_of_openings"/>
               <hr />
             </div>
             <hr />
           </xsl:for-each >
         </body>
       </html>
     </xsl:template>
 </xsl:stylesheet>

您甚至可以进一步并将整个XHTML骨架文本(XHTML与特殊元素一起使用,这些元素将由转换匹配和处理,并将被此处理的结果替换)单独的文件 - 所谓的“填空”技术。

在这种情况下,您还将拥有另一个文件路径参数 - XHTML骨架的路径。

这是一个简单,完整的示例(使用虚拟源XML文档,因为您没有显示真实的文档):

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
     xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
>
     <xsl:output method="html" indent="yes"/>

     <xsl:param name="pStylefilePath"
     select="'file:///c:/temp/delete/style.xml'"/>

     <xsl:variable name="vStyle"
          select="document($pStylefilePath)"/>

     <xsl:template match="/">
       <html>
         <head>
           <title>This is my tes application</title>
           <xsl:copy-of select="$vStyle/*"/>
         </head>
         <body>
           <xsl:for-each select="JobRequistions/JobRequisition">
             <hr />
             <div class="Wrapper">
               <div class="TitleStyle">
                 <font class="WhiteHeader">
                   <xsl:value-of disable-output-escaping="yes" select="title" />
                 </font>
                 <font class="ProviderStyle">
                   @ <xsl:value-of disable-output-escaping="yes" select="job_board_provider"/>
                 </font>
               </div>
               Number of openings: <xsl:value-of disable-output-escaping="yes" select="number_of_openings"/>
               <hr />
             </div>
             <hr />
           </xsl:for-each >
         </body>
       </html>
     </xsl:template>
 </xsl:stylesheet>

文件:c:/temp/delete/style.xml只是您的<style>元素

<style type="text/css">
             body
             {
             /*Background Properties*/
             background-color:#b0c4de;

             /*Font Properties*/
             font-family:Arial;
             font-size:14px;
             }

             .TitleStyle
             {
             /*Text Properties*/
             text-align:left;

             /*Font Properties*/
             font-size:24;

             /*Layout Properties*/
             margin-bottom: 5px;
             }

             .Wrapper
             {
             padding: 5px;
             border-width:2px;
             border-style:solid;
             }

             .WhiteHeader
             {
             color:white;
             }

             .ProviderStyle
             {
             font-size:18px;
             }

</style>

当上述转换应用于任何XML文档(未使用)时,如下所示:

<t/>

生成了想要的结果

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <title>This is my tes application</title><style type="text/css">
             body
             {
             /*Background Properties*/
             background-color:#b0c4de;

             /*Font Properties*/
             font-family:Arial;
             font-size:14px;
             }

             .TitleStyle
             {
             /*Text Properties*/
             text-align:left;

             /*Font Properties*/
             font-size:24;

             /*Layout Properties*/
             margin-bottom: 5px;
             }

             .Wrapper
             {
             padding: 5px;
             border-width:2px;
             border-style:solid;
             }

             .WhiteHeader
             {
             color:white;
             }

             .ProviderStyle
             {
             font-size:18px;
             }

</style></head>
   <body></body>
</html>

答案 3 :(得分:0)

您是否尝试添加指向css文件的链接:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output omit-xml-declaration="yes" indent="yes" method="html" encoding="utf-8"
doctype-public="HTML" doctype-system=""/>

 <xsl:template match="/">
   <html>
     <head>
       <link type="text/css" rel="stylesheet" href="mystyle.css" />
       <title>This is my tes application</title>
       ...
     </head>
     <body>

您只需在xsl文件的同一文件夹中创建“mystyle.css”文件即可 我用外部javascript和css文件做了一些xsl文件。它适用于我