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

我试图将CSS样式表与附加了XSLT样式表的XML一起使用，这导致一旦CSS附加到一个巨大的块中，它就完全失去了格式

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

XML

希腊人
宙斯的食物
万能道96号
02 2321 5592
送货费是7美元
https://zeusfoods.com.au/
对
对
周一至周六9-5点，周日休息
我们创造的食物，即使是全能者也会
为……而死。

XSLT

美食餐厅


菜肴类型：


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

正文{
背景颜色：浅粉色；
}
h1{
颜色：黑色；
文本阴影：3倍2倍灰色；
字体大小：60px；
文本对齐：居中；
}
氢{
颜色：黑色；
左边距：20px；
文字装饰：下划线；
文本转换：大写；
文本对齐：居中；
字体大小：35px；
文本阴影：2px 1px灰色；
}
h3{
颜色：黑色；
字号：25px
}
h4{
颜色：黑色；
左边距：20px；
右边距：20px；
字体系列：“泰晤士报新罗马”，泰晤士报，衬线；
文本对齐：居中；
}
身体{
背景图片：url（“Graphics/background2.jpg”）；
}
#帕拉1{
文本对齐：居中；
颜色：红色；
}
浅灰色{
背景颜色：浅灰色；
}
.填充{
边框：3倍纯黑；
填充：1px125px 1px125px；
背景颜色：灰色；
}
.页脚{
边框：3倍纯黑；
填充：1px125px 1px125px；
背景颜色：灰色；
}
部门图片{
边框：2倍实心#000000；
宽度：600px；
高度：4oopx
}
部门图片：悬停{
边框：2倍实心#000000；
}
图片组{
宽度：100%；
高度：自动；
}
分区图像描述{
填充：2px；
文本对齐：居中；
背景颜色：浅灰色；
}
.site info：：之后{
内容：“Hisham Echafaki 2017版权所有-保留所有权利”；
}
.副风格1{
字体系列：Arial、Helvetica、无衬线字体；
颜色：黑色；
字号：28px；
字体大小：粗体；
}
.parastyle2{
字体系列：Arial、Helvetica、无衬线字体；
颜色：黑色；
字体大小：20px；
字体大小：粗体；
}
.盒子{
位置：相对位置；
}
yeet_先生时间{
位置：绝对位置；
底部：0；
右：0；
}
p{
左边距：150像素；
右边距：150px；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：20px；
颜色：黑色；
字体大小：粗体；
}
嗯{
左边距：20px；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：40px；
颜色：白色；
字体大小：粗体；
}
pw2{
左边距：20px；
字体系列：Arial、Helvetica、无衬线字体；
字号：18px；
颜色：白色；
字体大小：粗体；
}
pw3{
字体系列：Arial；
颜色：黑色；
字体大小：20px；
字体大小：粗体；
左边距：40px；
右边距：40px；
}
pw4{
字体系列：Arial；
颜色：黑色；
字体大小：20px；
字体大小：粗体；
左边距：150像素；
右边距：0px；
}
pw5{
左边距：880px；
字体系列：Arial、Helvetica、无衬线字体；
字号：18px；
颜色：黑色；
字体大小：粗体；
}
pw6{
字体系列：Arial；
颜色：黑色；
字体大小：20px；
字体大小：粗体；
左边距：275px；
右边距：0px；
}
a:链接{
颜色：蓝色；
背景色：透明；
文字装饰：无；
}
a:参观了{
颜色：浅绿色；
背景色：透明；
文字装饰：无；
}
a:悬停{
颜色：海军蓝；
背景色：透明；
字体大小：23px；
}
a:主动的{
颜色：紫红色；
背景色：透明；
文字装饰：下划线；
}
h5{
颜色：黑色；
左边距：40px；
文字装饰：下划线；
文本转换：大写；
文本对齐：左对齐；
字体大小：35px；
文本阴影：2px 1px灰色；
}
a、 缩放：悬停{
转换：比例（1.5）；
/*（150%缩放-注意：如果缩放太大，它将超出视口）*/
}
边缘1{
左边距：1厘米；
}

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

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

但是，在您的例子中，您并没有尝试使用CSS来设置XML的样式，而是尝试使用XSLT创建HTML

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

从XML中删除

从XSLT中删除rogue

（否则您的XSLT将不会格式良好）

将行

添加到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>

美食餐厅

您的css文件是什么样子的？您是在尝试为XML文档或从XSLT输出的HTML设置样式吗？在生成的HTML中包含CSSHA作为css，但我不确定我怎么感谢您！非常感谢你，伙计，这个错误已经让我紧张了好几个小时了！你把它修好了！

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

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