所有元素可繼承:
公司主營業(yè)務(wù):成都網(wǎng)站建設(shè)、網(wǎng)站制作、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化,感謝他們對我們的高要求,感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn),讓我們激情的團(tuán)隊(duì)有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出雅安免費(fèi)做網(wǎng)站回饋大家。
內(nèi)聯(lián)樣式:
塊狀樣式:
列表樣式:
表格樣式:
關(guān)于css繼承性說法錯(cuò)誤的是CSS對于網(wǎng)頁中的元素?zé)o法做到精確定位
“css是層疊樣式表(英文全稱:CascadingStyleSheets)是一種用來表現(xiàn)HTML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用)或XML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集)等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁,還可以配合各種腳本語言動(dòng)態(tài)地對網(wǎng)頁各元素進(jìn)行格式化?!?/p>
css的繼承就是子級能夠繼承父級元素的css樣式,例如給父級元素設(shè)置了一個(gè)字體大小為22px,那么子級元素在沒有獨(dú)立設(shè)置自己的字體大小的時(shí)候就會繼承父級元素的字體大小,也就是22px,至于應(yīng)用場景,幾乎開發(fā)都可以用到
內(nèi)容 content :盒子的主要區(qū)域,盒子中的文本內(nèi)容以及后代元素都顯示在內(nèi)容區(qū)域中。
內(nèi)邊距 padding :內(nèi)容與盒子邊界的距離。
邊框 border :邊框顯示在盒子的邊界上。
外邊距 margin :盒子和相鄰兄弟元素或父元素的距離。
盒子的大小=內(nèi)容的大小+內(nèi)邊距的大小+邊框的大小
元素默認(rèn) 總寬度 = 父元素內(nèi)容的寬度 - 元素自己的左右外邊距
元素默認(rèn) 內(nèi)容寬度 = 父元素內(nèi)容的寬度 - 元素自己的左右外邊距 - 元素自己的左右邊框?qū)挾?- 元素自己的左右內(nèi)邊距
所謂css的繼承是指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性質(zhì)。繼承特性最典型的應(yīng)用通常發(fā)揮在整個(gè)網(wǎng)頁的樣式預(yù)設(shè),需要指定為其它樣式的部份設(shè)定在個(gè)別元素里即可。這項(xiàng)特性可以給網(wǎng)頁設(shè)計(jì)者提供更理想的發(fā)揮空間。。css是層疊樣式表(cascading style sheets)的簡稱。
一、繼承
css的一個(gè)主要特征就是繼承,它是依賴于祖先-后代的關(guān)系的。繼承是一種機(jī)制,它允許樣式不僅可以應(yīng)用于某個(gè)特定的元素,還可以應(yīng)用于它的后代。例如一個(gè)body定義了的顏色值也會應(yīng)用到段落的文本中。下面舉例說明:
樣式定義:
body{color:red;}
應(yīng)用舉例代碼:
pcss的strong層疊和繼承/strong深入探討/p
這段代碼的應(yīng)用結(jié)果是:“css的層疊和繼承深入探討”這段話是紅顏色的,“層疊和繼承”由于應(yīng)用了strong元素,所以是粗體。這很符合制作者的意圖,也是為什么繼承是css的一部分的原因。
二、css繼承的局限性
在css中,繼承是一種非常自然的行為,我們甚至不需要考慮是否能夠這樣去做,但是繼承也有其局限性。
首先,有些屬性是不能繼承的。這沒有任何原因,只是因?yàn)樗褪沁@么設(shè)置的。舉個(gè)例子來說:border屬性,大家都知道,border屬性是用來設(shè)置元素的邊框的,它就沒有繼承性。多數(shù)邊框類屬性,比如象padding(補(bǔ)白),margin(邊界),背景和邊框的屬性都是不能繼承的。
三、繼承中容易引起的錯(cuò)誤
有時(shí)候繼承也會帶來些錯(cuò)誤,比如說下面這條css定義:
body{color:blue}
在有些瀏覽器中這句定義會使除表格之外的文本變成藍(lán)色。從技術(shù)上來說,這是不正確的,但是它確實(shí)存在。所以我們經(jīng)常需要借助于某些技巧,比如將css定義成這樣:
body,table,th,td{color:blue}
這樣表格內(nèi)的文字也會變成藍(lán)色。
四、多種樣式混合應(yīng)用
既然有了繼承性,那么在樣式表中的應(yīng)用上可能會有些讀者搞不清,多個(gè)樣式表同時(shí)應(yīng)用到一個(gè)對象上會發(fā)生什么情形呢?先舉個(gè)簡單的例子:
樣式定義:
.apple{color:red;}h1{color:yellow;}
應(yīng)用舉例代碼:
h1 class="apple"這兒的蘋果好紅啊/h1
應(yīng)用舉例效果:因?yàn)檫x擇符h1和.apple都匹配上面的h1元素,那么到底瀏覽器會應(yīng)用哪一個(gè)呢?通過在瀏覽器中觀察,我們發(fā)現(xiàn)這段文字應(yīng)用了.apple這個(gè)樣式,所以它顯示的是紅色。這是因?yàn)閮蓷l規(guī)則的特殊性不一樣,css規(guī)則必須這樣進(jìn)行處理。
樣式表中的特殊性描述了不同規(guī)則的相對權(quán)重,它的基本規(guī)則是:
統(tǒng)計(jì)選擇符中的id屬性個(gè)數(shù)。
統(tǒng)計(jì)選擇符中的class屬性個(gè)數(shù)。
統(tǒng)計(jì)選擇符中的html標(biāo)記名格式。
最后,按正確的順序?qū)懗鋈齻€(gè)數(shù)字,不要加空格或逗號,得到一個(gè)三位數(shù)。( 注意,你需要將數(shù)字轉(zhuǎn)換成一個(gè)以三個(gè)數(shù)字結(jié)尾的更大的數(shù))。相應(yīng)于選擇符的最終數(shù)字列表可以很容易確定較高數(shù)字特性凌駕于較低數(shù)字的。
以下是一個(gè)按特性分類的選擇符的列表:
h1 {color:blue;}特性值為:1
p em {color:purple;}特性值為:2
.apple {red;} 特性值為:10
p.bright {color:yellow;} 特性值為:11
p.bright em.dark {color:brown;} 特性值為:22
#id316 {color:yellow} 特性值為:100
從上表可以看出#id316具有更高的特殊性,因而它有更高的權(quán)重。當(dāng)有多個(gè)規(guī)則都能應(yīng)用于同一個(gè)元素時(shí),權(quán)重越高的樣式將被優(yōu)先采用。
五、css繼承的優(yōu)先級問題
上面我們討論了css的繼承性和特殊性,在特殊性的框架下,被繼承的特性值為0,這就意味著任何顯示聲明的規(guī)則將會覆蓋其繼承樣式。因此,不管一條規(guī)則具有多高的權(quán)重,如果沒有其他規(guī)則能應(yīng)用于這個(gè)繼承元素,那么它也只是個(gè)被繼承的規(guī)則而已,舉例說明。
樣式定義:
body { background:black;}
li { color:gray;}
ul.white { color:white}
應(yīng)用舉例代碼:
ul
li舉例列表一/li
li舉例列表二/li
li舉例列表三/li
li舉例列表四/li
/ul
有些讀者可能認(rèn)為除包含.white類的列表項(xiàng)顯示為白色外,其余所有的列表項(xiàng)都應(yīng)該是灰色的。然而情況并非如此。因?yàn)閹нx擇符li的顯式聲明的權(quán)值比從ul.white規(guī)則那里繼承過來的權(quán)值要大,所以每個(gè)列表項(xiàng)都是灰色的。
下面再來看一個(gè)例子,若給定如下所示的標(biāo)記,則em強(qiáng)調(diào)文字將會是灰色的,而非黑色,因?yàn)閑m規(guī)則的權(quán)值要大于從h1元素繼承來的權(quán)值:
樣式定義:
h1#id316 { color:black;} 特性值為:101
em { color:gray;} 特性值為:1
應(yīng)用舉例代碼:
h1 id="id316"深入探討emcss的繼承性/em/h1
這是因?yàn)榈诙lem規(guī)則的特性值(1)要比被繼承的特性值(0)要大,事實(shí)上規(guī)定h1#id316的原始特性值(101)對其繼承值沒有影響,仍舊為0。
小技巧:
如果想讓h1始終為黑色,而em文字在其他情況下紅色,那么下面的樣式表設(shè)置就是一個(gè)很好的方法:
h1,h1 em { color:black;} 特性值為:1,2
em { color:red;} 特性值為:1
給定這個(gè)規(guī)則后,除在h1元素內(nèi)的任何em文字就都是紅色,而h1內(nèi)的em文字仍舊為黑色,由于其選擇符分組,在第一條規(guī)則中就有兩條有效的規(guī)則(一條是對h1的,另一條是對h1 em的)也就有兩個(gè)特性值--每條規(guī)則一個(gè)。
六、人為定義css繼承優(yōu)先級
在制作網(wǎng)頁的過程中,我們可能想要設(shè)置某個(gè)規(guī)則比其他的規(guī)則更重要,css中允許這樣設(shè)置,它們被稱為重要規(guī)則(important rule)。這是根據(jù)其聲明的方式和它們的自然屬性來命名的。通過在一條規(guī)則的分號前插入!important這樣一個(gè)短語來標(biāo)記一條重要規(guī)則,比如說:
p.apple { color:#red !important; background:white;}
顏色值#red被標(biāo)記為!important,而背景色white未被標(biāo)記,如果需要二條規(guī)則都是重要的話,那么每條規(guī)則都需要標(biāo)上!important。
正確地放置!important的位置是很重要的,否則整條規(guī)則將為無效。!important總是放在規(guī)則聲明的最后,在分號之前。
標(biāo)記為!important的規(guī)則具有最高的權(quán)值,也就是說他沒有具體的特性值,但是比其他的權(quán)值都要大。需要注意的是,雖然制作者定義的樣式比用戶定義的樣式具有更高權(quán)值時(shí),但!important規(guī)則恰恰相反:重要的用戶定義規(guī)則要比制作者定義的樣式具有更高權(quán)值,即使是標(biāo)記為!important的重要規(guī)則也是如此。
看了這么多文字介紹后,我們來舉個(gè)例子看一下:
樣式定義:
h1 { color:gray !important;}
應(yīng)用舉例代碼:
h1 style="color:black;"看這兒!/h1
應(yīng)用舉例效果:!important規(guī)則會覆蓋內(nèi)聯(lián)style屬性的內(nèi)容,所以結(jié)果文字是灰色的而不是黑色的。
還有最后一種需要考慮的情況:繼承值總是具有特性值0的特點(diǎn),即使是從帶有!important的規(guī)則繼承的值也是如此,在匹配重要規(guī)則的元素之外,重要性也會隨之消失