html零基础学习-三种样式表
行间样式表：
head中不需要写内容，在body中列出每一个样式，<div style=" "></div> 样式如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div style="width:100px;height:100px;background-color:red"></div>
<div style="width:100px;height:100px;background-color:red"></div>
<div style="width:100px;height:100px;background-color:red"></div>
<div style="width:100px;height:100px;background-color:red"></div>
<div style="width:100px;height:100px;background-color:red"></div>
<div style="width:100px;height:100px;background-color:red"></div>
</body>
</html>
内部样式表：
只针对当前html文件有效 head中需要写样式，div{ } 在body中写<div></div> 样式如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{
width:100px;
height:100px;
background-color:aqua
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
外部样式表：
<link rel ="stylesheet" href="4.css"/> head中写连接，body中写<div>样式如下：
1.先新建css写好样式
@charset "utf-8";
/* CSS Document */
div{
width:100px;height:100px;background-color:aqua
}
2.再写html，连接css
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="4.css"/>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
