css中各種層疊樣式執行個體匯總

來源:互聯網
上載者:User
CSS(層疊樣式表)用於規定HTML文檔的呈現形式。凡事都有個先後順序,凡物都有個論資排輩。一般情況下,看不出什麼差異,即所謂的眾生平等。但是,當發生衝突發生糾葛的時候,顯然,是不可能做到完全等同的,先後順序,身份差異就顯現出來了。層疊就是瀏覽器對多個樣式來源進行疊加,最終確定結果的過程。本篇文章就是要聊一聊css層疊樣式的具體作用。

首先可以學習php中文網相關的免費課程

1. 學習《彈指間學會HTML+CSS》中的 CSS層疊 教程

css層疊樣式

1. CSS樣式繼承和層疊

特點:標籤選取器會對當年頁面當中所有的指定標籤進行選擇;標籤選取器對代碼的當前標籤階層沒有任何關聯,只要是在當前頁面上,都能被選中。

id選擇:需要先指定一個標籤設定id值(id值不能重複是整個頁面中唯一的)。 class選擇:通過給標籤取類名,通過類別選取器選擇指定標籤。

2. 詳解CSS層疊機制

層疊樣式表中的層疊意味著樣式會從文檔結構中的一個層次傳遞到另一個層次,其作用是讓瀏覽器來決定在諸多源中,為某個標籤應用來自哪個源的樣式屬性。

層疊是一種強大的機制。理解層疊有助於以最經濟和最容易維護的方式來編寫CSS,也有助於根據你的意願建立出最理想的文檔外觀。

3. 詳解CSS繼承特性和層疊特性

第一個P沒有使用選取器,所以採用HTML預設的顯示顏色(黑色)

第二個P使用了類別選取器,所以優先採用類別選取器的顏色(紅色)

第三個P使用了ID和類兩個選取器,由於ID選取器的優先順序高於類別選取器,所以顏色顯示為藍色

第四個P使用了行內選取器和ID選取器,由於行內選取器優先順序高於ID選取器,所以顏色顯示為黃色

第五個P同時使用了兩個類別選取器,瀏覽器在解釋網頁時以第一個類別選取器定義的顏色為準,所以顏色顯示為紫色

第六個P同時使用了兩個ID選取器,但由於ID選取器只能同時用於一個標記且全域唯一,所以瀏覽器認為這是一個非法的,顏色以其預設值顯示(黑色)

4. 詳細說明CSS層疊樣式表

[attribute]選擇具有attribute屬性的元素。

[attribute=value]選擇具有attribute屬性且屬性值等於value的元素。

[attribute~=value]選擇具有attribute屬性且屬性值為一用空格分隔的字詞列表,其中一個等於value的元素。

[attribute|=value]選擇具有att屬性且屬性值為以val開頭並用串連符"-"分隔的字串的E元素。

[attibute^=value]匹配具有attribute屬性、且值以valule開頭的E元素

[attribute$=value]匹配具有attribute屬性、且值以value結尾的E元素

[attribute*=value]匹配具有attribute屬性、且值中含有value的E元素

5. 分析CSS樣式表、繼承、層疊和屬性的值

CSS裡有控制基本格式的屬性(如font-size和color等),有控制布局的屬性(如position和float等),還有決定訪問者列印時在哪裡換頁的列印控制元素。除此之外還有其他很多的屬性。
樣式表中包含定義網頁外觀的規則,每條規則都有兩個主要部分:選取器(selection)和聲明塊(declaration)。選取器決定哪些元素受影響,聲明塊有一個或多個屬性-值對組成,制定應該怎麼做。

6. CSS特殊性、繼承與層疊

標記為!important的聲明被稱為重要聲明,它沒有特殊性,不過要與非重要聲明分開考慮。

具體而言:非重要聲明分為一組,它們之間的衝突使用特殊性解決;重要聲明分為一組,它們之間的衝突內部解決;重要聲明總是比非重要聲明優先。

相關問答

1. 一個沒有層疊內容相關的元素如何比有的元素 z-index 更大?

2. ios webview 載入html檔案,在9.2下沒問題,但在8.1下底部出現橫向排版層疊

【相關推薦】

1. php中文網免費視頻教程:《php.cn獨孤九賤(2)-css視頻教程》

2. php中文網相關文章:CSS讓DIV重疊執行個體總結

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.