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