|
只要粗體或斜體就好
必須注意的是,很多情況下只需要視覺上展示粗體,斜體的文字效果,換句話說,假設(shè)你的側(cè)邊欄里有一串鏈接列表,而你喜歡讓所有鏈接用相同的效果顯示:也就是粗體(圖6-1)
圖6-1.粗體鏈接放在側(cè)邊欄里的示例
除了視覺特色外,我們并不打算特別強調(diào)鏈接內(nèi)容,這里就是以CSS改變鏈接外觀顯示效果的好地方,讓他們不會被屏幕閱讀器以及其他非可視化瀏覽器特別強調(diào).
舉例來說,你真的想讓粗體鏈接被念得更快,更大聲,音調(diào)更高嗎?大概不會,這邊的粗體完全只是顯示效果.
font-weight相當(dāng)于粗體
為了達(dá)到圖6-1的顯示效果,讓我們假設(shè)鏈接欄放在id設(shè)為sidebar的<div>中,這樣我們就能用CSS指定#sidebar之內(nèi)的鏈接要以粗體顯示:
#sidebar a{
font-weight:bold;
}
極度簡單,讓我覺得一提起就有些可笑,但是這的確是個幫助分離結(jié)構(gòu)與顯示效果的好方法.
那是粗體!
同樣的,在思考斜體文字的時候也能應(yīng)用類似的想法,在你不想強調(diào)的內(nèi)容,只單純想以斜體顯示文字時,你能再度使用font-style屬性通過CSS處理這些狀況
讓我們使用相同的#sidebar作為示例,舉例來說如果你想使#sidebar里的所有鏈接顯示成斜體,那么可以這樣寫:
#sidebar a{
font-style:italic;
}
又是個簡單至極的概念,但是在結(jié)構(gòu)化標(biāo)記語法的領(lǐng)域里,我覺得討論這些情況十分重要--使用CSS處理央視,代替顯示效果標(biāo)簽的狀況.有些時候最簡單的解決方法也最容易被忽略.
共用粗體與斜體
在打算同時用粗體和斜體顯示文字內(nèi)容的時候,我覺得必須先思考一個問題,你打算傳達(dá)什么程度的強調(diào)?根據(jù)這個問題的答案,我會選擇適當(dāng)?shù)臉?biāo)簽:<em>(強調(diào))或<strong>(更強烈的強調(diào)),然后以選擇的標(biāo)簽標(biāo)記文字.
舉例來說,以下面的例子來說,我原本打算讓"fun"同時以粗體,斜體顯示,最后我選擇用<em>來強調(diào)這個字.
Building sites with web standards can be <em>fun</em>!
大多數(shù)瀏覽器只會以斜體來顯示這個字,要同時使用粗體和斜體,我們有幾種選擇.哦,我真的希望你同意上面這句話.
普通的<span>
方法之一,是以普通的<span>包在"fun"之外,并且指定CSS規(guī)則將所有<em>之內(nèi)的<span>以粗體顯示.標(biāo)記語法看起來像這樣:
Building sites with web standards can be <em><span>fun</span></em>!
而CSS看起來則像這樣:
em span{
font-weight:bold;
}
明顯的語義部分并不好,因為我們加上了額外的標(biāo)簽,但是這個方法人人仍然有用.
以class強調(diào)
另一個方法則是為<em>標(biāo)簽指定一個class,并且以CSS加上粗體效果,標(biāo)記語法看起來像這樣:
Building sites with web standards can be <em class="bold">fun</em>!
而CSS看起來則像這樣:
em.bold{
font-weight:bold;
}
使用<em>就能達(dá)成斜體效果(同時在語義上強調(diào)了文字內(nèi)容),而為它加上bold class則會使<em>之內(nèi)的文字以粗體顯示.
類似的方法也能用來修飾<strong>.這時我們能在加重強調(diào)某段文字的時候,設(shè)計italic class加上斜體效果,再配上<strong>原來就有的粗體效果.
標(biāo)記語言看起來像這樣:
Building sites with web standards can be <strong class="italic">fun</strong>!
而CSS則是這樣:
strong.italic{
font-style:italic;
}
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 短語元素 [1] 下一頁 短語元素 [3]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 短語元素 [2]
