css和css和html的四種結合方式


原文地址

使用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>標簽

<!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>

注意

第三種方式在有些瀏覽器不能正常顯示,一般用第四種方式。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM