|
首字大寫
首字大寫在印刷界十分常見,這能為段落加上華麗而優(yōu)雅的效果,而且不必用上圖片就能辦到這種效果,只用CSS就夠了.
首先,必須為標(biāo)記源代碼加上一個(gè)"樣式錨點(diǎn)"讓我們有辦法調(diào)用第一段的第一個(gè)字母.我們將 "I" 用一組<span>標(biāo)簽包起來并給它指定class=drop,如果我們才能在頁面或整個(gè)網(wǎng)站里重復(fù)使用首字大寫效果.
<p><span class="drop">I</span>f you're painting with latex paints, and the job ...
在某些完全支持CSS2規(guī)范的現(xiàn)代瀏覽器中,我們可以用:first-letter偽類設(shè)定段落首字效果,而不必加上額外的<span>標(biāo)簽,雖然語義上非常棒,不幸的是許多瀏覽器都不支持這個(gè)效果.
現(xiàn)在我們能完全控制第一段的 "I" 字母了,讓我們加上CSS聲明,以便把字體放大,同時(shí)將它浮動(dòng)到左側(cè)(這樣,其他的文字才不會(huì)包圍它顯示),我們也會(huì)加上裝飾用的背景,邊框.
.drop {
float: left;
font-size: 400%;
line-height: 1em;
margin: 4px 10px 10px 0;
padding: 4px 10px;
border: 2px solid #ccc;
background: #eee;
}
結(jié)合我們現(xiàn)在為示例內(nèi)容加上的所有樣式,圖13-6是瀏覽器顯示首字大寫的效果,它完全沒有用上圖片,只靠簡單的CSS與標(biāo)記語法完成.
圖13-6 用CSS制作的首字大寫效果.
文字對齊
同樣受印刷界啟發(fā),我們能以text-align屬性為文字應(yīng)用左右對齊效果.左右對齊之后的文字會(huì)拉開單字之間的距離,讓每行的寬度變得一樣長,造出緊密,界限明確的分欄效果.
body {
font-family: Georgia, Times, serif;
line-height: 1.5em;
text-align: justify;
}
圖13-7是作為示例的文字,現(xiàn)在左右對齊了!
圖13-7 以text-align屬性左右對齊過的文字效果
留意文字內(nèi)容在左側(cè)以及右側(cè)都排列成一條直線.其他text-align屬性能使用的設(shè)定值有:left,right,center.
舉例來說,我們也能為<h1>標(biāo)簽應(yīng)用text-align屬性,將示例的標(biāo)題居中.
h1 {
letter-spacing: 4px;
font-style: italic;
text-align: center;
}
圖13-8是標(biāo)題居中之后的效果.
圖13-8 用textalign屬性把<h1>居中
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 標(biāo)記語言——為文字指定樣式 [3] 下一頁 標(biāo)記語言——為文字指定樣式 [5]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 4 頁 標(biāo)記語言——為文字指定樣式 [4]
