不知道大家看完前面兩篇以后是否對用style已經(jīng)有了一點心得，其實前文所說的不過是樣式表最基本的運用。筆者這里想問一問，讀者們有沒有感覺到html中所規(guī)定的那些標(biāo)準(zhǔn)形式的表格（table）和表單（form）樣子過于呆板，而風(fēng)格又時常與自己網(wǎng)頁格格不入呢?而且，對于一個大信息量和交互式的網(wǎng)頁而言，表格和表單是需要大量運用并且占有很重要的位置的?，F(xiàn)在如果筆者告訴大家用樣式表定制自己個人風(fēng)格的表單和表格的話，您是否會興奮得跳起來呢?其實，如果恰當(dāng)?shù)倪\用style，甚至可以做出比作圖更好的效果來。

　　先給大家說說關(guān)于定制表格的一些細(xì)節(jié)。在第一章里的那個例子里，大家應(yīng)該看到了許多運用定制表格的地方。應(yīng)該說定制表格并不復(fù)雜，主要的也就是對背景（background）和邊框（border）進(jìn)行定義。用的也不過是這兩方面的屬性。

塊參數(shù)（Block-Level Formatting Properties）

參數(shù)	含義	舉例
Left-margin,right-margin	留的空白	長度值,百分比值
Padding-top…	內(nèi)容邊框間距	長度值,百分比值
Border-width	邊框?qū)挾?/p>	長度值
Border-style	邊框風(fēng)格	Solid,double,groove
Border-color	邊框顏色	顏色值
Width	寬度	長度值,百分比值
Float	對齊	Left,right

顏色參數(shù)（Color and Background Properties）

參數(shù)	含義	舉例
Color	前景色彩	顏色值（red, #FF0000）
Background-image	背景文件	文件地址
Background-color	背景顏色	顏色值
background-attachment	背景是否依附	scroll（隨內(nèi)容滾動）和fixed（固定位置）
background-repeat	背景重復(fù)格式	repeat-x（水平重復(fù)） ,repeat-y（縱向重復(fù)）,no-repeat（不重復(fù)）

　　說起來這些屬性在上次介紹文字排版的時候也用過了，不過您這次再看看它在表格里的表現(xiàn)，它們在這里扮演的角色非常重要，筆者決非是簡單的老調(diào)重彈。需要說明的是所有的邊框?qū)傩远际欠治恢玫模簿褪钦f，可以對外觀的上、下、左、右四個方向分別作設(shè)定，也就是說，對于每一項邊框?qū)傩?，都有border-left-width,border-right-width,border-top-width,border-bottom-width這樣的四個分屬性，也可以在某個屬性后面連帶四個值，分別表示對top、right、bottom、left的定義。這一點很有用，我們就可以運用它，做出類似光影的效果。而另外一個屬性，所謂風(fēng)格（style）就很難定義了。有些說法，比如說solid（實心），double（雙層）很好理解。但是有些效果恐怕要您用過以后才能明白是怎么回事。這里筆者把它們?nèi)苛信e如下:

　　 dotted、dashed、solid、double、groove、ridge、inset、outset。

　　下面有一個專門的關(guān)于表格的例子，大家看看，效果如圖一

　　源碼如下:

< html>< head>< title>Untitled Document< /title>< meta http-equiv="Content-Type" content="text/html; charset=gb2312">< style type="text/css">< !--table {  font-family: "宋體"; font-size: 9pt; color: #000033; text-decoration: none; background-color: #FFCCCC; padding-top: 4px; padding-right: 3px; padding-bottom: 2px; padding-left: 2px; border: #CCCCFF; border-style: groove; border-top-width: thick; border-right-width: thick; border-bottom-width: thick; border-left-width: thick}-->< /style>< /head>< body bgcolor="#FFFFFF">< table width="75%" border="1" cellspacing="1" cellpadding="1" align="center">  < tr bgcolor="#CCFFCC" bordercolor="#0000CC" valign="middle" align="center">     < td>一< /td>    < td>二< /td>    < td>三< /td>    < td>四< /td>  < /tr>  < tr bgcolor="#CCFFCC" bordercolor="#0000CC" valign="middle" align="center">     < td>a< /td>    < td>b< /td>    < td>c< /td>    < td>d< /td>  < /tr>  < tr bgcolor="#CCFFCC" bordercolor="#0000CC" valign="middle" align="center">     < td>甲< /td>    < td>乙< /td>    < td>丙< /td>    < td>丁< /td>  < /tr>  < tr bgcolor="#CCFFCC" bordercolor="#0000CC" valign="middle" align="center">     < td>A< /td>    < td>B< /td>    < td>C< /td>    < td>D< /td>  < /tr>< /table>< /body>< /html>

　　至于表單，由于網(wǎng)頁的交互性越來越被人們重視，表單的運用也越來越多?？墒荋TML本身所制定的那些標(biāo)準(zhǔn)形式的表單件的樣子實在讓人不敢恭維。文本框一律是內(nèi)部深陷的長條，而按鈕又全是那種灰灰的塊塊，放在一個精致的網(wǎng)站中實在不成樣子。所以可以說適當(dāng)?shù)恼{(diào)整邊框大小、顏色，做出符合網(wǎng)站個性的表單也是網(wǎng)站成功的一環(huán)吧。

　　大家要看效果的話可以借鑒一下fanso的打開音樂（http://theartemis.cn）的例子。（也可以 看圖二）大家注意看它右邊的一排輸入框，其實它是將輸入框做到最小了，但是味道卻反而足了。

　　用到的定義語句其實很簡單:

.input1 {	BACKGROUND-COLOR: #e8e8e8; BORDER-BOTTOM: #a8a8a8 1px solid; BORDER-LEFT: #a8a8a8 1px solid; BORDER-RIGHT: #a8a8a8 1px solid; BORDER-TOP: #a8a8a8 1px solid; FONT-SIZE: 9pt}

　　大家應(yīng)該可以看到，表格和表單的定制最重要的地方其實在于邊框與顏色的選擇與搭配，這個是其外觀效果的關(guān)鍵。

• css