行内样式
- 在标签的内部设置
style属性，属性值为 CSS 样式
复制代码
1
2
3
4<body> <!-- 写在标签内部 --> <div style="height: 100px; width: 100px; background-color: aqua;"></div> </body>
内联样式
- 在
head标签中写入一个style标签，该标签内部存放 CSS 代码 - CSS 中的代码注释格式：
/* 注释内容 */
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { height: 100px; width: 100px; background-color: aqua; } </style> </head> <body> <div></div> </body> </html>
外联样式
- 在
head标签中写入一个link标签；设置href属性，属性值：外部 CSS 文件的路径 - 设置
rel属性，rel 是 relationship 的缩写，rel="stylesheet"表示我们引用的是一个样式表 (CSS) 文件
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./1.css"> <!-- 导入 CSS 文件 --> <title>Document</title> </head> <body> <div></div> </body> </html>
复制代码
1
2
3
4
5
6
7/* 1.css 文件 */ div { height: 100px; width: 100px; background-color: aqua; }
三种写法的权重
行内样式 > 内联样式 > 外联样式 （可以简单地记为 “就近原则”）
最后
以上就是无聊白云最近收集整理的关于【CSS】CSS 的 3 种写法行内样式内联样式外联样式三种写法的权重的全部内容，更多相关【CSS】CSS内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复