基礎屬性
1.1背景屬性
body{
background-color: #37ff68;
background-image: url("head_portrait.jpg");
background-repeat: no-repeat;
background-position:center;
}
background-color:背景顏色
background-image:捨得背景圖片，需要設置圖片的url地址
background-attachment:設置背景圖像是否固定或者隨着頁面的其餘部分滾動(值scroll、fixed、inherit）。
background-repeat:圖片的複製選項
repeat：在水平和垂直兩個方向上進行復制
no-repeat：不復制
repeat-x:在水平方向複製
repeat-y:在垂直方向複製
也可以將這一組屬性值封裝到一個屬性background中，表達更簡潔，書寫順序是：
背景色background-color
背景圖片background-image
重複方式background-repeat
位置background-position（設置高度纔有效，可以取top、right、left、center、bottom其中兩個值或一個值，也可以是百分比和尺寸單位）
background:green url("head_portrait.jpg") no-repeat right;
1.2尺寸相關屬性
heiht:高度
width:寬度
div{
width:200px;
height:200px；
background-color:red;
}
max-width:最大寬度
max-height:最大高度
min-width:最小寬度
min-height:最小高度
1.3顯示相關屬性
隱藏元素的方法：
（1）visibility：hidden，僅僅隱藏內容，該元素所佔位置依然存在；
（2）display：none，不僅隱藏內容，且不佔位置
display可以設置元素的顯示模式
inline:可以將塊級元素以內聯元素的形式顯示，此時width和height屬性無效，其空間取決於元素的內容。
inline-block：將塊級元素以內聯元素形式顯示，同時兼具塊級元素的某些特徵，比如可以使用width和height設置所佔位置的大小。
li{
display:inline-block;
width:200px;
background-color:blueviolet;
}
span{
display:block;
}
也可以將內聯元素以塊級元素形式顯示，即display：block。
2.6盒模型
margin：外邊距
margin-top、margin-right、margin-bottom、margin-left
使用方式
（1）margin：30px；表示上下左右外邊距都爲30px；
（2）margin-left:30px;單獨設置左邊距
（3）margin：10px 20px 30px 40px;分別設置上右下左四個邊距爲10px 20px 30px 40px
padding:內邊距
也有上下左右邊距，和margin類似
border：邊框
/*border:10px dashed blue;*/
border-width:邊框寬度
border-style:邊框線條類型；
border-color:邊框的顏色
word中設置邊框的操作
也可以使用更優化的書寫方式
border:10px dashed blue;
outline:輪廓，與border類似，用法也一樣
2.7定位
定位方式有：static、fixed、relative、absolute。
static靜態定位（默認）
無定位，元素正常出現在流中，不受left、right、bottom、top屬性的影響。
fixed
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>定位</title>
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color: red;
position:fixed;
left:30px;
top:20px;
}
#div2{
width: 200px;
height: 200px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
從結果可以看出，fix定位會將元素從流中“摘”出來單獨進行定位取決於left、top。
重新定位之後可能會出現重疊，通過z-index可以調整他們的層次順序
relative
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>定位</title>
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color: red;
}
#div2{
width:200px;
height:200px;
background-color: greenyellow;
position:relative;
left:30px;
top:20px;
}
#div3{
width:200px;
height:200px;
background-color:blue;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
從結果可以看出，相對定位是從原有位置進行位移，但並不影響後續位置。
absolute
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>定位</title>
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color: red;
}
#div2{
width:200px;
height:200px;
background-color: greenyellow;
position:absolute;
top:20px;
left:20px;
}
#div3{
width:100px;
height:100px;
background-color:blue;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
從結果可以看出，絕對定位的元素將從流中被“摘”出來，依靠left和top屬性進行定位。
與fixed類似，但是參照物不同
fixed參照根元素（HTML）
absolute參照父容器
選擇器
3.1元素選擇器
用標籤名作爲選擇器，選中所有相應的元素
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>選擇器</title>
<style type="text/css">
div{
font-size:24px;
color:red;
}
p{
font-size:32px;
color:blue;
}
</style>
</head>
<body>
<div>元素選擇器</div>
<p>元素選擇器</p>
</body>
</html>
3.2id選擇器
顧名思義，是根據id來選中元素，其樣式定義形式爲：
#idname{
...
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<style type="text/css">
div{
width:200px;
height:200px;
}
#div1{
background-color: red;
}
#div2{
background-color: blue;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
3.3類選擇器
根據class屬性來選中元素，其樣式定義形式爲
.className{
......
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<style type="text/css">
div{
width:200px;
height:200px;
}
.even{
background-color: red;
}
.odd{
background-color: blue;
}
</style>
</head>
<body>
<div class="odd"></div>
<div class="even"></div>
<div class="odd"></div>
</body>
</html>
從結果可以看出：.odd{...}定義的樣式會施加到所有class=“odd”的元素上去，比如上例中的第一個和第三個<div>，當然也包括class=“odd”的<p>。
3.4屬性選擇器
根據某個屬性的特性（比如有無、值等）來選擇
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<style type="text/css">
[title]{
width:100px;
height:50px;
background-color:red;
border:1px solid green;
}
</style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="a div">4</div>
<div title="div a">5</div>
</body>
</html>
從結果可以看出，所有具有title屬性的元素都應用了紅色背景的樣式。
（2）根據屬性值來選擇
=
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<style type="text/css">
[title="div2"]{
width:100px;
height:50px;
background-color:red;
border:1px solid green;
}
</style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="a div">4</div>
<div title="div a">5</div>
</body>
</html>
從結果可以看出，只有第二個div應用了紅色背景色的樣式，因爲只有第二個div的title屬性值爲div2。
~=：選中屬性值包含指定完整單詞的元素，類似word中查找的全字匹配。
title^=‘div’:選中title屬性以‘div’開頭的元素
title$=‘div’：選中title屬性以‘div’結束的元素
title*=‘div’：選中title屬性值包含‘div’的元素
