Question

我正在开发一个（非常非常大的）静态网页集，它基本上由三部分组成：每个页面上相同的顶部（徽标等），包含实际内容的中间部分，每个页面上的底部也是相同的（想想一个页脚）。

为了保持各个html页面的代码精益，我真的想要使用css包含页眉/页脚部分（虽然我不确定这是否可行）。也就是说，我想拥有像

这样的精简html文件

 <html>
  <head>
    <link href="main.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
   <div id="header" />
   <div id="content">Some content goes here</div>
   <div id="footer" />
  </body>
 </html>

并让一个css文件定义页眉和页脚的内容和布局。 这只能使用html和css吗？（由于多种原因，我不想使用任何脚本语言。）

我尝试使用：before /：after伪元素，但这已经失败，因为内容属性的值总是按字面意思理解，即

#header:after{ content:"<a href=\".\">XXX</a>"; }

结果是文本

<a href=".">XXX</a>

而不是文字XXX的链接。

编辑：到目前为止，感谢您的回答。我完全可以接受这不是使用CSS的预期方式，但有人能够向我解释为什么从技术角度来看这是不可能的吗？

（另外，为了澄清，上面的代码只是一个草图。有更多（语义上有意义的）内容涉及，并且还有几个不同的重复部分，而不仅仅是页眉和页脚。）

Answer 1

这是否可以仅使用html和css？

不，这是不可能的。这根本不是CSS的用途。这将直接违反CSS的意图。

您的HTML文档应包含具有语义意义的标记。通过制作空HTML文档并仅应用图形样式，您将生成令人难以置信的无用内容。

如果您希望生成静态HTML页面而不在每个页面上重复大量标记，请使用静态网站生成器，如jekyll或nanoc或查看server-side includes。

Answer 2

CSS不是为此而设计的，像PHP，ASP.net等脚本语言。我确定你有理由不使用它们，但是你会认为你可以使用CSS来获得完美的成功。

另一种'黑客'将是使用Javascript并输出javascript可重用的html。但我不知道你对JS使用的立场。

Answer 3

同意，CSS不是包含内容的最佳方式（如果可能的话），因为它是用于控制设计。

相反，您可以使用服务器端脚本（如PhP）在另一个位置包含另一个文件。例如，在PhP中，

<?php
    include('footer.php');
?>

您还可以使用jQuery .load()属性将另一个文件加载到某个块级元素中。但是，我觉得使用javascript来包含材料会比较麻烦。

当然，如果你的html片段很小，你可以使用jQuery .html('<p>html goes here</p>')属性。

Answer 4

理想情况下，脚本语言就是您所需要的。

但是，由于这不是一个选项，您可以使用frames / iframe。

每个页面上的页眉/页脚都是一个包含header.html和footer.html来源的框架。这远非理想，但在您当前的情况下，它可能是您的最佳选择。至少，如果您的页眉或页脚发生少量更改，则无需在40个不同的网页中进行更改。

Answer 5

在css-tricks.com文章here之后，您应该用以下内容替换引号和右/左HTML箭头（或任何标记的箭头）：

\ 2018 - 左单智能报价
\ 2019 - Right Single Smart Quote

在您的CSS中，您的链接可以按预期显示还有更多内容，所以我建议您阅读this post，这可能会回答您的一些问题。

Answer 6

CSS代表层叠样式表。 CSS旨在用于样式，而不是用于内容。

为什么使用CSS可能会“更好”有两个原因：

清除HTML标记
对某个CSS类使用相同内容

由于这两个原因，你应该使用jQuery。

$('#header').html('<a href=".">XXX</a>');

是否可以使用css包含html片段？

6 个答案: