css語法包含如下部分：

• 　選擇器:用於選擇需要添加樣式的元素。
• 屬性（property）:樣式的屬性名稱,例如color代表顏色。
• 　取值與單位：屬性對應的值以及單位。
• 　語法規則：css的某些固定語法。
• 　註釋：用戶對css的程序描述，不執行。

css的基本語法規則

• 忽略大小寫（但在定義類選擇器時識別大小寫），建議使用小寫。
• 多重聲明：使用多個屬性以及取值同時渲染一組標簽。

  1 p {
  2 text-align: center;
  3 color: black;
  4 font-family: arial;
  5 }
  6 <!--
  7 註意開始括號與結束括號的位置
   
  8 屬性值要有一個tab鍵的縮進
  9 -->

css的取值與單位：css通過取值與單位對屬性進行描述，可分為如下三類

1. 長度類取值單位：用於修飾長度，例如高度寬度等。

   1. 絕對長度單位包括有： cm（厘米）, mm（毫米）, in（英寸）, pt（點1pt = 1/72in ）, pc（派卡1pc = 12pt ）, px（像素）。

      1 <div style="width: 100px;background-color: yellow;">
      2         寬度為100px，背景色為黃色
      3 </div>
      4 <!--常用的單位取值為px-->

   2. 相對長度單位：按照一定比例換算後計算長度，em,rem,%都是相對長度單

      <!--常用的單位取值為rem（css3標準），%-->

      • em（相對於當前標簽內文本的字體尺寸）

        <div style="width: 10em>
        <div style="width: 8em; font-size: 12px;">
        </div>
        </div>
        <!--瀏覽器的默認字體大小為16px，字體屬性具備繼承特性，可繼承父容器的字體屬性值-->
        <!--瀏覽器都有最小字體限定，例如chrome最小字體為12px，通過特殊屬性可以調節
         
        -->

      • rem（相對於html標簽內文本的字體尺寸）

        html {
            font-size: 30px;
        }
        <div style="width: 10rem; ">
        </div>
        <!--rem是css3標準單位，因此在低版本的pc瀏覽器中無法兼容-->
        <!--rem常用在手機端開發，根據不同屏幕給html設定不同的字體
        在其他標簽中使用rem作為長度單位，從而完成響應式布局-->

      • 百分比（相對於父容器相同屬性的比例）

        <div style="width: 50%; ">
                <div style="width: 50%; ">
                </div>
        </div>
        <!--百分比是css2的取值單位，可以在pc端完成響應式布局-->

        　　

2. 顏色類取值單位：用於修飾字體、背景等屬性

   • HEX:#ffffff：以16進制表示顏色，但是不能表示透明(最常用) 。

   • RGBA: rgba(0,0,0,0.5)，由光的三原色紅色(R)、綠色(G)、藍色(B)以及透明組合而成。優點是支持透明。（css3標準）

   • HSL:hsl(30%,50%,50%)，由色調(H)、飽和度(S)、亮度(L)三個顏色通道，按百分比組合而成。

   • RGB:rgb(128,128,128)，由光的三原色紅色(R)、綠色(G)、藍色(B)，按比例組合而成。

   • 關鍵字：color:red，以顏色的英文名稱表示顏色，但只能表示少量顏色

     1 <style type="text/css"><!--使用style標簽包裹-->
     2     .container{/*先擇器*/
     3         background-color: red;/*關鍵字*/
     4         color: hsl(30%,50%,50%);/*HSL*/
     5         color: rgb(128,128,128);/*RGB*/
     6         color: rgba(0,0,0,0.5);/*RGBA*/
     7         color: #00FFFF;/*HEX*/
     8     }
     9 </style>

3. 文本類特殊取值：用於修飾文本的特殊取值。

   • inherit：聲明當前元素的屬性繼承父容器屬性，文本類屬性的默認取值。

   • initial ：聲明當前元素的屬性為瀏覽器的默認值。（css3,在IE中不兼容）

     <div style="font: ‘微軟雅黑‘ bold 30px;">
         <div style="font: inherit;">
             微軟雅黑
         </div>
         <div style="font: initial;">
             默認字體
         </div>
     </div>

web（六）css的基本語法、取值與單位