一、CSS 的作用
CSS（层叠样式表）用于控制 HTML 文档的样式和布局。当浏览器读取一个样式表时，它会根据样式表中的规则来格式化 HTML 文档，从而实现页面的美化和布局调整。
二、插入样式表的方法
CSS 可以通过以下三种方式插入到 HTML 文档中：
（一）外部样式表（External style sheet）
外部样式表是将 CSS 代码保存在一个单独的 .css 文件中，然后通过 HTML 文档中的 <link> 标签引入。这种方式适用于需要在多个页面中应用相同样式的情况，便于维护和更新。
示例代码
HTML复制
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>预览
在 mystyle.css 文件中，可以定义如下样式：
css复制
hr { color: sienna; }
p { margin-left: 20px; }
body { background-image: url("/images/back40.gif"); }注意：在属性值与单位之间不要留有空格，例如正确的写法是 margin-left: 20px，而不是 margin-left: 20 px。
（二）内部样式表（Internal style sheet）
内部样式表是将 CSS 代码放在 HTML 文档的 <head> 部分的 <style> 标签中。这种方式适用于单个文档需要特殊样式的情况。
示例代码
HTML复制
<head>
<style>
hr { color: sienna; }
p { margin-left: 20px; }
body { background-image: url("images/back40.gif"); }
</style>
</head>预览
（三）内联样式（Inline style）
内联样式是直接在 HTML 元素的 style 属性中定义样式。这种方式会将表现和内容混杂在一起，损失样式表的许多优势，但适用于样式仅需要在一个元素上应用一次的情况。
示例代码
HTML复制
<p style="color: sienna; margin-left: 20px;">这是一个段落。</p>预览
三、多重样式的优先级
当不同的样式表或样式定义冲突时，CSS 会根据以下优先级规则来决定最终应用的样式：
-
内联样式（Inline style）
-
内部样式表（Internal style sheet）
-
外部样式表（External style sheet）
-
浏览器默认样式
示例
假设外部样式表 style.css 中定义了如下样式：
css复制
h3 {
color: blue;
}而内部样式表定义了如下样式：
css复制
h3 {
color: green;
}那么在 HTML 文档中，<h3> 元素的样式将取决于它们的定义顺序：
-
如果外部样式表在内部样式表之前定义，则
<h3>元素的颜色将是绿色（内部样式表的规则覆盖外部样式表的规则）。 -
如果外部样式表在内部样式表之后定义，则
<h3>元素的颜色将是蓝色（外部样式表的规则覆盖内部样式表的规则）。
示例代码
HTML复制
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
h3 { color: green; }
</style>
</head>
<body>
<h3>显示绿色，是内部样式</h3>
</body>预览
如果外部样式表在内部样式表之后定义：
HTML复制
<head>
<style>
h3 { color: green; }
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h3>显示蓝色，是外部样式</h3>
</body>
