极客笔记CSS 如何分离内容和设计
一个好的网站总是由一个完美结构化的HTML文档和一个吸引用户注意的精美设计组成。这种类型的网站可以增强整体的互动性，使其更具吸引力。
在为我们的网页应用样式时，我们使用层叠样式表（CSS）。通过使用CSS，我们可以更容易地使网站具备可视性。它区分了HTML文档的结构和演示，演示指的是用户看到和交互的元素。
与仅使用HTML创建的普通和无趣的外观的网站相反，具有独特和创造性风格的网站已经成为一个必备的功能。
融入CSS
有三种不同的方法可以将CSS融入到我们的网站中：
- 内联样式 - 当我们将样式应用到每个单独的HTML标签时，称为内联样式。
-
嵌入样式 - head标签包含在style标签内部，给人的感觉是CSS被嵌入到HTML文件中。然后使用术语“嵌入样式”。
-
外部样式 - 这是使用CSS的最建议的技术，因为它将CSS从HTML中分离出来。 HTML内容连接到包含所有样式信息的CSS文件。使用这种样式方法，我们可以连接多个CSS文件。
通过使用单独的文件并将相似类型的格式化分组到同一属性中，我们可以显着减少所使用的代码长度。这有助于保持代码的清晰度，因为较少的代码行使错误查找过程更加容易，并且大大提高了代码的可读性。
使用单独的文件来进行CSS的另一个优势是，您可以将相同的文件重复使用多次，而不像传统的格式化，您必须在每个页面中单独重复格式化。您可以通过导入或链接表格来重复使用文件。
使用link标签链接文件
正如前面讨论的，我们可以使用.CSS文件将网页内容（结构）与网页设计（格式化和样式）分离，这些文件将链接到HTML文档。我们可以使用标签将CSS文件链接到HTML文件。
我们使用link标签来指定两个文档之间的关系，它是一个空元素，意味着它既没有开始标签也没有结束标签，也不是自闭合标签。它所需的所有信息都存储在其属性中。一个link标签中可以使用很多属性，但我们需要使用的属性如下所示。
- Rel - 它是link标签的一个必备属性，用于指定当前正在使用的文档与我们正在链接的文档的关系。通常，我们只会有一些样式表或图标作为关系。
-
Href - 用于指定要链接的文件所在的URL。
link 标签用于 head 标签中。在同一文档中，我们可以有多个 link 标签的实例，每个标签指向不同的文件。以下是在 HTML 中使用 link 标签链接 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知识，任何设计师都可以轻松利用这一功能创建令人惊叹的设计，而不会损害可用性或可访问性。