CSS3表格和表單樣式顯示效果
我要評(píng)論在傳統(tǒng)網(wǎng)頁(yè)中，表格主要用于網(wǎng)頁(yè)布局，因此也成為網(wǎng)頁(yè)編輯的主要工具；在標(biāo)準(zhǔn)化網(wǎng)頁(yè)設(shè)計(jì)中，表格的主要功能是顯示數(shù)據(jù)，也可適當(dāng)輔助結(jié)構(gòu)設(shè)計(jì)。本章主要介紹如何使用CSS控制表格和表單的顯示效果，如表格和表單的邊框、背景等樣式。
1、表格基本樣式
CSS為表格定義了5個(gè)專(zhuān)用屬性，詳細(xì)說(shuō)明如下表所示：
除了上表介紹的5個(gè)表格專(zhuān)用屬性外，CSS的其他屬性對(duì)于表格一樣適用。
1.1、設(shè)計(jì)表格邊框線(xiàn)
使用CSS的border屬性代替<table>標(biāo)簽的border屬性定義表格邊框，可以?xún)?yōu)化代碼結(jié)構(gòu)。
【示例】演示使用CSS設(shè)計(jì)細(xì)線(xiàn)邊框樣式的表格。
第1步，在標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽，定義一個(gè)內(nèi)部樣式表。
第2步，在內(nèi)部樣式表中輸入下面的樣式代碼，定義單元格邊框顯示為1px的灰色實(shí)線(xiàn)：
th, td {font-size:12px; border:solid 1px gray;}第3步，在<body>標(biāo)簽內(nèi)構(gòu)建一個(gè)簡(jiǎn)單的表格結(jié)構(gòu)。
1.2、定義單元格間距和空隙
為了兼容<table>標(biāo)簽的cellspacing屬性，CSS定義了border-spacing屬性，該屬性能夠分離單元格間距。取值包含1個(gè)或2個(gè)值。當(dāng)定義1個(gè)值時(shí)，則定義單元格行間距和列間距都為該值，例如：
table { border-spacing:20px;}/* 分隔單元格邊框 */如果分別定義行間距和列間距，就需要定義2個(gè)值，例如：
table { border-spacing:10px 30px;}/* 分隔單元格邊框 */其中，第一個(gè)值表示單元格之間的行間距，第二個(gè)值表示單元格之間的列間距，該屬性值不可以為負(fù)數(shù)。使用cellspacing屬性定義單元格之間的距離之后，該空間由表格背景填充。
【示例1】重新設(shè)計(jì)內(nèi)部樣式表，為表格內(nèi)的單元格定義上下6px和左右12px的間距，同時(shí)設(shè)計(jì)單元格內(nèi)部空隙為12px：
table { border-spacing: 6px 12px; }
th, td {
font-size: 12px;
border: solid 1px gray;
padding: 12px;
}
也可以為<table>標(biāo)簽定義補(bǔ)白，此時(shí)可以增加表格外框與單元格之間的距離。
1.3、隱藏空單元格
如果表格單元格的邊框處于分離狀態(tài)(border-collapse: separate;)，可以使用CSS的empty-cells屬性設(shè)置空單元格是否顯示。當(dāng)其值為show時(shí)，表示顯示空單元格；當(dāng)值為hide時(shí)，表示隱藏空單元格。
【示例】隱藏第2行第2列的空單元格邊框：
<style type="text/css">
table {/* 表格樣式 */
width: 400px; /* 固定表格寬度 */
border: dashed 1px red; /* 定義虛線(xiàn)表格邊框 */
empty-cells: hide; /* 隱藏空單元格 */
}
th, td {/* 單元格樣式 */
border: solid 1px #000; /* 定義實(shí)線(xiàn)單元格邊框 */
padding: 4px; /* 定義單元格內(nèi)的補(bǔ)白區(qū)域 */
}
</style>
<table>
<tr><td>西</td><td>東</td> </tr>
<tr><td>北</td><td></td></tr>
</table>
1.4、定義標(biāo)題樣式
使用CSS的caption-side屬性可以定義標(biāo)題的顯示位置，該屬性取值包括top（位于表格上面）、bottom（位于表格底部）、left（位于表格左側(cè)，非標(biāo)準(zhǔn)）、right（位于表格右側(cè)，非標(biāo)準(zhǔn)）。
如果要水平對(duì)齊標(biāo)題文本，則可以使用text-align屬性。對(duì)于左右兩側(cè)的標(biāo)題，可以使用vertical-align屬性進(jìn)行垂直對(duì)齊，取值包括top、middle和bottom，其他取值無(wú)效，默認(rèn)為top。
【示例】定義標(biāo)題靠左顯示，并設(shè)置標(biāo)題垂直居中顯示：
<style type="text/css">
table {border: dashed 1px red; } /* 定義表格虛線(xiàn)外框樣式 */
th, td { /* 定義單元格樣式 */
border: solid 1px #000; /* 實(shí)線(xiàn)內(nèi)框 */
padding: 20px 80px; /* 單元格內(nèi)補(bǔ)白大小 */
}
caption {/* 定義標(biāo)題行樣式 */
caption-side: left; /* 左側(cè)顯示 */
width: 10px; /* 定義寬度 */
margin: auto 20px; /* 定義左右邊界 */
vertical-align: middle; /* 垂直居中顯示 */
font-size: 14px; /* 定義字體大小 */
font-weight: bold; /* 加粗顯示 */
color: #666; /* 灰色字體 */
}
</style>
<table>
<caption>表格標(biāo)題</caption>
<tr><td>北</td><td>西</td> </tr>
<tr><td>東</td><td>南</td> </tr>
</table>
2、設(shè)計(jì)表單樣式
表單沒(méi)有獨(dú)立的CSS屬性，適用CSS通用屬性，如邊框、背景、字體等樣式。但是個(gè)別表單控件比較特殊，不易使用CSS定制，如下拉菜單、單選按鈕、復(fù)選框和文件域。如果完全設(shè)計(jì)個(gè)性化樣式，有時(shí)還需要JavaScript輔助實(shí)現(xiàn)。
2.1、定義文本框樣式
使用CSS可以對(duì)文本框進(jìn)行全面定制，如邊框、背景、補(bǔ)白、大小、字體樣式，以及CSS3圓角、陰影等。
【示例1】新建一個(gè)網(wǎng)頁(yè)，在<body>標(biāo)簽內(nèi)使用<form>標(biāo)簽包含一個(gè)文本框和一個(gè)文本區(qū)域。
<form>
<p><label for="user">文本框：</label>
<input type="text" value="看我的顏色" id="user" name="user" /></p>
<p><label for="text">文本區(qū)域：</label>
<textarea id="text" name="text">看我背景</textarea></p>
</form>在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽，定義內(nèi)部樣式表，然后輸入下面樣式，定義表單樣式，為文本框和文本區(qū)域設(shè)置不同的邊框色、字體色、背景圖。
body { font-size: 14px; } /* 文本大小 */
input {
width: 300px; /* 設(shè)置寬度 */
height: 25px; /* 設(shè)置高度 */
font-size: 14px; /* 文本大小*/
line-height: 25px; /* 設(shè)置行高 */
border: 1px solid #339999; /* 設(shè)置邊框?qū)傩?*/
color: #FF0000; /* 字體顏色 */
background-color: #99CC66; /* 背景顏色 */
}
textarea {
width: 400px; /* 設(shè)置寬度 */
height: 300px; /* 設(shè)置高度 */
line-height: 24px; /* 設(shè)置行高 */
border: none; /* 清除默認(rèn)邊框設(shè)置 */
border: 1px solid #ff7300; /* 設(shè)置邊框?qū)傩?*/
background: #99CC99 url(images/1.jpg) no-repeat; /* 設(shè)置寬度 */
display: block; /* 背景顏色*/
margin-left: 60px; /* 設(shè)置外間距 */
}在上面代碼中，定義整個(gè)表單中字體大小和輸入域的空間，設(shè)置寬度和高度，輸入域的高度和行高應(yīng)一致，即方便實(shí)現(xiàn)單行文字垂直居中，接著設(shè)置單行輸入框的邊框，在字體顏色和背景顏色取色時(shí)，一般反差較大，以突出文本內(nèi)容。
設(shè)置文本區(qū)域?qū)傩浴Ｍ瑯訉?duì)其寬高設(shè)置，此處設(shè)置它的行高為24px，實(shí)現(xiàn)行與行的間距，而不設(shè)置垂直居中。通過(guò)瀏覽器會(huì)發(fā)現(xiàn)文本區(qū)域的邊框線(xiàn)有凹凸的感覺(jué)，此時(shí)設(shè)置邊框線(xiàn)為0，并重新定義邊框線(xiàn)的樣式。文本區(qū)域的輸入內(nèi)容較多，可以設(shè)置塊元素?fù)Q行顯示，使輸入的文本全部顯示。通過(guò)瀏覽器發(fā)現(xiàn)單行文本框和文本區(qū)域左邊并沒(méi)有對(duì)齊，通過(guò)設(shè)置margin-left屬性實(shí)現(xiàn)上（單行文本框）下（文本區(qū)域）的對(duì)齊，最后更改文本區(qū)域的背景色和背景圖，即整個(gè)表單樣式設(shè)置完畢。在IE瀏覽器中預(yù)覽，演示效果如下圖所示：
2.2、設(shè)計(jì)單選按鈕和復(fù)選框樣式
使用CSS可以簡(jiǎn)單地設(shè)計(jì)單選按鈕和復(fù)選框的樣式，如邊框和背景色。如果改變其整體風(fēng)格，需要通過(guò)JavaScript和背景圖替換的方式間接實(shí)現(xiàn)。
下面以單選按鈕為例進(jìn)行演示說(shuō)明。
【設(shè)計(jì)思路】
第1步，先根據(jù)需要設(shè)計(jì)兩種圖片狀態(tài)，即選中和未選中，后期通過(guò)不同的class類(lèi)實(shí)現(xiàn)背景圖像的改變。
第2步，通過(guò)標(biāo)簽的for屬性和單選按鈕id屬性值實(shí)現(xiàn)內(nèi)容與單選按鈕的關(guān)聯(lián)，即單擊單選按鈕相對(duì)應(yīng)的文字時(shí)，單選按鈕被選中。
第3步，借助JavaScript腳本實(shí)現(xiàn)單擊時(shí)動(dòng)態(tài)改變class類(lèi)，實(shí)現(xiàn)背景圖像的切換。
<form>
<h3>請(qǐng)選擇您最喜歡的瀏覽器</h3>
<p>
<input type="radio" checked="" id="radio0" value="radio" name="group"/>
<label for="radio0" class="radio1">Internet Explorer</label>
</p>
…
</form>第4步，頁(yè)面進(jìn)行初始化，網(wǎng)頁(yè)字體為16號(hào)黑體。表單<form>元素寬度為600px，為每行存放3個(gè)單選按鈕確定空間，并使表單在瀏覽器居中顯示。<form>元素的相對(duì)定位應(yīng)去掉，此處體現(xiàn)子元素設(shè)置絕對(duì)定位時(shí)其父元素最好能設(shè)置相對(duì)定位，以減少bug的出現(xiàn)。
/*頁(yè)面基本設(shè)置及表單<form>元素初始化 */
body {font-family:"黑體"; font-size:16px;}
form {position:relative; width:600px; margin:0 auto; text-align:center;}第5步，<p>標(biāo)簽寬度為200px，并設(shè)置左浮動(dòng)，實(shí)現(xiàn)表單（表單的寬度為600px，600/200=3）內(nèi)部橫向顯示3個(gè)單選按鈕。各個(gè)瀏覽器的名稱(chēng)長(zhǎng)短不同，對(duì)其進(jìn)行左對(duì)齊設(shè)置，以達(dá)到視覺(jué)上的對(duì)齊。<p>標(biāo)簽在不同瀏覽器下默認(rèn)間距大小不一致，此處設(shè)置內(nèi)外間距為0px，會(huì)發(fā)現(xiàn)第一行單選按鈕和第二行單選按鈕過(guò)于緊密，影響美觀(guān)，于是設(shè)置上下外間距(margin)為10px。
p{ width:200px; float:left; text-align:left; margin:0; padding:0; margin:10px 0px;}第6步，<input>標(biāo)簽的ID值和<label>標(biāo)簽的for屬性值一致，實(shí)現(xiàn)二者關(guān)聯(lián)，并將<input>標(biāo)簽進(jìn)行隱藏操作。即<input>標(biāo)簽設(shè)置為絕對(duì)定位，并設(shè)置較大的left值，比如left：-999em；<input>標(biāo)簽完全移到瀏覽器可視區(qū)域之外，達(dá)到隱藏該標(biāo)簽的作用，為緊跟在它后面的文字設(shè)置背景圖像替代單選按鈕（<input>標(biāo)簽）做鋪墊。
input {position: absolute; left: -999em; }第7步，為<label>標(biāo)簽添加class類(lèi)radio1和radio2，代表單選按鈕未選中和選中狀態(tài)兩種狀態(tài)。現(xiàn)在分別對(duì)class類(lèi)radio1和radio2進(jìn)行設(shè)置，二者CSS屬性設(shè)置一致，區(qū)別在于其背景圖像的不同。具體方法如下：
- 設(shè)置背景圖不平鋪，起始位置為左上角，清除外間距設(shè)置。背景圖的寬度是33px、高度是34px，即設(shè)置的背景圖和文字間距一定要大于33px，以防止文字壓住背景圖（文字在圖片上面）。
- 設(shè)置左內(nèi)間距為40px（可調(diào)整大?。O(shè)置標(biāo)簽高度為34px、行高為34px，實(shí)現(xiàn)垂直居中，且完整顯示背景圖（高度值必須大于34px），用背景圖代替單選按鈕。
- 在瀏覽器顯示中觀(guān)察頁(yè)面，背景圖未顯示完整，此時(shí)需要將標(biāo)簽的CSS屬性設(shè)置為塊元素，這樣設(shè)置的高度才有效。當(dāng)鼠標(biāo)移至標(biāo)簽時(shí)設(shè)置指針變化為手形，提示當(dāng)前可以單擊。最后加入JavaScript腳本，實(shí)現(xiàn)動(dòng)態(tài)單擊選中效果，腳本不屬于本書(shū)的介紹范圍，讀者可以直接使用（也可以直接刪除JavaScript腳本）。單選按鈕可以通過(guò)背景圖替代，同樣如示例，使用背景圖也可以替代復(fù)選框的默認(rèn)按鈕樣式。
.radio1 {margin: 0px;padding-left: 40px;color: #000;line-height: 34px;height: 34px;
background:url(img/4.jpg) no-repeat left top;cursor: pointer;display:block; }
.radio2 {background:url(img/3.jpg) no-repeat left top; }
2.3、定義選擇框樣式
不同瀏覽器對(duì)于CSS控制選擇框的支持不是很統(tǒng)一。一般情況下，通過(guò)CSS可以簡(jiǎn)單地設(shè)置選擇框的字體和邊框樣式，對(duì)下拉菜單中的每個(gè)選項(xiàng)定義單獨(dú)的背景、字體等效果，但是對(duì)于下拉箭頭的外觀(guān)，需要借助JavaScript腳本以間接方式控制。
【操作步驟】
第1步，新建一個(gè)網(wǎng)頁(yè)，在<body>標(biāo)簽內(nèi)使用<form>標(biāo)簽包含一個(gè)下拉菜單。
<div class='box'>
<select >
<option class="bjc1">北京</option>
<option class="bjc2">上海</option>
<option class="bjc3">天津</option>
<option class="bjc4">重慶</option>
</select>
</div>第2步，在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽，定義一個(gè)內(nèi)部樣式表，輸入下面樣式。添加不同class類(lèi)名實(shí)現(xiàn)不同<option>標(biāo)簽的背景顏色，最終達(dá)到彩虹顏色的下拉菜單。
第3步，為<select>標(biāo)簽的父元素<div>標(biāo)簽設(shè)置寬度為120px，IE下設(shè)置為150px，超出部分隱藏，通過(guò)第2步查看超出部分的隱藏是否有效。
.box{width:120px;width:150px\9; overflow:hidden;}第4步，為<select>標(biāo)簽設(shè)置寬度為136px，它的值小于外層<div>標(biāo)簽的寬度，對(duì)其設(shè)置高度為23px，因?yàn)楸尘皥D像為119px×23px，最外層的<div>標(biāo)簽設(shè)置的寬度是背景圖的寬度所定義的。背景圖的設(shè)置是查看現(xiàn)代瀏覽器和IE瀏覽器對(duì)<select>標(biāo)簽的支持情況。
select{width:136px; color: #909993; border:none;height:23px; line-height:23px;
background:none;background:url(images/5.jpg) no-repeat left top; color:#000000; font-weight:bold;}
.box{height:200px; background-color:#3C9}
第5步，為下拉菜單的每個(gè)選項(xiàng)設(shè)置不同的背景顏色，通過(guò)<option>標(biāo)簽的不同的class名設(shè)置不同的背景顏色，實(shí)現(xiàn)彩虹效果。<option>標(biāo)簽的值與<select>標(biāo)簽的高度應(yīng)一致，設(shè)置為手形，高度為23px，更改鼠標(biāo)樣式為手形。
.bjc1{background-color:#0C9;}
.bjc2{background-color:#F96}
.bjc3{background-color:#0F0}
.bjc4{background-color:#C60}
option{font-weight:bold; border:none; line-height:23px; height:23px; cursor:pointer;}
到此這篇關(guān)于CSS3表格和表單樣式的文章就介紹到這了,更多相關(guān)CSS3表格表單樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS3 重置iphone瀏覽器按鈕input,select等表單元素的默認(rèn)樣式
之前寫(xiě)了一個(gè)登錄表單頁(yè)面，再iphone上測(cè)試遇到了一些奇怪的問(wèn)題：表單中的input[type="submit"]按鈕在iPhone的safari瀏覽器下會(huì)出現(xiàn)圓角的情況；input[type="text"]文本輸2014-10-11css3中檢驗(yàn)表單的required,focus,valid和invalid樣式
HTML5的出現(xiàn)為我們提供一些屬性，不用編寫(xiě)js和正則即可解決這個(gè)檢驗(yàn)表單內(nèi)容required,focus,valid和invalid樣式，感興趣的朋友可以了解下本文2014-02-21css3實(shí)現(xiàn)一款模仿iphone樣式的注冊(cè)表單
注冊(cè)表單而且還是iphone樣式的，怎么樣心動(dòng)了吧，學(xué)好css3實(shí)現(xiàn)這個(gè)效果不是問(wèn)題，接下來(lái)為大家詳細(xì)介紹下css3如何實(shí)現(xiàn)注冊(cè)表單的樣式，感興趣的你們可不要錯(cuò)過(guò)了哈2013-03-20