CSS中繼承的示例分析

發(fā)布時(shí)間：2022-03-10 09:48:31 來(lái)源：億速云閱讀：144 作者：小新欄目：web開發(fā)

小編給大家分享一下CSS中繼承的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

1、說(shuō)明解釋 - TOP

這里DIV CSS 繼承是指我們?cè)O(shè)置上級(jí)(父級(jí))的CSS樣式，上級(jí)（父級(jí)）及以下的子級(jí)（下級(jí)）都具有此屬性。
一般只有文字文本具有繼承特性，如文字大小、文字加粗、文字顏色、字體等。

2、實(shí)例： - TOP

<!DOCTYPE html> <head> <meta http-equiv="Content-Type"  content="text/html; charset=utf-8" /> <title>CSS 繼承特性 - www.億速云.com</title> <style type="text/css"> .yangshi{width:400px; color:#F00;} .ziji{ float:left; width:300px;} </style> </head> <body> <div class="yangshi"> <div class="ziji">我是子級(jí)，我上級(jí)是yangshi</div> </div> </body> </html>

說(shuō)明：我設(shè)置上級(jí)(父級(jí)：yangshi)的文字顏色為紅色，而子級(jí)(ziji)未設(shè)置文字顏色，但是文字具有繼承特性，所以子級(jí)文字內(nèi)容依然是紅色。

假如設(shè)置父級(jí)文字樣式后，其多個(gè)子級(jí)中，可能有些子級(jí)顏色不想與父級(jí)相同，這個(gè)時(shí)候只需對(duì)對(duì)應(yīng)子級(jí)設(shè)置需要顏色即可。
演示如下：

<!DOCTYPE html> 
<head> 
<meta http-equiv="Content-Type"
 content="text/html; charset=utf-8" /> 
<title>DIV CSS繼承特性 - www.億速云.com</title> 
<style type="text/css"> 
.yangshi{width:400px; color:#F00;} 
.ziji{width:300px;} 
.ziji2{ width:300px; color:#000;} 
</style> 
</head> 
<body> 
<div class="yangshi"> 
<div class="ziji">我是子級(jí)，我上級(jí)是yangshi</div> 
<div class="ziji2">我是子級(jí)2，我設(shè)置文字顏色為黑色</div> 
</div> 
</body> 
</html>

說(shuō)明：yangshi下有ziji與ziji2兩個(gè)子級(jí)，其中ziji繼承了父級(jí)(上級(jí)的紅色樣式)，而ziji2我們需要的是黑色，所以單獨(dú)對(duì)ziji2設(shè)置文字為黑色的樣式。

3、繼承好處 - TOP

可以只設(shè)置上級(jí)的CSS樣式表屬性，子級(jí)（下級(jí)）不用設(shè)置，都有此CSS屬性，可以減少CSS代碼，便于維護(hù)。

4、常見繼承CSS屬性 - TOP

1、字體：font-family
2、文字大?。篶ss font-size
3、文本粗細(xì)：font-weight
4、文字顏色：css color
通常只有文字CSS font具有繼承特性，所以大家好好利用與認(rèn)識(shí)。

以上是“CSS中繼承的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

CSS中繼承的示例分析

1、說(shuō)明解釋 - TOP

2、實(shí)例： - TOP

3、繼承好處 - TOP

4、常見繼承CSS屬性 - TOP

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

2、實(shí)例： - TOP

3、繼承好處 - TOP