1. 程式人生 > >(轉載)這些樣式表,你都用過麼?

(轉載)這些樣式表,你都用過麼?

在Web開發時,不可避免要用到CSS,把我這幾年在Web開發過程中積累的一些不常用但是很實用的CSS整理了一下,希望對大家有所幫助!

filter:chroma(color:#FFFFFF);
讓指定的背景色透明,例:

quickstart.gif quickstart.gif
未使用該濾鏡 使用該濾鏡

word-break:break-all;
強制換行,例:

當未使用該樣式時,雖然我設定了表格寬度為100px,但是面對這樣連續的字元,表格無法自動換行,表格會被撐破:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

再看看使用該樣式後的效果:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

writing-mode:tb-rl;
用於設定文字的書寫方向,可以有兩個取值:
lr-tb:表示左右-上下,left right - top bottom
tb-rl:表示上下-右左,top bottom - right left
需要 IE 5.5+ 才支援,例:

第一組垂直文字第一組水平文字第二組水平文字
第二組水平文字第三組豎直文字第三組水平文字

text-indent:2em;
首行縮排,例:

有時候,我們需要將段落的首行縮排兩個文字,一般我們都是用4個HTML的空格( )來實現,其實我們還可以用樣式表來達到這種效果!

background-color: transparent;
transparent表示透明色,例:


border-collapse:collapse;
它會自動把相同的邊框線合併,例:

不使用border-collapse:collapse;

1.1 1.2
2.1 2.2
使用border-collapse:collapse;
1.1 1.2
2.1 2.2

background-position: 0 -78;
設定背景圖片的位置,例:

《background-position的妙用》

table-layout: fixed;
固定佈局的演算法。在這演算法中,水平佈局是僅僅基於表格的寬度,表格邊框的寬度,單元格間距,列的寬度,而和表格內容無關。也就是說,內容可能被裁切,例:

看看我以前寫的一個仿msn的htc網格中應用這個屬性的效果吧,仿照MSN的網格,單元格中文字過長會自動被擷取(在Table中使用樣式table-layout: fixed;),滑鼠移上會全部顯示(使用一個浮動的層覆蓋在上面): 演示 下載

display:inline;
設定或檢索物件是否及如何顯示,inline表示內聯,例:

大家都知道兩個表格在一起,預設是會自動換行的,但是利用display:inline;屬性可以讓兩個表格並排在一起:

表格1
 
表格2

overflow: auto;
檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容。auto : 在需要時剪下內容並新增滾動條,例:

使用前的TextArea 使用後的TextArea

font:12px/18px;
字型大小/行高,例:

未使用CSS 使用該CSS

在這裡行高是系統預設的,不會受影響的

這裡的12px就表示字型大小,18px其實就等價於css中的line-height。

clip : rect ( 0 64 64 0 )
字型大小/行高,例:

原圖: girl.gif
裁減後: girl.gif
可以利用這個來做動畫:)

font-size: expression(document.body.clientWidth / 20);
expression是IE瀏覽器特有的功能,可以直接執行指令碼而算出css的值,例:

《CSS也能控制表格的交替顏色 》

字型大小隨著瀏覽器大小而變化,始終為瀏覽器寬度的1/20
對於支援HTML的BBS來說,這可能會是一個安全隱患!

position: absolute;
這個我想絕大多數人都知道——絕對定位,我所要說的是偶然發現的一個隱含功能,例:

當給一個網頁元素的CSS設定為"position: absolute;",那麼它會絕對定位,然後根據css中的left,top屬性確定自己的位置。但是如果我們僅僅設定一個元素樣式表的"position: absolute;"屬性,而不設定其left,top屬性,那麼該元素會浮在其html所在位置。看個例子,我將一個tr的CSS設定為"position: absolute;":

第一行
第二行

第一行浮在第二行上了,這個特性可以很方便的來製作重疊效果,例如我以前寫過的自定義按鈕和flash播放器都用到了這個特性來實現重疊:
自定義按鈕:一個自定義按鈕,底下是一個普通的Button,利用"position:absolute;"在Button上面覆蓋圖片,這樣看起來就像自定義按鈕,而實際點選確是點選底下真實的Button(下載
Flash播放器:這個播放器的進度條就是通過這種方法來重疊的。(下載