HTML+CSS 輕鬆入門之繼...LOGIN

HTML+CSS 輕鬆入門之繼承

css是層疊樣式表(cascading style sheets)的簡稱,它的規範代表了網路歷史上一個獨特的發展階段。現在對於從事網頁製作的朋友來說,很少沒有聽說過css了吧,因為在製作網頁過程中我們經常需要用到。
css讓我們可以為文件設定更豐富且便於修改的外觀,可以減輕網頁設計者的工作負擔。這裡我們主要想和朋友們一起對css的繼承性和特殊性進行一點深入的探討

一、繼承
css的一個主要特徵就是繼承,它是依賴於祖先-後代的關係的。繼承是一種機制,它允許樣式不僅可以應用於某個特定的元素,還可以應用於它的後代

繼承是一種規則,它允許樣式不僅應用於某個特定html標籤元素,而且應用於其後代。例如下面程式碼:如某種顏色應用於p標籤,這個顏色設定不僅套用p標籤,也套用在p標籤中的所有子元素文字

p{color:red}

##當我們有一個p標籤,p標籤內有元素都會使用p 標籤的樣式

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>继承</title>
	<style type="text/css">
		p{
			color:red;
		}
	</style>
</head>
<body>
	<p> css继承性
		<span>重要性</span>
	</p>
</body>
</html>

二、css繼承的限制


#在css中,繼承是一種非常自然的行為,我們甚至不需要考慮是否能夠這樣去做,但是繼承也有其限制。

首先,有些屬性是不能繼承的。這沒有任何原因,只是因為它就是這麼設定的。舉個例子來說:border屬性,大家都知道,border屬性是用來設定元素的邊框的,它就沒有繼承性。多數邊框類別屬性,例如像padding(補白),margin(邊界),背景和邊框的屬性都是不能繼承的。

三、繼承中容易造成的錯誤


    有時候繼承也會帶來一些錯誤

四、多種樣式混合應用


既然有了繼承性,那麼在樣式表中的應用上可能會有些讀者搞不清,多個樣式表同時應用到一個物件上會發生什麼情形呢

#五、css繼承的優先權問題

    使用離文件近的css 樣式


下一節

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>继承</title> <style type="text/css"> p{ color:red; } </style> </head> <body> <p> css继承性 <span>重要性</span> </p> </body> </html>
章節課件