CSS引入的三种方式

背景：

过程:

一.内联样式(Inline Sytles)

二:内部样式表(Internal Stylesheets)

三:外部样式表(External Stylesheets)

总结:

背景：

CSS引入主要指的是将CSS样式代码添加到HTML文档中的方法，以便为页面元素月应用统一的样式和布局。主要的方式有三种：内联样式(Inline Styles)、内部样式表(Internal Stylesheets)和外部样式表(External Stylesheets)。

过程:

一.内联样式(Inline Sytles)

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>
</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文档紧密耦合，不利于样式的复用

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>
<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文件，内容如下:

css">/* styles.css 文件内容 */  
h1 {  color: purple;  text-decoration: underline;  
}  
body {  background-color: lightyellow;  
}

然后，在HTML文件中引用这个CSS文件：

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文件过大或网络延迟可能导致加载缓慢	多页面使用相同样式，大型网站或应用样式统一管理和维护，团队协作开发