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