第十一章CSS屬性

第十一章CSS的屬性本章內(nèi)容11.1CSS背景11.2CSS文本11.3CSS字體11.4CSS列表11.5CSS表格11.1CSS背景背景色背景圖像背景重復(fù)背景定位背景屬性簡(jiǎn)寫背景色

可以使用background-color

屬性為元素設(shè)置背景色?；菊Z法：

selector{background-color:顏色值;}可以為所有元素設(shè)置背景色，這包括body一直到em和a等行內(nèi)元素。background-color不能繼承，其默認(rèn)值是transparent。transparent有“透明”之意。也就是說，如果一個(gè)元素沒有指定背景色，那么背景就是透明的，這樣其祖先元素的背景才能可見。背景圖像要把圖像放入背景，需要使用background-image

屬性。background-image屬性的默認(rèn)值是none，表示背景上沒有放置任何圖像。基本語法：

selector{background-image:url(圖像路徑);}

另外還要補(bǔ)充一點(diǎn)，background-image也不能繼承。事實(shí)上，所有背景屬性都不能繼承。

背景重復(fù)如果需要在頁面上對(duì)背景圖像進(jìn)行平鋪，可以使用background-repeat

屬性。基本語法：

selector{background-image:url(圖像路徑);background-repeat:屬性值;}

可能的值：repeat

導(dǎo)致圖像在水平垂直方向上都平鋪。repeat-x

和repeat-y

分別導(dǎo)致圖像只在水平或垂直方向上重復(fù)，no-repeat

則不允許圖像在任何方向上平鋪。背景定位通過background-position屬性改變圖像在背景中的位置?；菊Z法：

selector{background-image:url('圖像路徑');background-repeat:屬性值;background-position:屬性值;}為background-position屬性值：1、關(guān)鍵字：top、bottom、left、right和center。通常，這些關(guān)鍵字會(huì)成對(duì)出現(xiàn)，不過也不總是這樣。2、長(zhǎng)度值，如100px或5cm，最后也可以使用百分?jǐn)?shù)值。背景屬性簡(jiǎn)寫基本語法：

selector{background:#ff0000url(圖像路徑)no-repeatbottomcenter;}CSS背景屬性表屬性描述background簡(jiǎn)寫屬性，作用是將背景屬性設(shè)置在一個(gè)聲明中。background-attachment背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)。background-color設(shè)置元素的背景顏色。background-image把圖像設(shè)置為背景。background-position設(shè)置背景圖像的起始位置。background-repeat設(shè)置背景圖像是否及如何重復(fù)。11.2CSS文本

文本顏色對(duì)齊方式文本裝飾縮進(jìn)文本行間距字間距字符間距字母控制文本顏色基本語法：

Selector｛

color:red;color:#00ff00;color:rgb(0,0,255);}對(duì)齊方式text-align是一個(gè)基本的屬性，它會(huì)影響一個(gè)元素中的文本行互相之間的水平對(duì)齊方式。基本語法：

selector{text-align:屬性值;}

屬性值left、right

和center實(shí)現(xiàn)元素中的文本分別左對(duì)齊、右對(duì)齊和居中。屬性值justify實(shí)現(xiàn)兩端對(duì)齊文本效果。在justify實(shí)現(xiàn)兩端對(duì)齊時(shí)，文本行的左右兩端都放在父元素的內(nèi)邊界上。然后，調(diào)整單詞和字母間的間隔，使各行的長(zhǎng)度恰好相等。文本裝飾text-decoration屬性規(guī)定添加到文本的修飾?；菊Z法：

selector{text-decoration:屬性值;}text-decoration有6個(gè)值：none，默認(rèn)值，定義標(biāo)準(zhǔn)的文本。underline定義文本下的一條線。overline定義文本上的一條線。line-through定義穿過文本下的一條線。blink定義閃爍的文本。注釋：IE、Chrome或Safari不支持"blink"屬性值。縮進(jìn)文本text-indent

屬性實(shí)現(xiàn)文本縮進(jìn)。通過使用text-indent屬性，所有元素的第一行都可以縮進(jìn)一個(gè)給定的長(zhǎng)度，甚至該長(zhǎng)度可以是負(fù)值?；菊Z法：

selector{text-indent:縮進(jìn)值;}

注意：一般來說，可以為所有塊級(jí)元素應(yīng)用text-indent，但無法將該屬性應(yīng)用于行內(nèi)元素，圖像之類的替換元素上也無法應(yīng)用text-indent屬性。

行間距l(xiāng)ine-height

屬性設(shè)置行間的距離（行高）。line-height與font-size的計(jì)算值之差（在CSS中成為“行間距”）分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部。

基本語法：

selector{line-height:屬性值;}可能的值：normal默認(rèn)，設(shè)置合理的行間距。number設(shè)置數(shù)字，此數(shù)字會(huì)與當(dāng)前的字體尺寸相乘來設(shè)置行間距。Length

設(shè)置固定的行間距。%

基于當(dāng)前字體尺寸的百分比行間距。字間距word-spacing

屬性增加或減少單詞間的空白（即字間隔）。該屬性定義元素中字之間插入多少空白符。針對(duì)這個(gè)屬性，“字”定義為由空白符包圍的一個(gè)字符串。如果指定為長(zhǎng)度值，會(huì)調(diào)整字之間的通常間隔；所以，normal就等同于設(shè)置為0。允許指定負(fù)長(zhǎng)度值，這會(huì)讓字之間擠得更緊。

基本語法：

selector{word-spacing

:屬性值;}可能的值:normal默認(rèn)，定義單詞間的標(biāo)準(zhǔn)空間。length定義單詞間的固定空間。字符間距l(xiāng)etter-spacing

屬性增加或減少字符間的空白（字符間距）。該屬性定義了在文本字符框之間插入多少空間。由于字符字形通常比其字符框要窄，指定長(zhǎng)度值時(shí)，會(huì)調(diào)整字母之間通常的間隔。基本語法：

selector{letter-spacing:屬性值;}可能的值：normal默認(rèn)。規(guī)定字符間沒有額外的空間。length定義字符間的固定空間（允許使用負(fù)值）。

字母控制text-transform

屬性控制文本的大小寫。這個(gè)屬性會(huì)改變?cè)刂械淖帜复笮?，而不論源文檔中文本的大小寫?；菊Z法：

selector{text-transform:屬性值;}可能的值:none默認(rèn)，定義帶有小寫字母和大寫字母的標(biāo)準(zhǔn)的文本。capitalize文本中的每個(gè)單詞以大寫字母開頭。uppercase定義僅有大寫字母。lowercase定義無大寫字母，僅有小寫字母。11.3CSS字體

設(shè)置文本的字體設(shè)置字體尺寸設(shè)置字體風(fēng)格設(shè)置字體的粗細(xì)字體屬性簡(jiǎn)寫設(shè)置文本的字體font-family

規(guī)定元素的字體系列。font-family可以把多個(gè)字體名稱作為一個(gè)“回退”系統(tǒng)來保存，用逗號(hào)分割每個(gè)值，如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)。基本語法：

selector{font-family:字體1,字體2,…;}注意：使用某種特定的字體系列（Geneva）完全取決于用戶機(jī)器上該字體系列是否可用；這個(gè)屬性沒有指示任何字體下載。因此，強(qiáng)烈推薦使用一個(gè)通用字體系列名作為后路。設(shè)置字體尺寸font-size屬性可設(shè)置字體的尺寸?；菊Z法：

selector{font-size:屬性值;}注意：實(shí)際上font-size設(shè)置的是字體中字符框的高度，實(shí)際的字符字形可能比這些框高或矮（通常會(huì)矮）。

所有主流瀏覽器都支持font-size屬性。

font-size屬性值表值描述xx-smallx-smallsmallmediumlargex-largexx-large把字體的尺寸設(shè)置為不同的尺寸，從xx-small到xx-large。默認(rèn)值：medium。

smaller把font-size設(shè)置為比父元素更小的尺寸。larger把font-size設(shè)置為比父元素更大的尺寸。length把font-size設(shè)置為一個(gè)固定的值。%把font-size設(shè)置為基于父元素的百分比值。設(shè)置字體風(fēng)格font-style

屬性定義字體的風(fēng)格。該屬性設(shè)置使用斜體、傾斜或正常字體。斜體字體通常定義為字體系列中的一個(gè)單獨(dú)的字體?；菊Z法：

selector{font-style:屬性值;}可能的值：normal默認(rèn)值。瀏覽器顯示一個(gè)標(biāo)準(zhǔn)的字體樣式。italic瀏覽器會(huì)顯示一個(gè)斜體的字體樣式。oblique瀏覽器會(huì)顯示一個(gè)傾斜的字體樣式。設(shè)置字體的粗細(xì)font-weight屬性設(shè)置文本的粗細(xì)。該屬性用于設(shè)置顯示元素的文本中所用的字體加粗。數(shù)字值400相當(dāng)于關(guān)鍵字normal，700等價(jià)于bold?；菊Z法：

selector{font-weight:屬性值;}可能的值：normal默認(rèn)值。定義標(biāo)準(zhǔn)的字符。bold定義粗體字符。bolder定義更粗的字符。lighter定義更細(xì)的字符。數(shù)字100、200…800、900，定義由粗到細(xì)的字符。400等同于normal，而700等同于bold。字體屬性簡(jiǎn)寫簡(jiǎn)寫在font

屬性一個(gè)聲明中設(shè)置所有字體屬性?；菊Z法：

selector{font:

italicbold12pxarial,sans-serif;}可以不設(shè)置其中的某個(gè)值，比如font:100%verdana;

也是允許的。未設(shè)置的屬性會(huì)使用其默認(rèn)值。

11.4CSS列表列表類型列表項(xiàng)標(biāo)志位置設(shè)置列表項(xiàng)標(biāo)志圖象列表屬性簡(jiǎn)寫列表類型要影響列表的樣式，最簡(jiǎn)單（同時(shí)支持最充分）的辦法就是改變其標(biāo)志類型。list-style-type

屬性設(shè)置列表項(xiàng)標(biāo)記的類型。基本語法：

selector{list-style-type:屬性值;}語法解釋：其屬性取值范圍固定，如下表所示。list-style-type屬性值表值描述none無標(biāo)記。disc默認(rèn)。標(biāo)記是實(shí)心圓。circle標(biāo)記是空心圓。square標(biāo)記是實(shí)心方塊。decimal標(biāo)記是數(shù)字。lower-roman小寫羅馬數(shù)字(i,ii,iii,iv,v,…等。)upper-roman大寫羅馬數(shù)字(I,II,III,IV,V,…等。)lower-alpha小寫英文字母(a,b,c,d,e,…等。)upper-alpha大寫英文字母(A,B,C,D,E,…等。)list-style-type屬性值表值描述decimal-leading-zero0開頭的數(shù)字標(biāo)記。(01,02,03,等。)hebrew傳統(tǒng)的希伯來編號(hào)方式cjk-ideographic簡(jiǎn)單的表意數(shù)字hiragana標(biāo)記是：a,i,u,e,o,ka,ki,等。（日文片假名）katakana標(biāo)記是：A,I,U,E,O,KA等。（日文片假名）hiragana-iroha標(biāo)記是：i,ro,ha,ni,ho,he,to等。（日文片假名）katakana-iroha標(biāo)記是：I,RO,HA,NI,HO,HE等。（日文片假名）列表項(xiàng)標(biāo)志位置list-style-position

屬性設(shè)置在何處放置列表項(xiàng)標(biāo)記。基本語法：

selector{list-style-position:屬性值;}可能的值：inside列表項(xiàng)目標(biāo)記放置在文本以內(nèi)，且環(huán)繞文本根據(jù)標(biāo)記對(duì)齊。outside

默認(rèn)值，保持標(biāo)記位于文本的左側(cè)，列表項(xiàng)目標(biāo)記放置在文本以外，且環(huán)繞文本不根據(jù)標(biāo)記對(duì)齊。設(shè)置列表項(xiàng)標(biāo)志圖象list-style-image

屬性使用圖像來替換列表項(xiàng)的標(biāo)記。這個(gè)屬性指定作為一個(gè)有序或無序列表項(xiàng)標(biāo)志的圖像。圖像相對(duì)于列表項(xiàng)內(nèi)容的放置位置通常使用list-style-position屬性控制?；菊Z法：

selector{list-style-image:url("圖像路徑");}可能的值：URL圖像的路徑；none默認(rèn)值，無圖形被顯示。列表屬性簡(jiǎn)寫list-style

簡(jiǎn)寫屬性在一個(gè)聲明中設(shè)置所有的列表屬性?；菊Z法：

selector{list-style:squareinsideurl('/i/arrow.gif');}可能的值：list-style-type設(shè)置列表項(xiàng)標(biāo)記的類型。list-style-position設(shè)置在何處放置列表項(xiàng)標(biāo)記。list-style-image使用圖像來替換列表項(xiàng)的標(biāo)記。CSS列表屬性表屬性描述list-style-type設(shè)置列表項(xiàng)標(biāo)志的類型。list-style-position設(shè)置列表中列表項(xiàng)標(biāo)志的位置。list-style-type設(shè)置列表項(xiàng)標(biāo)志的類型。list-style簡(jiǎn)寫屬性。用于把所有用于列表的屬性設(shè)置于一個(gè)聲明中。11.5CSS表格設(shè)置表格的布局表格邊框合并單元格邊框距離表格標(biāo)題位置設(shè)置表格的布局table-layout

屬性用來顯示表格單元格、行、列的算法規(guī)則。該屬性指定了完成表布局時(shí)所用的布局算法。固定布局算法比較快，但是不太靈活，而自動(dòng)算法比較慢，不過更能反映傳統(tǒng)的HTML表。基本語法：

selector{table-layout:屬性值;}可能的值：automatic默認(rèn)，列寬度由單元格內(nèi)容設(shè)定。fixed列寬由表格寬度和列寬度設(shè)定。表格邊框合并border-collapse

屬性設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框，還是象在標(biāo)準(zhǔn)的HTML中那樣分開顯示?；菊Z法：

selector{border-collapse

:屬性值;}注釋：所有主流瀏覽器都支持border-collapse屬性?？赡艿闹担簊eparate默認(rèn)值，邊框會(huì)被分開。coll