📅 最后修改于: 2023-12-03 15:09:08.387000 🧑 作者: Mango
在网页开发中，样式表对于页面的美化和布局是非常重要的。为了避免样式表的重复编写，我们可以使用外部样式表来实现样式的复用和统一管理。本文将介绍如何引用外部样式表。
在项目文件夹中新建一个后缀为 .css 的文件，如 style.css。
在样式表文件中编写 CSS 样式代码。例如，我们可以定义一个 container 类来控制 HTML 元素的布局：
.container {
width: 960px;
margin: 0 auto;
}
在 HTML 文件的 <head> 标签中使用 <link> 标签来引入样式表。例如，我们将 style.css 引入到 index.html 中：
<head>
<link rel="stylesheet" href="style.css">
</head>
其中，href 属性指定了要引入的样式表文件路径。
在 HTML 元素中使用 class 属性来应用样式。例如，我们在 div 元素中使用 container 类名：
<div class="container">
<h1>Hello World!</h1>
<p>This is a demo page.</p>
</div>
这样，div 元素就会应用 style.css 中定义的样式。
引入外部样式表可以使页面样式的管理更加方便和灵活，同时也可以提高页面的加载速度。在实际项目中，建议对样式表进行模块化设计，将不同的样式分别放在不同的文件中并引用。这样可以更好地分工协作，提高开发效率。