将外部CSS用于XSLTransformation 1.0

时间:2014-12-17 15:22:52

标签: html css xml xslt xslt-1.0

我正在使用Microsoft Word文件中的XSLT 1.0转换XML文件。

这是我的XSLT 1.0:

<xsl:when test="not(following-sibling::VICINITY)">
   <xsl:value-of select="following-sibling::ITA_LIGHT_NAME"/>
   <xsl:text>....................</xsl:text>                                       
   <br/>
</xsl:when>

这给出了这个输出:(我希望虚线到达列的末尾)

enter image description here

我正在查看此链接:http://jsfiddle.net/westy808/g0d8x8c5/1/它包含:

HTML

<ul class="leaders">
    <li><span>Item</span><span>12.234</span></li>
    <li><span>Another Item</span><span>1,000.25</span></li>
</ul>

CSS

ul.leaders li { clear: both; }

ul.leaders li span:first-child {
    float: left;
    padding: 0 .4em 0 0;
    margin: 0;
}
ul.leaders li span + span {
    float: right;
    padding: 0 0 0 .4em;
    margin: 0;
}

ul.leaders li:after {
    content: "";
    display: block;
    overflow: hidden;
    height: 1em;
    border-bottom: 1px dotted;
}

输出

Item.........................12.234
Another Item1..............1,000.25

和这个链接:http://www.w3.org/Style/Examples/007/leaders.en.html,Kevin Brown建议。

现在使用相同的方法,我创建了这个:

LEADER.CSS

ITA_LIGHT_NAME li { clear: both; }

ITA_LIGHT_NAME li span:first-child {
    float: left;
    padding: 0 .4em 0 0;
    margin: 0;
}
ITA_LIGHT_NAME li span + span {
    float: right;
    padding: 0 0 0 .4em;
    margin: 0;
}
ITA_LIGHT_NAME li:after {
    content: "";
    display: block;
    overflow: hidden;
    height: 1em;
    border-bottom: 1px dotted;
}

这是我的XSLT 1.0:

<td>
<xsl:when test="not(following-sibling::VICINITY)">
   <link rel="stylesheet" type="text/css" href="css/leaders.css" />
       <style>
           <ul class="ITA_LIGHT_NAME">
               <li>
                   <span>
                        <xsl:value-of select="following-sibling::ITA_LIGHT_NAME"/>
                   </span>
              </li>
           </ul>
       </style>
</xsl:when>
</td>

但它没有正确运行。

这是我目前的输出:

enter image description here

我希望虚线到达第一列的末尾:

enter image description here

Thiu可以帮助解决问题http://bytes.com/topic/net/answers/85213-reference-external-css-js-xsl-stylesheet

1 个答案:

答案 0 :(得分:1)

这接近解决方案:(必须由CSS专家进行修订)

在您的XSLT文件中插入....

<xsl:template match="/">
    <html>
        <head>
            <style type="css">
                .ITA_LIGHT_NAME { border-bottom: 5px dotted; } 
            </style>
        </head>
        <body>
        ...
        ...
        ...
        ...
        ...
        <xsl:when test="not(following-sibling::VICINITY)">
            <div class="ITA_LIGHT_NAME">
                <xsl:value-of select="following-sibling::ITA_LIGHT_NAME"/>
            </div>
        </xsl:when>
        ...
        ...

现在我的输出如下:

enter image description here

这不是一个完美的结果,但现在我们能够将CSS文件插入到XSLT中,通过研究CSS结构我们可以解决这个问题,以便对我们的表格进行完美的分页。

我记得我们完美的分页如下:

enter image description here

NB:CAPO TORRE DI CAVALLO ...............(这是完美的,直到第一栏结束)

此链接可以进一步通知您:http://itins4.madisoncollege.edu/IT/152121advweb/XMLExamples/unit1/css/cssxslt/cust16.xsl