1.行间样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
行间样式：给单独的标签添加样式
语法：<div style="……"></div>
-->
</head>
<body>
<!--<div>div1</div>-->
<div style="width: 100px;height: 100px;background-color:pink"></div>
<div style="width: 100px;height: 100px;background-color:pink"></div>
<div style="width: 100px;height: 100px;background-color:pink"></div>
<div style="width: 100px;height: 100px;background-color:pink"></div>
<div style="width: 100px;height: 100px;background-color:pink"></div>
<div style="width: 100px;height: 100px;background-color:pink"></div>
</body>
</html>
2.内部样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
内部样式表
针对当前html文件有效
-->
<style>
div{
width: 100px;
height: 100px;
background-color:pink;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
3.外联样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
外部样式表
<link href="style.css" rel="stylesheet"/>
-->
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
下面是index.css的代码
div{
width: 100px;
height: 100px;
background-color:yellow;
}
原文地址：https://www.cnblogs.com/mayanlianggcs/p/9513737.html
时间： 2024-10-16 05:21:52