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