網(wǎng)頁(yè)設(shè)計(jì)-網(wǎng)頁(yè)設(shè)計(jì)CSS常用屬性課件

1、第12講 CSS常用屬性12.1 CSS屬性概述12.2 文本屬性12.3 字體屬性12.4 背景屬性12.5 列表屬性12.6 表格屬性12.1 CSS屬性概述CSS設(shè)置網(wǎng)頁(yè)中的各個(gè)對(duì)象的樣式需要通過(guò)CSS屬性來(lái)實(shí)現(xiàn)，常用的CSS屬性有文本、字體、背景、列表、表格、盒子模型和定位等CSS屬性。12.2 文本屬性文本屬性用于設(shè)置文本的顏色、行高、對(duì)齊方式、字符間距、段首縮進(jìn)位置及修飾文本。常用文本屬性如下表所示：文本屬性屬性值描 述color命名顏色顏色十六進(jìn)制值RGB值設(shè)置文本的顏色text-indentlength(常用單位px|pt|em|%) 設(shè)置文字的首行縮進(jìn)距離line-heigh

2、tlength常用單位px|pt|em)定義行高letter-spacinglength(常用單位px|pt|em)定義每個(gè)字母或漢字之間的間距text-decorationunderline | overline | line-through | none顯示下劃線(xiàn) | 顯示上劃線(xiàn) | 顯示刪除線(xiàn) |不顯示任何修飾text-alignleft | center | right | justify設(shè)置文本在水平方向居左|中|右|兩端對(duì)齊text-transformnone默認(rèn)值，對(duì)文本不作任何的改變uppercase將文本中的字母全部轉(zhuǎn)換為大寫(xiě)的字符lowercase將文本中的字母全部轉(zhuǎn)換為小

3、寫(xiě)的字符capitalize將文本中的每個(gè)單詞的首字母大寫(xiě)white-spacenormal默認(rèn)值，空白會(huì)被瀏覽器忽略pre空白會(huì)被瀏覽器保留，效果類(lèi)似標(biāo)簽nowrap文本不會(huì)換行，文本會(huì)在同一行上顯示，直到遇到標(biāo)簽為止pre-wrap保留空白符序列，且正常進(jìn)行換行pre-line合并空白符序列，且保留換行符inherit從父元素繼承white-space屬性值word-spacinglength(常用單位px|pt|em)設(shè)置漢字或單詞之間的空格的寬度文本屬性示例 12.3 字體屬性CSS字體屬性用于設(shè)置字體族、大小、粗細(xì)及風(fēng)格等樣式，常用的字體屬性如常用字體屬性如下表所示：屬 性屬性值描

4、述font除了font之外的其他字體屬性值把所有針對(duì)字體的屬性源目錄在一個(gè)聲明中font-sizexx-small、絕對(duì)字體，默認(rèn)值為mediumsmaller設(shè)置比父元素更小的larger相對(duì)字體尺寸，設(shè)置比父元素更小的尺寸length設(shè)置字體大小為一個(gè)固定的值，常用單位為px、em%設(shè)置字體大小為基于父元素的一個(gè)百分?jǐn)?shù)font-family宋體,黑體設(shè)置字體族，優(yōu)先級(jí)按字體族順序從大到小normal設(shè)置字體常規(guī)格式顯示lighter設(shè)置字體加細(xì)bold設(shè)置字體加粗bolder設(shè)置字體特粗100900數(shù)字 400 等價(jià)于 normal，而 700 等價(jià)于 boldfont-stylenorm

5、al | italic | oblique常規(guī)格式顯示|斜體顯示|傾斜顯示，與italic效果一樣字體屬性示例 12.4 背景屬性CSS的背景屬性主要用于設(shè)置對(duì)象背景顏色或背景圖片以及背景圖片的拉伸方向及其位置等樣式，常用的背景屬性如表下所示：屬 性屬性值描 述background除background之外的任何的背景屬性值將背景屬性設(shè)置在一個(gè)聲明中background-color顏色值設(shè)置元素的背景顏色background-imageurl(image_file_path)|inherit設(shè)置元素的背景圖像background-attachmentscroll|fixed|inherit設(shè)置

6、背景圖像是固定亦或隨著頁(yè)面滾動(dòng)，默認(rèn)是滾動(dòng)background-repeat repeat-x設(shè)置圖像橫向重復(fù)repeat-y設(shè)置圖像縱向重復(fù)repeat默認(rèn)值，設(shè)置圖像橫向及縱向重復(fù)no-repeat設(shè)置圖像不重復(fù)background-position left背景圖像居左放置right背景圖像居右放置center背景圖像居中放置top背景圖像向上對(duì)齊bottom背景圖像向下對(duì)齊背景屬性示例 12.5 列表屬性CSS列表屬性主要用于設(shè)置列表項(xiàng)目類(lèi)型以及列表項(xiàng)的放置位置。常用的列表屬性如表下所示：屬 性屬 性 值描 述list-style其他任意的列表屬性值用于把所有用于列表的屬性設(shè)置于一個(gè)聲

7、明中l(wèi)ist-style-imageimage_url將圖片設(shè)置為列表項(xiàng)前導(dǎo)符list-style-position（決定列表項(xiàng)目放置位置）outside默認(rèn)值，列表項(xiàng)導(dǎo)符放置在文本以外 inside列表項(xiàng)目前導(dǎo)符放置在文本以?xún)?nèi)，占用列表項(xiàng)寬度list-style-type（設(shè)置列表項(xiàng)目類(lèi)型）disc默認(rèn)值，在列表項(xiàng)前添加“”實(shí)心圓點(diǎn)circle在列表項(xiàng)前添加“ ”空心圓點(diǎn)square在列表項(xiàng)前添加“ ”實(shí)心方塊decimal在列表項(xiàng)前添加普通的阿拉伯?dāng)?shù)字lower-roman在列表項(xiàng)前添加小寫(xiě)的羅馬數(shù)字upper-roman在列表項(xiàng)前添加大寫(xiě)的羅馬數(shù)字lower-alpha在列表項(xiàng)前添加小寫(xiě)

8、的英文字母upper-alpha在列表項(xiàng)前添加大寫(xiě)的英文字母none在列表項(xiàng)前不添加任何的項(xiàng)目符號(hào)或編號(hào)列表屬性示例 12.6 表格屬性CSS表格屬性主要用于設(shè)置表格邊框是否會(huì)顯示單一邊框、單元格之間的間距以及表格標(biāo)題位置等樣式。常用的列表屬性如表下所示：屬 性屬 性 值描 述border-collaseseparate默認(rèn)值，表格邊框和單元格邊框會(huì)分開(kāi)collapse表格邊框和單元格邊框會(huì)合并為一個(gè)單一的邊框border-spacinglength length規(guī)定相鄰單元格的邊框之間的距離，單位可取px、cm 等。如果定義一個(gè) length 參數(shù)，則該值同時(shí)定義了相鄰單元格之間的水平和垂直間距。如果定義兩個(gè) length 參數(shù)，那么第一個(gè)參數(shù)設(shè)置相鄰單元格之間的水平間距，而第二個(gè)參數(shù)設(shè)置相鄰單元格的垂直間距caption-si