什麼是css繼承-css教學-PHP中文網

首頁

web前端

css教學

什麼是css繼承

青灯夜游

Apr 02, 2021 pm 03:30 PM

繼承是一種規則，它允許樣式不僅套用於某個特定html標籤元素，還可套用於其後代元素。 CSS繼承是指設定父級的CSS樣式，父級及以下的子級元素都具有此屬性。 CSS繼承的作用：為父元素設定一些屬性，子元素也可以使用。

什麼是css繼承

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

CSS繼承

繼承是一種規則，它允許樣式不僅套用於某個特定html標籤元素，而且套用於其後代。

CSS繼承可定義為特定的css屬性向下傳遞到子孫元素，就是指被包在內部的標籤將擁有外部標籤的樣式，即子元素可以繼承父元素的屬性。

繼承性的作用：為父元素設定一些屬性，子元素也可以使用。

例如下面的程式碼，div包含2個p標籤，1個span標籤，當給div設定字體顏色為紅色時，他的子標籤會繼承父元素的屬性，因而會顯示紅色。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>苹果</p>
        <p>香蕉</p>
        <span>葡萄</span>
    </div>
</body>
</html>

什麼是css繼承

當然了，上述例子中我們的屬性是可以被繼承的，但是並不是所有屬性都可以被繼承的，那麼css有哪些屬性可以繼承呢？下面我們來總結一下。

css有哪些屬性可以繼承？

1、css中有繼承性的屬性之字體屬性中的：

font：字體。 font-family：規定元素的字體。 font-weight：設定字體的粗細。

font-size：設定字體的尺寸。 font-style：定義字體的風格。

font-variant：設定小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會被轉換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。

font-stretch：對目前的 font-family 進行伸縮變形。所有主流瀏覽器都不支援。

font-size-adjust：為某個元素規定一個 aspect 值，這樣就可以保持首選字體的 x-height。

2、css中有繼承性的屬性之文字屬性中的：

text-indent：文字縮排。 text-align：文字水平對齊。 line-height：行高。 word-spacing：增加或減少字間的空白（即字間隔）。

letter-spacing：增加或減少字元間的空白（字元間距）。 text-transform：控製文字大小寫。 direction：規定文本的書寫方向。

color：文字顏色

3、css中有繼承性的屬性之元素可見性：

visibility：規定元素是否可見。

4、css中有繼承性的屬性之表格版面屬性：

caption-side：設定表格標題的位置。 border-collapse：設定是否將表格邊框折為單一邊框。

border-spacing：設定分隔單元格邊框的距離。 empty-cells：設定是否顯示表格中的空白儲存格。

table-layout：設定顯示單元、行和列的演算法。

5、css中有繼承性的屬性之列表佈局屬性：

list-style-type：修改用於清單項目的標誌類型。 list-style-image：對各標誌使用一個影像。

list-style-position：可以確定標誌出現在清單項目內容之外還是內容內部。

list-style：簡寫列表樣式，用於把所有用於列表的屬性設定在一個聲明中。

6、css中有繼承性的屬性之生成內容屬性：

quotes：設定嵌套引用的引號類型。

7、css中有繼承性的屬性之遊標屬性：

cursor：規定要顯示的遊標的類型（形狀）

8、css中有繼承性的屬性之頁面樣式屬性：

page：規定元素應該被顯示的頁面特定類型。 page-break-inside：設定在表格元素內部避免進行分頁的分頁行為。

windows：設定當元素內部發生分頁時必須在頁面頂部保留的最少行數。

orphans：設定當元素內部發生分頁時必須在頁面底部保留的最少行數。

9、css中有繼承性的屬性之聲音樣式屬性

speak：設定或擷取聲音是否給定。 speak-punctuation：設定或檢索標點符號如何發音。

speak-numeral：設定或檢索數字如何發音。 speak-header：設定或檢索表格頭與其後面的一系列儲存格發生多少次關係。

speech-rate：設定或檢索發音速度。 volume：設定或檢索音量。

voice-family：設定或檢索目前聲音類型。 pitch：設定或檢索音高。

pitch-range：設定或檢索聲音的平滑程度。 stress：和pitch-range相似。設定或檢索目前聲音波形的最高峰值。

richness：设置或检索当前声音的音色。azimuth：设置或检索当前声音的音场角度。

elevation：设置或检索当前声音的音源仰角。

10、所有元素可以继承的属性：visibility、cursor

11、内联元素可以继承的属性：

（1）字体系列属性

（2）除text-indent、text-align之外的文本系列属性

12、块级元素可以继承的属性：text-indent、text-align

（学习视频分享：css视频教程）

多种样式混合应用

既然有了继承性，那么在样式表中的应用上可能会有些读者搞不清，多个样式表同时应用到一个对象上会发生什么情形呢？先举个简单的例子：

样式定义：

.apple{color:red;}H1{color:yellow;}

应用举例代码：

<h1 id="这儿的苹果好红啊">这儿的苹果好红啊</h1>

应用举例效果：因为选择符H1和.apple都匹配上面的H1元素，那么到底浏览器会应用哪一个呢？通过在浏览器中观察，我们发现这段文字应用了.apple这个样式，所以它显示的是红色。这是因为两条规则的特殊性不一样，CSS规则必须这样进行处理。

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

统计选择符中的ID属性个数。
统计选择符中的CLASS属性个数。
统计选择符中的HTML标记名格式。

最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。( 注意，你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

以下是一个按特性分类的选择符的列表：

H1 {color:blue;}                        特性值为：001
P EM {color:purple;}                    特性值为：002
.apple {red;}                           特性值为：010 
P.bright {color:yellow;}                特性值为：011
P.bright EM.dark {color:brown;}         特性值为：022
#id316 {color:yellow}                   特性值为：100

从上表我们可以看出#id316具有更高的特殊性，因而它有更高的权重。当有多个规则都能应用于同一个元素时，权重越高的样式将被优先采用。

CSS继承的优先级问题

上面我们讨论了CSS的继承性和特殊性，在特殊性的框架下，被继承的特性值为0，这就意味着任何显示声明的规则将会覆盖其继承样式。因此，不管一条规则具有多高的权重，如果没有其他规则能应用于这个继承元素，那么它也只是个被继承的规则而已，举例说明。

样式定义：

BODY {background:black;}
LI {color:gray;}
UL.white {color:white}

应用举例代码：

<ul>
　 <li>举例列表一</li>
　 <li>举例列表二</li>
　 <li>举例列表三</li>
　 <li>举例列表四</li>
</ul>

有些读者可能认为除包含.white类的列表项显示为白色外，其余所有的列表项都应该是灰色的。然而情况并非如此。

为什么会出现这样的情况呢？因为带选择符LI的显式声明的权值比从UL.white规则那里继承过来的权值要大，所以每个列表项都是灰色的。

可能有些地方不是很好理解，大家多思考一下就会明白，平时在应用样式表的时候多留意思考一下。

下面我们再来看一个例子，若给定如下所示的标记，则EM强调文字将会是灰色的，而非黑色，因为EM规则的权值要大于从H1元素继承来的权值：

样式定义：

H1#id316 {color:black;}                 特性值为：101
EM {color:gray;}                        特性值为：1

应用举例代码：

<h1 id="深入探讨-EM-CSS的继承性-EM">深入探讨<EM>CSS的继承性</EM></h1>

这是因为第二条EM规则的特性值（1）要比被继承的特性值（0）要大，事实上规定H1#id316的原始特性值（101）对其继承值没有影响，仍旧为0。

小技巧：

如果想让H1始终为黑色，而EM文字在其他情况下红色，那么下面的样式表设置就是一个很好的方法：

H1，H1 EM {color:black;}             特性值为：1，2
EM {color:red;}                      特性值为：1

给定这个规则后，除在H1元素内的任何EM文字就都是红色，而H1内的EM文字仍旧为黑色，由于其选择符分组，在第一条规则中就有两条有效的规则（一条是对H1的，另一条是对H1 EM的）也就有两个特性值——每条规则一个。

上面我们讨论了多个样式规则同时应用于同一对象时，哪个规则会被最终应用的一些情况，可能有些细心的读者会说，那STYLE元素呢？对啊，HTML代码中可以直接应用内联样式STYLE的嘛。那么它的特性值如何呢？

回答是这样的：带有STYLE的元素在CSS1下其特性值为100，尽管类似于#ID316这样的ID选择符的特性值也为100，但在实际应用中，STYLE这一权值会更高一些，因为STYLE元素的值看起来要比多数普通规则的权值大。所以我们可以看出内联样式具有高的特性值，具体的例子我们就不举了，大家可以自己试试。

人为定义CSS继承优先级

在制作网页的过程中，我们可能想要设置某个规则比其他的规则更重要，CSS中允许这样设置，它们被称为重要规则（important rule）。这是根据其声明的方式和它们的自然属性来命名的。通过在一条规则的分号前插入！important这样一个短语来标记一条重要规则，比如说：

p.apple {color:#red !important; background:white;}

颜色值#red被标记为!important，而背景色white未被标记，如果需要二条规则都是重要的话，那么每条规则都需要标上!important。

正确地放置!important的位置是很重要的，否则整条规则将为无效。!important总是放在规则声明的最后，在分号之前。

标记为!important的规则具有最高的权值，也就是说他没有具体的特性值，但是比其他的权值都要大。需要注意的是，虽然制作者定义的样式比用户定义的样式具有更高权值时，但!important规则恰恰相反：重要的用户定义规则要比制作者定义的样式具有更高权值，即使是标记为!important的重要规则也是如此。

看了这么多文字介绍后，我们来举个例子看一下：

样式定义：