CSS的使用方式,css使用方式鏈接式和導入式的區別

CSS的使用方式

1、內聯樣式

直接寫在標籤中(不能複用)

<label style="width: 200;height: 100;background-color: red;">大家好我是內聯樣式</label>

2、內部樣式

寫在head標籤中,可同時設置可複用,沒有共同作用,若有則使用最近的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子模型</title>
		<style type="text/css">
			#box{
				width: 200px;
				height: 200px;
				background-color: red;
				border: 2px solid blue;
				padding: 10px;
				margin-bottom: 10px ;
				float: left;
			}
			#box2{
				width: 200px;
				height: 200px;
				background-color: cadetblue;
				margin-top: 15px;
			/*以哪個大爲標準*/
			float: left;
			}
		</style>
	</head>
	<body>
		<div id="box">hhh </div>
		<div id="box2">hhh </div>
	</body>
</html>

 

3、外部樣式:css的規則放在單獨的css文件中,需要引用才能夠起作用

3.1鏈接式

<link rel="stylesheet"          type="text/css"      href="css/huawei_top.css"/>

引用的是一個外部樣式表    類型:text/css        引用的css文件放的目錄

3.2導入式

<style type="text/css">

@import url("css/huawei_top.css");

</style>

鏈接式和導入式的區別

1.link所有的瀏覽器都支持,@import部分版本低的IE不支持

2.@import是等HTML加載完成後加載,link是執行到該語句就加載

3.@import不支持JS動態修改;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章