按照CSS样式书写的位置(或引入的方式),CSS样式表可以分为三大类:
行内样式表(行内式);内部样式表(嵌入式);外部样式表(链接式)
我们先说一下第一大类,内部样式表(嵌入式)
内部样式表是写到html页面的内部,是将所有的CSS代码抽取出来,单独放到一个<style>标签里,前面我们一直都是用这种方式去书写的。
代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/c6d4dab78b81daf7d5bf41b90dd45c08.png)
这种方式可以方便控制整个页面中的元素样式设置。
接下来我们说一下行内样式表(行内式)
行内样式表是在元素标签内部的style属性中设置CSS样式,适合修改简单的样式。
代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/f5d3003bf3d008421bad795b22320e45.png)
接下来说一下最后一个,外部样式表(链接式)
实际开发都是采用这个类型,适合样式比较多的情况下,它的使用方式是先在文件里建一个CSS文件,之后把CSS文件引入到HTML页面中使用。
引入HTML的方法分为两步:
新建一个后缀名为.css的样式文件,把所有的css代码都放入此文件中。
在HTML页面中,使用<link>标签引入这个文件。
下面展示一下代码:
![](https://i-blog.csdnimg.cn/blog_migrate/3b1de1340f5c0f4981d56c0b101127b9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1bb9a83920d705296e26048c778a605d.png)
语法格式和作用如下:
![](https://i-blog.csdnimg.cn/blog_migrate/a6095cb7e99c92389450e5a01befe784.png)
那么这边就已经讲完了CSS的三大类型样式表,由于笔者能力有限,难免出现各种错误和漏洞。全文仅作为个人笔记,仅供参考,笔记内容来源于各类网课。