1. 程式人生 > >css專業術語筆記

css專業術語筆記

tco tle css 屬性選擇器 wid ngs id選擇器 背景圖 ntc

1. 屬性

如height、color等,稱作css的屬性。

2. 值

在css中,如:10px, 50%, #ccc等這些都稱作css的值。比較常見的類型值有:整數值,數值,百分比值,長度值,顏色值

3. 關鍵字

特指css裏面一些很關鍵的單詞。如solid、absolute、block等都是關鍵字

4. 變量

css中目前可以稱為變量的很少,如:currentColor

5. 長度單位

(1). 相對長度單位:分為相對字體長度單位和相對視區長度單位

  • 相對字體長度單位,如em、ex、rem、ch(字符0的寬度)

  • 相對視區長度單位, 如vh、vw、vmin和vmax

(2). 絕對長度單位:如px、pt、cm等

6. 功能符

值以函數的形式指定,主要用來表示顏色(rgba和hsla)、背景圖片地址(url)、計算(calc)、過渡效果等。如rgba(0,0,0,0.5)、url(‘a.png‘)、scale(-1)

7. 屬性值

屬性冒號後面的所有內容統一稱為屬性值。例如:1px solid rgb(0,0,0)

8. 聲明

屬性名加上屬性值就是聲明,例如: color: transparent;

9. 聲明塊

聲明塊是花括號{} 包裹的一系列聲明,例如:


{

    height: 100px;

    color: #ccc;

}

10. 規則或規則集

出現了選擇器,而且後面還跟著聲明塊。如


.nav {

    color: tansparent;

    width: 23px;

}

11. 選擇器

  • 類選擇器,以"."開頭的選擇器,很多元素可以應用同一個類選擇器 如:.nav、.active

  • ID選擇器 ,以"#"開頭的選擇器,一般指向唯一元素。如:#header、#page

  • 屬性選擇器, 指含有[]的選擇器, 如: input[type="text"] { }、[title~="css-world"] { }

  • 偽類選擇器,指前面有個英文冒號的選擇器, 如::first-child 、:nth-child(1)、:hover

  • 偽元素選擇器, 有兩個連續英文冒號的選擇器, 如:::after、 ::befor

12. 關系選擇器

  • 後代選擇器, 選擇後代元素,空格連接, 如: .parent .child { }

  • 相鄰後代選擇器(子選擇器), 選擇合乎規則的第一層子元素(兒子),孫子、重孫、第二次子元素等忽略, 使用>連接,(IE7以上版本)如: .parent>.first-child { }

  • 兄弟選擇器,選擇當前元素後的所有兄弟元素, ~連接, (IE7以上版本)如: .nav~.siblings { }

  • 相鄰兄弟選擇器, 選擇當前元素相鄰的兄弟元素, + 連接,(IE7以上版本) 如: .header+.nav { }

13. @規則

以@字符開始的一些規則,如媒體查詢@media、字體@font-face

css專業術語筆記