任務(wù)5-設(shè)置文本、背景與列表樣式課件

1、任務(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ù)描述Part美化門戶網(wǎng)站導(dǎo)航與banner區(qū)域 本任務(wù)就是編寫CSS制作規(guī)范的文字、列表，恰當(dāng)?shù)奶幚韴D片與背景，并實(shí)現(xiàn)網(wǎng)站關(guān)于文本列表與背景的頁(yè)面效果。任務(wù)描述：美化門戶網(wǎng)

2、站導(dǎo)航與banner區(qū)域2文本樣式設(shè)置Part 設(shè)置CSS的字體屬性 文本屬性1 設(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í)，英文字體名必須位于中文字體名之前。如果字體名中包含空格、#、$等符

3、號(hào)，則該字體必須加英文狀態(tài)下的單引號(hào)或者雙引號(hào)，例如font-family: arial black;。2.字號(hào)大小font-size字號(hào)大小屬性用作修改字體顯示的大小。語(yǔ)法： font-size:大小取值；取值范圍：絕對(duì)大?。簒x-small | x-small | small | medium | large | x-large | xx-large；相對(duì)大?。簂arger | smaller；長(zhǎng)度值或百分比。注意絕對(duì)大小根據(jù)對(duì)象字體進(jìn)行調(diào)節(jié)。絕對(duì)大小的單位有px（像素）、in（英寸）、cm（厘米）、mm（毫米）、pt（點(diǎn)），推薦使用px。相對(duì)大小則是相對(duì)于父對(duì)象中字體尺寸進(jìn)行相對(duì)調(diào)節(jié)，使

4、用em的較多。百分比取值基于父對(duì)象中字體的尺寸。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(缺省值)表

5、示正常粗細(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:字體取值；取值：字

6、體風(fēng)格、小型的大寫字母、文本的粗細(xì)、字體大小、行高、字體族科之間使用空格相連接。注意font復(fù)合屬性要按照固定的font-style、font-variant、font-weight、font-size/line-height、font-family的順序編寫，不需要的可以不寫，但要保證順序正確。舉例演示【實(shí)例5-1】font字體設(shè)置。2文本屬性1.顏色屬性colorcolor屬性用來(lái)表示文本的顏色。 語(yǔ)法： color:顏色代碼注意顏色取值可以是顏色關(guān)鍵字，如red，blue，green，yellow等。顏色取值也可以十六進(jìn)制來(lái)表示，例如#FF0000。顏色取值還可以使用RGB代碼來(lái)表示。r

7、gb（x,x,x）其中，x是基于0255之間的整數(shù)，例如rgb（255，0，0）。使用rgb（y%，y%，y%）表示，y是一個(gè)介于0到100之間整數(shù)，例如rgb（100%，0%，0%）。這表示為紅色，當(dāng)值為0時(shí)百分號(hào)不能省略。2.文本行高line-height行高屬性用于控制文本基線之間的間隔值，或者說(shuō)是行與行之間的距離。語(yǔ)法： line-height:行高值；行高值通常使用像素px，相對(duì)值em和百分比%，實(shí)際開(kāi)發(fā)中使用最多的是像素px。3.單詞間隔word-spacing單詞間隔用來(lái)定義英文單詞之間的間隔，對(duì)中文無(wú)效。語(yǔ)法： word-spacing:取值；取值范圍：normal | 。no

8、rmal是指正常的間隔，是默認(rèn)選項(xiàng)；長(zhǎng)度是設(shè)定單詞間隔的數(shù)值及單位，允許使用負(fù)值。4. 字符間隔letter-spacing字符間隔和單詞間隔類似，不同的是字符間隔用于設(shè)置字符的間隔數(shù)。語(yǔ)法： letter-spacing:取值;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ì)文本添

9、加上劃線；line-through表示對(duì)文本添加刪除線。取值范圍：normal | 。normal是指正常的間隔，是默認(rèn)選項(xiàng)；長(zhǎng)度是設(shè)定單詞間隔的數(shù)值及單位，允許使用負(fù)值。注意：text-decoration可以賦多個(gè)值。例如：text-decoration: underline overline;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)

10、。語(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:排列值; 9. 處理空白white-spacewhite-space屬性用于設(shè)置頁(yè)面對(duì)象內(nèi)

11、空白（包括空格和換行等）的處理方式。默認(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é)束或者遇到對(duì)象。取值范圍： left | right | center 。其中，left為左對(duì)齊；right為右對(duì)齊；center為居中對(duì)齊 。10. 垂直對(duì)齊vertical-alignvertical-align表示垂直對(duì)齊方式，用于

12、設(shè)置一個(gè)行內(nèi)元素的縱向位置，相對(duì)于它的上級(jí)元素或相對(duì)于元素行。行內(nèi)元素是沒(méi)有行在其前和后斷開(kāi)的元素，例如，在HTML中A和IMG。它主要用于對(duì)圖像的縱向排列。語(yǔ)法： vertical-align:排列取值；取值范圍：baseline | sub | super | top | text-top | middle | bottom | text-bottom | 。baseline使元素和上級(jí)元素的基線對(duì)齊；sub為下標(biāo)；super為上標(biāo)；top為使元素和行中最多的元素向上對(duì)齊；text-top使元素和上級(jí)元素的字體向上對(duì)齊；middle是縱向?qū)R元素基線加上上級(jí)元素的x高度的一半的中點(diǎn)，其中x

13、高度是字母“x”的高度；text-bottom使元素和上級(jí)元素的字體向下對(duì)齊。注意：百分比是一個(gè)相對(duì)于元素行高屬性的百分比，它會(huì)在上級(jí)基線上增高元素基線的指定數(shù)量。這里允許使用負(fù)值，負(fù)值表示減少相應(yīng)的數(shù)量。;11. 陰影效果text-shadowtext-shadow屬性可以為頁(yè)面中的文本添加陰影效果。語(yǔ)法： text-shadow：h-shadow值 v-shadow值 blur值 color; 12. 對(duì)象內(nèi)溢出文本text-overflowtext-overflow屬性用于標(biāo)示對(duì)象內(nèi)溢出的文本。語(yǔ)法： text-overflow：clip | ellipsis；其中，clip表示修剪溢出

14、文本，不顯示省略標(biāo)記“”；ellipsis：用省略標(biāo)記“.”標(biāo)示被修剪文本，省略標(biāo)記插入的位置是最后一個(gè)字符。取值范圍： left | right | center 。其中，h-shadow用于設(shè)置水平陰影的距離，v-shadow用于設(shè)置垂直陰影的距離，blur用于設(shè)置模糊半徑，color用于設(shè)置陰影顏色。例如：text-shadow:10px 10px 5px blue;舉例演示【實(shí)例5-2】文本外觀屬性設(shè)置。3背景屬性設(shè)置Part基本的背景設(shè)置CSS3中新增的背景屬性CSS3中新增的漸變屬性1 基本的背景設(shè)置1. 背景顏色background-colorbackground-color屬性

15、設(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屬性用于定義

16、元素的不透明度，參數(shù)表示不透明度的值，它是一個(gè)介于01的浮點(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-3】背景顏色與背景圖片的設(shè)置。3. 背景重復(fù)background-repeat背景重復(fù)屬性也稱為背景圖像平鋪屬性，用來(lái)設(shè)定對(duì)象的背景圖像重復(fù)以及如何鋪排。語(yǔ)法： background-repeat：取值；取值范圍：repeat |

17、 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è)置ba

18、ckground-repeat為no-repeat時(shí)，就能發(fā)現(xiàn)圖像默認(rèn)以元素的左上角為基準(zhǔn)點(diǎn)顯示。語(yǔ)法： background-position:位置取值;取值范圍：|1,2 | left | center | right | top | center | bottom。取值范圍包括兩種，一種是采用數(shù)字，即|1,2。另一種是關(guān)鍵字描述，即left | center | right | top | center | bottom|1,2：使用確切的數(shù)字表示圖像位置，使用時(shí)首先指定橫向位置，接著是縱向位置。百分比和長(zhǎng)度可以混合使用，設(shè)定為負(fù)值也是允許的。 默認(rèn)取值是0% 0%。left|cente

19、r|right | top|center|bottom: left，center，right 是橫向的關(guān)鍵字，橫向表示在橫向上取0%, 50%, 100%的位置；top，center，bottom是縱向的關(guān)鍵字，縱向表示在縱向上取0%, 50%,100%的位置。注意：background-position屬性和background-image屬性連在一起使用。5. 背景附件background-attachment背景附件屬性用來(lái)設(shè)置背景圖像是隨對(duì)象內(nèi)容滾動(dòng)還是固定的。語(yǔ)法： background-attachment:scroll | fixed;其中，scroll表示背景圖像是隨對(duì)象內(nèi)容滾

20、動(dòng)，是默認(rèn)選項(xiàng)；fixed表示背景圖像固定在頁(yè)面上靜止不動(dòng)，只有其他的內(nèi)容隨滾動(dòng)條滾動(dòng)。注意：background-attachment屬性和background-image屬性連在一起使用。舉例演示【實(shí)例】背景圖片與背景重復(fù)的設(shè)置。6. 復(fù)合屬性：背景background背景background是復(fù)合屬性，是一個(gè)明確的背景關(guān)系屬性的略寫。語(yǔ)法： background:取值;背景屬性包括：背景顏色background-color，背景圖片background-image，重復(fù)設(shè)置background-repeat，背景附加background-attachment，背景位置background

21、-position等之間用空格相連。注意：寫background復(fù)合屬性要注意屬性的先后順序。語(yǔ)法：background: background-color background-image background-repeat background-attachment background-position background-size background-clip background-origin。其中background-size background-clip background-origin屬性為CSS3新增屬性，后面進(jìn)一步學(xué)習(xí)。舉例演示【實(shí)例5-4】背景的復(fù)合屬性設(shè)置。2

22、CSS3中新增的背景屬性1. 背景圖像大小background-sizebackground-size屬性用于控制背景圖像的大小。語(yǔ)法： background-size:取值;如果使用像素值，使用一個(gè)時(shí)表示為背景圖像的寬，如果使用兩個(gè)，則第2個(gè)像素值表示為高度；取值范圍：像素值 | 百分比 | contain | cover。使用百分比，表示以父元素的百分比來(lái)設(shè)置背景圖像的寬度和和高度。第1個(gè)值設(shè)置寬度，第2個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)默認(rèn)為auto，高度會(huì)隨著寬度的變化而變化，從而保證圖像的比例不失真。使用cover把背景圖像擴(kuò)展至足夠大，使背景圖像完全覆蓋背景區(qū)域。背景圖像

23、的某些部分也許無(wú)法在背景定位區(qū)域中，這主要是背景圖像的大小與父元素的比例不一致導(dǎo)致的。contain則能把圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。舉例演示【實(shí)例5-5】背景圖像大小設(shè)置。背景圖像大小為父元素的60% 寬500高150的效果設(shè)置為cover設(shè)置為contain2.背景圖像的坐標(biāo)background-originbackground-origin屬性用來(lái)定義背景圖像的初始位置，即坐標(biāo)。語(yǔ)法： background-origin:取值;取值范圍：padding-box | content-box | border-box。其中，padding-box表示背景圖像相對(duì)于內(nèi)

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

25、round-clip:取值;取值范圍：padding-box | content-box | border-box。其中，默認(rèn)值為border-box，表示從邊框向外裁剪背景，padding-box表示從內(nèi)邊距區(qū)域向外裁剪背景，content-box表示從內(nèi)容區(qū)域向外裁剪背景。舉例演示【實(shí)例5-7】背景圖像的裁剪區(qū)域。背景圖像裁剪區(qū)域?yàn)閏ontent-box背景圖像裁剪區(qū)域?yàn)閜adding-box4. 多背景圖像的設(shè)置 在CSS3中，允許一個(gè)容器里顯示多個(gè)背景圖像，使背景圖像效果更容易控制。通過(guò)background-image、background-repeat、background-posi

26、tion和background-size等屬性提供多個(gè)屬性值來(lái)實(shí)現(xiàn)多重背景圖像效果，各屬性值之間用逗號(hào)隔開(kāi)。舉例演示【實(shí)例5-8】多背景圖像的設(shè)置。background-image: url(img/logo.png),url(img/yks.png),url(img/hs.png); background-repeat: no-repeat;background-position:right,left bottom,bottom;background-size: 80px,60%,100%;logo.pngyks.pnghs.png4CSS3中新增的漸變屬性Part線性漸變屬性徑向漸變屬性重

27、復(fù)漸變3 CSS3中新增的漸變屬性1. 線性漸變線性漸變是指第一種顏色沿著一條直線按順序過(guò)渡到第二種顏色。語(yǔ)法： background-image: linear-gradient(漸變角度,顏色值1,顏色值2,顏色值n);linear-gradient用于定義漸變方式為線性漸變，括號(hào)內(nèi)用與設(shè)定漸變角度和顏色值。漸變角度是以自上向下的垂直線為0deg度角，然后順時(shí)針計(jì)算；箭頭所指方向?yàn)?5deg的角默認(rèn)情況下漸變角度為180deg0deg相當(dāng)于“to top”90deg相當(dāng)于“to right”180deg相當(dāng)于“to bottom”270deg相當(dāng)于“to left”例如：linear-gr

28、adient(yellow,white)等同于linear-gradient(180deg,yellow,white)在實(shí)現(xiàn)漸變的同時(shí)還可以控制顏色漸變的位置。實(shí)現(xiàn)方法就是在每一個(gè)顏色值后面還可以書(shū)寫一個(gè)百分比數(shù)值，用于標(biāo)示顏色漸變的位置例如：background-image: linear-gradient(180deg,yellow 20%,white 60%); 舉例演示【實(shí)例5-9】線性漸變基本應(yīng)用。角度180由黃色漸變?yōu)榘咨薷臐u變位置的線性漸變3 CSS3中新增的漸變屬性2.徑性漸變徑向漸變是指第一種顏色從一個(gè)中心點(diǎn)開(kāi)始，依據(jù)橢圓或圓形形狀進(jìn)行擴(kuò)張漸變到第二種顏色。語(yǔ)法： back

29、ground-image:radial-gradient (漸變形狀 圓心位置, 顏色值1,顏色值2,顏色值n);radial-gradient表示漸變方式為徑向漸變，括號(hào)內(nèi)的參數(shù)值用于設(shè)定漸變形狀、圓心位置和顏色值。漸變形狀用來(lái)定義徑向漸變的形狀，主要包括“circle”和“ellipse”兩個(gè)值。參數(shù)名稱含義circle圓形的徑向漸變ellipse橢圓形的徑向漸變像素值/百分比定義水平半徑和垂直半徑的像素值，如“200px 150px”表示水平半徑為200px，垂直位150px的橢圓形，如果兩個(gè)數(shù)值相同表示為圓形，也可以通過(guò)百分比來(lái)定義形狀，如“80% 80%”圓心位置用于確定元素漸變的中

30、心位置，使用“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( circle

31、 at center, #FFF, #00F );漸變形狀 圓心位置, 顏色值1 ,顏色值2舉例演示【實(shí)例5-10】徑向漸變基本應(yīng)用。徑向漸變1徑向漸變23 CSS3中新增的漸變屬性3.重復(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)

32、;參數(shù)的設(shè)置與徑向漸變一樣相同。舉例演示【實(shí)例5-11】重復(fù)漸變基本應(yīng)用。重復(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ù)字、

33、作為項(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)2. 圖像符號(hào)list-style-image圖像符號(hào)屬性使用圖像作為列表項(xiàng)目符號(hào)，以美化頁(yè)面。語(yǔ)法： list-style-image: none | url(圖像地址)；none表示不指定圖像；url則使用絕對(duì)或相對(duì)地址指定作為符號(hào)的圖像。如果使用“l(fā)ist-style-image”定義列表圖像時(shí)，通常需要先設(shè)置“l(fā)ist-style-type”為“none”，然后再設(shè)置list-style- image的值。3.列表縮進(jìn)list-style-position列表縮進(jìn)屬性用于設(shè)定列表縮進(jìn)的設(shè)置。語(yǔ)法： list-style-position: outside | inside；outside表示列表項(xiàng)目標(biāo)記放置在文本以外，且環(huán)繞文本不根據(jù)標(biāo)記對(duì)齊inside是列表的默認(rèn)屬性，表示列表項(xiàng)目標(biāo)記放置在文本以內(nèi)，且