在Web開發時,不可避免要用到CSS,把我這幾年在Web開發過程中積累的一些不常用但是很實用的CSS整理了一下,希望對大家有所幫助!
filter:chroma(color:#FFFFFF); 讓指定的背景色透明,例:
0 && image.height>0){if(image.width>=510){this.width=510;this.height=image.height*510/image.width;}}"> |
0 && image.height>0){if(image.width>=510){this.width=510;this.height=image.height*510/image.width;}}"> | 未使用該濾鏡 |
使用該濾鏡 |
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;
使用border-collapse:collapse;
background-position: 0 -78; 設置背景圖片的位置,例: 《background-position的妙用》
table-layout: fixed; 固定佈局的算法。在這算法中,水平佈局是僅僅基於表格的寬度,表格邊框的寬度,單元格間距,列的寬度,而和表格內容無關。也就是說,內容可能被裁切,例: 看看我以前寫的一個仿msn的htc網格中應用這個屬性的效果吧,仿照MSN的網格,單元格中文字過長會自動被截取(在Table中使用樣式table-layout: fixed;),鼠標移上會全部顯示(使用一個浮動的層覆蓋在上面): 演示 下載
display:inline; 設置或檢索對象是否及如何顯示,inline表示內聯,例: 大家都知道兩個表格在一起,默認是會自動換行的,但是利用display:inline;屬性可以讓兩個表格並排在一起:
overflow: auto; 檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。auto : 在需要時剪切內容並添加滾動條,例:
使用前的TextArea |
使用後的TextArea | |
|
font:12px/18px; 字體大小/行高,例:
未使用CSS |
使用該CSS |
在這裏行高是系統默認的,不會受影響的 |
這裏的12px就表示字體大小,18px其實就等價於css中的line-height。 |
clip : rect ( 0 64 64 0 ) 字體大小/行高,例: 原圖: 0 && image.height>0){if(image.width>=510){this.width=510;this.height=image.height*510/image.width;}}" border=0> 裁減後: 0 && image.height>0){if(image.width>=510){this.width=510;this.height=image.height*510/image.width;}}"> 可以利用這個來做動畫:)
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播放器:這個播放器的進度條就是通過這種方法來重疊的。(下載) |