css和css和html的四種結合方式
阿新 • • 發佈:2018-04-29
pan web 紅色 示例 href sheet cpp char spa
原文地址
使用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>
註意
第三種方式在有些瀏覽器不能正常顯示,一般用第四種方式。
css和css和html的四種結合方式