接下来我们说下如何编写我们的CSS样式。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
</head>
<body>
<p style="color: red;font-size: 40px;">锄禾日当午，汗滴禾下土。</p>
<p>谁知盘中餐，粒粒皆辛苦。</p>
</body>
</html>=
1
2
3
4
5
6
7
8
9
10
11
12
内联样式（可以将css样式编写到元素的style属性当中）：< p style=“color: red;font-size: 40px;” > 锄禾日当午，汗滴禾下土。< /p >这样编写在p标签内部就是内联样式，简单说来内联样式就是将我们的样式直接编写到我们的style属性当中，这种样式我们称之为内联样式，内联样式只对当前元素内容起作用。内联样式不方便我们重复使用。
但是此时我们的css和html都写在一起了，这其中的color: red;font-size: 40px;就是css，我们说一个优秀的页面要求我们的结构、表现、行为分离！！！但是现在很明显不满足要求。所以内敛样式属于结构与表现的耦合，不方便后期维护，不推荐使用！！
那说了这么多，不让我们用，我们到底要怎么写我们的CSS呢？让我们看看。
2、内部样式
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
p{
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<p>锄禾日当午，汗滴禾下土。</p>
<p>谁知盘中餐，粒粒皆辛苦。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
内部样式表：也可以将CSS编写到head中的style标签中。将我们的样式表编写到我们的style标签中，通过我们的CSS选择器(上面代码中p{}就是选择我们的p标签)选中指定元素，然后可以同时为这些元素一起设置样式，可以时样式进一步的复用。将我们的样式表编写到style标签中，也可以使结构和表现进一步分离，这也是我们推荐的使用方式。
我们推荐使用的内部样式能在这一个页面中使用，但是如果我们想在其他页面使用应该怎么办呢？来看看第三种样式吧！！！
3、外部样式
除了以上两种方式，还可以将我们的CSS写到外面去。可以在文件夹中新建一个css文件，将我们之前内部样式表style中的内容放进去。然后我们只需要将style.css文件进入到我们的页面中。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SJ1YVbuq-1587297716968)(/Users/mac/Desktop/MarkDown /CSS（一）图片/3新建css文件.png)]
那怎么引入呢？通过link标签！！！
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>锄禾日当午，汗滴禾下土。</p>
<p>谁知盘中餐，粒粒皆辛苦。</p>
<p>锄禾日当午，汗滴禾下土。</p>
<p>谁知盘中餐，粒粒皆辛苦。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
link标签中的rel、type都是固定的照抄就完事，href写一个相对路径就可以了。这样就能将我们上面的style.css文件引入到我们的网页了。让我们来看一下效果
