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

標籤：enter   定義   關鍵字   其他   contain   div   多重   back   pre   

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的基本文法、取值與單位