概述
行内样式
- 在标签的内部设置
style属性，属性值为 CSS 样式
<body> <!-- 写在标签内部 -->
<div style="height: 100px; width: 100px; background-color: aqua;"></div>
</body>
内联样式
- 在
head标签中写入一个style标签，该标签内部存放 CSS 代码 - CSS 中的代码注释格式：
/* 注释内容 */
<!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) 文件
<!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.css 文件 */
div {
height: 100px;
width: 100px;
background-color: aqua;
}
三种写法的权重
行内样式 > 内联样式 > 外联样式 （可以简单地记为 “就近原则”）
最后
以上就是无聊白云为你收集整理的【CSS】CSS 的 3 种写法行内样式内联样式外联样式三种写法的权重的全部内容，希望文章能够帮你解决【CSS】CSS 的 3 种写法行内样式内联样式外联样式三种写法的权重所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复