一、简单介绍 CSS

英文全称	中文含义	作用
Cascading Style	层叠样式表	美化页面及优化页面交互使用

二、CSS 元素样式的来源

1、行内样式

a、行内样式就是直接把 CSS 代码添加到 HTML 的标记中，即作为 HTML 标记的属性标记存在。通过这种方法，可以很简单地对某个元素单独定义样式。
b、设置前的行内样式代码演示：
```
<h1>设置前的行内样式</h1>
```

c、设置后的行内样式代码掩饰：

<h1 style="color=red;">设置后的行内样式</h1>

2、内联样式

a、内嵌式就是把样式写在<head>标签中，并用<style>标签去声明，下面的例子即使用内嵌式。

b、设置前的内联样式代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<body>
  <h1>内联样式</h1>
</body>
</html>

c、设置后的内联样式代码掩饰：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
  h1{color:red;}
  </style>
</head>
<body>
  <h1>内联样式</h1>
</body>
</html>

3、外部样式

a、外部样式是指在外部定义 CSS 样式表并形成以.CSS 为扩展名文件，然后在页面中通过<link>链接标记链接到页面中，而且该链接语句必须放在页面的<head>标记区.
b、首先新建一个后缀名为 .css 的文件，里面写入：
```
  h1{color:red;}
```

c、然后在html文件中引入该文件，示例如下：

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Document</title>
     <link rel="stylesheet" href="style1.css">
 </head>
 <body>
     <h1>link引入外部样式</h1>
 </body>
 </html>