如何在XSL文件中引入CSS？XML转HTML样式失效解决方案

首先，我注意到你的XML文档使用了命名空间，但你的XSL没有处理这个命名空间——这很可能是样式不生效（或HTML结构不符合预期）的核心原因，结合CSS的正确引入方式，我们一步步来解决：

1. 先处理XML的命名空间问题 #

你的XML根元素<GeneralAgenda>属于http://schemas.gov.sk/form/Notify.GeneralAgenda/1.1命名空间，但你的XSL没有声明并使用这个命名空间，导致xsl:template match="GeneralAgenda"无法匹配到XML中的对应元素（XSLT 1.0默认不会匹配带命名空间的元素，除非显式声明前缀）。

修改你的XSL，在<xsl:stylesheet>标签中添加命名空间声明，并在所有元素匹配/选择时使用前缀：

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
<!-- 添加XML的命名空间，用ga作为前缀 -->
xmlns:ga="http://schemas.gov.sk/form/Notify.GeneralAgenda/1.1">

<!-- 匹配带命名空间的GeneralAgenda元素 -->
<xsl:template match="ga:GeneralAgenda">
  <html>
   <head>
     <!-- 这里添加内嵌CSS，后面会讲外部CSS的引入方式 -->
     <style type="text/css">
       body { 
           font-family: 'Open Sans', 'Segoe UI', 'Trebuchet MS', 'Geneva CE', lucida, sans-serif;
           background : #ffffff !important ;
       }
       .ui-tabs {
           padding: .2em;
           position: relative;
           zoom: 1;
       }                               
       .clear { clear: both; height: 0;}
       .layoutMain {
           margin: 0px auto;
           padding: 5px 5px 5px 5px;   
       }               
       .layoutRow { margin-bottom: 5px; }              
       .caption { /*width: 100%; border-bottom: solid 1px black;*/ }
       .nocaption > .caption { border: 0px !important; }
       .nocaption > .caption span {
           background: none !important;
           display: none;
       } 
       .caption .title { padding-left: 5px; }
       .headercorrection { 
           margin: 0px;
           font-size : 1em;
           font-weight: bold;
       }               
       .labelVis {
           float: left;
           font-weight: bold;
           font-family: 'Open Sans', 'Segoe UI', 'Trebuchet MS', 'Geneva CE', lucida, sans-serif;
           line-height: 25px;
           margin: 0px 18px 0px 0px;
           padding-left: 3px;
           width: 190px;
           word-wrap: break-word;
           font-size: 0.8em;
       }
       .contentVis {            
           float: left;    
           line-height: 25px;
           margin: 0px;
           padding: 0px;
           vertical-align: top;
           font-size: 0.75em;          
       }
       .wordwrap { 
           white-space: pre-wrap;      
           white-space: -moz-pre-wrap; 
           white-space: -pre-wrap;     
           white-space: -o-pre-wrap;   
           word-wrap: break-word;      
       }   
       .ui-widget-content {
           background : 50% 50% repeat-x #ffffff;
           border : #d4d4d4 solid 2px;
           color : #4f4e4e;
           border-radius : 3px;
       }
       .ui-widget-header {
           cursor : pointer;
           font-size : 0.8em;
           color : #494949;
           padding-left : 2px;
           border : #eae9e8 solid 1px;
           background-color : #eae9e8;
           margin-bottom: 3px;
           border-radius : 3px;
       }   
     </style>
    </head> 
  <body>

   <div id="main" class="layoutMain">
      <div class="layoutRow ui-tabs ui-widget-content">
         <div class="caption ui-widget-header">
            <div class="headercorrection">Lorem Lorem</div>
         </div>

         <div><label class="labelVis">Bla bla: </label>

           <span class="contentVis wordwrap">
             <!-- 使用前缀选择subject元素 -->
             <xsl:value-of select="ga:subject"/>
           </span>

        </div>

         <div class="clear"> </div>
         <div><label class="labelVis">Text: </label>
           <span class="contentVis wordwrap">
            <!-- 使用前缀选择text元素 -->
            <xsl:value-of select="ga:text"/>
           </span>
         </div>
         <div class="clear"> </div>
      </div>
   </div>

  </body>

  </html>
</xsl:template>

</xsl:stylesheet>

2. CSS的两种正确引入方式 #

方式一：内嵌CSS（如上例） #

直接在<head>内的<style type="text/css">标签中写入所有CSS规则，这种方式适合样式较少的场景，生成的HTML会包含完整样式，无需外部文件依赖。

方式二：引入外部CSS文件 #

如果你希望样式分离到单独的.css文件中，确保文件路径正确（比如和生成的HTML在同一目录，或使用绝对路径），然后在<head>中添加：

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

注意替换your-stylesheet.css为你的实际CSS文件名和路径。

为什么之前的尝试没生效？ #

• 最关键的是命名空间未处理：XSL无法匹配到XML中的元素，导致生成的HTML结构可能不完整或不符合预期，样式自然无法生效。
• 其次，可能是CSS引入细节问题（比如<style>标签缺少type="text/css"属性，或外部CSS文件路径错误），但解决命名空间问题是前提。

内容的提问来源于stack exchange，提问作者vikino