web第二天css3

1.選擇器

1. 標籤選擇器/元素選擇器：div{background-color: red; }
2. class選擇器：.child{background-color: gray;}
3. ID選擇器：#wuyifan{background-color: brown;}
4. 僞類選擇器：#wuyifan:hover{background-color: green;}
5. 屬性選擇器:不常用

6. 組合形式：層級選擇器：

   .father span{background-color: black}/祖輩子孫都可以/

   .father>span{background-color: blue}/父子選擇器/

   .father,.mahuateng{color: brown;}/z組合選擇器/

   .header .logo{background-color: yellow}

2.屬性

1. 寬高 width（min-width max-width）height（min-height max-height）
2. 字體 font font-style（通常寫normal） font-weight:bold粗細值 font-size：字體的大小一般設置爲12px font-family：設置爲字體樣式但是如果其他瀏覽器不支持這種樣式也沒用
3. text-intdent文字的縮進inherit; text-overflow文字溢出inherit； text-align：設置文本位置 text-shadow：陰影 line-height和verticl-align設置文本的位置爲中間
4. 背景 background background-color ：背景顏色 background-image：背景圖片 background-repeat：去掉重複的圖片 background-attachment：設置滾動條一般設置默認 background-position：設置背景位置 background-size：設置背景大小
5. 顏色：color：設置顏色 opacity：設置透明度

6. list-style：設置列表項目相關樣式

   list-style-image：設置或檢索作爲對象的列表項標記的圖像

   list-style-position：設置或檢索作爲對象的列表項標記如何根據文本排列

   list-style-type：設置或檢索對象的列表項所使用的預設標記

7. 定位：position：檢索對象的定位方式relative absolute相對 fixed類似廣告

   z-index：檢索或設置對象的層疊順序
   
   top：檢索或設置對象與其最近一個具有定位設置的父對象頂邊相關的位置
   
   right：檢索或設置對象與其最近一個具有定位設置的父對象右邊相關的位置
   
   bottom：檢索或設置對象與其最近一個具有定位設置的父對象底邊相關的位置
   
   left：檢索或設置對象與其最近一個具有定位設置的父對象左邊相關的位置
   

8. border：邊框
   border：設置對象的邊框樣式

   border-width：設置對象邊框的寬度
   
   border-style：設置對象邊框的樣式
   
   border-color：設置對象邊框的顏色
   
   border-radius：設置對象的圓角邊框
   
   box-shadow：設置對象陰影
   

9. 內邊距：
   border：設置對象的邊框樣式

   border-width：設置對象邊框的寬度
   
   border-style：設置對象邊框的樣式
   
   border-color：設置對象邊框的顏色
   
   border-radius：設置對象的圓角邊框
   
   box-shadow：設置對象陰影
   

   外邊距：margin：設置所有外邊距屬性

   margin-top：設置元素的外上邊距
   
   margin-right：設置元素的外右邊距
   
   margin-left：設置元素的外左邊距
   
   margin-bottom：設置元素的外下邊距
   

10. 單位：常用px

3.盒子模型