如何将CSS添加到xsl文件中?

时间:2018-03-16 09:51:48

标签: html css xml xslt

我有以下xml文件:

<GeneralAgenda xmlns="http://schemas.gov.sk/form/Notify.GeneralAgenda/1.1">
  <subject>Lorem Ipsum is simply dum</subject>
  <text>VLorem Ipsum is simply dummy text</text>
</GeneralAgenda>

从此我创建了以下xsl文件:

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

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">


<xsl:template match="GeneralAgenda">
  <html>
   <head>

    </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">

             <xsl:value-of select="subject"/>

           </span>

        </div>

         <div class="clear"> </div>
         <div><label class="labelVis">Text: </label>
           <span class="contentVis wordwrap">

            <xsl:value-of select="text"/>

           </span>
         </div>
         <div class="clear"> </div>
      </div>
   </div>

  </body>

  </html>
</xsl:template>

</xsl:stylesheet>

我从xml生成html文件,这工作正常,但我不知道如何将CSS样式包含到创建的xsl文件中。我需要添加这个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;all: 
    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;
}   

我试图把它放在头标签样式但没有发生任何事情,输出是在没有样式的情况下生成的,我也尝试了链接标记但结果相同。

可能的解决办法是什么?

1 个答案:

答案 0 :(得分:1)

过程1:将你的css放在head元素之间

<head>
<style type="text/css">
   ....
 </style>
</head>

过程2:在本地保存css文件,并在head元素

之间调用它
<head>
  <link href="{CSSName}.css" rel="stylesheet" type="text/css">
</head>