1.優勢:使表現層和結構層分離
2.樣式:
行內樣式:
<h2 style="color:#0F0">Hello World</h2>
內部樣式:
<style type="text/css">
a{
color: red;
}
</style>
外部樣式:
在head放置<link href=“a.css” type=“text/css” rel=“stylesheet”/>
優先級:
行內樣式 > 內部樣式 > 外部樣式 就近原則
3.選擇器
格式:選擇器{屬性:屬性值;}
舉例:h2{color : #0F0; }
常用選擇器:
4.盒模型:
5.定位:
相對定位、絕對定位
寫個demo看看就知道了:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
div{
width: 200px;
height: 200px;
background-color: red;
/*float: left;*/
}
.box2{
/*position: absolute;*/
position: relative;
top: 20px;
left: 20px;
background-color: blue;
}
</style>
<title>Document</title>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>