(轉載)這些樣式表,你都用過麼?
在Web開發時,不可避免要用到CSS,把我這幾年在Web開發過程中積累的一些不常用但是很實用的CSS整理了一下,希望對大家有所幫助!
filter:chroma(color:#FFFFFF);
讓指定的背景色透明,例:
未使用該濾鏡 | 使用該濾鏡 |
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 |
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 )
字型大小/行高,例:
原圖:
裁減後:
可以利用這個來做動畫:)
font-size: expression(document.body.clientWidth / 20);
expression是IE瀏覽器特有的功能,可以直接執行指令碼而算出css的值,例:
《CSS也能控制表格的交替顏色 》
對於支援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播放器:這個播放器的進度條就是通過這種方法來重疊的。(下載)