任務(wù)5:設(shè)置文本、背景與列表樣式網(wǎng)頁(yè)設(shè)計(jì)與制作(HTML+CSS+Javascript)網(wǎng)頁(yè)設(shè)計(jì)與制作課程組目標(biāo)TARGET知識(shí)目標(biāo)掌握CSS字體屬性的編寫；掌握CSS文本屬性的編寫；掌握CSS基本的背景的編寫；掌握CSS3中新增的背景屬性的編寫；掌握CSS3中新增的漸變屬性的編寫;掌握CSS中列表樣式的設(shè)置。1任務(wù)描述

2文本樣式設(shè)置

3背景屬性設(shè)置

4列表樣式設(shè)置

5綜合實(shí)例6任務(wù)實(shí)施

7任務(wù)拓展1任務(wù)描述PartAI教育企業(yè)主頁(yè)主體部分的頁(yè)面實(shí)現(xiàn)

本任務(wù)就是編寫CSS制作規(guī)范的文字、列表，恰當(dāng)?shù)奶幚韴D片與背景，并實(shí)現(xiàn)網(wǎng)站關(guān)于文本列表與背景的頁(yè)面效果。任務(wù)描述：AI教育企業(yè)主頁(yè)主體部分的頁(yè)面實(shí)現(xiàn)2文本樣式設(shè)置Part◎設(shè)置CSS的字體屬性◎文本屬性

設(shè)置CSS的字體屬性1.字體設(shè)置—font-family字體族科實(shí)際上就是CSS中設(shè)置的字體，用于改變HTML標(biāo)簽或元素的字體。語(yǔ)法：

font-family:"字體1","字體2","字體3";瀏覽器不支持第一個(gè)字體時(shí)，會(huì)采用第二個(gè)字體；前兩個(gè)字體都不支持，則采用第三個(gè)字體，以此類推。瀏覽器不支持定義的所有字體，則會(huì)采用系統(tǒng)的默認(rèn)字體。注意中文字體需要加英文狀態(tài)下的引號(hào)，各字體之間必須使用英文狀態(tài)下的逗號(hào)隔開(kāi)。英文字體一般不需要加引號(hào)。當(dāng)需要設(shè)置英文字體時(shí)，英文字體名必須位于中文字體名之前。如果字體名中包含空格、#、$等符號(hào)，則該字體必須加英文狀態(tài)下的單引號(hào)或者雙引號(hào)，例如font-family:"arialblack";。2.字號(hào)大小—font-size字號(hào)大小屬性用作修改字體顯示的大小。語(yǔ)法：

font-size:大小取值；取值范圍：絕對(duì)大小：xx-small|x-small|small|medium|large|x-large|xx-large；相對(duì)大小：larger|smaller；長(zhǎng)度值或百分比。注意絕對(duì)大小根據(jù)對(duì)象字體進(jìn)行調(diào)節(jié)。絕對(duì)大小的單位有px（像素）、in（英寸）、cm（厘米）、mm（毫米）、pt（點(diǎn)），推薦使用px，一般瀏覽器默認(rèn)文字大小為16px。相對(duì)大小則是相對(duì)于父對(duì)象中字體尺寸進(jìn)行相對(duì)調(diào)節(jié)，使用em的較多，如果瀏覽器默認(rèn)文字大小為16px，則1em=16px，1.5em=24px。百分比取值基于父對(duì)象中字體的尺寸。2.字號(hào)大小—font-size使用了CSS3的calc()函數(shù)，該函數(shù)用于動(dòng)態(tài)計(jì)算大小值。例如，可以使用calc()函數(shù)。語(yǔ)法：

calc(expression)例如：“font-size:calc(1.5rem+3vw);”定義文字字體動(dòng)態(tài)變化。注意運(yùn)算符前后都需要有一個(gè)空格，例如：width:calc(100%-10px)；calc()函數(shù)支持“+”、“-”、“*”、“/”運(yùn)算；calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則。在calc()函數(shù)中還是用了vw和vh。其中，vw是viewport'swidth的縮寫形式，1vw永遠(yuǎn)等于當(dāng)前視口寬度的百分之一。vw是一種視窗單位，也是相對(duì)單位。相對(duì)于視口的寬度，視口被均分為100vw。3.字體風(fēng)格—font-style字體風(fēng)格就是字體樣式，主要是設(shè)置字體是否為斜體。語(yǔ)法：

font-style:樣式的取值；取值范圍：normal|italic|oblique。normal(缺省值)是以正常的方式顯示；italic則是以斜體顯示文字；oblique屬于其中間狀態(tài)，以偏斜體顯示。4.字體加粗—font-weight字體加粗用于設(shè)置字體的粗細(xì)，實(shí)現(xiàn)對(duì)一些字體的加粗顯示。語(yǔ)法：

font-weight:字體粗度值；取值范圍：normal|bold|bolder|lighter|number。normal(缺省值)表示正常粗細(xì)；bold表示粗體；bolder表示特粗體；lighter表示特細(xì)體；number表示font-weight還可以取數(shù)值，其范圍是100-900，實(shí)際項(xiàng)目開(kāi)發(fā)中主要使用normal和bold。5.小型的大寫字母—font-variant小型的大寫字母用來(lái)設(shè)置英文字體是否顯示為小型的大寫字母。語(yǔ)法：

font-variant：取值；取值范圍：normal|small-caps。normal(缺省值)表示正常的字體，small-caps表示英文顯示為小型的大寫字母字體。6.復(fù)合屬性：字體—fontfont屬性是復(fù)合屬性，用作對(duì)不同字體屬性的略寫。語(yǔ)法：

font:字體取值；取值：字體風(fēng)格、小型的大寫字母、文本的粗細(xì)、字體大小、行高、字體族科之間使用空格相連接。注意font復(fù)合屬性要按照固定的font-style、font-variant、font-weight、font-size/line-height、font-family的順序編寫，不需要的可以不寫，但要保證順序正確。舉例演示【實(shí)例5-1】應(yīng)用font字體設(shè)置?；疚谋緦傩栽O(shè)置1.顏色屬性—colorcolor屬性用來(lái)表示文本的顏色。

語(yǔ)法：

color:顏色代碼注意顏色取值可以是顏色關(guān)鍵字，如red，blue，green，yellow等。顏色取值也可以十六進(jìn)制來(lái)表示，例如#FF0000。顏色取值還可以使用RGB代碼來(lái)表示。rgb（x,x,x）其中，x是基于0~255之間的整數(shù)，例如rgb（255，0，0）。使用rgb（y%，y%，y%）表示，y是一個(gè)介于0到100之間整數(shù)，例如rgb（100%，0%，0%）。這表示為紅色，當(dāng)值為0時(shí)百分號(hào)不能省略。還可以使用rgba（y%，y%，y%，不透明度）表示，opacity表示不透明度（取0-1）。2.文本行高—line-height行高屬性用于控制文本基線之間的間隔值，或者說(shuō)是行與行之間的距離。語(yǔ)法：

line-height:行高值；行高值通常使用像素px，相對(duì)值em和百分比%，實(shí)際開(kāi)發(fā)中使用最多的是像素px。舉例演示【實(shí)例5-2】顏色與行高的使用。3.單詞間隔—word-spacing單詞間隔用來(lái)定義英文單詞之間的間隔。語(yǔ)法：

word-spacing:取值；取值范圍：normal|<長(zhǎng)度>。normal是指正常的間隔，是默認(rèn)選項(xiàng)；長(zhǎng)度是設(shè)定單詞間隔的數(shù)值及單位，允許使用負(fù)值。4.字符間隔—letter-spacing字符間隔和單詞間隔類似，不同的是字符間隔用于設(shè)置字符的間隔數(shù)。語(yǔ)法：

letter-spacing:取值;取值范圍：normal|<長(zhǎng)度>。normal是指正常的間隔，是默認(rèn)選項(xiàng)；長(zhǎng)度是設(shè)定單詞間隔的數(shù)值及單位，允許使用負(fù)值。舉例演示【實(shí)例5-3】單詞與字符間隔的使用。5.文字修飾—text-decoration文字修飾屬性主要是用于對(duì)文本進(jìn)行修飾，如設(shè)置下劃線、上劃線、刪除線等。語(yǔ)法：

text-decoration:修飾值；取值范圍：none|［underline|overline|line-through］。none表示不對(duì)文本進(jìn)行修飾，這是默認(rèn)屬性值；underline表示對(duì)文字添加下劃線；overline表示對(duì)文本添加上劃線；line-through表示對(duì)文本添加刪除線。注意：text-decoration可以賦多個(gè)值。例如：text-decoration:underlineoverline;6.文本轉(zhuǎn)換—text-transform文本轉(zhuǎn)換屬性僅被用于表達(dá)某種格式的要求，是用來(lái)轉(zhuǎn)換英文文字的大小寫的。語(yǔ)法：

text-transform:轉(zhuǎn)換值;7.文本縮進(jìn)—text-indent文本縮進(jìn)屬性用于定義HTML中塊級(jí)元素（如p，hl等）的第一行可以接受的縮進(jìn)數(shù)量，常用于設(shè)置段落的首行縮進(jìn)。語(yǔ)法：

text-indent:縮進(jìn)值；文本的縮進(jìn)值必須是一個(gè)長(zhǎng)度或一個(gè)百分比。若設(shè)定為百分比，則以上級(jí)元素的寬度而定，通常使用em為單位。取值范圍：none|capitalize|uppercase|lowercase。取值中，none表示使用原始值；capitalize使每個(gè)字的第一個(gè)字母大寫；uppercase使每個(gè)單詞的所有字母大寫；lowercase則使每個(gè)字的所有字母小寫。8.文本水平對(duì)齊—text-align文本水平對(duì)齊用來(lái)設(shè)置文本水平對(duì)齊方式。語(yǔ)法：

text-align:排列值;取值范圍：left|right|center。其中，left為左對(duì)齊；right為右對(duì)齊；center為居中對(duì)齊。9.垂直對(duì)齊—vertical-alignvertical-align表示垂直對(duì)齊方式，用于設(shè)置一個(gè)行內(nèi)元素的縱向位置，相對(duì)于它的上級(jí)元素或相對(duì)于元素行。語(yǔ)法：

vertical-align:排列取值；取值范圍：baseline|sub|super|top|text-top|middle|bottom|text-bottom|<百分比>。baseline使元素和上級(jí)元素的基線對(duì)齊；sub為下標(biāo)對(duì)齊；super為上標(biāo)對(duì)齊；top為使元素和行中最多的元素向上對(duì)齊；text-top使元素和上級(jí)元素的字體向上對(duì)齊；middle是縱向?qū)R元素基線加上上級(jí)元素的x高度的一半的中點(diǎn)，其中x高度是字母“x”的高度；text-bottom使元素和上級(jí)元素的字體向下對(duì)齊。注意：百分比是一個(gè)相對(duì)于元素行高屬性的百分比，它會(huì)在上級(jí)基線上增高元素基線的指定數(shù)量。這里允許使用負(fù)值，負(fù)值表示減少相應(yīng)的數(shù)量。;舉例演示【實(shí)例5-5】垂直對(duì)齊方式屬性的使用。10.處理空白—white-spacewhite-space屬性用于設(shè)置頁(yè)面對(duì)象內(nèi)空白（包括空格和換行等）的處理方式。默認(rèn)情況下，HTML中的連續(xù)多個(gè)空格會(huì)被合并成一個(gè)，而使用這一可以設(shè)置成其他的處理方式。語(yǔ)法：

white-space：值；取值范圍：normal|pre|nowrap。其中，normal是默認(rèn)屬性，即將連續(xù)的多個(gè)空格合并；pre會(huì)導(dǎo)致源中的空格和換行符被保留；nowrap則表示強(qiáng)制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遇到<br>對(duì)象。舉例演示【實(shí)例5-5】處理空白的使用。

陰影效果—text-shadowtext-shadow屬性可以為頁(yè)面中的文本添加陰影效果。語(yǔ)法：

text-shadow：h-shadow值v-shadow值blur值color;h-shadow用于設(shè)置水平陰影的距離v-shadow用于設(shè)置垂直陰影的距離blur用于設(shè)置模糊半徑color用于設(shè)置陰影顏色。例如：text-shadow:10px10px5pxblue;舉例演示【實(shí)例5-6】文本陰影的使用。

對(duì)象內(nèi)溢出文本—text-overflowtext-overflow屬性用于標(biāo)示對(duì)象內(nèi)溢出的文本。語(yǔ)法：

text-overflow：clip|ellipsis；clip表示修剪溢出文本，不顯示省略標(biāo)記“…”ellipsis：用省略標(biāo)記“...”標(biāo)示被修剪文本，省略標(biāo)記插入的位置是最后一個(gè)字符。取值范圍：clip|ellipsis舉例演示【實(shí)例5-7】溢出文本的使用

文本換行—word-wrapword-wrap屬性主要用于對(duì)長(zhǎng)單詞和URL地址的自動(dòng)換行。語(yǔ)法：

word-wrap：取值；normal表示允許的斷字點(diǎn)換行，這是瀏覽器默認(rèn)值；break-word是在長(zhǎng)單詞或URL地址內(nèi)部進(jìn)行換行。取值范圍：normal|break-word舉例演示【實(shí)例5-8】文本換行的使用3背景屬性設(shè)置Part◎基本的背景設(shè)置◎CSS3中新增的背景屬性◎CSS3中新增的漸變屬性1基本的背景設(shè)置1.背景顏色background-colorbackground-color屬性設(shè)置背景顏色。語(yǔ)法：

background-color:顏色取值；顏色取值可以預(yù)定義的顏色值、十六進(jìn)制#RRGGBB或RGB代碼（r，g，b）。background-color的默認(rèn)為透明，此時(shí)子元素會(huì)顯示父元素的背景。在CSS3中，引入了RGBA模式,A就是alpha參數(shù),實(shí)現(xiàn)對(duì)顏色與背景顏色實(shí)現(xiàn)不透明的設(shè)置,aipha參數(shù)是一個(gè)介于0.0（完全透明）和1.0（完全不透明）之間的數(shù)字。例如：background-color:rgba(11,66,99,0.2);除了使用RGBA模式，也可以opacity屬性來(lái)控制元素呈現(xiàn)出透明效果。例如：opacity:0.5；opacity屬性用于定義元素的不透明度，參數(shù)表示不透明度的值，它是一個(gè)介于0~1的浮點(diǎn)數(shù)值。其中，0表示完全透明，1表示完全不透明，樣例中的0.5則表示半透明。2.背景圖像—background-imagebackground-image用來(lái)設(shè)定一個(gè)元素的背景圖像。語(yǔ)法：

background-image:url(圖像地址）；圖像地址可以設(shè)置成絕對(duì)地址，也可以設(shè)置成相對(duì)地址。舉例演示【實(shí)例5-9】背景顏色與背景圖片的設(shè)置。3.背景重復(fù)—background-repeat背景重復(fù)屬性也稱為背景圖像平鋪屬性，用來(lái)設(shè)定對(duì)象的背景圖像重復(fù)以及如何鋪排。語(yǔ)法：

background-repeat：取值；取值范圍：repeat|no-repeat|repeat-x|repeat-y。其中，repeat背景圖片橫向和豎向都重復(fù)；no-repeat背景圖片橫向和豎向都不重復(fù)；repeat-x背景圖片橫向重復(fù)；repeat-y背景圖片豎向重復(fù)。background-repeat屬性和background-image屬性連在一起使用。只設(shè)置background-image屬性，沒(méi)設(shè)置background-repeat屬性，在缺省狀態(tài)下，圖片既橫向重復(fù)，又豎向重復(fù)。舉例演示【實(shí)例】背景圖片與背景重復(fù)的設(shè)置。4.背景位置—background-position背景位置屬性用于指定背景圖像的最初位置。當(dāng)設(shè)置background-repeat為no-repeat時(shí)，就能發(fā)現(xiàn)圖像默認(rèn)以元素的左上角為基準(zhǔn)點(diǎn)顯示。語(yǔ)法：

background-position:位置取值;取值范圍：［<百分比>|<長(zhǎng)度>］{1,2}|[left|center|right]|[top|center|bottom]。取值范圍包括兩種，一種是采用數(shù)字，即[<百分比>|<長(zhǎng)度>]{1,2}。另一種是關(guān)鍵字描述，即[left|center|right]|[top|center|bottom][<百分比>|<長(zhǎng)度>]{1,2}：使用確切的數(shù)字表示圖像位置，使用時(shí)首先指定橫向位置，接著是縱向位置。百分比和長(zhǎng)度可以混合使用，設(shè)定為負(fù)值也是允許的。默認(rèn)取值是0%0%。[left|center|right]|[top|center|bottom]:left，center，right是橫向的關(guān)鍵字，橫向表示在橫向上取0%,50%,100%的位置；top，center，bottom是縱向的關(guān)鍵字，縱向表示在縱向上取0%,50%,100%的位置。注意：background-position屬性和background-image屬性連在一起使用。舉例演示【實(shí)例5-10】背景圖像重復(fù)與圖像背景位置。5.背景附件—background-attachment背景附件屬性用來(lái)設(shè)置背景圖像是隨對(duì)象內(nèi)容滾動(dòng)還是固定的。語(yǔ)法：

background-attachment:scroll|fixed;其中，scroll表示背景圖像是隨對(duì)象內(nèi)容滾動(dòng)，是默認(rèn)選項(xiàng)；fixed表示背景圖像固定在頁(yè)面上靜止不動(dòng)，只有其他的內(nèi)容隨滾動(dòng)條滾動(dòng)。注意：background-attachment屬性和background-image屬性連在一起使用。舉例演示【實(shí)例】背景圖片與背景重復(fù)的設(shè)置。舉例演示【實(shí)例5-11】背景附件的應(yīng)用。復(fù)合屬性：背景—background背景background是復(fù)合屬性，是一個(gè)明確的背景關(guān)系屬性的略寫。語(yǔ)法：

background:取值;背景屬性包括：背景顏色background-color，背景圖片background-image，重復(fù)設(shè)置background-repeat，背景附加background-attachment，背景位置background-position等之間用空格相連。注意：寫background復(fù)合屬性要注意屬性的先后順序。語(yǔ)法：background:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground-sizebackground-clipbackground-origin。其中background-sizebackground-clipbackground-origin屬性為CSS3新增屬性，后面進(jìn)一步學(xué)習(xí)。body{/*設(shè)置body的基本樣式*/background-image:url("images/jj-bg.jpg");/*設(shè)置網(wǎng)頁(yè)的背景圖像*/background-repeat:no-repeat;/*設(shè)置背景圖像不重復(fù)*/background-position:100%100%;/*設(shè)置背景圖像水平位置100%，垂直位置100%*/background-attachment:fixed;/*設(shè)置背景圖像位置固定*/}body{/*標(biāo)簽選擇器，使用復(fù)合屬性設(shè)置背景圖片*//*設(shè)置復(fù)合屬性設(shè)置背景圖片*/background:url('images/jj-bg.jpg')fixed100%100%no-repeat;}

背景復(fù)合屬性舉例演示

背景圖像大小background-sizebackground-size屬性用于控制背景圖像的大小。語(yǔ)法：

background-size:取值;如果使用像素值，使用一個(gè)時(shí)表示為背景圖像的寬，如果使用兩個(gè)，則第2個(gè)像素值表示為高度；取值范圍：像素值|百分比|cover|contain。使用百分比，表示以父元素的百分比來(lái)設(shè)置背景圖像的寬度和高度。第1個(gè)值設(shè)置寬度，第2個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)默認(rèn)為auto，高度會(huì)隨著寬度的變化而變化，從而保證圖像的比例不失真。使用cover把背景圖像擴(kuò)展至足夠大，使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無(wú)法在背景定位區(qū)域中，這主要是背景圖像的大小與父元素的比例不一致導(dǎo)致的。contain則能把圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。舉例演示【實(shí)例5-13】背景圖像大小的應(yīng)用。CSS3新增背景圖像的坐標(biāo)屬性

背景圖像的坐標(biāo)background-originbackground-origin屬性用來(lái)定義背景圖像的初始位置，即坐標(biāo)。語(yǔ)法：

background-origin:取值;取值范圍：padding-box|content-box|border-box。content-box表示背景圖像相對(duì)于內(nèi)容來(lái)定位，padding-box表示背景圖像相對(duì)于內(nèi)邊距區(qū)域來(lái)定位，padding-box默認(rèn)值，border-box表示背景圖片相對(duì)于邊框來(lái)定位。默認(rèn)情況下，background-position屬性總是以元素左上角為坐標(biāo)原點(diǎn)定位背景圖像，在CSS3中的background-origin屬性可以改變這種定位方式，自行定義背景圖像的相對(duì)位置。邊框border內(nèi)填充padding內(nèi)容contentcontent-boxpaddding-boxborder-box舉例演示【實(shí)例5-14】背景圖像坐標(biāo)的應(yīng)用。背景圖像的裁剪區(qū)域background-clipbackground-clip屬性用于定義背景圖像的裁剪區(qū)域。就是規(guī)范背景的顯示范圍。語(yǔ)法：

background-clip:取值;取值范圍：padding-box|content-box|border-box。其中，默認(rèn)值為border-box，表示從邊框向外裁剪背景padding-box表示從內(nèi)邊距區(qū)域向外裁剪背景content-box表示從內(nèi)容區(qū)域向外裁剪背景。borer-box當(dāng)把border由solid設(shè)置為dashed時(shí)content-boxpadding-box舉例演示【實(shí)例5-15】背景圖像裁剪區(qū)域的應(yīng)用。CSS3新增多背景圖像的設(shè)置多背景圖像的設(shè)置

在CSS3中，允許一個(gè)容器里顯示多個(gè)背景圖像，使背景圖像效果更容易控制。通過(guò)background-image、background-repeat、background-position和background-size等屬性提供多個(gè)屬性值來(lái)實(shí)現(xiàn)多重背景圖像效果，各屬性值之間用逗號(hào)隔開(kāi)。圖1圖2圖3舉例演示【實(shí)例5-16】多背景圖像的設(shè)置的應(yīng)用。4CSS3中新增的漸變屬性Part◎線性漸變屬性◎徑向漸變屬性◎重復(fù)漸變CSS3新增線性漸變屬性線性漸變線性漸變是指第一種顏色沿著一條直線按順序過(guò)渡到第二種顏色。語(yǔ)法：

background-image:linear-gradient(漸變角度,顏色值1,顏色值2…,顏色值n);linear-gradient用于定義漸變方式為線性漸變，括號(hào)內(nèi)用與設(shè)定漸變角度和顏色值。漸變角度是以自上向下的垂直線為0deg度角，然后順時(shí)針計(jì)算；默認(rèn)情況下漸變角度為180deg0deg相當(dāng)于“totop”90deg相當(dāng)于“toright”180deg相當(dāng)于“tobottom”270deg相當(dāng)于“toleft”箭頭所指方向?yàn)?5deg的角舉例演示【實(shí)例5-17】線性漸變的使用。CSS3新增徑向漸變屬性徑性漸變徑向漸變是指第一種顏色從一個(gè)中心點(diǎn)開(kāi)始，依據(jù)橢圓或圓形形狀進(jìn)行擴(kuò)張漸變到第二種顏色。語(yǔ)法：

background-image:radial-gradient(漸變形狀圓心位置,顏色值1,顏色值2…,顏色值n);radial-gradient表示漸變方式為徑向漸變，括號(hào)內(nèi)的參數(shù)值用于設(shè)定漸變形狀、圓心位置和顏色值。漸變形狀用來(lái)定義徑向漸變的形狀，主要包括“circle”和“ellipse”兩個(gè)值。參數(shù)名稱含義circle圓形的徑向漸變ellipse橢圓形的徑向漸變像素值/百分比定義水平半徑和垂直半徑的像素值，如“200px150px”表示水平半徑為200px，垂直位150px的橢圓形，如果兩個(gè)數(shù)值相同表示為圓形，也可以通過(guò)百分比來(lái)定義形狀，如“200px200px”圓心位置用于確定元素漸變的中心位置，使用“at”加上關(guān)鍵詞或參數(shù)值來(lái)定義徑向漸變的中心位置。圓心位置的參數(shù)含義參數(shù)名稱含義center設(shè)置中間為徑向漸變圓心的橫坐標(biāo)值或縱坐標(biāo)left設(shè)置左邊為徑向漸變圓心的橫坐標(biāo)值right設(shè)置右邊為徑向漸變圓心的橫坐標(biāo)值top設(shè)置頂部為徑向漸變圓心的縱標(biāo)值bottom設(shè)置底部為徑向漸變圓心的縱標(biāo)值像素值/百分比用于定義圓心的水平和垂直坐標(biāo)，可以為負(fù)值顏色值的是設(shè)置與線性漸變是一致的，“顏色值1”表示起始顏色，“顏色值n”表示結(jié)束顏色，起始顏色和結(jié)束顏色之間可以添加多個(gè)顏色值，各顏色值之間用“，”隔開(kāi)。例如：background-image:radial-gradient(circleatcenter,#FFF,#00F);漸變形狀

圓心位置,顏色值1,顏色值2舉例演示【實(shí)例5-18】徑向漸變的使用。CSS3新增重復(fù)漸變重復(fù)漸變重復(fù)漸變包括重復(fù)線性漸變和重復(fù)徑向漸變。重復(fù)線性漸變的語(yǔ)法如下：語(yǔ)法：

background-image:repeating-linear-gradient(漸變角度,顏色值1,顏色值2…,顏色值n);參數(shù)的設(shè)置與線性漸變一樣相同。重復(fù)徑向漸變的語(yǔ)法如下：語(yǔ)法：background-image:repeating-radial-gradient(漸變形狀圓心位置,顏色值1,顏色值2…,顏色值n);參數(shù)的設(shè)置與徑向漸變一樣相同。舉例演示【實(shí)例5-19】重復(fù)漸變的使用。5列表樣式設(shè)置Part◎定義列表的基本樣式◎列表布局實(shí)例1定義列表的基本樣式1.列表符號(hào)list-style-type列表符號(hào)屬性用于設(shè)定列表項(xiàng)的符號(hào)。語(yǔ)法：

list-style-type:<值>；list-style-type用來(lái)設(shè)置多種符號(hào)作為列表項(xiàng)的符號(hào)，其具體取值范圍見(jiàn)表所示。屬性值含義none不顯示任何項(xiàng)目符號(hào)或編碼disc以實(shí)心圓形●作為項(xiàng)目符號(hào)circle以實(shí)心圓形○作為項(xiàng)目符號(hào)square以實(shí)心方塊■作為項(xiàng)目符號(hào)decimal以普通阿拉伯?dāng)?shù)字1、2、3……作為項(xiàng)目編號(hào)lower-roman以小寫羅馬數(shù)字ⅰ、ⅱ、?！鳛轫?xiàng)目編號(hào)upper-roman以大寫羅馬數(shù)字Ⅰ、Ⅱ、Ⅲ……作為項(xiàng)目編號(hào)lower-alpha以小寫英文字母a、b、c……作為項(xiàng)目編號(hào)upper-alpha以大寫英文字母A、B、C……作為項(xiàng)目編號(hào)舉例演示【實(shí)例5-20】列表符號(hào)的使用。2.圖像符號(hào)list-style-image圖像符號(hào)屬性使用圖像作為列表項(xiàng)目符號(hào)，以美化頁(yè)面。語(yǔ)法：

list-style-image:none|url(圖像地址)；none表示不指定圖像；url則使用絕對(duì)或相對(duì)