div+css的三種樣式

css行內樣式

<html>
<head>
<title>測試css行內樣式</title>

</head>
<body>
	<div id="test" style="height:300;width:300;background-color:#35f">行內樣式<div>
</body>
</html>

css內部樣式

<html>
<head>
<title>測試css內部樣式</title>
	<style type="text/css">
	#test{
		height:300px;
		width:500px;
		/*background-color:789FFF;*/
		background-image:url(picture/p2.jpg);
		font-size:30px;
		text-align:center;
		line-height:50px;
		}
	</style>
</head>
<body>
	<div id="test">內部樣式<div>
</body>
</html>

css外部樣式

  • wh.css
	#test{
	height:300px;
	width:500px;
	/*background-color:789FFF;*/
	background-image:url(../picture/p2.jpg);
	font-size:30px;
	text-align:center;
	line-height:50px;
	margin-top:0px;
	margin-bottom=0px;
	margin-left:auto;
	margin-right:auto;
	}

  • index.html
<html>
<head>
<title>測試css外部樣式</title>
	<link href="css/wh.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div id="test">外部樣式<div>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章