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

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

html css

是否可以使用css包含html片段？,html,css,Html,Css,我正在处理一组（非常、非常大）的静态网页，基本上由三部分组成：顶部部分在每页上相同（徽标等），中间部分包含实际内容，底部部分在每页上也相同（想想页脚）为了保持单个html页面的代码精简，我真的希望使用css包含页眉/页脚部分（尽管我不确定这是否可行）。也就是说，我想有精益html文件，如 <html> <head> <link href="main.css" rel="stylesheet" type="text/css" /> </

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

为了保持单个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伪元素，但失败了，因为content属性的值一直是按字面理解的，即

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

#头：{content:；}之后

文本中的结果

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

而不是在文本XXX上的链接中

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

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

CSS代表级联样式表。CSS设计用于样式，而不是内容

有两个原因可以说明为什么使用CSS可以“更好”：

更清晰的HTML标记
对某个CSS类多次使用同一内容

出于这两个原因，您应该使用jQuery

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

$（'#header'）.html（''）；

这是否可以只使用html和css

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

HTML文档应该包含语义上有意义的标记。通过创建一个空的HTML文档并仅应用图形样式，您正在生成极其无用的内容

如果您希望生成静态HTML页面而不在每个页面上复制大量标记，请使用静态站点生成器，如or或look INDER。

CSS不是为此而设计的，而是PHP、ASP.net等脚本语言。我相信你有你不使用它们的理由，但是你在想你可以使用CSS来实现这一点并取得圆满成功

另一种“黑客”方法是使用Javascript并只输出Javascript可重用html。但是我也不知道你对JS使用的立场。

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

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

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

您还可以使用jQuery

.load（）

属性将另一个文件加载到某个块级元素中。然而，我觉得使用javascript包含材料会更麻烦

当然，如果你的html片段很小，你可以使用jQuery

.html（“html在这里”
”）

属性。

理想情况下，脚本语言正是你所需要的

但是，因为这不是一个选项，所以可以使用frames/iframe

让每个页面上的页眉/页脚都是一个框架，其源代码是

header.html

和

footer.html

。这远非理想，但在您当前的场景中，这可能是您的最佳选择。至少，如果您的页眉或页脚有小的更改，您不需要在40个不同的网页中进行更改。

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

\2018年-左单智能报价
\2019年-右单智能报价

在css中显示链接，以便按预期显示。

还有更多的问题，所以我建议您也阅读一些可能会回答您一些问题的内容。

“出于几个原因，我不想使用任何脚本语言”-这些原因都是您不想学习javascript还是有实际原因？您是否考虑过使用PHP之类的工具“保持单个html页面的代码精简”？不要害怕扩展到未知的领域，最终你必须这样做。谢谢，但我确实非常了解JavaScript和PHP（至少比CSS好），因为一个实际的原因就是不使用JS。顺便说一句，我是0.4%到2.4%中的一员。至于不使用服务器端scipts，这是我必须遵守的限制。不，你不应该。使用jQuery为站点中的每一个页面收集重复的页面片段是一个糟糕的想法。你绝对不应该这样做。您的web服务器需要为您应用样式的完整、语义上有意义的文档提供服务。提供一个空文档和一堆JavaScript与提供一个空文档和一堆CSS一样糟糕。@meagar，你说得对。缓存部分是因为我认为这就是问题的本质，我现在删除了它。然而，使用CSS类来操作HTML是非常常见的，比如jQueryUI和jQueryMobile这样的库就是这样做的。jQueryUI和jQueryMobile这样的库需要一个语义标记的文档来操作。