CSS教程13、CSS的display屬性[翻譯Htmldog]_CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
操作HTML元素的訣竅在于明白它們工作的方法在于沒有特定的形式。一些由標(biāo)簽組成的大部分頁面可以設(shè)定任何樣式。瀏覽器默認(rèn)的樣式里的大部分html元素由字體樣式、margin,padding組成,本質(zhì)上是顯示類型。
display屬性基本上分為inline,block,和none。
inline就像它的本意——顯示為inline的元素為行。strong,anchor錨和em強(qiáng)調(diào)元素默認(rèn)是行。
block元素前后換行。標(biāo)題和段落元素是塊元素。
none,意思不顯示元素,在可用性上可以實(shí)現(xiàn)漂亮的效果,交替樣式或hover效果的高級運(yùn)用。
設(shè)定表現(xiàn)可以更好運(yùn)用在網(wǎng)頁制作上。
示例代碼 [hl5o.cn]
h1 {
display: inline;
font-size: 2em;
}
#header p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
}
display: inline;
font-size: 2em;
}
#header p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
}
設(shè)定標(biāo)題h1為行元素,可以和后面的元素在同一行。
示例代碼 [hl5o.cn]
#navigation, #seeAlso, #comments, #standards {
display: none;
}
display: none;
}
上面的代碼可以使用在打印樣式里,比如在導(dǎo)航使用,可以在打印時不顯示導(dǎo)航這些無關(guān)緊要的東西。
display:none和visibility:hidden;的不同在于display:none完全取消元素的顯示,visibility:hidden保持元素位置但視覺上的內(nèi)容不可見。例如,假如3的第二段設(shè)置為display:none,第一段將僅跟在第三段,假如設(shè)置為visibility:hidden,段落間就會空出。
表格
明白表格相關(guān)的表現(xiàn)屬性值最好的方法想象html表格。table是最初的表現(xiàn),你可以使用table-row模擬table-cell模擬td。
display屬性更進(jìn)一步,可以通過使用table-column, table-row-group, table-column-group, table-header-group, table-footer-group and table-caption。現(xiàn)在可以直接使用columns構(gòu)建表格,比在html中使用行構(gòu)建快速。
最后,inline-table設(shè)定表格前后不換行。
使用CSS表格會嚴(yán)重?fù)p害可用性。HTML應(yīng)該用來傳遞語意,所以假如你有表格數(shù)據(jù),那可以使用HTML表格。使用CSS表格僅僅會產(chǎn)生糟糕的數(shù)據(jù)假如沒有CSS數(shù)據(jù)將不可讀。
其他表現(xiàn)形式
list-item列表項(xiàng)目,就像期待HTML里的li元素。它們需要嵌套在元素里面顯示。
run-in元素的表現(xiàn)形式由它的父元素決定。IE和Mozilla都不支持。
compat根據(jù)上下阿文決定表現(xiàn)形式,同樣IE和Mozilla都不支持。
maker僅僅使用在:before和:after偽元素,設(shè)定content屬性的表現(xiàn)。content屬性默認(rèn)表現(xiàn)就是maker,所以它只有在覆蓋原來屬性時才有用。
content屬性,它的默認(rèn)就是maker,所以只有在覆蓋原來屬性時使用。
相關(guān)CSS教程:
- 相關(guān)鏈接:
- 教程說明:
CSS教程-CSS教程13、CSS的display屬性[翻譯Htmldog]
。