網(wǎng)頁(yè)設(shè)計(jì)-網(wǎng)頁(yè)設(shè)計(jì)CSS常用屬性課件_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)-網(wǎng)頁(yè)設(shè)計(jì)CSS常用屬性課件_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)-網(wǎng)頁(yè)設(shè)計(jì)CSS常用屬性課件_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)-網(wǎng)頁(yè)設(shè)計(jì)CSS常用屬性課件_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)-網(wǎng)頁(yè)設(shè)計(jì)CSS常用屬性課件_第5頁(yè)
已閱讀5頁(yè),還剩8頁(yè)未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

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顯示下劃線 | 顯示上劃線 | 顯示刪除線 |不顯示任何修飾text-alignleft | center | right | justify設(shè)置文本在水平方向居左|中|右|兩端對(duì)齊text-transformnone默認(rèn)值,對(duì)文本不作任何的改變uppercase將文本中的字母全部轉(zhuǎn)換為大寫的字符lowercase將文本中的字母全部轉(zhuǎn)換為小

3、寫的字符capitalize將文本中的每個(gè)單詞的首字母大寫white-spacenormal默認(rèn)值,空白會(huì)被瀏覽器忽略pre空白會(huì)被瀏覽器保留,效果類似標(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)目類型以及列表項(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)符放置在文本以內(nèi),占用列表項(xiàng)寬度list-style-type(設(shè)置列表項(xiàng)目類型)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)前添加小寫的羅馬數(shù)字upper-roman在列表項(xiàng)前添加大寫的羅馬數(shù)字lower-alpha在列表項(xiàng)前添加小寫

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

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論