css样式

内联样式

接下来我们说下如何编写我们的CSS样式。

锄禾日当午，汗滴禾下土。

谁知盘中餐，粒粒皆辛苦。

=

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、内部样式

锄禾日当午，汗滴禾下土。

谁知盘中餐，粒粒皆辛苦。

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标签！！！

锄禾日当午，汗滴禾下土。

谁知盘中餐，粒粒皆辛苦。

锄禾日当午，汗滴禾下土。

谁知盘中餐，粒粒皆辛苦。

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

link标签中的rel、type都是固定的照抄就完事，href写一个相对路径就可以了。这样就能将我们上面的style.css文件引入到我们的网页了。让我们来看一下效果