談談css的繼承性
時間:2018-09-25 來源:未知
既然要談css的繼承性,那必須要從文檔樹說起。
什么是文檔樹呢?所有的html文檔都是樹。文檔樹由html文檔構成。如圖一所示。通俗理解就是,文檔樹就好比家族樹,祖先是任意相連但是在文檔樹上部的元素,后代是任意相連但是在文檔樹下部的元素,父輩是直接相連并且在該元素上部的元素,孩子是相連并且直接在該元素下部的元素,兄弟是與其他元素共享一個父輩的元素。

圖1文檔樹
讓我們再了解一下css的規(guī)則,css規(guī)則決定了web頁面上的元素如何表現。具體由5個部分組成。
(1)選擇器:選擇受此規(guī)則影響的html頁面上的元素; p{ color: red; }
(2)聲明部分:由一對大括號以及其中任意內容組成的容器;p{ color: red; }
(3)聲明:告訴瀏覽器如何去渲染頁面上被選中的元素; p{ color: red; }
(4)屬性:是選中的元素的樣式外觀;p{ color: red; }
(5)值:是你希望給屬性設置的準確的樣式; 那到底什么是繼承性呢?p{ color: red; }
繼承是特定的css屬性向下傳遞到子孫元素。請看如下代碼。

注意到em標簽在p標簽的內部,F在我們繼續(xù)編寫css的樣式。

在瀏覽器中,文字全部變紅。
CSS的繼承性是什么呢?
為什么em標簽的文字也會變紅呢,我們并沒設置css的屬性。就是因為em標簽繼承了p標簽的屬性!
繼承性就是為了讓開發(fā)者的工作更加輕松的。不用每個標簽都指定屬性,這樣做不僅css的文件尺寸大大增加,變得更難創(chuàng)建維護,還降低了下載速度。
那是不是所有的屬性都可以繼承呢?當然不是。因為這樣的話,同樣會使開發(fā)者的工作變得困難。記住,繼承性是方便開發(fā)者的。通?梢岳^承的屬性組有:文字相關的屬性,列表相關的屬性,還有顏色相關的屬性。

