小編給大家分享一下css3中如何使用all屬性,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供雙遼網(wǎng)站建設(shè)、雙遼做網(wǎng)站、雙遼網(wǎng)站設(shè)計、雙遼網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、雙遼企業(yè)網(wǎng)站模板建站服務(wù),十載雙遼做網(wǎng)站經(jīng)驗(yàn),不只是建網(wǎng)站,更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
一、兼容性
如下圖:
兼容性還行, 除了IE不支持,其他瀏覽器基本上都綠油油,目前自娛自樂,內(nèi)網(wǎng)項目什么的都是可以用用的。
二、all是干嘛用的
all屬性實(shí)際上是所有CSS屬性的縮寫,表示,所有的CSS屬性都怎樣怎樣,但是,不包括unicode-bidi和direction這兩個CSS屬性。
為什么會有這個CSS屬性呢?
我們可能知道,有些CSS屬性值基本上所有CSS屬性都有,比方說繼承inherit!
我們CSS reset輸入框的時候,是不是有類似這樣的代碼(實(shí)際可能是具體值,作用類似):
input, textarea { color: inherit; font-size: inherit; font-family: inherit; }
因?yàn)檫@類輸入控件自身有內(nèi)置的大小和字體,需要重置。
此時,大家就會發(fā)現(xiàn),這些屬性值都是inherit, 要是可以合并就好了!
CSS all屬性就是用來合并的。
input, textarea { all: inherit; }
這里僅僅是展示作用,實(shí)際上是不會這么用的,因?yàn)?,all:inherit會讓背景色什么的,都繼承父級,相信這不是你希望看到的。
三、語法和區(qū)別
語法如下:
all: initial; all: inherit; all: unset; /* CSS4特性,無視之 */ all: revert;
默認(rèn)的HTML和CSS是這樣的,一個傳統(tǒng)的標(biāo)簽內(nèi)容,有標(biāo)題有列表:
<article> <h7>標(biāo)題</h7> <p>p變文字</p> <ol> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> </ol> <textarea>文本域</textarea> </article> article { background-color: #f0f3f9; color: green; } article > textarea { border: 1px solid #34538b; background-color: #ffffe0; color: red; }
如你所見:
顏色,間距,以及文本域狀態(tài)都是我們認(rèn)為的樣子顯示。
現(xiàn)在,點(diǎn)擊demo的下拉,選擇對應(yīng)的all屬性值,實(shí)現(xiàn)下面CSS效果:
.initial > * { all: initial; } .inherit > * { all: inherit; } .unset > * { all: unset; }
結(jié)果:
initial是初始值的意思,也就是,article元素下面所有的第一級子元素都除了unicode-bidi和direction以外的CSS都使用初始值。
例如,<h7>, <p>元素瀏覽器內(nèi)置的display:block直接拜拜了,都變成了inline元素,因此在一行顯示:
font-size也使用了瀏覽器軟件本身設(shè)置的大小16px,color顏色也變成了瀏覽器軟件本身的黑色。例如,在瀏覽器設(shè)置中改變字號,從中變成大:
會看到顯示的文字內(nèi)容也變大了:
由于我們只是對相鄰層級子元素進(jìn)行了initial設(shè)置,因此,<li>元素不受影響,但是,由于在父元素不明的情況下,<li>元素的默認(rèn)是打點(diǎn),因此,這里從數(shù)字變成了點(diǎn),list-style-type和list-style-position都變化了。
inherit是繼承的意思,也就是,article元素下面所有的相鄰子元素都除了unicode-bidi和direction以外的CSS都繼承了<article>元素的CSS。
因此,<h7>, <p>元素還是塊狀的,background-color都是<article>元素的背景色,color顏色也跟<article>一樣,是綠色(文本域的紅色被干掉了)。
不僅上面這些CSS,padding/margin也都繼承了,只是默認(rèn)是0, 看不出來,我們稍微修改下,例如給<article>元素來個margin值:
結(jié)果,那些子元素都開花了:
unset
unset是取消設(shè)置的意思,也就是,article元素下面所有的相鄰子元素除了unicode-bidi和direction以外的CSS都干掉都不要,不要了那用什么呢?unset值的特性如下,當(dāng)前元素瀏覽器或用戶設(shè)置的CSS忽略,然后如果是具有繼承特性的CSS,如color, 則使用繼承值;如果是沒有繼承特性的CSS屬性,如background-color, 則使用初始值。
因此,<h7>, <p>元素的display屬性值使用了initial初始值,因此變成了inline元素,兩個同一行顯示了;而這些元素的color顏色使用了inherit繼承值,因此都是綠色,<textarea>的背景色background-color不具有繼承特性,因此使用的是initial初始值,也就是transparent透明,因此,就是截圖所示效果。
最后
all所牽扯的CSS實(shí)在是太多了,我目前還是想不出有什么場景,就是要用這個CSS屬性?;蛘哒f什么時候,希望特殊的元素一下子變成普通元素,例如,input輸入框外面一個p,來個input{all:inherit;},貌似還真有這樣的場景,輸入框不需要border不需要background不需要padding不需要margin。
以上是css3中如何使用all屬性的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
分享題目:css3中如何使用all屬性
網(wǎng)址分享:http://bm7419.com/article2/jjsdoc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計公司、小程序開發(fā)、定制開發(fā)、自適應(yīng)網(wǎng)站、搜索引擎優(yōu)化、企業(yè)網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)