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動態修改;