CSS語法規範一

CSS語法規範

1. CSS規則由兩個主要的部分構成：選擇器以及一條或多條聲明。

p{
                color: red;
                font-size: 12px;
            }

CSS代碼風格

1. 樣式格式書寫

   • 緊湊格式

   • h3 {color: deeppink;font-size:20px}

   • 展開格式

   • h3 {
        color: deeppink;
        font-size:20px
     }

   • 推薦展開格式書寫，因為直觀

2. 樣式大小寫風格

   • h3 {
        color: deeppink;
     }

   • h3 {
        COLOR: deeppink;
     }

   • 推薦樣式選擇器、屬性名，屬性值關鍵字全部使用小寫字母，特殊情況除外

3. 樣式空格風格

   • h3 {
        color: deeppink;
     }

   • • 屬性值前面，冒號後面，保留一個空格
     • 選擇器（標簽）和大括弧中間保留空格

CSS基礎選擇器

1. CSS選擇器的作用

   • <div>我是div</div>
     <p>我是段落</p>

   • 根據不同的需求把不同的標簽選出來這就是選擇器的作用。簡單來說就是選擇標簽用的

   • CSS做兩件事

     • 找到所有選擇的標簽
     • 設置這些標簽的樣式

2. 選擇器分類

   • 選擇器分為基礎選擇器 和複合選擇器 兩大類

     • 基礎選擇器是由單個選擇器組成

     • 基礎選擇器包括：標簽選擇器、類選擇器、id選擇器和通配符選擇器

       • 標簽選擇器

       • 標簽名{
              屬性1：屬性值1；
              屬性2：屬性值2；
              屬性3：屬性值3；
         }

       • 作用：可以把某一類標簽全部選擇出來。

       • 優點：能快速為頁面中同類型的標簽統一設置樣式

       • 缺點：不能設計差異化樣式，只能選擇全部的當前標簽

       • 類選擇器

         • .類名{
                屬性1：屬性值1；
                屬性2：屬性值2；
                屬性3：屬性值3；
           }

         • 類選擇器口訣：

           • 樣式點定義，結構類（class）調用，一個或多個，開發最常用

         • 【註意】

           • 類選擇器使用"."進行標識，後面緊跟類名（自定義）
           • 可以理解為給這個標簽起一個名字
           • 長名稱或者片語可以使用中橫線來為選擇器命名
           • 不要使用純數字、中文等命名，儘量使用英文字母來表示
           • 命名要有意義，儘量使別人一眼就知道這個類名的目的

       • 類選擇器——多類名

         • 多類名使用方式

         • <div class="red font20">艾希</div>

           • 【註意】：
             • 在標簽class屬性中寫 多個類名
             • 多個類名中間必須用空格分開
             • 這個標簽就可以分別具有這些類名的樣式

         • 使用場景

           • 可以把一些標簽相同的元素放在一個類里
           • 這些標簽就可以調用這個公共的類，然後在調用自己獨有的類

       • id選擇器

         • HTML元素以id屬性來設置id選擇器，CSS中id選擇器以“#”來定義

         • 語法：

           #id{
                屬性1：屬性值1；
                屬性2：屬性值2；
                屬性3：屬性值3；
           }

         • 【註意】樣式#定義，結構id調用，只能調用一次，不能被別的標簽調用

         • 與類選擇器的區別

           • 類選擇器好比人的名字，一個人可以有多個名字，同時一個名字也可以被多個人使用
           • id選擇器好比人的身份證號碼，全國唯一
           • id選擇器和類選擇器最大的區別在使用次數上
           • 類選擇器在修改樣式中用得最多，id選擇器一般用於頁面唯一性元素上，經常和js搭配調用

       • 通配符選擇器

         • 在CSS中，通配符選擇器使用“*”定義，他表示選取頁面中所有的元素

         • 語法

           *{
                屬性1：屬性值1；
                屬性2：屬性值2；
                屬性3：屬性值3；
           }

         • 【註意】

           • 通配符選擇器不需要調用，自動就給所有的元素使用樣式