一、屬性列表
color : #999999 文字顏色
font-family : 宋體 文字字型
font-size : 10pt 文字大小
font-style:itelic 文字斜體育
font-variant:small-caps 小字體
letter-spacing : 1pt 文字間距
line-height : 200% 設(shè)定行高
font-weight:bold 文字粗體
vertical-align:sub 下標(biāo)字
vertical-align:super 上標(biāo)字
text-decoration:line-through 加?h除線
text-decoration:overline 加頂線
text-decoration:underline 加底線
text-decoration:none ?h除連接底線
text-transform : capitalize 首字大寫
text-transform : uppercase 英文大寫
text-transform : lowercase 英文寫
text-align:right 文字*右對(duì)齊
text-align:left 文字*左對(duì)齊
text-align:center 文字置中對(duì)齊
這些是一些簡(jiǎn)單的文字效果，可以應(yīng)用到css的頁(yè)面中。
背景
background-color:black 背景顏色
background-image : url(image/bg.gif) 背景圖片
background-attachment : fixed 固定背景
background-repeat : repeat 重復(fù)排列-網(wǎng)頁(yè)預(yù)設(shè)
background-repeat : no-repeat 不重復(fù)排列
background-repeat : repeat-x 在x軸重復(fù)排列
background-repeat : repeat-y 在y軸重復(fù)排列
background-position : 90% 90% 背景圖片x與y軸的位置
鏈接
A 所有超連接
A:link 超連接文字格式
A:visited 瀏覽過(guò)的連接文字格式
A:active 按下連接的格式
A:hover 鼠標(biāo)移至連接
邊框
border-top : 1px solid black 上框
border-bottom : 1px solid #6699cc 下框
border-left : 1px solid #6699cc 左框
border-right : 1px solid #6699cc 右框
border: 1px solid #6699cc 四邊框
虛線
<TEXTAREA STYLE="border:1px dashed pink">
實(shí)線
<TEXTAREA STYLE="border:1px solid pink">
設(shè)置div的高度與文字的行高一樣就可以了,即 line-height 和 height 的數(shù)值是一樣的就可以了,最后給div一個(gè) over-flow: hidden ,讓超出的部分隱藏.
二、常用屬性
1、Height:設(shè)置DIV的高度；Width:設(shè)置DIV的寬度。
2、margin:用于設(shè)置DIV的外延邊距，也就是到父容器的距離。margin:后面跟有四個(gè)距離分別為到父容器的上-右-下-左邊的距離；margin: [top][right][bottom][left]
可以分別設(shè)置：margin-left:到父容器左邊框的距離；margin-right:到父容器右邊框的距離；margin-top: 到父容器上邊框的距離；margin-bottom:到父容器下邊框的距離。
3、padding:用于設(shè)置DIV的內(nèi)邊距（內(nèi)如子元素與DIV邊界的距離）。padding:后面跟有四個(gè)距離分別為到父容器的上-右-下-左邊的距離；margin: [top][right][bottom][left]：需要注意的是padding設(shè)置的距離不包括在本身的width和height內(nèi)(在IE7和FF中)，比如一個(gè)DIV的width設(shè)置了100px,而padding-left設(shè)置了50px,那么這個(gè)DIV在頁(yè)面上顯示的將是150px寬。
4、border:設(shè)置DIV的邊框樣式；display:設(shè)置顯示屬性。其值有block、none；float:設(shè)置DIV在頁(yè)面上的流向，其值有l(wèi)eft(靠左顯示)、right(靠右顯示)、none；
background:設(shè)置DIV的背景樣式；background后可直接跟背景的顏色、背景圖片、平鋪方式等樣式。也可以用以下屬性分別設(shè)置。
background-color:設(shè)置背景顏色；background-attachment:背景圖像的附加方式，其值有scroll、fixed; background-image:指定使有的背景圖片;background-repeat:背景圖象的平鋪方式。其值有no-repeat(不平鋪)、repeat(兩個(gè)方向平鋪)、repeat-x(水平方向平鋪)、repeat-y(垂直方向平鋪); background-position:在DIV中定位背景位置。其值有top bottom left right的不同組合。也可以以用坐標(biāo)指定具體的位置。
5、position:設(shè)置DIV的定位方式。position的屬性中有static、fixed、relative、absolute四個(gè)屬性。常用relative和absolute。若指定為static時(shí)，DIV遵循HTML規(guī)則；若指定為relative時(shí)，可以用top、left、right、bottom來(lái)設(shè)置DIV在頁(yè)面中的偏移（相對(duì)于自身的偏移），但是此時(shí)不可使用層；若指定為absolute時(shí)，可以用top、left、right、bottom對(duì)DIV進(jìn)行絕對(duì)定位（對(duì)自己最近的父級(jí)元素）；若指定為fixed時(shí)，在IE7與FF中DIV的位置相對(duì)于屏屏固定不變，IE6中沒(méi)有效果（不知為什么）。
6、font:指定DIV中文本的樣式，其后可跟文本的多個(gè)樣式。font-family:設(shè)置要用的字體名稱；font-weight:指定文本的粗細(xì),其值有bold bolder lighter等；font-size:指定文本的大??；font-style:指定文本樣式，其值有italic normal oblique等；color:指定文本顏色；text-align:指定文本水平對(duì)齊方式，其值有center(居中) left right justify；text-decorator:用于文本的修飾；其值有none underline overline line-through和blink的組合；text-indent:設(shè)置文本的縮進(jìn)；text-transform:設(shè)置文本的字母大小寫。其值有l(wèi)owercase uppercase capitalize(首字母大寫) none；direction:內(nèi)容的流向。其值有l(wèi)tr(從左至右)、rtl(從右至左)；line-height:指定文本的行高；Word-spacing:字間距。
7、overflow:內(nèi)容溢出控制，其值有scroll(始終顯示滾動(dòng)條)、visible(不顯示滾動(dòng)條，但超出部分可見(jiàn))、auto(內(nèi)容超出時(shí)顯示滾動(dòng)條)、hidden(超出時(shí)隱藏內(nèi)容)。
三、一些特殊效果：
1、z-index:設(shè)置DIV的層疊順序。用z-index屬性時(shí)，position必需要指定為absolute才行。
2、cursor:設(shè)置DIV上光標(biāo)的樣式。
3、clip:設(shè)置剪輯矩形。clip:rect(top right bottom left);設(shè)置上下左右的距離,但此時(shí)要把position指定為absolute。
4、opacity 透明度 filter:alpha(opacity=value) eg：filter:alpha(opacity=50);opacity:0.5;
四、定位和控制
絕對(duì)定位和相對(duì)定位 （position）
絕對(duì)定位：
定位屬性將是網(wǎng)蟲們打開(kāi)幸福之門的鑰匙：
H4 { position: absolute; left: 100px; top: 43px }
這項(xiàng)CSS規(guī)則讓瀏覽器將<H4>的起始位置精確地定在距離瀏覽器左邊100象素，距離其頂部43象素的位置。注意這里唯一設(shè)置了的是左邊和頂部，也就說(shuō)，文字將從左到右，從上到下載入瀏覽窗口。
左邊和頂部屬性很直觀，左邊（left）設(shè)定要素距瀏覽器窗口左邊的距離，頂部（top）設(shè)定距離瀏覽器窗口頂部的距離。設(shè)定這些距離時(shí)，你可以使用所學(xué)過(guò)的各種度單位或比例值。使用比例值時(shí)，比例值的是相對(duì)于母體要素的尺寸。
你可以定位什么呢？任何東西！段落、單詞、GIF和JPEG圖象、QUICKTIME電影等等。
相對(duì)定位：
絕對(duì)定位使你能精確地定位要素在頁(yè)面的獨(dú)立位置，而不考慮頁(yè)面其它要素的定位設(shè)置。相對(duì)定位指你所定位的要素的位置相對(duì)于在文件中所分配的位置。例：
I { position: relative; left: 40px; top: 10px }
相對(duì)定位的關(guān)鍵在于定位了的要素的位置是相對(duì)于它通常應(yīng)在的位置進(jìn)行定位。相對(duì)定位單元出現(xiàn)在普通的靜態(tài)定位單元的行間，定位時(shí)沒(méi)有把自己和靜態(tài)定位單元完全分開(kāi)。如果你停止使用相對(duì)定位，則文字的顯示位置將恢復(fù)正常。使用相對(duì)定位時(shí)要小心，否則容易將頁(yè)面弄得非常亂。
除了相對(duì)定位和絕對(duì)定位，你還可以使用static（靜止）參數(shù)值。Static 是 position 特性的缺省值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位設(shè)置。也就是說(shuō)，除了邊距特性，或通過(guò)使用 float 特性來(lái)浮動(dòng)單元可影響單元的定位外，其它均不可以。
定位單元的控制 （width、height、visiblility）
除了控制定位單元的左上角位置，你還可以控制單元的寬度和高度，及單元在頁(yè)面的可視性。
寬度：定位了的要素在頁(yè)面上顯示時(shí)仍然會(huì)從左到右一直顯示。利用寬度屬性就可以設(shè)定字符向右流動(dòng)的限制，即設(shè)定要素的寬度。
DIV { position: absolute; left: 200px; top: 40px; width: 150px }
瀏覽器接到這項(xiàng)規(guī)則時(shí)，它將文字按照規(guī)則規(guī)定的效果顯示，還將段落的最大水平尺寸限制在150象素。
寬度屬性只適用于絕對(duì)定位的要素。你可以使用我們學(xué)過(guò)的任何一種長(zhǎng)度單位，或使用比例值設(shè)定寬度，比例值指相對(duì)于母體要素的比例。IE 4中，這項(xiàng)屬性還可用于圖象。你可以通過(guò)寬度設(shè)置人為地拉寬或壓縮圖象。
高度：理論上講，高度應(yīng)該和寬度的設(shè)置類似，只不過(guò)是在垂直方向上：
DIV { position: absolute; left: 200px; top: 40px; height: 150px }
這里我用了“理論上講”，因?yàn)橛行g覽器不支持高度屬性。
可視性：利用CSS，你可以隱藏要素，使其在頁(yè)面上看不見(jiàn)。這條屬性對(duì)于定位了的和未定位的要素都適用。
H4 { visibility: hidden }
選項(xiàng)：
visible 使要素可以被看見(jiàn)
hidden 使要素被隱藏
inherit 指它將繼承母體要素的可視性設(shè)置。
值 inherit 為缺省值。這使單元繼承父單元的可見(jiàn)性。所以，如果某一段是隱藏的，則它包含的任何行間單元也都被隱藏。這一繼承性可被明確指定的可見(jiàn)性取代。例如，段內(nèi)的 EM 單元被指定為可見(jiàn)，這時(shí)如果該段被隱藏，則段內(nèi)的所有其它內(nèi)容都將消失，而唯有 EM 單元中的文本是可見(jiàn)的。
當(dāng)一個(gè)要素被隱藏后，它仍然要占據(jù)瀏覽器窗口中的原有空間。所以，如果你將文字包圍在一幅被隱藏的圖象周圍，那么，其顯示效果將是文字包圍著一塊空白區(qū)域。此新聞
這條屬性在編寫語(yǔ)言和使用動(dòng)態(tài)HTML時(shí)很有用，比如你可以使某段落或圖象只在鼠標(biāo)滑過(guò)時(shí)才顯示。
單元層次 （z-index）
特性 z-index 用于堆疊屏幕上的單元。缺省情況下，單元堆疊的順序?yàn)樗鼈兂霈F(xiàn)在HTML標(biāo)記的順序——也就是說(shuō)，后出現(xiàn)單元堆疊在早出現(xiàn)單元的上面。Z-index 特性實(shí)際上定義同屬（sibling）單元的堆疊順序以及單元相對(duì)父單元的堆疊。按照規(guī)范草案，具有正 z-index 值的單元群都堆疊在父單元之上，它們自己的堆疊順序則按其取值的大小來(lái)決定（值大的單元在上層）。同樣，具有負(fù) z-index 值的單元群都堆疊在父單元之下，它們自己的堆疊順序也按取值的大小來(lái)定（值大的單元在上層，例如值為 -1 的單元在值為 -2 的單元的上面）。
該參數(shù)值使用純整數(shù)。z-index用于絕對(duì)定位或相對(duì)定位了的要素。你也可以給圖象設(shè)定z-index。（對(duì)于Communicator，最好將 <IMG>標(biāo)簽包在<SPAN>或 <DIV>標(biāo)簽內(nèi)，然后將z-index應(yīng)用到<SPAN>或 <DIV>。）
剪輯絕對(duì)定位單元 （clip）
絕對(duì)定位單元可以被剪輯——也即剪輯顯示給用戶的區(qū)域，只顯示單元的一部分而把其余部分作透明處理。對(duì)于傳統(tǒng)的基于文本和圖像的網(wǎng)絡(luò)頁(yè)面，這并不是一個(gè)很有用的特征。但若要求多媒體頁(yè)面，這是很有用的。如 Netscape Communivator 4 和 Internet Explorer 4 都支持多媒體頁(yè)面，它們通過(guò)文檔的腳本接口動(dòng)態(tài)地調(diào)整單元周圍的剪輯區(qū)，從而實(shí)線文本“劃入”和圖像漸顯等顯示特征。
在CSS中，剪輯通過(guò) clip 特性來(lái)控制，這一特性只能用于絕對(duì)定位單元，其缺省值為 auto，按單元的外邊緣來(lái)剪輯單元（實(shí)際上等于沒(méi)有剪輯）。另外，可通過(guò)如下表達(dá)式設(shè)置剪輯框：
clip : rect(top,right.bottom,left) ;
其中 top、right、bottom 和 left 分別是矩形剪輯框的上邊、右邊、下邊和左邊相對(duì)于被剪輯單元左上角的位置。Top、right、bottom 和 left 的值可以為任意絕對(duì)或相對(duì)長(zhǎng)度值（但不能為百分比值），或者是關(guān)鍵字 auto。取值為 auto 意味著剪輯區(qū)域的各邊放好以后，被剪輯單元中的任何內(nèi)容都不會(huì)超出這個(gè)區(qū)域。
控制單元溢出 （overflow）
固定絕對(duì)或相對(duì)定位單元的 width 和 height，很可能會(huì)因?yàn)橹付ǖ膮^(qū)域不能滿足單元實(shí)際內(nèi)容的需要，而造成單元內(nèi)容溢出。這時(shí)可使用 overflow 來(lái)指定瀏覽器如何處理溢出：值 none（缺省值）允許瀏覽器顯示溢出的內(nèi)容，因此單元可溢出指定的區(qū)域。而值 clip 要求瀏覽器在單元底部和右邊剪輯單元內(nèi)容，這樣，超出指定區(qū)域的單元內(nèi)容將不顯示。值 scroll 也同樣要求瀏覽器在單元底部和右邊剪輯單元內(nèi)容（同 clip），不過(guò)，瀏覽器應(yīng)該（如果可能的話）為單元提供滾動(dòng)條以使用戶能通過(guò)滾動(dòng)來(lái)瀏覽被剪輯的內(nèi)容
