CSS語法手冊全集

1、css語法手冊（一）字體屬性 1、font-family功能：用于改變html標(biāo)志或元素的字體，你可設(shè)置一個(gè)可用字體清單。瀏覽器由前向后選用字體。powered by 語法：font-family:字體1,字體2, . ,字體n例子：字體2、font-style功能：使文本顯示為扁斜體或斜體等表示強(qiáng)調(diào) 。數(shù)值：normal - 正常italic - 斜體oblique - 偏斜體例子：normalitalicoblique 3、font-variant功能：用于在正常與小型大寫字母字體間切換。數(shù)值：normal - 如果該標(biāo)志繼承父元素的 small-caps 設(shè)置，則關(guān)鍵字 normal 將

2、 font-variant 設(shè)置為正常字體。small-caps - 把小寫字母顯示為字體較小的大寫字母。 例子：font-variant 4、font-weight功能：用于設(shè)置字體灰度，生成字體的深，淺版本。數(shù)值：正?；叶?- normal相對灰度 - bold, bolder, light, lighter梯度灰度 - 取值如下：100, 200, 300, 400(相當(dāng)于normal), 500, 600, 700(相當(dāng)于bold), 800, 900。例子：字體灰度 5、font-size功能：用各種度量單位控制文本字體大小。數(shù)值：有四種數(shù)值方式絕對尺寸- 用具體字號表定義字體大小，

3、可以取下列數(shù)值之一：xx - small, x-small, small, medium, large, x-large, xx-large。不同字體有不同的數(shù)值。相對尺寸 - larger, smaller，產(chǎn)生的尺寸是相對于父容器字號而言的。長度 - 用毫米(mm)，厘米(cm)，英寸(in)，點(diǎn)數(shù)(pt)，象素(px)，pica(pc)，ex(小寫字母x的高度)或em(字體高度)作為度量單位。百分比 - 相對于其父元素字體大小的百分比。例子：字體大小6、font功能：簡寫屬性，提供了對字體所有屬性進(jìn)行設(shè)置的快捷方法。語法：font:字體屬性1 字體屬性2 . 字體屬性n數(shù)值：字體屬性值為

4、前面已列出的值，此外還可以設(shè)置行間距屬性 line-height(見文本屬性)，內(nèi)容的順序?yàn)椋篺ont-style; font-variant; font-weight; font-size; line-height; font-family?？墒÷圆糠謱傩?，屬性值間用空格分開。例子：font css語法手冊（二）文本屬性1、letter-spacing功能：控制文本元素字母間的間距，所設(shè)置的距離適用于整個(gè)元素。powered by 數(shù)值：normal - 正常間距，將字符間的間距復(fù)位為所有字體和字號的正常間距。長度 - 設(shè)置字間距長度，正值表示加進(jìn)父元素中繼承的正常長度，負(fù)值則減去正常長度。

5、在數(shù)字后指定度量單位如下：mm, cm, in, pt(點(diǎn)數(shù)), px(象素), pc(pica), ex(小寫字母x的高度), em(大寫字母m的寬度)。例子：letter-spacing2、line-height功能：設(shè)置元素中文本的行間距。數(shù)值：normal - 正常高度，通常為字體尺寸的 1-1.2倍，這是缺省設(shè)置。數(shù)字 - 設(shè)置元素中毎行文本的距離為字體尺寸乘以這個(gè)數(shù)字。例如字體尺寸為10點(diǎn)，設(shè)置line-height為2，則間距20點(diǎn)。長度 - 用標(biāo)準(zhǔn)度量單位設(shè)置間距，有些是絕對的，有些是相對的，詳見letter-spacing中的説明。百分比 - 也字體尺寸的百分比設(shè)置間距。 例

6、子： 這是第一行。這是第二行。這是第三行。 3、text-align功能：在元素框中水平對齊文本。數(shù)值：left - 左對齊right - 右對齊center - 居中justify - 均勻分布， 生成等長的行 例子：對左居中對右4、text-decoration功能：文本修飾，用于控制文本元素所用的效果，特別適用于引人注意的說明，警告等文本效果。數(shù)值：none - 無文本修飾，缺省設(shè)置。underline - 下劃線。overline - 上劃線。line-through - 刪除線。blink - 閃爍。同一語句中可以組合多個(gè)關(guān)鍵字。例子：underline overline 5、tex

7、t-indent功能：文本縮排，用于段落的第一行縮排上。數(shù)值：長度 - 設(shè)置首行縮排的尺寸為指定度量單位，有些單位是相對的，有些則是絕對的，祥見 letter-spacing 屬性的說明部分。百分比 - 以行長的百分比設(shè)置首行縮排量。例子：文本縮排，用于段落的第一行縮排上。6、text-transform功能：設(shè)置一個(gè)或幾個(gè)元素的大寫標(biāo)準(zhǔn)。數(shù)值：none - 不改變文本的大寫小寫。capitalize - 元素中毎個(gè)單詞的第一個(gè)字母用大寫。uppercase - 將所有文本設(shè)置為大寫。lowercase - 將所有文本設(shè)置為小寫。例子：a text-transform example.a te

8、xt-transform example.a text-transform example.7、vertical-align功能：垂直對齊。數(shù)值：baseline - 對準(zhǔn)兩個(gè)元素的小寫字母基準(zhǔn)線。sub - 下標(biāo)。super - 上標(biāo)。top - 頂部對齊。text-top - 文本頂對齊。middle - 中線對齊。bottom - 底線對齊。text-bottom - 字母底線對齊。百分比 - 將線上元素基準(zhǔn)線在父元素基準(zhǔn)線基礎(chǔ)上升降一定的百分比，和元素的 line-height 屬性組合使用。例子：a1x28、word-spacing 功能：控制文本中元素單詞間的間距。設(shè)置的間距適用于

9、整個(gè)元素，不能在某個(gè)單詞間插入更大或更小的間距。數(shù)值：normal - 正常間距。長度 - 如果長度為正，則加進(jìn)從父元素繼承的正常長度，如果是負(fù)值，則減去。例子：a word spacing examplecss語法手冊（三）文本填充，邊框，邊界和位置屬性（一）一、框填充屬性powered by 1、padding-bottompadding-leftpadding-toppadding-right功能：毎個(gè)容器都有邊框，這些屬性設(shè)置邊框與框內(nèi)元素間的距離。數(shù)值：長度 - 設(shè)置相對或絕對值。在數(shù)字后指定度量單位如下：mm, cm, in, pt, px, pc, ex, em。em 和 ex

10、設(shè)置產(chǎn)生相對于父字體的字體尺寸。百分比 - 以父元素的百分比設(shè)置邊框。說明：填充值不能使用負(fù)值，但可以是小數(shù)。cssyu/01/01.htm target=_blank例子2、padding功能：是個(gè)簡寫屬性，用于設(shè)置上，下，左，右各個(gè)方向邊框和內(nèi)容元素的間距。數(shù)值：同前。說明：用單一值可以讓毎邊等距填充；如果用兩個(gè)值，則第一個(gè)值用于上下填充，第二個(gè)值用于左右填充；如果用三個(gè)值，則賦于上邊填充，左右填充和下邊填充；如果用四個(gè)值，則分別用于上，右，下，左填充。可以混合數(shù)值類型。例子二、框邊框?qū)傩?、border-topborder-bottomborder-rightborder-left功能：

11、這四個(gè)屬性都是簡寫屬性，分別設(shè)置上，下，右，左的邊框?qū)傩?。缺省情況下，邊框沒有樣式設(shè)置。數(shù)值：共有三個(gè)邊框?qū)傩詁order-width: 取值為 thin, medium, thick或指定長度。border-style: 設(shè)置用于修飾邊框的底紋?？梢栽O(shè)置下列樣式：none, dotted,doshed, solid, double, groove, ridge, inset, outset。border-color: 設(shè)置邊框顏色。例子2、border-top-widthborder-bottom-widthborder-right=widthborder-left-width 功能：分別設(shè)

12、置各個(gè)邊框的厚度。數(shù)值：thin - 細(xì)邊框。medium - 中等線寬。thick - 粗線。長度 - 用相對或絕對單位設(shè)置邊框?qū)挾取＠?、border-width功能：簡寫屬性，可同時(shí)設(shè)置四個(gè)邊框的寬度。數(shù)值：thin - 細(xì)邊框。medium - 中等線寬。thick - 粗線。長度 - 用相對或絕對單位設(shè)置邊框?qū)挾?。說明：見 padding 說明。例子：邊框?qū)傩?、border-color功能：簡寫屬性，設(shè)置四個(gè)邊框的顏色值。數(shù)值：可以用顏色名或rgb值。如果指定單個(gè)顏色，則四個(gè)邊框都顯示為這個(gè)顏色；如果指定兩個(gè)顏色，則順序?yàn)樯舷?，左右；如果指定三種顏色，則順序?yàn)樯?，左右，下；如果?/p>

13、定四種顏色，則順序?yàn)樯?，右，下，左。說明：顏色名如下aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.對于rgb值，可用三種方法指定#rrggbb; rgb(r,g,b); rgb(r%,g%,b%)例子：邊框顏色5、border-style功能：用于顯示邊框和指定邊框樣式。數(shù)值：none - 不顯示邊框，為缺省值dotted - 點(diǎn)線dashed - 虛線solid - 實(shí)線double - 雙線groove - 3d陷入線r

14、idge - 3d山脊?fàn)罹€inset - 使頁面有沉入感outset - 使頁面有浮出感說明：并非所有瀏覽器都能顯示ridge, inset, outset 之類的樣式，有些瀏覽器將所有邊框都繪制成實(shí)線。example1example26、border功能：簡寫屬性，設(shè)置所有邊框?qū)傩?。?shù)值：border-width - 取值 thin, medium, thick 或指定長度。border-style - 取值 none, dotted, dashed, solid, double, groove, ridge, inset, outsetborder-color - 可用顏色名或rgb值。說

15、明：與其它簡寫屬性不同的是，每個(gè)設(shè)置只能取一個(gè)值，這個(gè)屬性均勻作用于框的各邊。例子：this is a example css語法手冊（四）文本填充，邊框，邊界和位置屬性（二）三、框邊界屬性1、margin-bottompowered by margin-leftmargin-rightmargin-top功能：這四個(gè)屬性用來設(shè)置元素與其相鄰元素間的距離，可以用長度或相對于其父文本的寬度的百分比來定義，也可以自動(dòng)處理。數(shù)值：長度 - 設(shè)置元素相應(yīng)邊與框邊緣之間的相對或絕對距離，有效單位為：mm, cm, in, px, pt, pica,ex, em .百分比 - 以父元素寬度的百分比設(shè)置邊界

16、尺寸。auto - 自動(dòng)，這個(gè)設(shè)置取瀏覽器的缺省邊界。cssyu/02/01.htm例子2、margin功能：簡寫屬性，用于設(shè)置元素的所有邊界。這是用于描述元素的內(nèi)容的邊緣到框邊緣的距離的。這個(gè)區(qū)總是透明的，可以看到下面的頁面背景。數(shù)值：長度 - 同前百分比 - 以父元素寬度的百分比設(shè)置邊界尺寸。auto - 自動(dòng)，這個(gè)設(shè)置取瀏覽器的缺省邊界。例子四、框位置屬性1、height功能：設(shè)置元素高度，瀏覽器按照這個(gè)高度調(diào)整圖形。數(shù)值：長度 - mm, cm, px, pt, .auto - 自動(dòng)。2、width功能：設(shè)置元素寬度，瀏覽器按照這個(gè)寬度調(diào)整圖形。數(shù)值：長度 - mm, cm, in,

17、px, pt, .百分比 - 將圖形尺寸設(shè)置為父元素寬度的百分比。auto - 自動(dòng)調(diào)整3、float功能：用于在普通元素流布置規(guī)則以外放上元素。數(shù)值：none - 無改動(dòng)。left - 將其它元素內(nèi)容放到浮動(dòng)元素右邊。right - 將其它元素內(nèi)容放到浮動(dòng)元素左邊。4、clear功能：用于允許或禁止指定元素旁邊放置其它元素(通常是線上圖形).數(shù)值：none - 無限制。left - 將元素放在左邊浮動(dòng)元素下面right - 將元素放在右邊浮動(dòng)元素下面both - 元素兩邊都不允許放置浮動(dòng)元素css語法手冊（五）顏色和背景屬性1、color功能：設(shè)置前景或元素的顏色。powered by 數(shù)值

18、：使用顏色關(guān)鍵字或rgb值。例子：文本顏色(關(guān)鍵字)文本顏色(#rrggbb)文本顏色rgb(rr,gg,bb)文本顏色rgb(r%,g%,b%)2、background-color功能：設(shè)置頁面或頁面元素的背景顏色。數(shù)值：顏色 - 可用顏色名或rgb值transparent - 透明，使頁面背景為缺省背景。例子： 背景顏色3、background-image功能：定義背景圖形。數(shù)值：none - 不用圖形作背景url - 提供圖形文件的url地址說明：也可以包括background-color屬性以便在找不到圖形時(shí)代用例子： 圖形背景4、background-repeat功能：控制圖形背景是

19、否重復(fù)排列。數(shù)值：repeat - 垂直和水平重復(fù)，缺省值repeat-x - 水平重復(fù)repeat-y - 垂直重復(fù)no-repeat - 不重復(fù)說明：這個(gè)屬性和 background-image 和 background-position 屬性一起使用。例子： 水平重復(fù)排列5、background-attachment功能：指定元素的背景是隨元素一起滾動(dòng)還是固定在頁面某個(gè)位置上。數(shù)值：scroll - 隨元素一起滾動(dòng)fixed - 固定說明：缺省值是 scroll，這個(gè)屬性和 background-image 屬性一起使用。6、background-position功能：用于在空間中定位元

20、素背景數(shù)值：長度 - 相對或絕對單位設(shè)置元素框邊緣的起點(diǎn)，并給出單位下的坐標(biāo)。百分比 - 用百分比表示框邊緣上瀏覽器開始放圖的位置?？梢灾貜?fù)這個(gè)值也提供垂直和水平起點(diǎn)垂直位置 - 設(shè)置豎直方向的起點(diǎn)，關(guān)鍵字為 top, center, bottom水平位置 - 設(shè)置水平方向的起點(diǎn)，關(guān)鍵字 left, center, right例如：top left, left top和0% 0% 都表示圖形左上角從元素框左上角開始例子：body background-image:url(logo.gif); background-position:50% 50%這個(gè)語句將 body 基本類設(shè)置為背景圖形在頁面

21、上居中顯示。7、background功能：簡寫屬性，可以設(shè)置所有背景屬性。數(shù)值：background-attachmentbackground-colorbackground-imagebackground-positionbackground-repeat有關(guān)上述數(shù)值的細(xì)節(jié)，見各個(gè)屬性部分。css語法手冊（六）分類屬性1、display功能：改變元素的顯示值，可以將元素類型線上，塊和清單項(xiàng)目相互變換。powered by 數(shù)值：none - 不顯示元素block - 塊顯示，在元素前后設(shè)置分行符inline - 刪除元素前后的分行符，使其并入其它元素流中l(wèi)ist-item - 將元素設(shè)置為清單中的一行