如何混合不同的HTML模板?

时间:2018-03-30 16:24:39

标签: html css

我希望将不同的HTML模板混合在一起。基本上,我有一个我想要使用的原型网站,现在我正在尝试从其他HTML模板中添加不同的HTML代码,以便以这种方式进行自定义。我现在的问题是如何获得其他HTML模板的CSS以适应我当前网站的CSS?

所有这一切的目标是我可以将其他模板中的HTML代码粘贴复制到我当前的网站。

对不起,如果这不够准确,请告诉我,我会尝试更好地解释。

提前谢谢大家!

1 个答案:

答案 0 :(得分:1)

现在每个人都认为CSS是我们编写样式规则的语言。实际上,它不是(或者至少它没有用)。 <style>标记和style属性从HTML的最开始就存在(当CSS不作为概念和术语存在时),这些是DOM节点的style属性的唯一方式改变了 1

CSS实际上意味着层叠样式表。这些工作表是.css扩展名的文件。我们现在将样式放入单独的文件中,以便能够在任何模板中加载(或不加载)它们。所以他们不属于模板。

这并不意味着您仍然无法使用<style>标记或style属性向标记添加样式,但这被认为是不好的做法,您应该将这些规则移到{{1} } file,原因有两个:

a)能够将它们加载到另一个模板中 b)能够轻松更改加载它们的顺序,因为样式表的阅读顺序在CSS中非常重要。

要将样式表加载到HTML模板中,您必须使用.css标记,通常位于<link>内:

<head>

大多数情况下,如果不是所有浏览器都会阅读并应用它,即使它已包含在<link rel="stylesheet" type="text/css" href="link/to/stylesheet.css"> 中,但您希望避免它,因为它可能会创建FOUC

加载样式表的另一种方法是在另一个样式表中使用@import CSS规则:

<body>

注意@import url("path/to/another/stylesheet.css") screen and (min-width:768px); 规则必须在所有其他类型的规则之前,@import除外。即使使用@charset规则没有技术上的惩罚,放置限制以及额外的复杂性通常会将它们放在Web开发中的“不要”列表中。

1 为了在技术上正确,JavaScript也可用于直接更改DOM节点的@import属性,就像现在一样。但当时JS被视为某种黑魔法hacky“某事”,每个人都认为在浏览器中启用它类似于召唤劫匪并让他们知道你已经离开城镇几周并给他们具体的细节你把贵重物品放在家里 - 没有人用它,没有人信任它。