html - 如何在 XML 上同时使用 CSS 和 XSLT？-6ren

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

转载作者：太空宇宙更新时间：2023-11-04 06:11:12

24

4

我正在尝试将我的 CSS 样式表与我的 XML 一起使用，它也附加了一个 XSLT 样式表，这导致它在 CSS 附加到一个巨大的 block 中时完全超出其格式。

链接 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;
}

最佳答案

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

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

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

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

删除 <?xml-stylesheet type="text/css" href="ofd.css"?>来自 XML
移除流氓<xsl:stylesheet type="text/css" href="ofd.css">来自 XSLT(因为否则您的 XSLT 将不会格式正确)。
添加行 <link rel="stylesheet" type="text/css" href="ofd.css" />到 <head> HTML 部分

例如:

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

关于html - 如何在 XML 上同时使用 CSS 和 XSLT？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56395127/

24

4

0

文章推荐： html - 使用 Chrome 放大时文本模糊

文章推荐： c - 关于 (#include)ing 非标准库的几个疑问

文章推荐： c - 使用信号量运行程序

xml - 如何在没有源 xml 文件根节点的情况下将一个 xml 文件包含在另一个 xml 中？
正如标题中所问，我有两个如下结构的 XML 文件 A.xml //here I want to include B.xml
c# - 如何将等 xml 标签格式更改为
我有一个 xml 文件。根据我的要求，我需要更新空标签，例如我需要更改 to .是否可以像那样更改标签.. 谢谢... 最佳答案 var xmlString=" "; var properStri
xml - Golang : get inner xml from xml with xml.解码
我有这样简单的 XML: Song Playing 09:41:18 Frederic Delius Violin Son
xml - XML 阅读器是否应该忽略 XML 文件中的连续空格？
在我的工作中，我们有自己的 XML 类来构建 DOM，但我不确定应该如何处理连续的空格？例如 Hello World 当它被读入 DOM 时，文本节点应该包含 Hello 和 World
xml - 比较来自不同 XML 文件的元素值并附加到第一个 XML
我有以下 2 个 xml 文件，我必须通过比较 wd:Task_Name_ID 和 TaskID 的 XML 文件 2。例如，Main XML File-1 wd:Task_Name_ID 具有以下
xml - 使 XML 构建器从字符串中插入 XML
我在 Rails 应用程序中有一个 XML View ，需要从另一个文件插入 XML 以进行测试。我想说“构建器，只需盲目地填充这个字符串，因为它已经是 xml”，但我在文档中看不到这样做的任何内容
xml - XML 数据和 XML 元数据之间有什么区别？
我正在重建一些 XML 提要，因此我正在研究何时使用元素以及何时使用带有 XML 的属性。一些网站说“数据在元素中，元数据在属性中。” 那么，两者有什么区别呢？让我们以 W3Schools 为例:
xml - 文档中的多个 XML 声明是否为格式正确的 XML？
在同一个文档中有两个 XML 声明是否是格式正确的 XML？ hello 我相信不是，但是我找不到支持我的消息来源。来自 Extensible Markup Language
xml - 在 XML 中包装任意 XML
我需要在包装器 XML 文档中嵌入任意(语法上有效的)XML 文档。嵌入式文档被视为纯文本，在解析包装文档时不需要可解析。我知道“CDATA trick”，但如果内部 XML 文档本身包含 CDAT
xml - XML 解析器和 XML 处理器是否相同？
XML 解析器和 XML 处理器是两个不同的东西吗？他们是两个不同的工作吗？最佳答案 XML 解析器和 XML 处理器是一样的。它不适用于其他语言。 XML 是通用数据标记语言。解析 XML 文件已
xml - 在保留格式的同时从文件读取 XML 和从文件读取 XML
我使用这个 perl 代码从一个文件中读取 XML，然后写入另一个文件(我的完整脚本有添加属性的代码): #!usr/bin/perl -w use strict; use XML::DOM; use
xml - 使用 PowerShell 将 system.xml.xml 元素转换为 system.xml.xml 文档
我正在编写一个我了解有限的历史脚本。对象 A 的类型为 system.xml.xmlelement，我需要将其转换为类型 system.xml.xmldocument 以与对象 B 进行比较(类型
xml - 如何将子节点结构从一个 XML 文件复制到另一个 XML 文件(合并两个 XML 文件)？
我有以下两个 XML 文件: 文件1 101 102 103 501 502 503
xml - 如何将子节点结构从一个 XML 文件复制到另一个 XML 文件(合并两个 XML 文件)？
我有以下两个 XML 文件: 文件1 101 102 103 501 502 503
java - 转换性能 XML>XSL>XML 与 XML>JAXB>XML
我有一个案例，其中一个 xml 作为输入，另一个 xml 作为输出:我可以选择使用 XSL 和通过 JAXB 进行 Unmarshalling 编码。性能方面，有什么真正的区别吗？最佳答案首先，程
java - 从 XML 元素获取 XML 时的标签顺序(XML 包含 XML)？
我有包含 XML 的 XML，我想使用 JAXB 解析它 qwqweqwezxcasdasd eee 解析器 public static NotificationRequest parse(Strin
xml - 无法使用 XML 架构和 Perl (XML::LibXML) 验证 XML
xml: mario de2f15d014d40b93578d255e6221fd60 Mario F 23 maria maria
java.net.MalformedURLException : no protocol: [c:\XML\file. xml，c :\XML\file2. xml，c :\XML\file3. xml]
尝试更新 xml 文件数组时出现以下错误。代码片段: File dir = new File("c:\\XML"); File[] files = dir.listFiles(new Filenam
xml - 如何使用 ConvertTo-Xml 和 Select-Xml 加载或读取 XML 文件？
我怎样才能完成这样的事情: PS /home/nicholas/powershell> PS /home/nicholas/powershell> $date=(Get-Date | ConvertT
xml - 删除 XML 节点以将 XML 日志文件的大小减小到给定大小
我在从 xml 文件中删除节点时遇到一些困难。我发现很多其他人通过各种方式在 powershell 中执行此操作的示例，下面的代码似乎与我见过的许多其他示例相同，但我没有得到所需的行为。我的目标是将

首页

博学

6Ren·AI

商城

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