pg宝石传奇网站进不去

書名： HTML5 移動Web開發(fā)從入門到精通（微課精編版）
作者名：前端科技
本章字數(shù)： 1112字
更新時間： 2019-11-15 20:21:47

2.7　CSS特性

CSS樣式具有兩個特性：繼承性和層疊性，下面分別進行說明。

2.7.1　CSS繼承性

CSS繼承性是指后代元素可以繼承祖先元素的樣式。繼承樣式主要包括字體、文本等基本屬性，如字體、字號、顏色、行距等，對于邊框、邊界、補白、背景、定位、布局、尺寸等類型屬性是不允許繼承的。

提示：靈活應用CSS繼承性，可以優(yōu)化CSS代碼，但是繼承的樣式的優(yōu)先級是最低的。

【示例】下面的示例在body元素中定義整個頁面的字體大小、字體顏色等基本頁面屬性，這樣包含在body元素內(nèi)的其他元素都將繼承該基本屬性，以實現(xiàn)頁面顯示效果的統(tǒng)一。

新建網(wǎng)頁，保存為test.html，在<body>標簽內(nèi)輸入如下代碼，設(shè)計一個多級嵌套結(jié)構(gòu)。

在<head>標簽內(nèi)添加<style type="text/css">標簽，定義內(nèi)部樣式表，然后為body元素定義字體大小為12像素，通過繼承性，則包含在body元素的所有其他元素都將繼承該屬性，并顯示包含的字體大小為12像素。在瀏覽器中預覽，顯示效果如圖2.25所示。

    body {font-size:12px;}

圖2.25　CSS繼承性演示效果

2.7.2　CSS層疊性

CSS層疊性是指CSS能夠?qū)ν粋€對象應用多個樣式的能力。

【示例1】新建網(wǎng)頁，保存為test.html，在<body>標簽內(nèi)輸入如下代碼。

    <div id="wrap">看看我的樣式效果</div>

在<head>標簽內(nèi)添加<style type="text/css">標簽，定義一個內(nèi)部樣式表，分別添加以下兩個樣式。

    div {font-size:12px;}
    div {font-size:14px;}

兩個樣式中都聲明了相同的屬性，并應用于同一個元素上。在瀏覽器中測試，則會發(fā)現(xiàn)最后字體顯示為14像素，也就是說14像素字體大小覆蓋了12像素字體大小，這就是樣式層疊。

當多個樣式作用于同一個對象，則根據(jù)選擇器的優(yōu)先級，確定對象最終應用的樣式。

　標簽選擇器：權(quán)重值為1。
　偽元素或偽對象選擇器：權(quán)重值為1。
　類選擇器：權(quán)重值為10。
　屬性選擇器：權(quán)重值為10。
　ID選擇器：權(quán)重值為100。
　其他選擇器：權(quán)重值為0，如通配選擇器等。

然后，以上面權(quán)值數(shù)為起點來計算每個樣式中選擇器的總權(quán)值數(shù)。計算規(guī)則如下。

　統(tǒng)計選擇器中ID選擇器的個數(shù)，然后乘以100。
　統(tǒng)計選擇器中類選擇器的個數(shù)，然后乘以10。
　統(tǒng)計選擇器中標簽選擇器的個數(shù)，然后乘以1。

以此類推，最后把所有權(quán)重值數(shù)相加，即可得到當前選擇器的總權(quán)重值，最后根據(jù)權(quán)重值來決定哪個樣式的優(yōu)先級大。

【示例2】新建網(wǎng)頁，保存為test.html，在<body>標簽內(nèi)輸入如下代碼。

    <div id="box" class="red">CSS 選擇器的優(yōu)先級 </div>

在<head>標簽內(nèi)添加<style type="text/css">標簽，定義一個內(nèi)部樣式表，添加如下樣式。

    body div#box { border:solid 2px red;}
    #box {border:dashed 2px blue;}
    div.red {border:double 3px red;}

對于上面的樣式表，可以這樣計算它們的權(quán)重值：

body div#box的權(quán)重值= 1 + 1 + 100 = 102。

#box的權(quán)重值= 100。

di.red的權(quán)重值= 1 + 10 = 11。

因此，最后選擇器的優(yōu)先級為body div#box大于#box，#box大于di.red。所以最終看到的顯示效果為2像素寬的紅色實線，在瀏覽器中預覽，顯示效果如圖2.26所示。

圖2.26　CSS優(yōu)先級的樣式演示效果

提示：與樣式表中樣式相比，行內(nèi)樣式優(yōu)先級最高。相同權(quán)重值時，樣式最近的優(yōu)先級最高。使用!important命令定義的樣式優(yōu)先級絕對高。!important命令必須位于屬性值和分號之間，如#header{color:Red!important;}，否則無效。

官术网_书友最值得收藏!

HTML5 移動Web開發(fā)從入門到精通（微課精編版）

2.7 CSS特性

2.7.1 CSS繼承性

2.7.2 CSS層疊性

2.7　CSS特性

2.7.1　CSS繼承性

2.7.2　CSS層疊性