CSS 循序漸進(三)樣式「表」秀

2021-04-01 09:37:18 字數 3229 閱讀 2396

css 循序漸進(三)樣式「表」秀

**:動態網製作指南 .knowsky.***

不知道大家看完前面兩篇以後是否對用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。

下面有乙個專門的關於**的例子,大家看看,效果如圖一

原始碼如下:

< 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.***)的例子。(也可以看圖二)大家注意看它右邊的一排輸入框,其實它是將輸入框做到最小了,但是味道卻反而足了。

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

.input1 
大家應該可以看到,**和表單的定製最重要的地方其實在於邊框與顏色的選擇與搭配,這個是其外觀效果的關鍵。

CSS 知識整理 三 樣式

目錄 css 知識整理 三 樣式 一 字型 二 文字 三 列表 四 背景 css 列表屬性允許你放置 改變列表項標誌,或者將影象作為列表項標誌。設定列表項標誌為實心圓 空心圓 方形 設定列表項標誌為一張 可設定是重複排滿背景還是其他 這個比較簡單,可現用現查 舉個例子 李白噫籲嚱,危乎高哉!蜀道之難...

CSS學習筆記 三 樣式宣告

在這篇文章中你能看到有關於 css 樣式設定的常用屬性 1 背景顏色 可以使用background color屬性為元素設定背景顏色,它接受任何合法的顏色值,預設是transparent 注意,background color 屬性不能繼承 2 背景 可以使用background image屬性為元...

前端學習(3)樣式表 CSS

也叫作層疊樣式表或者級聯樣式表,用於定義html元素的顯示效果,原本的樣式是在html中內嵌定義的,css的出現使得分工更加清晰 內嵌樣式修改文字顏色 doctype html utf 8 內嵌樣式 title text css h1 p body 紅色 h1 藍色 p body html 內嵌樣式...