极客教程CSS 如何分离内容和设计
一个好的网站总是由结构完美的HTML文档搭配精美的设计组成，能够吸引用户的注意力。这样的网站才会增强网站的整体互动性，使其更有吸引力。
当我们在网页上应用样式时，我们采用层叠样式表，或简称CSS。通过使用CSS，我们可以更容易地使网站具有可展示性。它区分了HTML文档的结构和表现形式，后者指的是用户看到和互动的元素。
相对于简单地使用HTML创建的平淡无奇的网站，拥有独特和创造性的风格已经成为一个网站的必备功能。
融入CSS
有三种不同的方法，我们可以将CSS纳入我们的网站 –
- 内联样式– 当我们将样式应用于每个单独的HTML标签时，它被称为内联样式。
-
内嵌式样式设计– 头部标签包含在样式标签中，让人觉得CSS被纳入了一个HTML文件中。这时就会用到 “嵌入式样式 “这个术语。
-
外部样式– 这是最值得推荐的使用CSS的技术，因为它将CSS与HTML分开。HTML内容与一个包含所有样式信息的CSS文件相连。使用这种样式设计方法，我们可以附加许多CSS文件。
我们可以通过使用一个单独的文件，并将类似的格式化类型归入同一个属性，来大大减少所使用的代码的长度。这有助于维护代码，因为较少的代码行使查找错误的过程更加容易，同时也大大提高了代码的整体可读性。
为CSS使用单独的文件的另一个好处是，你可以随心所欲地重复使用同一个文件；与传统的格式化相比，你必须在每个页面单独重复格式化。你可以通过导入文件或链接表单来重复使用该文件。
使用链接标签链接文件
正如已经讨论过的，我们可以通过使用一个.CSS文件将网页的内容（结构）与网页的设计（格式和风格）分开，该文件将被链接到HTML文档中。我们可以利用html标签，将CSS文件与HTML文件连接起来。
我们使用链接标签来指定两个文件之间的关系，它是一个空的元素，意味着它既没有任何打开或关闭的标签，也不是一个自我关闭的标签。它所需要的所有信息都储存在其属性中。有许多属性可以在链接标签中使用，但我们需要使用的属性定义如下。
- Rel – 这是一个链接标签必须具备的属性，它用于指定当前正在使用的文档与我们试图链接的文档之间的关系。通常情况下，我们只倾向于将样式表或收藏夹作为关系。
-
Href – 它用于指定保存要链接的文件的URL。
链接标签在头部标签中使用。我们可以在同一个文档中拥有多个链接标签的实例，每个标签都指向一个不同的文件。在HTML中使用链接标签来链接一个CSS文件的语法如下
<link rel=”the Relationship” href=”source” >
例子
让我们看一下使用链接标签将网页的内容和设计部分分开的例子。
HTML部分
<html>
<head>
<title>Separating Content and Design using the link HTML tag</title>
<style>
body {
background-color: rgb(230, 228, 228);
}
h1 {
color: rgb(125, 211, 125);
}
h3 {
color: rgb(40, 15, 57);
}
h1,
h3{
text-align: right;
font-family: fantasy;
}
.formattedContent {
text-align: justify;
font-family: sans-serif;
margin-left: 2%;
margin-right: 2%;
color: rgb(149, 84, 72);
}
</style>
</head>
<body>
<div>
<h1>Example of separating content and design using external styleheet with link tag.</h1>
<h3>External Stylesheet and link tags</h3>
<p class="FormattedContent">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam earum eligendi, dignissimos nobis a nam similique animi tenetur expedita pariatur nulla recusandae repellendus sequi quisquam corporis, voluptates nisi iure perferendis?
</p>
</div>
</body>
</html>
使用导入语句
我们还可以利用CSS中的导入语句，将内容和设计分开。当我们需要导入存储在一个单独文件中的样式时，我们就会使用这个语句。我们只需提供URL或CSS文件所在的源路径，并在其中加上反转逗号。
当然，我们也可以在这个语句中使用媒体查询。这是一个灵活的声明，也支持样式表的层叠。
在使用这个方法来分离设计和内容的时候，我们唯一要改变的是，从上面的示例代码中删除链接标签，并在其位置上添加以下语句。
<style>
@import(‘LinkedStyle.css’)
</style>
该代码的输出将与上面的示例代码相同。
结语
总之，对于网页设计师来说，CSS是一个强大的工具，它允许他们将内容和设计分开。通过使用CSS，设计师可以在多个网站和设备上创建一个统一的外观，同时保持内容的有序性和易于更新。只要有正确的HTML和CSS知识，任何设计师都可以很容易地利用这一功能，以创造出令人惊叹的设计，而不影响可用性或可访问性。