<dl id="xuefh"></dl>
<cite id="xuefh"></cite>
  • <optgroup id="xuefh"></optgroup>
    <span id="xuefh"><sup id="xuefh"></sup></span>
    <span id="xuefh"><sup id="xuefh"></sup></span>
  • <optgroup id="xuefh"><li id="xuefh"></li></optgroup>
    <track id="xuefh"></track>

      1. <track id="xuefh"><em id="xuefh"></em></track><track id="xuefh"></track>

        在設計網頁時如果css樣式發生沖突

        • 2018-08-20 08:08:03
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.anthonycruises.com

        在我們設計網頁時,如果特殊性相等的兩個規則同時應用到同一個元素會怎么樣呢?瀏覽器如何解決這個沖突?例如,假設有以下規則:

        h1 {color:red;}

        h1 {color:blue;}

        哪一個會占上風?這兩個規則的特殊性都是0,0, 0,1,所以它們的權重相等,都應當應用到元素。但這是不可能的,因為一個元素不可能既是紅色又是藍色。但是到底應用哪一個規則呢?

        “層疊樣式表”這個名字可能會提供一點提示。CSS所基于的方法就是讓樣式層疊在一起,這是通過結合繼承和特殊性做到的。CSS2.1的層疊規則相當簡單:

        找出所有相關的規則,這些規則都包含與一個給定元素匹配的選擇器。

        按顯式權重對應用到該元素的所有聲明排序。標志!important的規則的權重要高于沒有!important標志的規則。按來源對應用到給定元素的所有聲明排序。共有3種來源:網頁設計師、讀者和用戶代理。正常情況下,創作人員的樣式要勝過讀者的樣式。有!important標志的讀者樣式要強干所有其他樣式,這包括有!important標志的網頁設計師樣式。網頁設計師樣式和讀者樣式都比用戶代理的默認樣式要強。

        按特殊性對應用到給定元素的所有聲明排序。有較高特殊性的元素權重要大于有較低特殊性的元素。

        按出現順序對應用到給定元素的所有聲明排序。一個聲明在樣式表或文檔中越后出現,它的權重就越大。如果樣式表中有導入的樣式表,一般認為出現在導入樣式表中的聲明在前,主樣式表中的所有聲明在后。

        為了淸楚地說明如何做到這些,下面來看三個例子,由此介紹上述4條層疊規則中的后三條規則。

        按權重和來源排序

        根據第二條規則,如果兩個樣式規則應用到同一個元素,而且其中一個規則有!important標志,這個重要規則將勝出:

        p {color:gray !important;}

        <p style="color:black;">Well,<em>hello</em> there!</p>

        盡管段落的style屬性中指定了一個顏色,不過有!important標志的規則會勝出,所以段落為灰色。em元素也會繼承這個灰色。

        另外,還要考慮規則的來源。如果一個元素與網頁設計師樣式表中的正常權重樣式匹配,另外還與讀者樣式表中的正常權重樣式匹配,則會使用網頁設計師的樣式。例如,假設以下樣式分別來自注釋中指定的來源:

        p em {color: black;}/* author's style sheet */

        p em {color: yellow;}/* reader's style sheet */

        在這種情況下,段落中強調的文本為黑色,而不是黃色,因為有正常權重的網頁設計師樣式要優先于正常權重的讀者樣式。不過,如果兩個規則都標志有!important,情況就不同了:

        p em {color: black !important;}/* author's style sheet */

        p em {color: yellow !important;}/* reader's style sheet */

        現在段落中的強調文本將是黃色而不是黑色。

        一般地,用戶代理的默認樣式(通常受用戶首選項的影響)也要考慮在內。默認樣式聲明在所有聲明當中影響是最小的。因此,如果網頁設計師定義的一個規則應用到錨(例如,聲明這些錨顏色為white),該規則會覆蓋用戶代理的默認樣式。

        總結一下,在聲明權重方面要考慮5級。權重由大到小的順序依次為:

        讀者的重要聲明

        創作人員的重要聲明

        創作人員的正常聲明

        讀者的正常聲明

        用戶代理聲明

        網頁設計師通常只需要考慮前4個權重級別,因為任何聲明都會勝過用戶代理樣式。

        按特殊性排序

        根據第3條規則,如果向一個元素應用多個彼此沖突的聲明,而且它們的權重相同,則要按特殊性排序,最特殊的聲明最優先。例如:

        p#bright {color: silver;}

        p {color: black;}

        <p id="bright">Well, hello there!</p>

        給定以上所示的規則,段落的文本將是銀色,為什么呢?因為p#bright 的特殊性(0,1, 0,1)大于p的特殊性(0,0, 0,1),盡管后一條規則在樣式表中較后出現。

        按順序排序

        最后,根據第4條規則,如果兩個規則的權重、來源和特殊性完全相同,那么在樣式表中后出現的一個會勝出。因此,再來看前面的例子,在文檔樣式表中可以看到以下兩個規則:

        h1 {color: red;}

        h1 {color: blue;}

        因為指定blue的規則在樣式表中較后出現,所以文檔中所有h1元素的color值將是blue,而不是red。倘若文檔中包含的規則比導入的規則權重高,那么文檔中包含的規則將勝出。即使這個規則是文檔樣式表的一部分而不是元素style屬性的一部分,也是如此??紤]以下規則:

        p em {color: purple;}/* from imported style sheet */

        p em {color: gray;}/* rule contained within the document */

        在這種情況下,以上第二個規則會勝過導入的規則,因為第二個規則是文檔樣式表的一部分。

        根據層疊的第4條規則,認為元素style屬性中指定的樣式位于文檔樣式表的最后,即放在所有其他規則的后面。不過,這一點沒有實際意義,因為在CSS2.1中內聯樣式聲明的特殊性要高于所有樣式表選擇器。

        注意:要記住,在CSS2中,內聯樣式聲明與ID選擇器的特殊性相等。在一個CSS2(而非CSS2.1)用戶代理中,認為style屬性聲明出現在文檔樣式表的最后,并且與樣式表中所有其他聲明一樣,按權重、來源、特殊性和順序排序。

        正是由于這種按順序排序,所以才有了通常推薦的鏈接樣式順序。一般建議按link-visited-hover-active (LVHA)的順序聲明鏈接樣式如下:

        :link {color: blue;}

        :visited {color: purple;}

        :hover {color: red;}

        :active {color: orange;}

        根據這一章的介紹,現在你知道了所有這些選擇器的特殊性都是一樣的:0,0,1,0。因為它們都有相同的權重、來源和特殊性,因此與元素匹配的最后一個選擇器才會勝出。正在“點擊”的未訪問鏈接可以與其中3個規則匹配--:link.:hover和:active--所以在這三個規則當中最后聲明的一個將勝出。如果按照LVHA順序,:active 會勝出,這可能正是創作人員所期望的。

        假設你想忽略這種常用的順序,而是按字母順序排列鏈接樣式。這就會得到:

        :active {color: orange;}

        :hover {color: red;}

        :link {color: blue;}

        :visited {color: purple;}

        按照這種順序,任何鏈接都不會顯示:hover或:active樣式,因為:link和:visited 規則后出現。所有鏈接都必須要么是已訪問,要么是未訪問的,所以:link和:visited 樣式總是會覆蓋:hover規則。

        下面考慮網頁設計師可能想使用的LVHA順序的一個變種。采用這種順序,只有未訪問的鏈接會有懸停樣式,已訪問的鏈接沒有這種樣式。已訪問和未訪問的鏈接都可以有激活樣式(active):

        :link {color: blue;}

        :hover {color: red;}

        :visited {color: purple;}

        :active {color: orange;}

        當然,有時如果所有規則試圖設置同一個屬性,就會出現這種沖突。如果各規則為不同的屬性設置樣式,那么順序無關緊要。在下面的情況中,鏈接樣式可以按任何順序指定,而且不論采用何種順序都能正常起作用:

        :link {font-weight: bold;}

        :visited {font-style: italic;}

        :hover {color: red;}

        :active {background: yellow;}

        你可能還發現,:link和:visited樣式的順序并不重要??梢园碙VHA或VLHA的順序指定樣式,這沒有任何不良后果。不過,LVHA更好一些,因為這是CSS2規范中推薦的順序,另一個原因是LVHA拼作“LoVe-HA!”,這個詞更易于記憶,流通很廣。

        有關系。鼠標停留的未訪問鏈接不會與針對懸停狀態已訪問鏈接的規則相匹配,反之亦然。如果要增加激活狀態樣式,就要重新考慮順序了,請看下面的例子:

        :link {color: blue;}

        :visited {color: purple;}

        :link:hover {color: red;}

        :visited:hover {color: gray;}

        :link:active {color: orange;}

        :visited:active {color: silver;}

        如果把激活樣式移到懸停樣式前面,它們會被忽略。同樣地,這是由于特殊性沖突所致??梢韵蜴溨性黾痈嗟膫晤悂肀苊膺@種沖突,如下:

        :link:hover:active {color: orange;}

        :visited:hover:active {color: silver;}

        通過將偽類鏈接在一起,能緩解特殊性和順序帶來的問題,如果Internet Explorer以前就一直支持這種串鏈的偽類,它的應用可能會更廣(有關的更多內容見第2章)。

        非CSS表現提示

        網頁文檔有可能包含非CSS的表現提示,例如font元素。非CSS提示被處理為特殊性為0,并出現在網頁設計師樣式表的最前面。只要有網頁設計師或讀者樣式,這種表現提示就會被覆蓋,但是用戶代理的樣式不能將其覆蓋。

        小結

        層疊樣式表中最基本的一個方面可能就是層疊了——沖突的聲明要通過這個層疊過程排序,并由此確定最終的文檔表示。這個過程的核心是選擇器及其相關聲明的特殊性,以及繼承機制。

        在下一章中,我們將介紹多種用于為屬性值提供含義的單位,討論完下一章后,你就能清楚地了解全部基礎知識,并做好進一步學習指定文檔樣式的屬性的準備。

        當前文章標題:在設計網頁時如果css樣式發生沖突

        當前URL:http://www.anthonycruises.com/news/wzzz/css-conflict.html

        上一篇:網頁結構和層疊樣式的繼承屬性

        下一篇:網頁設計中的顏色數值設置

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
        欧美xxxx欧美精品_精品国产yw在线观看_免费精品国自产拍在线_思思久久精品一本到99热