CSS 循序漸進(jìn)（三）樣式“表”秀

2020-03-24 16:30:56

字體：大中小

供稿：網(wǎng)友

不知道大家看完前面兩篇以后是否對(duì)用style已經(jīng)有了一點(diǎn)心得，其實(shí)前文所說(shuō)的不過(guò)是樣式表最基本的運(yùn)用。筆者這里想問(wèn)一問(wèn)，讀者們有沒(méi)有感覺(jué)到html中所規(guī)定的那些標(biāo)準(zhǔn)形式的表格（table）和表單（form）樣子過(guò)于呆板，而風(fēng)格又時(shí)常與自己網(wǎng)頁(yè)格格不入呢?而且，對(duì)于一個(gè)大信息量和交互式的網(wǎng)頁(yè)而言，表格和表單是需要大量運(yùn)用并且占有很重要的位置的。現(xiàn)在如果筆者告訴大家用樣式表定制自己個(gè)人風(fēng)格的表單和表格的話，您是否會(huì)興奮得跳起來(lái)呢?其實(shí)，如果恰當(dāng)?shù)倪\(yùn)用style，甚至可以做出比作圖更好的效果來(lái)。先給大家說(shuō)說(shuō)關(guān)于定制表格的一些細(xì)節(jié)。在第一章里的那個(gè)例子里，大家應(yīng)該看到了許多運(yùn)用定制表格的地方。應(yīng)該說(shuō)定制表格并不復(fù)雜，主要的也就是對(duì)背景（background）和邊框（border）進(jìn)行定義。用的也不過(guò)是這兩方面的屬性。塊參數(shù)（Block-Level Formatting Properties）
,repeat-y（縱向重復(fù)）,no-repeat（不重復(fù)）說(shuō)起來(lái)這些屬性在上次介紹文字排版的時(shí)候也用過(guò)了，不過(guò)您這次再看看它在表格里的表現(xiàn)，它們?cè)谶@里扮演的角色非常重要，筆者決非是簡(jiǎn)單的老調(diào)重彈。需要說(shuō)明的是所有的邊框?qū)傩远际欠治恢玫模簿褪钦f(shuō)，可以對(duì)外觀的上、下、左、右四個(gè)方向分別作設(shè)定，也就是說(shuō)，對(duì)于每一項(xiàng)邊框?qū)傩裕加衎order-left-width,border-right-width,border-top-width,border-bottom-width這樣的四個(gè)分屬性，也可以在某個(gè)屬性后面連帶四個(gè)值，分別表示對(duì)top、right、bottom、left的定義。這一點(diǎn)很有用，我們就可以運(yùn)用它，做出類(lèi)似光影的效果。而另外一個(gè)屬性，所謂風(fēng)格（style）就很難定義了。有些說(shuō)法，比如說(shuō)solid（實(shí)心），double（雙層）很好理解。但是有些效果恐怕要您用過(guò)以后才能明白是怎么回事。這里筆者把它們?nèi)苛信e如下: dotted、dashed、solid、double、groove、ridge、inset、outset。下面有一個(gè)專(zhuān)門(mén)的關(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)頁(yè)的交互性越來(lái)越被人們重視，表單的運(yùn)用也越來(lái)越多。可是HTML本身所制定的那些標(biāo)準(zhǔn)形式的表單件的樣子實(shí)在讓人不敢恭維。文本框一律是內(nèi)部深陷的長(zhǎng)條，而按鈕又全是那種灰灰的塊塊，放在一個(gè)精致的網(wǎng)站中實(shí)在不成樣子。所以可以說(shuō)適當(dāng)?shù)恼{(diào)整邊框大小、顏色，做出符合網(wǎng)站個(gè)性的表單也是網(wǎng)站成功的一環(huán)吧。大家要看效果的話可以借鑒一下fanso的打開(kāi)音樂(lè)（http://music.fanso.com）的例子。（也可以看圖二）大家注意看它右邊的一排輸入框，其實(shí)它是將輸入框做到最小了，但是味道卻反而足了。用到的定義語(yǔ)句其實(shí)很簡(jiǎn)單: .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)該可以看到，表格和表單的定制最重要的地方其實(shí)在于邊框與顏色的選擇與搭配，這個(gè)是其外觀效果的關(guān)鍵。本文作者:html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS3實(shí)現(xiàn)Chrome瀏覽器的新LOGO

下一篇：css的網(wǎng)頁(yè)邊框代碼