<rp id="wnpn7"><ruby id="wnpn7"></ruby></rp>
<progress id="wnpn7"><track id="wnpn7"><rt id="wnpn7"></rt></track></progress>
<ruby id="wnpn7"></ruby>
<ruby id="wnpn7"><blockquote id="wnpn7"><div id="wnpn7"></div></blockquote></ruby>

    1. <em id="wnpn7"><ruby id="wnpn7"><input id="wnpn7"></input></ruby></em>
      1. <button id="wnpn7"><acronym id="wnpn7"></acronym></button><button id="wnpn7"><acronym id="wnpn7"></acronym></button>

        <rp id="wnpn7"><acronym id="wnpn7"></acronym></rp>

        <li id="wnpn7"><object id="wnpn7"><u id="wnpn7"></u></object></li>
        VB.net 2010 視頻教程 VB.net 2010 視頻教程 python基礎視頻教程
        SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
        當前位置:
        首頁 > 網站開發 > css >
        • div+css視頻教程之CSS繼承特性

         

        一、         CSS繼承特性

        1.      繼承性的運用

        CSS的一個主要特征就是繼承,它是依靠于祖先-后代的關系的。繼承是一種機制,它允許樣式不僅可以應用于某個特定的元素,還可以應用于它的后代。例如對<BODY>標簽聲明的顏色值也會應用到段落的文本中。下面舉例說明:
        CSS代碼:
        body{               /*標簽選擇器*/
        color:purple;             /*文本顏色*/
        }
        HTML代碼:
        <p>CSS的<strong>層疊和繼承</strong>深入探討</p>
         “CSS的層疊和繼承深入探討”這段話以紫顏色顯示,因為<p>和<strong>都是<body>的子標簽,它們會繼承父標簽的樣式風格。

        2.      繼承的局限性

        在CSS中,繼承是一種非常自然的行為,我們甚至不需要考慮是否能夠這樣去做,但是繼承也有其局限性。并不是所有的屬性都會自動傳給子元素,即有的屬性不會自動繼承父元素的屬性值。上面舉的文本顏色color屬性,子對象會繼承父對象的文本顏色屬性,但是如果給某個元素設置了邊框,它的子元素就不會自動加上一個邊框,因為邊框屬性是非自動繼承的。
        實際上,在CSS的規范中,每種CSS屬性都有一個默認的屬性值,有些屬性的默認值是“繼承”(inherit),這些屬性就會自動繼承父元素的屬性值了。而另外的屬性的默認屬性值不是“繼承”(inherit),比如邊框寬度的默認屬性值為0,因此邊框寬度屬性就不具有自動的繼承性,除非人為指定為繼承。多數邊框類屬性,比如象Padding(補白),Margin(邊界),背景和邊框的屬性都是不能繼承的。

        3.      繼承中的問題

        有時候繼承也會帶來些錯誤,比如說下面這條CSS定義:
        body{
        color:blue;
        }
        根據 CSS繼承規則,子元素從父元素繼承屬性。根據上面這條規則,站點的 body 元素中的文本以藍色顯示。子元素繼承最高級元素(在本例中是 body)所擁有的屬性(這些子元素諸如 p, td, ul,ol, li等),所有的body 的子元素都應該以藍色顯示文本,子元素的子元素也一樣。
        但在有些瀏覽器中這句定義會使除表格之外的文本變成藍色。從技術上來說,這是不正確的,但是它確實存在。所以我們經常需要借助于某些技巧,比如將CSS定義成如下樣式,就可以使表格內的文本也變成藍色。
         body,table,th,td{
        color:blue
        }

        4.      多重樣式混合應用中的沖突

        既然有了繼承性,那么在CSS的應用上可能會存在多個樣式同時應用到一個對象上的情形。例如:
        CSS代碼:
        p {
            color: green;
        }
        .red {
            color: red;
        }
        .purple {
            color: purple;
        }
        #p3 {
            color: blue;
        }
        HTML代碼:
        <p>示例文本p1(綠色)</p>
        <p class="red">示例文本p2(紅色)</p>
        <p id="p3" class="red">示例文本p3(藍色)</p>
        <p style="color:orange;">示例文本p4(橙色)</p>
        <p class="red purple">示例文本p5</p>
        代碼中一共有5組<p>標簽定義的文本,并聲明了4個選擇器,定義為不同的顏色,最終顯示效果如圖所示,現對每個<p>標簽最終顯示的效果說明如下:
        l 第1行文本沒有使用其他的樣式,因此這行文本顯示為標簽選擇器p中定義的綠色。
        l 第2行文本使用了類別樣式,因此這時產生了“沖突”。文本是按照標簽選擇器中定義的綠色顯示,還是按照類別選擇器中定義的紅色顯示呢?最終效果顯示是按照類別選擇器中定義的紅色,這說明類別選擇器的優先級高于標簽選擇器。
        l 第3行文本同時使用了類別樣式和ID樣式,這又產生了“沖突”。文本最終是按照按照ID選擇器中定義的藍色顯示,這說明ID選擇器的優先級高于類別選擇器。
        l 第4行文本同時使用了行內樣式和ID樣式,那么這時又以哪個為準呢?答案是行內樣式的優先級高于ID選擇器,文本顯示為橙色。
        l 第5行文本中使用了兩個類別樣式,它們的優先級相同,這時應以哪個為準呢?答案是在定義CSS樣式時,哪個的聲明在后面就顯示哪個的樣式。因為在本例的定義部分,“.purple”的聲明在“.red”之后,因此顯示為“.purple”中定義的紫色。
        綜上所述,優先級規則可以表示為:
        行內樣式 > ID樣式 > 類別樣式 > 標簽樣式
        在復雜的頁面中,某個元素有可能會從很多地方獲得樣式,例如:
        外部樣式表針對 h3 選擇器定義了三個屬性:
        h3 {
            color: red;
              text-align: left;
              font-size: 8pt;
          }
        頁面內的CSS代碼:
        h3 {
              text-align: right;
              font-size: 20pt;
          }
        頁面內的HTML代碼:
        <h3 style="text-align:center;">示例h3</h3>
        假如該頁面鏈接了外部樣式表,這樣在外部樣式表、內部樣式和行內樣式都定義了文字排列(text-alignment)屬性,外部樣式表和內部樣式還定義了字體尺寸(font-size)屬性,那么 h3 得到的樣式是什么呢?答案是顏色屬性繼承于外部樣式表顯示為紅色,文字排列(text-alignment)是按照行內樣式的定義,居中顯示,而字體尺寸(font-size)是按照內部樣式表中的規則顯示。
        綜上所述,優先級規則可以表示為:
        行內樣式 > 內部樣式 > 外部樣式

        【CSS樣式】面板

        執行【窗口】│【CSS樣式】命令,或按快捷鍵<Shift>+<F11>,可打開【CSS樣式】面板。如圖6-1所示。使用【CSS樣式】面板可以創建、查看或編輯樣式屬性。
        相關教程
                
        免费看成年人视频大全_免费看成年人视频在线观看