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

（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。

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

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

Web前端學習（二） CSS3

Web前端開發學習筆記（二）

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

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

Web前端學習（二） CSS3

Web前端開發學習筆記（二）

相關推薦