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

10.1

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

font-family屬性——字體

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

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

color屬性——字體顏色

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

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

font-style屬性——字體樣式

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

text-transform屬性——英文字體大小寫text-transform屬性可以實現(xiàn)轉(zhuǎn)換頁面中英文字體的大小寫格式，是非常實用的功能之一。text-transform屬性的基本語法如下。text-transform:capitalize|uppercase|lowercase;實戰(zhàn)練習(xí)——設(shè)置網(wǎng)頁中英文字體大小寫最終文件：光盤\最終文件\第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)站頁面的設(shè)計中，為文字添加下畫線、頂畫線和刪除線是美化和裝飾網(wǎng)頁的一種方法。在CSS樣式中，可以通過text-decoration屬性來實現(xiàn)這些效果。text-decoration屬性的基本語法如下。text-decoration:underline|overline|line-through;實戰(zhàn)練習(xí)——為網(wǎng)頁文字添加修飾10.1.8

letter-spacing屬性——字符間距在CSS樣式中，字間距的控制是通過letter-spacing屬性來進行調(diào)整的，該屬性既可以設(shè)置相對數(shù)值，也可以設(shè)置絕對數(shù)值，但在大多數(shù)情況下使用相對數(shù)值進行設(shè)置。letter-spacing屬性的語法格式如下。letter-spacing:字符間距;實戰(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è)計網(wǎng)頁時，CSS樣式可以控制字體樣式，同時也可以控制字間距和段落樣式。在一般情況下，設(shè)置字體樣式只能對少數(shù)文字起作用，對于文字段落來說，還是需要通過設(shè)置段落樣式來加以控制。10.2.1

line-height屬性——行間距

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

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

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

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

10.3

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

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

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

text-shadow屬性——文本陰影通過CSS3.0中新增的text-shadow屬性就可以輕松的實現(xiàn)為文字添加陰影的效果，text-shadow屬性的語法格式如下。text-shadow:length|length|opacity|color;實戰(zhàn)練習(xí)——為網(wǎng)頁文本添加陰影效果最終文件：光盤\最終文件\第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ù)器端字體通過@font-face規(guī)則可以加載服務(wù)器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體，@font-face規(guī)則的語法格式如下。@font-face:{font-family:取值;font-style:取值;font-variant:取值;font-weight:取值;font-stretch:取值;font-size:取值;src:取值;}實戰(zhàn)練習(xí)——在網(wǎng)頁中使用特殊字體最終文件：光盤\最終文件\第10章\10-3-4.html視頻：光盤\視頻\第10章\10-3-4.swf通過CSS屬性來控制列表，能夠從更多方面控制列表的外觀，使列表看起來更加整齊和美觀，使網(wǎng)站實用性更強。在CSS樣式中專門提供了控制列表樣式的屬性，下面就不同類型的列表分別進行介紹。

10.4列表樣式CSS屬性10.4.1

list-style-type屬性——設(shè)置列表符號無序列表使用<li>標(biāo)簽來羅列各個項目，并且每個項目前面都帶有特殊符號。在CSS樣式中，list-style-type屬性用于控制無序列表項目前面的符號，list-style-type屬性的語法格式如下。list-style-type:disc|circle|square|none;有序列表與無序列表相反，有序列表即具有明確先后順序的列表，默認情況下，創(chuàng)建的有序列表在每條信息前加上序號1、2、3…。通過CSS樣式中的list-style-type屬性可以對有序列表進行控制。list-style-type屬性的基本語法格式如下。list-style-type:decimal|decimal-leading-zero|lower-roman|upper-roman|lower-alpha|upper-alpha|none|inherit;實戰(zhàn)練習(xí)——設(shè)置新聞列表效果實戰(zhàn)練習(xí)——設(shè)置編號列表效果最終文件：光盤\最終文件\第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屬性——自定義列表符號除了可以使用CSS樣式中的列表符號，還可以使用list-style-image屬性自定義列表符號，list-style-image屬性的基本語法如下。list-style-image:圖片地址;實戰(zhàn)練習(xí)——自定義新聞列表符號10.4.3設(shè)置定義列表定義列表是一種比較特殊的列表形式，相對于有序列表和無序列表來說，應(yīng)用得比較少。定義列表的<dl>標(biāo)簽是成對出現(xiàn)的，并且需要在“代碼”視圖手動添加代碼。從<dl>開始到</dl>結(jié)束，列表中每個元素的標(biāo)題使用<dt></dt>標(biāo)簽，后跟隨<dd></dd>標(biāo)簽，用于描述列表中元素的內(nèi)容。實戰(zhàn)練習(xí)——制作復(fù)雜新聞列表最終文件：光盤\最終文件\第10章\10-4-2.html視頻：光盤\視頻\第10章\10-4-2.swf最終文件：光盤\最終文件\第10章\10-4-3.html視頻：光盤\視頻\第10章\10-4-3.swf通過為網(wǎng)頁設(shè)置一個合理的背景能夠烘托網(wǎng)頁的視覺效果，給人一種協(xié)調(diào)和統(tǒng)一的視覺感，達到美化頁面的效果。不同的背景給人的心理感受并不相同，因此為網(wǎng)頁選擇一個合適的背景非常重要。

10.5背景樣式CSS屬性10.5.1

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

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

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

background-position屬性——背景圖像位置通過CSS樣式中的background-position屬性，能夠在頁面中精確定位背景圖像，更改初始背景圖像的位置。該屬性值可以分為4種類型：絕對定義位置、百分比定義位置、垂直對齊值和水平對齊值。background-position:length|percentage|top|center|bottom|left|right;實戰(zhàn)練習(xí)——定位網(wǎng)頁中的背景圖像最終文件：光盤\最終文件\第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樣式表中，針對背景元素的控制，提供了background-attachment屬性，通過對該屬性的設(shè)置可以使頁面的背景不受滾動條的限制，始終保持在固定位置。background-attachment屬性的語法格式如下。background-attachment:scroll|fixed;實戰(zhàn)練習(xí)——固定網(wǎng)頁中的背景圖像最終文件：光盤\最終文件\第10章\10-5-5.html視頻：光盤\視頻\第10章\10-5-5.swf網(wǎng)頁中的顏色搭配可以更好地吸引瀏覽者的目光，在CSS3.0中新增了幾種網(wǎng)頁中定義顏色的方法，下面依次進行介紹。

10.6

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

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

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

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

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

transparent顏色值如果在CSS樣式中設(shè)置顏色值為transparent，則會使背景顏色、文字顏色或邊框顏色等設(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中新增了漸變設(shè)置屬性gradients，通過該屬性可以在網(wǎng)頁中實現(xiàn)漸變顏色填充的效果。避免了過多地使用漸變圖片所帶來的麻煩，而且在放大頁面的情況下一樣過渡自然。

10.7

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

10.8

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

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

background-size