CSS 繼承_布局基本知識

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局基本知識 >> CSS 繼承

CSS 繼承

編輯：布局基本知識

什麼是CSS繼承特性

目錄

說明
實例
好處
常見繼承CSS屬性

1、說明解釋

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

2、實例：

<!DOCTYPE html> 
<head> 
<meta http-equiv="Content-Type" 
 content="text/html; charset=utf-8" /> 
<title>CSS 繼承特性 - www.thinkcss.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">我是子級，我上級是yangshi</div> 
</div> 
</body> 
</html>

DIV+CSS繼承實例圖
說明：我設置上級(父級：yangshi)的文字顏色為紅色，而子級(ziji)未設置文字顏色，但是文字具有繼承特性，所以子級文字內容依然是紅色。

假如設置父級文字樣式後，其多個子級中，可能有些子級顏色不想與父級相同，這個時候只需對對應子級設置需要顏色即可。
演示如下：

<!DOCTYPE html> 
<head> 
<meta http-equiv="Content-Type"
 content="text/html; charset=utf-8" /> 
<title>DIV CSS繼承特性 - www.thinkcss.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">我是子級，我上級是yangshi</div> 
<div class="ziji2">我是子級2，我設置文字顏色為黑色</div> 
</div> 
</body> 
</html>