轉(zhuǎn)化文字
有個(gè)text-transform屬性能轉(zhuǎn)化文字內(nèi)容的大小寫(xiě),而不管標(biāo)記內(nèi)容的大小寫(xiě)是怎樣的.舉例來(lái)說(shuō),標(biāo)題是以下面這段的寫(xiě)法標(biāo)記的:
�。糷1>A Painting Tip＜/h1>
只要在CSS內(nèi)使用text-transform屬性,就能把整個(gè)標(biāo)題轉(zhuǎn)化成大寫(xiě)(想要的話也能轉(zhuǎn)化成小寫(xiě)),而不必修改標(biāo)記源代碼的內(nèi)容,除了先前為＜h1>標(biāo)簽加上的樣式之外,把標(biāo)題全部變成大寫(xiě)的CSS規(guī)則就是這么簡(jiǎn)單:
h1 {
letter-spacing: 4px;
font-style: italic;
text-align: center;
text-transform: uppercase;
}
成果就像9這樣,不必與標(biāo)記源代碼較勁了,只要改改CSS,就能改變頁(yè)面(甚至整個(gè)網(wǎng)站)某些特定標(biāo)簽的大小寫(xiě)用法.
圖9 用CSS把標(biāo)題變成大寫(xiě)
小型大寫(xiě)字母
大多數(shù)瀏覽器都支持font-variant屬性,讓我們以小型大寫(xiě)字母修飾內(nèi)容(也就是以不同大小的大寫(xiě)文字顯示內(nèi)容).
讓我們?yōu)槭纠臉?biāo)題加上font-variant屬性:
h1 {
letter-spacing: 4px;
text-align: center;
font-variant: small-caps;
}
圖10 顯示了標(biāo)題換用小型大寫(xiě)字母之后的效果:這又是一個(gè)以標(biāo)記語(yǔ)法和CSS模仿印刷界做法的方法.
圖10 用了小型大寫(xiě)字母的標(biāo)題
段落首行縮進(jìn)
再次向印刷界看齊(天哪,你看得出這里的趨勢(shì)嗎?,我們可以利用text-indent屬性縮進(jìn)段落第一行內(nèi)容.加上正值的話,就會(huì)使文字縮進(jìn)指定的量.
通過(guò)將示例中的每個(gè)段落縮進(jìn)3em或者說(shuō)是3個(gè)字符能夠占用的最大寬度.我要拿掉首字大寫(xiě),讓它不會(huì)與第一段第一行的縮進(jìn)效果打架.
縮進(jìn)所有＜p>的第一行所需的CSS就像這樣:
p {
text-indent: 3em;
}
圖11顯示了修改效果,你能看到每段文字的第一行都縮進(jìn)了我們?cè)O(shè)定的值,會(huì)選擇使用em單位是因?yàn)?如此一來(lái)縮進(jìn)長(zhǎng)度會(huì)與字體大小維持正比,當(dāng)使用者決定自己放大或縮小字體時(shí),這個(gè)方法就能展示它的好處了.
圖11 用text-indent屬性縮進(jìn)段落首行的效果
歸納
討論了幾個(gè)為文字指定樣式的CSS屬性之后,希望你能了解大多數(shù)時(shí)候,你不需要依賴(lài)?yán)L圖工具也能造出不錯(cuò)的效果.通常只要為標(biāo)記源代碼加上一點(diǎn)樣式就夠了,有時(shí)還能達(dá)到非常棒的效果.
當(dāng)然,有些狀況可能需要把文字做成圖片,比如說(shuō)公司的標(biāo)志,或者是做某些頁(yè)面元素的時(shí)候需要用到的特殊字體,任何事情的關(guān)鍵都在平衡,試著先用CSS指定樣式,如此一來(lái)你的標(biāo)記源代碼會(huì)更干凈,更容易使用.
CSS提供了修改文字,加上樣式的控制方法,結(jié)果也好的令人驚訝,這會(huì)是個(gè)很不錯(cuò)的設(shè)計(jì)工具,讓你能繼續(xù)維持短小靈活的標(biāo)記源代碼.
本新聞共 5頁(yè),當(dāng)前在第 5頁(yè) 1 2 3 4 5 |
