CSS 创建
当浏览器读取样式表时，它将根据样式表中的信息格式化HTML文档。
插入 CSS 的三种方法
插入样式表的方法有以下三种：
- 外部CSS
- 内部CSS
- 内联CSS
外部CSS
使用外部样式表，您只需更改一个文件即可更改整个网站的外观！
每个 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。
例子
外部样式在 HTML 页面的 <head> 部分的 <link> 元素内定义：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
外部样式表可以在任何文本编辑器中编写，并且必须使用 .css 扩展名保存。 外部 .css 文件不应包含任何 HTML 标记。 “mystyle.css”文件的外观如下：
“mystyle.css”
body { background-color: lightblue; }
h1 { color: navy; margin-left: 20px; }
注意：请勿在属性值 (20) 和单位 (px) 之间添加空格：
不正确（空格）：margin-left: 20 px;
正确（无空格）：margin-left: 20px;
内部CSS
如果单个 HTML 页面具有独特的样式，则可以使用内部样式表。
内部样式在 head 部分的 <style> 元素内定义。
例子
内部样式在 HTML 页面的 <head> 部分的 <style> 元素内定义：
<!DOCTYPE html>
<html>
<head>
<style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
内联CSS
内联样式可用于为单个元素应用独特的样式。 要使用内联样式，请将 style 属性添加到相关元素。style 属性可以包含任何 CSS 属性。
例子
内联样式在相关元素的“style”属性中定义：
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
提示：内联样式失去了样式表的许多优点（通过将内容与表示混合在一起）。谨慎使用此方法。
多种样式表
如果在不同样式表中为同一选择器（元素）定义了某些属性，则将使用上次读取样式表中的值。
假设外部样式表的<h1> 元素具有以下样式：
h1 { color: navy; }
然后，假设内部样式表的<h1> 元素也具有以下样式：
h1 { color: orange; }
例子
如果内部样式是在链接到外部样式表之后定义的，则 <h1> 元素将为“橙色”：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style> h1 { color: orange; } </style>
</head>
例子
但是，如果内部样式在链接到外部样式表 之前定义，则 <h1> 元素将为“navy”：
<head>
<style> h1 { color: orange; } </style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
级联顺序
当为 HTML 元素指定多个样式时，将使用哪种样式？ 页面中的所有样式将按照以下规则“级联”到新的“虚拟”样式表中，其中第一个样式具有最高优先级：
- 内联样式（HTML 元素内部）
- 外部和内部样式表（在头部）
- 浏览器默认
因此，内联样式具有最高优先级，并将覆盖外部和内部样式以及浏览器默认值。