web前端学习83-86（CSS引入方式---内部样式表，行内样式表，外部样式表）

最新推荐文章于 2024-08-12 00:15:00 发布

香甜的甲基橙

最新推荐文章于 2024-08-12 00:15:00 发布

阅读量646

点赞数 1

分类专栏： css web前端基础学习笔记文章标签：前端 css3

本文链接：https://blog.csdn.net/weixin_51249285/article/details/121364583

版权

web前端基础学习笔记同时被 2 个专栏收录

68 篇文章 13 订阅

订阅专栏

css

22 篇文章 5 订阅

订阅专栏

文章目录

5 CSS 引入方式

5 CSS 引入方式

5.1 CSS的三种样式表

前面例子在写CSS时都是写在style中，但是并不是都写在里面的

按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为三大类：

行内样式表(行内式)
内部样式表(嵌入式)
外部样式表(链接式)

5.2 内部样式表

内部样式表(内嵌样式表)是写到html页面内部。是将所有的CSS代码抽取出来,单独放到一个**< style> 标签**中。

<style>
	div {
		color: red;
		font-size: 12px;
		}
</style>

< style>标签理论上可以放在HTML文档的任何地方,但一般会放在文档的< head>标签中
通过此种方式,可以方便控制当前整个页面中的元素样式设置
代码结构清晰,但是并没有实现结构与样式完全分离

5.3 行内样式表

行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式.

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

style其实就是标签的属性
在双引号中间,写法要符合CSS规范
可以控制当前的标签设置样式
由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用.
使用行内样式表设定CSS ,通常也被称为行内式引入

5.4 外部样式表

提倡使用这个

实际开发都是外部样式表.适合于样式比较多的情况.核心是:样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用.

引入外部样式表分为两步:

新建-一个后缀名为.CSs的样式文件,把所有CSS代码都放入此文件中。
在HTML页面中,使用< link>标签引入这个文件。
```
<link rel="stylesheet" href="css文件路径">
```
在head上方写一个link 再按一个tab键就可以显示上方代码

eg：21-外部样式表.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div>来呀，快活呀，反正有大把时间</div>
</body>
</html>

style.css

/* 这个css文件里面只有样式没有标签 */
div {
    color: pink;
}

同一个路径：

在这里插入图片描述

网页显示：

在这里插入图片描述

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet", 表示被链接的文档是一个样式表文件。
href	定义所链接外部样式表文件的URL,可以是相对路径，也可以是绝对路径。

使用外部样式表设定CSS ,通常也被称为外链式或链接式引入,这种方式是开发中常用的方式

5.5 CSS引入方式总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式分离	需要引入	最多，吐血推荐	控制多个页面