第二章 常用CSS和規範筆記

1. 用css去調整界面的元素的展示效果
    層疊樣式表:用來描述元素在界面中的展示效果,可以方便將界面的元素的展示效果分離出來單獨控制.
    層疊:在樣式中一個層次結構,更具體的樣式覆蓋通用樣式
    樣式表:適用某一些**符合條件**的元素,有一定規則的
    代碼示例:
   

<li style='color: #ff0036;'>這是一個列表</li>

2.樣式分三種
    行內樣式:直接寫在標籤中的樣式,以分號間隔多條樣式
        特點:對於頁面的結構展示來說不直觀,不予維護;
        行內樣式比內聯樣式優先級高.
    內聯樣式:存放在head標籤下的style標籤之中,不予維護;
      

 <style>
         p{
           color: red;
           width: 100px;
           height: 100px;
         }
</style>

    外聯樣式
        在head中添加<link rel="stylesheet" href="style.css" />
        href是樣式文件的路徑
3. 樣式標籤中的註釋
    /*這是樣式style標籤的註釋
    裏面可以寫很多很多年多的描述信息
    */
4.CSS的結構和語法
    選擇器{
        樣式屬性:值;
        樣式屬性:值;    
    }----聲明塊
    滿足條件的所有元素,單條樣式分號作爲分隔
    同樣的選擇器,後寫會覆蓋前一個樣式
    代碼示例:
   

p{
     color: red;
     width: 100px;
     height: 100px;
    }

5.常用的樣式:width/height/color/background-color/font-size
代碼示例
  

 div{
       width: 100px;/* 寬度*/
       height: 100px;/* 高度*/
       background: red;
       color:yellow;
    }

6.三種選擇器命名方式
    .box1{/*class選擇器*/
      width: 100px;/* 寬度*/
      height: 100px;/* 高度*/
    }
    <li class='box1'>這是一個列表</li>
    <div class='box1'>這是二個列表</div>
    class一類相似物體,可以重複出現

    #box1{/*id選擇器*/
      width: 100px;/* 寬度*/
      height: 100px;/* 高度*/
    }
    <li id='box1'>這是一個列表</li>
    id當前頁面唯一性的命名

    li{/*tag選擇器*/
      width: 100px;/* 寬度*/
      height: 100px;/* 高度*/
    }
    <li>這是一個列表</li> 唯一性

7.優先級
    行內元素 > id >class選擇器>tagNama(標籤)
    !important 優先級最高(不推薦)

8.CSS命名規範
命名以字母開頭,不能單個字母,不允許帶有廣告的單詞
ad/adber/advertising
全小寫
9.選擇器組合
A、後代選擇器: 希望能從特殊結構中選擇符合條件的元素
例如: div p{…}
從div裏面選中p標籤,可以跳級,沒有直接關係,選中的元素永遠是最後一個挨着大括號的元素

B、子代選擇器: 後代選擇器的強化版
例如: div>p{…}
從div裏面選中p標籤,不可以跳級,嚴格的父子關係,選中的元素永遠是挨着大括號的元素

C、相鄰(毗(pi4)鄰)選擇器: 不不不,我是問你身後挨着小姐姐
例如: li+li{…}
如果li同級相鄰的爲li標籤,選擇後面那個li標籤同級關係,選中的元素永遠是挨着大括號的元素

D、兄弟後代選擇器: 不不不,我是問你身後的所有的小姐姐
例如: a~li{…}/* shift+tab上面的那個鍵*/
如果a同級的有li標籤,都能選擇得到,選中的元素永遠是挨着大括號的元素