目录
背景：
过程:
一.内联样式(Inline Sytles)
二:内部样式表(Internal Stylesheets)
三:外部样式表(External Stylesheets)
总结:
背景：
CSS引入主要指的是将CSS样式代码添加到HTML文档中的方法，以便为页面元素月应用统一的样式和布局。主要的方式有三种：内联样式(Inline Styles)、内部样式表(Internal Stylesheets)和外部样式表(External Stylesheets)。
过程:
一.内联样式(Inline Sytles)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>内联样式示例</title>
</head>
<body>
<h1 style="color:blue;font-size:24px;">这是内联样式的标题</h1>
<p style="color:green;">这是内联样式的段落</p>
</body>
</html>
在上面的例子中，<h1>和<p>元素都使用了style属性来直接定义它们的样式。<h1>元素的文本颜色被设置为蓝色(color:blue;),字体大小被设置为24像素(font-size:24px;)。同样，<p>元素的文本颜色被设置为绿色(color:green;).这种方法非常直观，但缺点是如果需要再多个元素上应用相同的样式，就需要在每个元素上重复编写相同的样式代码，这既不高效也不易于维护
二:内部样式表(Internal Stylesheets)
内部样式是通过HTML文档的<hear>部分使用<style>标签来定义CSS样式。这种方式可以将样式集中管理，但仍然与HTML文档紧密耦合，不利于样式的复用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>内部样式示例</title>
<style>
h1{
color:red;
text-align:center;
}
P{
font-family:Arial;
line-height:1.6;
}
</style>
</head>
<body>
<h1>这是内部样式表的标题</h1>
<p>这是内部样式表的段落，具有指定的字体和行高</p>
</body>
</html>
在这个例子中，<style>标签被放置在<head>部分，里面包含了针对<h1>和<p>元素得CSS样式规则。所有<h1>元素文本shezhi色(color:red;)并且文本居中(text-align:center;)。所有<p>元素得字体被设置为Arial，并且行高设置1.6(line-height:1.6;)。内部样式表得好处是可以将样式规则集中管理，使得HTML文档得结构更加清晰。但是如果需要在多个界面上使用相同得样式规则，仍然需要在每个界面<head>部分重复编写这些规则。
三:外部样式表(External Stylesheets)
外部样式表是通过HTML文档中使用<link>标签来引用一个单独得CSS文件。这种方式实现了样式与HTML文档得完全分离，使得样式可以在多个界面之间共享和复用，同时也方便了样式得修改和维护
我们有一个名为styles.css得外部CSS文件，内容如下:
/* styles.css 文件内容 */
h1 {
color: purple;
text-decoration: underline;
}
body {
background-color: lightyellow;
}然后，在HTML文件中引用这个CSS文件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>外部样式示例</title>
<link rel="stylesheet" type="text/css" href="styles.css"
</head>
<body>
<h1>这是外部样式表的标题</h1>
<p>这是外部样式表的段落，背景色是由外部CSS文件定义。</p>
</body>
</html>
在这个例子中，<link>标签被放置在<head>部分，用于引入外部CSS文件styles.css，rel属性。
总结:
| 样式引入方式 | 特点 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|---|
| 内联样式（Inline Styles） | 在HTML元素内部使用style属性定义样式 | 直观、快速，无需额外编写CSS代码 | 不利于样式统一管理和复用，增加HTML文档复杂性 | 对单个元素进行临时或快速样式调整，无需多页面复用 |
| 内部样式表（Internal Stylesheets） | 在HTML文档的<head>部分使用<style>标签定义样式 | 样式集中管理，HTML文档结构更清晰 | 需在每个页面<head>部分重复编写样式，不利于样式复用和共享 | 单个HTML文档样式定义，样式量不大且无需多页面复用 |
| 外部样式表（External Stylesheets） | 通过HTML文档的<link>标签引用外部CSS文件定义样式 | 样式统一管理和维护，代码可维护性强，样式文件可单独缓存，团队协作分工明确 | 需要额外创建和管理CSS文件，CSS文件过大或网络延迟可能导致加载缓慢 | 多页面使用相同样式，大型网站或应用样式统一管理和维护，团队协作开发 |
可以看出三种方式各有优缺点，使用场景也各不相同。在实际开发中，根据项目的需求、团队规模和维护成本等因素综合考虑，选择最合适的CSS引入方式。通常情况下，外部样式是常用且推荐的方式，因为它能够实现样式的复用和共享，提高代码的可维护性和团队协作效率。
