行内样式
- 在标签元素里面编写 style 属性，属性值为 CSS 代码。
<!-- 行内样式 -->
<div style="height: 100px; width: 100px; background-color: aqua"></div>
内联样式
- 在 head 标签中创建 style 标签，在 style 标签里面编写 CSS 代码。
- CSS 代码的注释：
/* 注释内容 */
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<!-- 内联样式 -->
<style>
div {
height: 100px;
width: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
外联样式
- 在
head标签中使用link标签引入 CSS 文件。 rel：是 relationship 的缩写。rel="stylesheet"表示当前 link 标签引入的是样式表文件。href：指定引入的文件路径。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<!-- 外联样式 -->
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div></div>
</body>
</html>
/* index.css */
div {
height: 100px;
width: 100px;
background-color: aqua;
}
三种写法的权重
行内样式 > 内联样式 > 外联样式 （可以简单地记为 “就近原则”）
扫一扫
20万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
