Web前端學習筆記（二）——CSS中的選擇符

說明：最近整理硬碟，發現好幾篇自己以前學習web前端技術時所記錄的筆記，覺得還是頗有價值的，因此打算陸續整理出來。

好吧，在講之前先給大家分享一件往事，以提醒我自己和大家對知識點的把握一定要精準。那是有一年我去找實習，在參加一個公司的筆試時內有一道題目是讓說出css有哪些選取器。只要學css就沒有人不知道#id_1 {}，.class_1{}這些東東的，可偏偏我悲催就悲催在我壓根不知道這些東西還有個名字叫選取器（選擇符）！所以最後的結果自不必說。大家盡情鄙視我吧。不過也給大家提個醒，有些名詞術語我們該記住的還是一定要費點心記住，千萬不要犯我這麼愚蠢的錯誤。好了，書歸正傳，下面是筆記的內容。

1  css基本文法

    css格式：選擇符 {規則；規則；}
    css規則的組成：屬性：值

2  css使用時的一些注意事項
（1）    應當用UTF-8來給css檔案編碼。
（2）    css代碼應當小寫。【註：實際上，選擇符區分大小寫，屬性和值不區分大小寫。但在html中css的選擇符也不區分大小寫，XHTML中才區分。】
（3）    元素名、類和id只能由字母、數字和底線、連字號和其他unicode字元構成。第一個字元不能是數字或連字號。類名和id中不能包含除底線和連字號之外的標點符號。
（4）    可以通過把多個類名用空格隔開，為元素賦予多重類，如class="class1 class2 class3"。
（5）    常量值不用引號。
（6）    反斜線（\）可以在某些不能直接顯示字元的地方把它們鑲嵌進去。
（7）    字串裡可以包括小括弧、逗號、空格、單引號、雙引號，不過要用反斜線轉義。
（8）    分號用於終止css規則和@import語句。
（9）    規則集指在大括弧中包含了多條規則。
（10）  CSS注釋以“/*”開始，以“*/”結束，並且不能嵌套。

3  css選擇符的優先順序（按優先順序最低到最高）

    通配選擇符
    元素選擇符
    類、屬性和偽類選擇符
    ID選擇符
   ！important通配選擇符
   ！important元素選擇符
   ！important類、屬性和偽類選擇符

   ！importantID選擇符

4  css的邊框屬性

（1）邊框風格屬性(border-style)

這個屬性用來設定上下左右邊框的風格，它的值如下：

none (沒有邊框，無論邊框寬度設為多大)

dotted (點線式邊框)

dashed (破折線式邊框)

solid (直線式邊框)

double (雙線式邊框)

groove (槽線式邊框)

ridge(脊線式邊框)

inset (內嵌效果的邊框)

outset (突起效果的邊框)

（2）邊框寬度屬性(border-width)

這個屬性用來設定上下左右邊框的寬度，它的值如下：

medium (是預設值)

thin (比medium細)

thick (比medium粗)

用長度單位定值。可以用絕對長度單位(cm, mm, in, pt, pc)或者用相對長度單位 (em, ex, px)。

（3）邊框顏色屬性(border-color)

這個屬性用來設定上下左右邊框的顏色。

（4）邊框屬性(border)

這個屬性是邊框屬性的一個快捷的綜合寫法，它包含border-width, border-style和border-color。例句如下：

.d1 {border:5px solid gray;}

（5）單邊邊框屬性

上下左右四個邊框不但可以統一設定，也可以分開設定。

設定上邊框屬性，你可以使用border-top, border-top-width, border-top-style, border-top-color。

設定下邊框屬性，你可以使用border-bottom, border-bottom-width, border-bottom-style,border-bottom-color。

設定左邊框屬性，你可以使用border-left, border-left-width, border-left-style, border-left-color。

設定上邊框屬性，你可以使用border-right, border-right-width, border-right-style,border-right-color。