第10章 文字及背景設(shè)置

10.1

文字樣式CSS屬性在制作網(wǎng)站頁(yè)面時(shí)，可以通過(guò)CSS控制文字樣式，對(duì)文字的字體、大小、顏色、粗細(xì)、斜體、下畫線、頂畫線和刪除線等屬性進(jìn)行設(shè)置。使用CSS控制文字樣式的最大好處是，可以同時(shí)為多段文字賦予同一CSS樣式，在修改時(shí)只需修改某一個(gè)CSS樣式，即可同時(shí)修改應(yīng)用該CSS樣式的所有文字。10.1.1

font-family屬性——字體

在HTML中提供了字體樣式設(shè)置的功能，在HTML語(yǔ)言中文字樣式是通過(guò)<fontface=”字體名稱”>來(lái)設(shè)置的，而在CSS樣式中則是通過(guò)font-family屬性來(lái)進(jìn)行設(shè)置的。font-family屬性的語(yǔ)法格式如下。font-family:name1,name2,name3…;10.1.2

font-size屬性——字體大小在網(wǎng)頁(yè)應(yīng)用中，字體大小的區(qū)別可以起到突出網(wǎng)站主題的作用。字體大小可以是相對(duì)大小也可以是絕對(duì)大小。在CSS樣式中，可以通過(guò)設(shè)置font-size屬性來(lái)控制字體的大小。font-size屬性的基本語(yǔ)法如下。font-size:字體大小;在設(shè)置字體大小時(shí)，可以使用絕對(duì)大小單位也可以使用相對(duì)大小單位。10.1.3

color屬性——字體顏色

在HTML頁(yè)面中，通常在頁(yè)面的標(biāo)題部分或者需要瀏覽者注意的部分使用不同的顏色，使其與其他文字有所區(qū)別，從而能夠吸引瀏覽者的注意。在CSS樣式中，文字的顏色是通過(guò)color屬性進(jìn)行設(shè)置的。color屬性的基本語(yǔ)法如下。color:顏色值;實(shí)戰(zhàn)練習(xí)——設(shè)置網(wǎng)頁(yè)文字基本效果10.1.4

font-weight屬性——字體粗細(xì)在HTML頁(yè)面中，將字體加粗或是變細(xì)是吸引瀏覽者注意的另一種方式，同時(shí)還可以使網(wǎng)頁(yè)的表現(xiàn)形式更多多樣。在CSS樣式中通過(guò)font-weight屬性對(duì)字體的粗細(xì)進(jìn)行控制。定義字體粗細(xì)font-weight屬性的基本語(yǔ)法如下。font-weight:normal|bold|bolder|lighter|inherit|100~900;最終文件：光盤\最終文件\第10章\10-1-3.html視頻：光盤\視頻\第10章\10-1-3.swf10.1.5

font-style屬性——字體樣式

所謂字體樣式，也就是平常所說(shuō)的字體風(fēng)格，在Dreamweaver中有3種不同的字體樣式，分別是正常、斜體和偏斜體。在CSS中，字體的樣式是通過(guò)font-style屬性進(jìn)行定義的。定義字體樣式font-style屬性的基本語(yǔ)法如下。font-style:normal|italic|oblique;實(shí)戰(zhàn)練習(xí)——設(shè)置網(wǎng)頁(yè)文字的加粗和傾斜效果10.1.6

text-transform屬性——英文字體大小寫text-transform屬性可以實(shí)現(xiàn)轉(zhuǎn)換頁(yè)面中英文字體的大小寫格式，是非常實(shí)用的功能之一。text-transform屬性的基本語(yǔ)法如下。text-transform:capitalize|uppercase|lowercase;實(shí)戰(zhàn)練習(xí)——設(shè)置網(wǎng)頁(yè)中英文字體大小寫最終文件：光盤\最終文件\第10章\10-1-5.html視頻：光盤\視頻\第10章\10-1-5.swf最終文件：光盤\最終文件\第10章\10-1-6.html視頻：光盤\視頻\第10章\10-1-6.swf10.1.7

text-decoration屬性——文字修飾

在網(wǎng)站頁(yè)面的設(shè)計(jì)中，為文字添加下畫線、頂畫線和刪除線是美化和裝飾網(wǎng)頁(yè)的一種方法。在CSS樣式中，可以通過(guò)text-decoration屬性來(lái)實(shí)現(xiàn)這些效果。text-decoration屬性的基本語(yǔ)法如下。text-decoration:underline|overline|line-through;實(shí)戰(zhàn)練習(xí)——為網(wǎng)頁(yè)文字添加修飾10.1.8

letter-spacing屬性——字符間距在CSS樣式中，字間距的控制是通過(guò)letter-spacing屬性來(lái)進(jìn)行調(diào)整的，該屬性既可以設(shè)置相對(duì)數(shù)值，也可以設(shè)置絕對(duì)數(shù)值，但在大多數(shù)情況下使用相對(duì)數(shù)值進(jìn)行設(shè)置。letter-spacing屬性的語(yǔ)法格式如下。letter-spacing:字符間距;實(shí)戰(zhàn)練習(xí)——設(shè)置中文字符間距最終文件：光盤\最終文件\第10章\10-1-7.html視頻：光盤\視頻\第10章\10-1-7.swf最終文件：光盤\最終文件\第10章\10-1-8.html視頻：光盤\視頻\第10章\10-1-8.swf

10.2

段落樣式CSS屬性在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，CSS樣式可以控制字體樣式，同時(shí)也可以控制字間距和段落樣式。在一般情況下，設(shè)置字體樣式只能對(duì)少數(shù)文字起作用，對(duì)于文字段落來(lái)說(shuō)，還是需要通過(guò)設(shè)置段落樣式來(lái)加以控制。10.2.1

line-height屬性——行間距

在CSS中，可以通過(guò)line-height屬性對(duì)段落的行間距進(jìn)行設(shè)置。line-height的值表示的是兩行文字基線之間的距離，既可以設(shè)置相對(duì)數(shù)值，也可以設(shè)置絕對(duì)數(shù)值。line-height屬性的基本語(yǔ)法格式如下。line-height:行間距;10.2.2

text-indent屬性——段落首行縮進(jìn)段落首行縮進(jìn)是對(duì)一個(gè)段落第1行文字縮進(jìn)兩個(gè)字符進(jìn)行顯示。在CSS樣式中是通過(guò)text-indent屬性進(jìn)行設(shè)置的。text-indent屬性的基本語(yǔ)法如下。text-indent:首行縮進(jìn)量;實(shí)戰(zhàn)練習(xí)——美化網(wǎng)頁(yè)中的段落文本最終文件：光盤\最終文件\第10章\10-2-2.html視頻：光盤\視頻\第10章\10-2-2.swf10.2.3

text-align屬性——文本水平對(duì)齊在CSS樣式中，段落的水平對(duì)齊是通過(guò)text-align屬性進(jìn)行控制的，水平對(duì)齊有4種方式，分別為左對(duì)齊、水平居中對(duì)齊、右對(duì)齊和兩端對(duì)齊。text-align屬性的基本語(yǔ)法如下。text-align:left|center|right|justify;實(shí)戰(zhàn)練習(xí)——設(shè)置文本水平對(duì)齊10.2.4

vertical-align屬性——文本垂直對(duì)齊在CSS樣式中，文本垂直對(duì)齊是通過(guò)vertical-align屬性進(jìn)行設(shè)置的，常見(jiàn)的文本垂直對(duì)齊方式有3種，分別為頂端對(duì)齊、垂直居中對(duì)齊和底端對(duì)齊。vertical-align屬性的語(yǔ)法格式如下。vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|length;實(shí)戰(zhàn)練習(xí)——設(shè)置文本垂直對(duì)齊最終文件：光盤\最終文件\第10章\10-2-3.html視頻：光盤\視頻\第10章\10-2-3.swf最終文件：光盤\最終文件\第10章\10-2-4.html視頻：光盤\視頻\第10章\10-2-4.swf對(duì)于網(wǎng)頁(yè)而言，文字永遠(yuǎn)都是不可缺少的重要元素，文字也是傳遞信息的主要手段。在CSS3.0中新增加了幾種有關(guān)網(wǎng)頁(yè)文字控制的新增屬性，下面分別對(duì)這幾種新增的文字控制屬性進(jìn)行介紹。

10.3

CSS3.0新增文本樣式屬性10.3.1

text-overflow屬性——文本溢出處理text-overflow屬性用于設(shè)置是否使用一個(gè)省略標(biāo)記（…）標(biāo)示對(duì)象內(nèi)文本的溢出。text-overflow屬性僅是注解，當(dāng)文本溢出時(shí)是否顯示省略標(biāo)記，并不具備其它的樣式屬性定義。要實(shí)現(xiàn)溢出時(shí)產(chǎn)生省略號(hào)的效果還需要定義：強(qiáng)制文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden），只有這樣才能實(shí)現(xiàn)溢出文本顯示省略號(hào)的效果。text-overflow屬性的語(yǔ)法格式如下。text-overflow:clip|ellipsis;實(shí)戰(zhàn)練習(xí)——控制文本溢出效果最終文件：光盤\最終文件\第10章\10-3-1.html視頻：光盤\視頻\第10章\10-3-1.swf10.3.2

word-wrap和word-break屬性——文本換行控制word-wrap屬性用于設(shè)置當(dāng)文本行超過(guò)指定容器的邊界時(shí)是否斷開轉(zhuǎn)行，word-wrap屬性的語(yǔ)法格式如下。word-wrap:normal|break-word;word-break屬性用于設(shè)置指定容器內(nèi)文本的字內(nèi)換行行為，尤其在出現(xiàn)多種語(yǔ)言時(shí)。word-break屬性的語(yǔ)法格式如下。word-break:normal|break-all|keep-all;實(shí)戰(zhàn)練習(xí)——控制英文內(nèi)容強(qiáng)制換行10.3.3

text-shadow屬性——文本陰影通過(guò)CSS3.0中新增的text-shadow屬性就可以輕松的實(shí)現(xiàn)為文字添加陰影的效果，text-shadow屬性的語(yǔ)法格式如下。text-shadow:length|length|opacity|color;實(shí)戰(zhàn)練習(xí)——為網(wǎng)頁(yè)文本添加陰影效果最終文件：光盤\最終文件\第10章\10-3-2.html視頻：光盤\視頻\第10章\10-3-2.swf最終文件：光盤\最終文件\第10章\10-3-3.html視頻：光盤\視頻\第10章\10-3-3.swf10.3.4

@font-face規(guī)則——使用服務(wù)器端字體通過(guò)@font-face規(guī)則可以加載服務(wù)器端的字體文件，讓客戶端顯示客戶端所沒(méi)有安裝的字體，@font-face規(guī)則的語(yǔ)法格式如下。@font-face:{font-family:取值;font-style:取值;font-variant:取值;font-weight:取值;font-stretch:取值;font-size:取值;src:取值;}實(shí)戰(zhàn)練習(xí)——在網(wǎng)頁(yè)中使用特殊字體最終文件：光盤\最終文件\第10章\10-3-4.html視頻：光盤\視頻\第10章\10-3-4.swf通過(guò)CSS屬性來(lái)控制列表，能夠從更多方面控制列表的外觀，使列表看起來(lái)更加整齊和美觀，使網(wǎng)站實(shí)用性更強(qiáng)。在CSS樣式中專門提供了控制列表樣式的屬性，下面就不同類型的列表分別進(jìn)行介紹。

10.4列表樣式CSS屬性10.4.1

list-style-type屬性——設(shè)置列表符號(hào)無(wú)序列表使用<li>標(biāo)簽來(lái)羅列各個(gè)項(xiàng)目，并且每個(gè)項(xiàng)目前面都帶有特殊符號(hào)。在CSS樣式中，list-style-type屬性用于控制無(wú)序列表項(xiàng)目前面的符號(hào)，list-style-type屬性的語(yǔ)法格式如下。list-style-type:disc|circle|square|none;有序列表與無(wú)序列表相反，有序列表即具有明確先后順序的列表，默認(rèn)情況下，創(chuàng)建的有序列表在每條信息前加上序號(hào)1、2、3…。通過(guò)CSS樣式中的list-style-type屬性可以對(duì)有序列表進(jìn)行控制。list-style-type屬性的基本語(yǔ)法格式如下。list-style-type:decimal|decimal-leading-zero|lower-roman|upper-roman|lower-alpha|upper-alpha|none|inherit;實(shí)戰(zhàn)練習(xí)——設(shè)置新聞列表效果實(shí)戰(zhàn)練習(xí)——設(shè)置編號(hào)列表效果最終文件：光盤\最終文件\第10章\10-4-11.html視頻：光盤\視頻\第10章\10-4-11.swf最終文件：光盤\最終文件\第10章\10-4-12.html視頻：光盤\視頻\第10章\10-4-12.swf10.4.2

list-style-image屬性——自定義列表符號(hào)除了可以使用CSS樣式中的列表符號(hào)，還可以使用list-style-image屬性自定義列表符號(hào)，list-style-image屬性的基本語(yǔ)法如下。list-style-image:圖片地址;實(shí)戰(zhàn)練習(xí)——自定義新聞列表符號(hào)10.4.3設(shè)置定義列表定義列表是一種比較特殊的列表形式，相對(duì)于有序列表和無(wú)序列表來(lái)說(shuō)，應(yīng)用得比較少。定義列表的<dl>標(biāo)簽是成對(duì)出現(xiàn)的，并且需要在“代碼”視圖手動(dòng)添加代碼。從<dl>開始到</dl>結(jié)束，列表中每個(gè)元素的標(biāo)題使用<dt></dt>標(biāo)簽，后跟隨<dd></dd>標(biāo)簽，用于描述列表中元素的內(nèi)容。實(shí)戰(zhàn)練習(xí)——制作復(fù)雜新聞列表最終文件：光盤\最終文件\第10章\10-4-2.html視頻：光盤\視頻\第10章\10-4-2.swf最終文件：光盤\最終文件\第10章\10-4-3.html視頻：光盤\視頻\第10章\10-4-3.swf通過(guò)為網(wǎng)頁(yè)設(shè)置一個(gè)合理的背景能夠烘托網(wǎng)頁(yè)的視覺(jué)效果，給人一種協(xié)調(diào)和統(tǒng)一的視覺(jué)感，達(dá)到美化頁(yè)面的效果。不同的背景給人的心理感受并不相同，因此為網(wǎng)頁(yè)選擇一個(gè)合適的背景非常重要。

10.5背景樣式CSS屬性10.5.1

background-color屬性——背景顏色只需在CSS樣式中添加background-color屬性，即可設(shè)置網(wǎng)頁(yè)的背景顏色，它接受任何有效地顏色值，但是如果對(duì)背景顏色沒(méi)有進(jìn)行相應(yīng)的定義，將默認(rèn)背景顏色為透明。background-color的語(yǔ)法格式如下。background-color:color|transparent;10.5.2

background-image屬性——背景圖像在CSS樣式中，可以通過(guò)background-image屬性設(shè)置背景圖像。background-image屬性的語(yǔ)法格式如下。background-image:none|url;10.5.3

background-repeat屬性——背景圖像平鋪方式使用background-image屬性設(shè)置的背景圖像默認(rèn)會(huì)以平鋪的方式顯示，在CSS中可以通過(guò)background-repeat屬性設(shè)置背景圖像重復(fù)或不重復(fù)的樣式，以及背景圖像的重復(fù)方式。background-repeat屬性的語(yǔ)法格式如下。background-repeat:no-repeat|repeat-x|repeat-y|repeat;實(shí)戰(zhàn)練習(xí)——設(shè)置網(wǎng)頁(yè)背景效果10.5.4

background-position屬性——背景圖像位置通過(guò)CSS樣式中的background-position屬性，能夠在頁(yè)面中精確定位背景圖像，更改初始背景圖像的位置。該屬性值可以分為4種類型：絕對(duì)定義位置、百分比定義位置、垂直對(duì)齊值和水平對(duì)齊值。background-position:length|percentage|top|center|bottom|left|right;實(shí)戰(zhàn)練習(xí)——定位網(wǎng)頁(yè)中的背景圖像最終文件：光盤\最終文件\第10章\10-5-3.html視頻：光盤\視頻\第10章\10-5-3.swf最終文件：光盤\最終文件\第10章\10-5-4.html視頻：光盤\視頻\第10章\10-5-4.swf10.5.5

background-attachment屬性——背景圖像固定在CSS樣式表中，針對(duì)背景元素的控制，提供了background-attachment屬性，通過(guò)對(duì)該屬性的設(shè)置可以使頁(yè)面的背景不受滾動(dòng)條的限制，始終保持在固定位置。background-attachment屬性的語(yǔ)法格式如下。background-attachment:scroll|fixed;實(shí)戰(zhàn)練習(xí)——固定網(wǎng)頁(yè)中的背景圖像最終文件：光盤\最終文件\第10章\10-5-5.html視頻：光盤\視頻\第10章\10-5-5.swf網(wǎng)頁(yè)中的顏色搭配可以更好地吸引瀏覽者的目光，在CSS3.0中新增了幾種網(wǎng)頁(yè)中定義顏色的方法，下面依次進(jìn)行介紹。

10.6

CSS3.0新增顏色設(shè)置樣式10.6.1

RGBA顏色值RGBA是在RGB的基礎(chǔ)上多了控制Alpha透明度的參數(shù)，RGBA顏色定義語(yǔ)法如下。rgba(r,g,b,<opacity>);實(shí)戰(zhàn)練習(xí)——使用RGBA方式設(shè)置背景顏色最終文件：光盤\最終文件\第10章\10-6-1.html視頻：光盤\視頻\第10章\10-6-1.swf10.6.2

HSL顏色值HSL是一種工業(yè)界是廣泛使用的顏色標(biāo)準(zhǔn)，通過(guò)對(duì)色調(diào)（H）、飽和度（S）和亮度（L）3個(gè)顏色通道的改變，以及他們相互之間的疊加來(lái)獲得各種顏色。CSS3.0中新增了HSL顏色設(shè)置方式，在使用HSL方法設(shè)置顏色時(shí)，需要定義3個(gè)值，分別是色調(diào)（H）、飽和度（S）和亮度（L）。HSL顏色定義語(yǔ)法如下。hsl(<length>,<percentage>,<percentage>);10.6.3

HSLA顏色值HSLA是HSL顏色定義方法的擴(kuò)展，在色相、飽和度、亮度三要素的基礎(chǔ)上增加了不透明度的設(shè)置。使用HSLA顏色定義方法，能夠靈活的設(shè)置各種不同的透明效果。HSLA顏色定義的語(yǔ)法如下。hsla(<length>,<percentage>,<percentage>,<opacity>);實(shí)戰(zhàn)練習(xí)——使用HLSA方式設(shè)置背景顏色最終文件：光盤\最終文件\第10章\10-6-3.html視頻：光盤\視頻\第10章\10-6-3.swf10.6.4

opacity屬性——元素不透明度opacity屬性用來(lái)設(shè)置一個(gè)元素的透明度，能夠使頁(yè)面元素呈現(xiàn)透明效果，并且可以通過(guò)具體的數(shù)值設(shè)置透明的程度。opacity屬性的語(yǔ)法格式如下。opacity:<length>|inherit;實(shí)戰(zhàn)練習(xí)——設(shè)置網(wǎng)頁(yè)元素的半透明效果10.6.5

transparent顏色值如果在CSS樣式中設(shè)置顏色值為transparent，則會(huì)使背景顏色、文字顏色或邊框顏色等設(shè)置為完全透明。在CSS1中，只能在background-color屬性中設(shè)置transparent屬性值。在CSS2中，可以在background-color和border-color屬性中設(shè)置transparent屬性值。在CSS3.0中，可以在一切指定顏色值的屬性中設(shè)置transparent屬性值?，F(xiàn)在，transparent屬性值已經(jīng)得到Firefox、Chrome、Safari、Opera和IE等瀏覽器的支持。最終文件：光盤\最終文件\第10章\10-6-4.html視頻：光盤\視頻\第10章\10-6-4.swf在CSS3.0中新增了漸變?cè)O(shè)置屬性gradients，通過(guò)該屬性可以在網(wǎng)頁(yè)中實(shí)現(xiàn)漸變顏色填充的效果。避免了過(guò)多地使用漸變圖片所帶來(lái)的麻煩，而且在放大頁(yè)面的情況下一樣過(guò)渡自然。

10.7

CSS3.0新增漸變背景10.7.1線性漸變背景基于Webkit內(nèi)核的線性漸變，語(yǔ)法如下。-webkit-gradient(linear,<point>,<point>,from(<color>),to(<color>)[,color-stop(<percent>,<color>)]*)基于Gecko內(nèi)核的線性漸變，語(yǔ)法如下。-moz-linear-gradient([<point>||<angle>,]?<color>[,(<color>)[<percent>]?]*,<color>)實(shí)戰(zhàn)練習(xí)——為網(wǎng)頁(yè)設(shè)置線性漸變背景顏色最終文件：光盤\最終文件\第10章\10-7-1.html視頻：光盤\視頻\第10章\10-7-1.swf10.7.2徑向漸變背景基于Webkit內(nèi)核的徑向漸變，語(yǔ)法如下。-webkit-gradient(radial[,<point>,<radius>]{2},from(<color>),to(<color>)[,color-stop(<percent>,<color>)]*)基于Gecko內(nèi)核的徑向漸變，語(yǔ)法如下。-moz-linear-gradient([<point>||<angle>,]?<shape>||<radius>]?<color>[,(<color>)[<percent>]?]*,<color>)實(shí)戰(zhàn)練習(xí)——為網(wǎng)頁(yè)設(shè)置徑向漸變背景顏色最終文件：光盤\最終文件\第10章\10-7-2.html視頻：光盤\視頻\第10章\10-7-2.swf在CSS3.0中新增加了有關(guān)網(wǎng)頁(yè)背景控制的幾種屬性，下面分別對(duì)這幾種種新增的背景設(shè)置屬性進(jìn)行介紹。

10.8

CSS3.0新增背景樣式屬性10.8.1

background屬性——設(shè)置多背景圖像在CSS3.0中可以通過(guò)background屬性為一個(gè)元素應(yīng)用一個(gè)或多個(gè)圖片作為背景。代碼和CSS2中一樣，只需要用逗號(hào)來(lái)區(qū)分各個(gè)圖片。第一個(gè)聲明的圖片定位在元素頂部，其它的圖片依次在其下排列。background:[background-image]|[background-origin]|[background-clip]|[background-repeat]|[background-size]|[background-position];實(shí)戰(zhàn)練習(xí)——為網(wǎng)頁(yè)設(shè)置多個(gè)背景圖像10.8.2

background-size