|
三、樣式「表」秀——介紹樣式表中表格與表單的定制
不知道大家看完前面兩篇以後是否對用style已經有了一點心得,其實前文所說的不過是樣式表最基本的運用。筆者這裡想問一問,讀者們有沒有感覺到html中所規定的那些標準形式的表格(table)和表單(form)樣子過於呆板,而風格又時常與自己網頁格格不入呢?而且,對於一個大信息量和交互式的網頁而言,表格和表單是需要大量運用並且佔有很重要的位置的。現在如果筆者告訴大家用樣式表定制自己個人風格的表單和表格的話,您是否會興奮得跳起來呢?其實,如果恰當的運用style,甚至可以做出比作圖更好的效果來。
先給大家說說關於定製表格的一些細節。在第一章裡的那個例子裡,大家應該看到了許多運用定製表格的地方。應該說定製表格並不複雜,主要的也就是對背景(background)和邊框(border)進行定義。用的也不過是這兩方面的屬性。
塊參數(Block-Level Formatting Properties)
|
參數 |
含義 |
舉例 |
|
Left-margin,right-margin |
留的空白 |
長度值,百分比值 |
|
Padding-top… |
內容邊框間距 |
長度值,百分比值 |
|
Border-width |
邊框寬度 |
長度值 |
|
Border-style |
邊框風格 |
Solid,double,groove |
|
Border-color |
邊框顏色 |
顏色值 |
|
Width |
寬度 |
長度值,百分比值 |
|
Float |
對齊 |
Left,right |
顏色參數(Color and Background Properties)
|
參數 |
含義 |
舉例 |
|
Color |
前景色彩 |
顏色值(red, #FF0000) |
|
Background-image |
背景文件 |
文件地址 |
|
Background-color |
背景顏色 |
顏色值 |
|
background-attachment |
背景是否依附 |
scroll(隨內容滾動)和fixed(固定位置) |
|
background-repeat |
背景重複格式 |
repeat-x(水平重複)
,repeat-y(縱向重複),no-repeat(不重複) |
說起來這些屬性在上次介紹文字排版的時候也用過了,不過您這次再看看它在表格裡的表現,它們在這裡扮演的角色非常重要,筆者決非是簡單的老調重彈。需要說明的是所有的邊框屬性都是分位置的,也就是說,可以對外觀的上、下、左、右四個方向分別作設定,也就是說,對於每一項邊框屬性,都有border-left-width,border-right-width,border-top-width,border-bottom-width這樣的四個分屬性,也可以在某個屬性後面連帶四個值,分別表示對top、right、bottom、left的定義。這一點很有用,我們就可以運用它,做出類似光影的效果。而另外一個屬性,所謂風格(style)就很難定義了。有些說法,比如說solid(實心),double(雙層)很好理解。但是有些效果恐怕要您用過以後才能明白是怎麼回事。這裡筆者把它們全部列舉如下:
dotted、dashed、solid、double、groove、ridge、inset、outset。
下面有一個專門的關於表格的例子,大家看看,效果如圖一
源碼如下: < 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>
至於表單,由於網頁的交互性越來越被人們重視,表單的運用也越來越多。可是HTML本身所制定的那些標準形式的表單件的樣子實在讓人不敢恭維。文本框一律是內部深陷的長條,而按鈕又全是那種灰灰的塊塊,放在一個精緻的網站中實在不成樣子。所以可以說適當的調整邊框大小、顏色,做出符合網站個性的表單也是網站成功的一環吧。
大家要看效果的話可以借鑒一下fanso的打開音樂(http://music.fanso.com)的例子。(也可以看圖二)大家注意看它右邊的一排輸入框,其實它是將輸入框做到最小了,但是味道卻反而足了。
用到的定義語句其實很簡單: .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
}
大家應該可以看到,表格和表單的定制最重要的地方其實在於邊框與顏色的選擇與搭配,這個是其外觀效果的關鍵。
|