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