使用html標簽的style屬性
每個html標簽上面都有一個屬性:style,把css和html結合在一起
示例:設置字體背景顏色為紅色,字體顏色為黃色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>結合方式一</title>
</head>
<body>
<div style="background-color: red;color: yellow;">hjwblog.com</div>
</body>
</html>
使用html的style標簽
此標簽寫在<head>標簽里面。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>結合方式二</title>
<style type="text/css">
div
{
background-color: blue;
color: yellow;
}
</style>
</head>
<body>
<div>hjwblog.com</div>
</body>
</html>
在style標簽里面@import
先創建一個css文件,這里是mycss.css,在css文件夾下面。
/*
* 這是注釋
*/
div{
background-color: yellow;
color: blue;
}
然后html這樣寫
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>結合方式三</title>
<style type="text/css">
@import url("css/mycss.css");
</style>
</head>
<body>
<div>hjwblog.com</div>
</body>
</html>
使用頭標簽 link
使用<link>標簽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>結合方式四</title>
<link rel="stylesheet" type="text/css" href="css/mycss.css"/>
</head>
<body>
<div>hjwblog.com</div>
</body>
</html>
注意
第三種方式在有些瀏覽器不能正常顯示,一般用第四種方式。
