這些樣式表，你都用過么？

2019-11-17 05:26:26

字體：大中小

供稿：網(wǎng)友

在Web開發(fā)時(shí)，不可避免要用到CSS，把我這幾年在Web開發(fā)過程中積累的一些不常用但是很實(shí)用的CSS整理了一下，希望對大家有所幫助！filter:chroma(color:#FFFFFF);
讓指定的背景色透明，例:
這些樣式表，你都用過么？（圖一）

未使用該濾鏡使用該濾鏡 Word-break:break-all;
強(qiáng)制換行，例: 當(dāng)未使用該樣式時(shí)，雖然我設(shè)置了表格寬度為100px，但是面對這樣連續(xù)的字符，表格無法自動換行，表格會被撐破: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 再看看使用該樣式后的效果: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa writing-mode:tb-rl;
用于設(shè)置文本的書寫方向，可以有兩個(gè)取值：
lr-tb：表示左右-上下，left right - top bottom
tb-rl：表示上下-右左，top bottom - right left
需要 IE 5.5+ 才支持，例:

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

text-indent:2em;
首行縮進(jìn)，例: 有時(shí)候，我們需要將段落的首行縮進(jìn)兩個(gè)文字，一般我們都是用4個(gè)Html的空格( )來實(shí)現(xiàn)，其實(shí)我們還可以用樣式表來達(dá)到這種效果！ background-color: transparent;
transparent表示透明色，例:
border-collapse:collapse;
它會自動把相同的邊框線合并，例: 不使用border-collapse:collapse; 1.11.22.12.2使用border-collapse:collapse; 1.11.22.12.2 background-position: 0 -78;
設(shè)置背景圖片的位置，例:
《background-position的妙用》 table-layout: fixed;
固定布局的算法。在這算法中，水平布局是僅僅基于表格的寬度，表格邊框的寬度，單元格間距，列的寬度，而和表格內(nèi)容無關(guān)。也就是說，內(nèi)容可能被裁切，例:
看看我以前寫的一個(gè)仿MSN的htc網(wǎng)格中應(yīng)用這個(gè)屬性的效果吧，仿照MSN的網(wǎng)格，單元格中文字過長會自動被截取（在Table中使用樣式table-layout: fixed;），鼠標(biāo)移上會全部顯示(使用一個(gè)浮動的層覆蓋在上面)：演示下載 display:inline;
設(shè)置或檢索對象是否及如何顯示，inline表示內(nèi)聯(lián)，例:
大家都知道兩個(gè)表格在一起，默認(rèn)是會自動換行的，但是利用display:inline;屬性可以讓兩個(gè)表格并排在一起：表格1 表格2

overflow: auto;
檢索或設(shè)置當(dāng)對象的內(nèi)容超過其指定高度及寬度時(shí)如何治理內(nèi)容。auto : 在需要時(shí)剪切內(nèi)容并添加滾動條，例:
使用前的TextArea使用后的TextAreafont:12px/18px;
字體大小/行高，例:
未使用CSS使用該CSS在這里行高是系統(tǒng)默認(rèn)的，不會受影響的這里的12px就表示字體大小，18px其實(shí)就等價(jià)于css中的line-height。 clip : rect ( 0 64 64 0 )
字體大小/行高，例:
原圖：這些樣式表，你都用過么？（圖二）

裁減后：

可以利用這個(gè)來做動畫:) font-size: eXPRession(document.body.clientWidth / 20);
expression是IE瀏覽器特有的功能，可以直接執(zhí)行腳本而算出css的值，例:
《CSS也能控制表格的交替顏色》

字體大小隨著瀏覽器大小而變化，始終為瀏覽器寬度的1/20

對于支持HTML的BBS來說，這可能會是一個(gè)安全隱患！ position: absolute;
這個(gè)我想絕大多數(shù)人都知道——絕對定位，我所要說的是偶然發(fā)現(xiàn)的一個(gè)隱含功能，例:
當(dāng)給一個(gè)網(wǎng)頁元素的CSS設(shè)置為"position: absolute;"，那么它會絕對定位，然后根據(jù)css中的left,top屬性確定自己的位置。但是假如我們僅僅設(shè)置一個(gè)元素樣式表的"position: absolute;"屬性，而不設(shè)置其left,top屬性，那么該元素會浮在其html所在位置?？磦€(gè)例子，我將一個(gè)tr的CSS設(shè)置為"position: absolute;"：第一行第二行
第一行浮在第二行上了，這個(gè)特性可以很方便的來制作重疊效果，例如我以前寫過的自定義按鈕和Flash播放器都用到了這個(gè)特性來實(shí)現(xiàn)重疊：
自定義按鈕：一個(gè)自定義按鈕，底下是一個(gè)普通的Button，利用"position:absolute;"在Button上面覆蓋圖片，這樣看起來就像自定義按鈕，而實(shí)際點(diǎn)擊確是點(diǎn)擊底下真實(shí)的Button（下載）
Flash播放器：這個(gè)播放器的進(jìn)度條就是通過這種方法來重疊的。（下載）

上一篇：Asp組件高級入門與精通系列之二

下一篇：如何修改自定義Webpart 的標(biāo)題(downmoon)