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

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

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

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

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

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

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

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

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