|
為表單加上樣式
現(xiàn)在有了結(jié)構(gòu)完善的表單,接著讓我們研究一些能夠用來(lái)自定顯示效果的CSS技巧吧!
設(shè)定文字輸入框的寬度：
處理表單元素需要技巧,因?yàn)樗鼈兊膶挾?高度與瀏覽器種類有關(guān).在表單示例中,我們沒(méi)有指定文字輸入框的寬度,讓瀏覽器自動(dòng)使用預(yù)設(shè)值,一般來(lái)說(shuō),設(shè)計(jì)者或許會(huì)以size屬性為<input>元素指定寬度,像這樣:
<input type="text" id="name" name="name" tabindex="1" size="20" />
把大小指定為20代表將文字輸入框的寬度設(shè)置為20字元(而不是像素).根據(jù)瀏覽器的預(yù)設(shè)表單字體,實(shí)際的輸入框像素寬度可能會(huì)有差異.這使得精確指定表單排版變得有點(diǎn)困難.
如果需要的話,我們能借著CSS以像素為單位控制輸入框(以及其他表單元素)的寬度.舉例來(lái)說(shuō),讓我們把示例表單中的所有<input>元素寬度設(shè)定成200像素,我們會(huì)利用為表單指定id屬性,在這個(gè)示例中是thisform.
#thisform input {
width: 200px;
}
這時(shí),所有在#thisform內(nèi)的<input>元素都會(huì)變成200像素寬.圖5-9是可視化瀏覽器的顯示效果.
圖5-9 把所有<input>元件寬度設(shè)置成200像素之后的效果
哦喔~多選框和submit按鈕也是<input>元素,因此得到了相同的設(shè)定值,讓我們改以id指定Name和Email輸入框,而不是一次設(shè)定所有的<input>元素的寬度:
#name, #email {
width: 200px;
}
圖5-10是以瀏覽器檢查修正后成果的效果,這時(shí)只有兩個(gè)文字輸入框是200像素寬的了.
圖5-10.只有文字輸入框是200像素寬的效果
使用<label>自定字體：
我們有幾種不同的方法能夠調(diào)整表單內(nèi)文字的大小,字體與色彩,我們?cè)俣确钚?利用你使用的標(biāo)簽"哲學(xué),直接以<label>元素為文字設(shè)定樣式.
我喜歡以<label>元素指定文字樣式,主要是因?yàn)?在不少情況下,我們都會(huì)希望為說(shuō)明文字指定獨(dú)特的樣式,使它們?nèi)菀着c表單內(nèi)可能出現(xiàn)的其他文字區(qū)分開來(lái),舉例來(lái)說(shuō),我們可以為表單內(nèi)的所有段落標(biāo)簽制定獨(dú)特的樣式:
#thisform p {
font-family: Verdana, sans-serif;
font-size: 12px;
font-weight: bold;
color: #66000;
}
這會(huì)使表單內(nèi)的所有段落文字使用粗糙,酒紅色的Verdana 12像素大小的字體.但是同樣的結(jié)果也能借著為表單內(nèi)的<label>元素指定相同樣式來(lái)達(dá)成,像這樣:
#thisform label {
font-family: Verdana, sans-serif;
font-size: 12px;
font-weight: bold;
color: #66000;
}
這個(gè)樣式的顯示效果見圖5-11.
圖5-11.為label指定樣式的效果
為什么我比較喜歡這個(gè)方法?假設(shè)除了說(shuō)明文字之外,表單還有其他放在<p>當(dāng)中的指示或文字內(nèi)容.那么在前一種方法內(nèi),這些文字就會(huì)使用和<p>相同的樣式設(shè)定了.
也能先為表單中的所有文字制定一種樣式,接著再為<label>特別指定樣式,以便做出獨(dú)特的表單元素顯示效果.
使用的CSS大概類似這樣:
#thisform {
font-family: Georgia, serif;
font-size: 12px;
color: #999;
}
#thisform label {
font-family: Verdana, sans-serif;
font-weight: bold;
color: #660000;
}
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 標(biāo)記語(yǔ)言——表單 [4] 下一頁(yè) 標(biāo)記語(yǔ)言——表單 [6]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 5 頁(yè) 標(biāo)記語(yǔ)言——表單 [5]
