如何在 XML 上同时使用 CSS 和 XSLT？

Posted

技术标签:

【中文标题】如何在 XML 上同时使用 CSS 和 XSLT？【英文标题】：How to utilise both CSS and XSLT together on XML? 【发布时间】：2019-10-17 02:32:36 【问题描述】：

我正在尝试将我的 CSS 样式表与我的 XML 一起使用，该 XML 还附加了一个 XSLT 样式表，这会导致它在 CSS 附加到一个大块时完全脱离其格式。

链接 CSS 样式表并在聊天中玩弄它的样式以使其格式化。

XML 

       <?xml version="1.0" encoding="UTF-8"?> 
       <?xml-stylesheet type="text/xsl" href="cuisinexsl.xsl"?>
       <?xml-stylesheet type="text/css" href="ofd.css"?>


   <cuisines>
       <cuisinetype>
        <cuisine>Greek</cuisine>
            <name>Food from Zeus</name>
            <address>96 Almighty Road</address>
            <phone>02 2321 5592</phone>
            <deliveryfee>Delivery fee is $7</deliveryfee>
            <URL>https://zeusfoods.com.au/</URL>
            <takeaway>Yes</takeaway>
            <dinein>Yes</dinein>
            <openhours>9-5 Mon-Sat,Sunday Closed</openhours>
            <description>Food created by us, that even the almighty would 
            die for.</description>       
      </cuisinetype>
    </cuisines>

XSLT

   <?xml version="1.0" encoding="UTF-8"?>
   <xsl:stylesheet version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
   <xsl:output method="html"/>
   <xsl:stylesheet type="text/css" href="ofd.css">

   <xsl:template match="/">
   <html>
   <body>
   <h1>Cuisine Restaurants</h1>  
   <xsl:apply-templates/>  
   </body>
   </html>
   </xsl:template>

   <xsl:template match="cuisinetype">
   <xsl:for-each select="cuisines/cuisinetype">
       <xsl:sort select="name"/>
   </xsl:for-each>
        <p>
        <xsl:apply-templates select="cuisine"/>
            <xsl:apply-templates select="name"/>  
            <xsl:apply-templates select="address"/>
            <xsl:apply-templates select="phone"/>
            <xsl:apply-templates select="deliveryfee"/>
            <xsl:apply-templates select="URL"/>
            <xsl:apply-templates select="takeaway"/>
            <xsl:apply-templates select="dinein"/>
            <xsl:apply-templates select="openhours"/>
            <xsl:apply-templates select="description"/>
        </p>
     </xsl:template>

    <xsl:template match="cuisine">
    Cuisine type: <span style="">
    <xsl:value-of select="."/></span>
    <br />
  </xsl:template>


 </xsl:stylesheet>   


CSS

这里是 css，这就像覆盖 xslt，

  body 
    background-color: lightpink;


h1 
    color: black;
    text-shadow: 3px 2px grey;
    font-size: 60px;
    text-align: center;


h2 
    color: black;
    margin-left: 20px;
    text-decoration: underline;
    text-transform: uppercase;
    text-align: center;
    font-size: 35px;
    text-shadow: 2px 1px grey;


h3 
    color: black;
    font-size: 25px


h4 
    color: black;
    margin-left: 20px;
    margin-right: 20px;
    font-family: "Times New Roman", Times, serif;
    text-align: center;


body 
    background-image: url("Graphics/background2.jpg");


#para1 
    text-align: center;
    color: red;


.lightgrey 
    background-color: lightgrey;


.padding 
    border: 3px solid black;
    padding: 1px 125px 1px 125px;
    background-color: grey;


.footer 
    border: 3px solid black;
    padding: 1px 125px 1px 125px;
    background-color: grey;


div.picture 
    border: 2px solid #000000;
    width: 600px;
    height: 4oopx


div.picture:hover 
    border: 2px solid #000000;


div.picture img 
    width: 100%;
    height: auto;


div.imagedescription 
    padding: 2px;
    text-align: centre;
    background-color: lightgrey;


.site-info::after 
    content: "Copyright Hisham Echafaki 2017 - All Rights Reserved ";


.parastyle1 
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    font-size: 28px;
    font-weight: bold;


.parastyle2 
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    font-size: 20px;
    font-weight: bold;


.box 
    position: relative;


.yeet_time 
    position: absolute;
    bottom: 0;
    right: 0;


p 
    margin-left: 150px;
    margin-right: 150px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: black;
    font-weight: bold;


pw 
    margin-left: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 40px;
    color: white;
    font-weight: bold;


pw2 
    margin-left: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: white;
    font-weight: bold;


pw3 
    font-family: Arial;
    color: black;
    font-size: 20px;
    font-weight: bold;
    margin-left: 40px;
    margin-right: 40px;


pw4 
    font-family: Arial;
    color: black;
    font-size: 20px;
    font-weight: bold;
    margin-left: 150px;
    margin-right: 0px;


pw5 
    margin-left: 880px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: black;
    font-weight: bold;


pw6 
    font-family: Arial;
    color: black;
    font-size: 20px;
    font-weight: bold;
    margin-left: 275px;
    margin-right: 0px;


a:link 
    color: blue;
    background-color: transparent;
    text-decoration: none;


a:visited 
    color: aqua;
    background-color: transparent;
    text-decoration: none;


a:hover 
    color: navy;
    background-color: transparent;
    font-size: 23px;


a:active 
    color: fuchsia;
    background-color: transparent;
    text-decoration: underline;


h5 
    color: black;
    margin-left: 40px;
    text-decoration: underline;
    text-transform: uppercase;
    text-align: left;
    font-size: 35px;
    text-shadow: 2px 1px grey;


a.zoom:hover 
    transform: scale(1.5);
    /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */


</style> <div class="a"></div> margin1 
    margin-left: 1cm;

【问题讨论】：

你的 css 文件是什么样的？您是在尝试设置 XML 文档的样式，还是从 XSLT 输出的 HTML？ 包含css 在生成的 HTML 中必须是 css，但我不确定 2 【参考方案1】：

在 cmets 中编写这有点太长了，但是像您所做的那样将 XML 链接到 XSLT 样式表和 CSS 样式表是没有意义的

<?xml-stylesheet type="text/xsl" href="cuisinexsl.xsl"?>
<?xml-stylesheet type="text/css" href="ofd.css"?>

但是，在您的情况下，您不是尝试使用 CSS 设置 XML 样式，而是使用 XSLT 创建的 HTML。

在这种情况下，您需要执行以下操作

    从 XML 中删除 &lt;?xml-stylesheet type="text/css" href="ofd.css"?&gt; 从 XSLT 中删除流氓 &lt;xsl:stylesheet type="text/css" href="ofd.css"&gt;（否则您的 XSLT 将不会形成良好的格式）。 将行 &lt;link rel="stylesheet" type="text/css" href="ofd.css" /&gt; 添加到 HTML 的 &lt;head&gt; 部分

例如：

<xsl:template match="/">
  <html>
    <head>
      <link rel="stylesheet" type="text/css" href="ofd.css" />
    </head>
    <body>
      <h1>Cuisine Restaurants</h1>  
      <xsl:apply-templates/>  
    </body>
  </html>
</xsl:template>

【讨论】：

感激不尽！非常感谢你，这个错误让我紧张了好几个小时！你修好了！

以上是关于如何在 XML 上同时使用 CSS 和 XSLT？的主要内容，如果未能解决你的问题，请参考以下文章

CSS 转换不起作用 Firefox for XML 文档使用 XSLT 转换为 HTML

CSS Accordion 使用 XML/XSLT 文件中的数据

如何使用 JavaScript 转换 XML 和 XSLT？

XSLT如何仅对XML文档的字符串节点中的数值进行排序

如何在 xslt 上使用 ID/IDref 连接内容？

如何使用 XSLT 从 XML 中删除名称空间