2018.3.8自學筆記
今天是三八婦女節,首先祝廣大的婦女們節日快樂!
今天的課比較多,所以晚上就只學了一節的內容,現在已經學到了CSS樣式優先順序這部分,首先要搞清楚什麼是標籤,類選擇器,ID選擇器,這些東西的概念並不難,但是如果比較長時間沒有接觸它的話,就很容易忘掉,還是要在實踐中進行加深鞏固。下面介紹一下我今天學習了什麼
1.CSS的繼承性
有些CSS樣式是可以繼承的,比如顏色;而有些不能進行繼承,如邊框。所謂的繼承就是指某個HTML標籤的樣式可以繼承給後代,即後代的顏色也會隨著大標籤進行改變,例如在p中的span圈起來的字的顏色就是可以變的。還有一點後面會涉及到,就是繼承的權值特別低,幾乎是最低的。往往在很多程式碼中看不出是否存在繼承,但是在判斷顏色的優先順序時就要仔細判斷了。
2.CSS樣式的權值規則
CSS樣式 | 例子 | 權值 |
標籤 | p{color:red;} | 1 |
類選擇器 | .first{color:red;} | 10 |
ID選擇器 | #first{color:red;} | 100 |
繼承 | 0.1 | |
!improtant | p{color:red!improtant;} | 最大 |
舉幾個例子
1.#first p{color:red;} 權值:100+1=101
2.p span .first{color:red;} 權值:1+1+10=12
權值的作用:
當瀏覽器同時發現有很多控制同一屬性的樣式時,哪個權值高,就用哪種
優先順序:內部式>嵌入式>外部式
3.層疊
是指同一個HTML檔案中有很多權值相同的樣式存在時,瀏覽器就會採用就近原則,哪一個比較靠近目標元素,就根據哪一個變化,也可以說是越靠外
4.重要性
這個就是上文提到的!improtant,它的權值是最大的,而且要寫在分號之前
補充:
樣式的優先順序:瀏覽器預設的樣式<網頁製作者樣式<使用者自己設定的樣式
好了,今天就介紹這麼多了,雖然今天的內容不多,但是我都搞懂了。同時我也明白了一點,學習就是循序漸進的過程,要每次都把學習的知識搞明白,也要注意複習以前的知識,不要怕忘記,後面都會撿起來的,加油,腳踏實地!