1. 程式人生 > >前端入門學習筆記4

前端入門學習筆記4

好吧,我承認今天划水了,原本想今天把CSS有關知識全部過一遍,但是emmmmm,算了,先把今天所學的總結一下吧。

今天沒有進行實地操作,一直在看相關知識點,接著昨天的選擇器開始繼續總結。

偽選擇器:

1.偽類(Pseudo-class)

一個css偽類是以:開頭,新增到選擇器末尾的一個關鍵字,可以使樣式在特定狀態下呈現,比如滑鼠懸停時文字變色等。

2.偽元素(Pseudo-element)

和偽類有點類似,但是是以::開頭。

組合器和多重選擇器,顧名思義就是講多個選擇器結合起來,規則如下:

然後就是CSS中的數值和單位,對於尺寸大小有px,em,rem,百分比等,對於顏色有關鍵字,十六進位制,rgb,hsl等。

px就是畫素值,16px代表文字大小為16個畫素的大小,是絕對值,不會隨著盒子的大小而改變,em是以父元素字型大小為比例,例如父元素字型大小為16px,若設定子元素字型大小為2em,實際字型大小為32px,rem和em類似,只不過是以根元素字型大小作參考。

顏色中有些關鍵字可以代替顏色,例如black就是黑色,red就是紅色(color:black)。同時顏色也可以用十六進位制表示,例如color:#707070。也可以用rgb值,color:rgb(255,255,0),我個人覺得這種表現方式更直觀,另外還有一個rgba,a是代表透明度,範圍是0-1。HSL的意思是表示色度,飽和度,亮度,色度的範圍是0-360,飽和度和亮度的範圍是0%到100%,同樣也有HSLA,A代表透明度。HSL可以視覺化為一個顏色柱,理解起來更直觀。

圓柱體的柱面代表色度,半徑代表飽和度,高代表亮度。

然後有一個重點就是,選擇器之間的優先順序,ID選擇器大於類選擇器,屬性選擇器,偽類大於元素選擇器,偽元素。同層次之間,按照次序覆蓋前面的屬性。

對於各個組合選擇器和多重選擇器的優先順序,有一種計算方式。

如若在屬性值後新增! important,那麼這個屬性則會變得無比重要,不會被別的規則中的屬性覆蓋,除非有比當前選擇器更高階的選擇器的規則屬性中又添加了此語句。

今天就這樣吧,明天將要學習CSS排版,划水自重hhhhh。