数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 CSS 分离内容和设计？
一个好的网站总是由一个结构良好的 HTML 文档和一个精心设计的吸引用户注意力的设计组成。这种网站可以增强网站的整体交互性，使其更具吸引力。
在为网页应用样式时，我们使用层叠样式表，简称 CSS。通过使用 CSS，我们可以更轻松地使网站更具观赏性。它区分了 HTML 文档的结构和表现形式，表现形式指的是用户看到和交互的元素。
与仅使用 HTML 创建的简单且乏味的网站相比，拥有独特且创意的样式已成为网站的必备功能。
整合 CSS
有三种不同的方法可以将 CSS 整合到我们的网站中：
内联样式 - 当我们将样式应用于每个单独的 HTML 标签时，称为内联样式。
嵌入式样式 - head 标签包含在 style 标签内，使 CSS 像是整合在 HTML 文件中一样。然后使用“嵌入式样式”这个术语。
外部样式 - 这是使用 CSS 的最推荐的方法，因为它用于将 CSS 与 HTML 分离。HTML 内容连接到一个包含所有样式信息的 CSS 文件。使用这种样式方法，我们可以附加多个 CSS 文件。
通过使用单独的文件并将类似类型的格式分组到同一个属性中，我们可以显著减少正在使用的代码长度。这有助于维护代码，因为较少的代码行使查找错误的过程更容易，并大大提高了代码的可读性。
使用单独的 CSS 文件的另一个好处是，您可以根据需要重复使用同一个文件；与传统格式相比，在传统格式中，您必须在每个页面中分别重复格式。您可以通过导入文件或链接样式表来重复使用该文件。
使用 link 标签链接文件
如前所述，我们可以使用 .CSS 文件将网页的内容（结构）与网页的设计（格式和样式）分离，该文件将链接到 HTML 文档。我们可以使用html 标签将 CSS 文件链接到 HTML 文件。
我们使用 link 标签来指定这两个文档之间是如何关联的，它是一个空元素，这意味着它既没有开始标签也没有结束标签，也不是一个自闭合标签。它需要的所有信息都存储在其属性中。link 标签中可以使用许多属性，但我们需要使用的属性定义如下。
Rel - 它是 link 标签的必填属性，用于指定当前使用的文档与我们尝试链接的文档之间的关系。通常，我们只倾向于将样式表或网站图标作为关系。
Href - 用于指定要链接的文件所在的 URL。
link 标签用于 head 标签中。我们可以在同一个文档中有多个 link 标签实例，每个标签都指向一个不同的文件。下面给出了在 HTML 中使用 link 标签链接 CSS 文件的语法：
<link rel=”the Relationship” href=”source” >
示例
让我们来看一个使用 link 标签分离网页内容和设计部分的示例。
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 的相关知识，任何设计师都可以轻松利用此功能来创建令人惊叹的设计，而不会影响可用性或可访问性。
783 次浏览
