如何使用 CSS 分离内容和设计?
一个优秀的网站总是由结构完美的 HTML 文档和精美的设计构成，能够吸引用户的注意力。这样的网站能够提升网站的整体互动性，使其更具吸引力。
在为网页应用样式时，我们会使用层叠样式表(简称 CSS)。使用 CSS，我们可以更轻松地打造美观的网站。它区分了 HTML 文档的结构和呈现方式，后者指的是用户能够看到并与之交互的元素。
与仅使用 HTML 就能创建出平淡无趣的网站相比，拥有独特而富有创意的风格已成为网站的必备要素。
整合 CSS
我们可以通过三种不同的方法将 CSS 整合到我们的网站中 -
内联样式 - 当我们将样式应用于每个单独的 HTML 标签时，这被称为内联样式。
嵌入式样式 - head 标签包含在 style 标签内，使 CSS 看起来像是被整合到 HTML 文件中。这时就会使用"嵌入式样式"一词。
外部样式 - 这是最推荐的 CSS 使用方法，因为它可以将 CSS 与 HTML 分离。HTML 内容与包含所有样式信息的 CSS 文件关联。使用这种样式方法，我们可以附加多个 CSS 文件。
通过使用单独的文件并将相似的格式归类到相同的属性中，我们可以显著减少代码的长度。这有助于维护代码，因为更少的代码行数使错误查找过程更容易，同时大大提高了代码的整体可读性。
使用单独的 CSS 文件的另一个好处是，您可以根据需要多次重复使用同一个文件;相比之下，传统的格式化方式则需要在每个页面中分别重复格式化。您可以通过导入文件或链接工作表来重复使用该文件。
使用 link 标签链接文件
正如前面所讨论的，我们可以通过使用链接到 HTML 文档的 .CSS 文件将网页的内容(结构)与网页的设计(格式和样式)分开。我们可以使用 html 标签将 CSS 文件链接到 HTML 文件。
我们使用 link 标签来指定两个文档之间的关系。它是一个空元素，这意味着它既没有任何开始或结束标签，也不是一个自闭合标签。它所需的所有信息都存储在其属性中。link 标签中可以使用许多属性，但我们需要使用的属性定义如下。
Rel − 它是 link 标签的必备属性，用于指定当前正在使用的文档与我们尝试链接的文档之间的关系。通常，我们只倾向于使用样式表或网站图标作为关联。
Href − 它用于指定要链接的文件的 URL。
link 标签用于 head 标签中。我们可以在同一个文档中存在多个 link 标签实例，每个标签指向不同的文件。在 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>
使用 import 语句
我们还可以利用 CSS 中的 import 语句将内容与设计分离。每当我们需要导入存储在单独文件中的样式时，我们都会使用此语句。我们只需在引号内提供 CSS 文件所在的 URL 或源路径即可。
此外，我们还可以将此语句与媒体查询结合使用。这是一个灵活的语句，还支持样式表的级联。
使用此语句分离设计和内容时，我们唯一需要更改的是删除上面示例代码中的 link 标签，并在其位置添加以下语句。
<style> @import(‘LinkedStyle.css’) </style>
代码的输出与上面的示例代码相同。
结论
总而言之，CSS 是网页设计师的强大工具，可以帮助他们将内容与设计分离。通过使用 CSS，设计师可以在多个网站和设备上创建统一的外观，同时保持内容的井然有序且易于更新。只要具备正确的 HTML 和 CSS 知识，任何设计师都可以轻松利用此功能，在不影响可用性和可访问性的情况下创建令人惊叹的设计。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
