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>
html零基礎學習-三種樣式表