




版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
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è)置文本的顏色、行高、對齊方式、字符間距、段首縮進(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)定義每個字母或漢字之間的間距text-decorationunderline | overline | line-through | none顯示下劃線 | 顯示上劃線 | 顯示刪除線 |不顯示任何修飾text-alignleft | center | right | justify設(shè)置文本在水平方向居左|中|右|兩端對齊text-transformnone默認(rèn)值,對文本不作任何的改變uppercase將文本中的字母全部轉(zhuǎn)換為大寫的字符lowercase將文本中的字母全部轉(zhuǎn)換為小
3、寫的字符capitalize將文本中的每個單詞的首字母大寫white-spacenormal默認(rèn)值,空白會被瀏覽器忽略pre空白會被瀏覽器保留,效果類似標(biāo)簽nowrap文本不會換行,文本會在同一行上顯示,直到遇到標(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之外的其他字體屬性值把所有針對字體的屬性源目錄在一個聲明中font-sizexx-small、絕對字體,默認(rèn)值為mediumsmaller設(shè)置比父元素更小的larger相對字體尺寸,設(shè)置比父元素更小的尺寸length設(shè)置字體大小為一個固定的值,常用單位為px、em%設(shè)置字體大小為基于父元素的一個百分?jǐn)?shù)font-family宋體,黑體設(shè)置字體族,優(yōu)先級按字體族順序從大到小normal設(shè)置字體常規(guī)格式顯示lighter設(shè)置字體加細(xì)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、背景圖像是固定亦或隨著頁面滾動,默認(rèn)是滾動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背景圖像向上對齊bottom背景圖像向下對齊背景屬性示例 12.5 列表屬性CSS列表屬性主要用于設(shè)置列表項目類型以及列表項的放置位置。常用的列表屬性如表下所示:屬 性屬 性 值描 述list-style其他任意的列表屬性值用于把所有用于列表的屬性設(shè)置于一個聲
7、明中l(wèi)ist-style-imageimage_url將圖片設(shè)置為列表項前導(dǎo)符list-style-position(決定列表項目放置位置)outside默認(rèn)值,列表項導(dǎo)符放置在文本以外 inside列表項目前導(dǎo)符放置在文本以內(nèi),占用列表項寬度list-style-type(設(shè)置列表項目類型)disc默認(rèn)值,在列表項前添加“”實心圓點circle在列表項前添加“ ”空心圓點square在列表項前添加“ ”實心方塊decimal在列表項前添加普通的阿拉伯?dāng)?shù)字lower-roman在列表項前添加小寫的羅馬數(shù)字upper-roman在列表項前添加大寫的羅馬數(shù)字lower-alpha在列表項前添加小寫
8、的英文字母upper-alpha在列表項前添加大寫的英文字母none在列表項前不添加任何的項目符號或編號列表屬性示例 12.6 表格屬性CSS表格屬性主要用于設(shè)置表格邊框是否會顯示單一邊框、單元格之間的間距以及表格標(biāo)題位置等樣式。常用的列表屬性如表下所示:屬 性屬 性 值描 述border-collaseseparate默認(rèn)值,表格邊框和單元格邊框會分開collapse表格邊框和單元格邊框會合并為一個單一的邊框border-spacinglength length規(guī)定相鄰單元格的邊框之間的距離,單位可取px、cm 等。如果定義一個 length 參數(shù),則該值同時定義了相鄰單元格之間的水平和垂直間距。如果定義兩個 length 參數(shù),那么第一個參數(shù)設(shè)置相鄰單元格之間的水平間距,而第二個參數(shù)設(shè)置相鄰單元格的垂直間距caption-si
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 河南省鄭州市外國語學(xué)校2025屆化學(xué)高一下期末調(diào)研試題含解析
- 草頂蚊帳結(jié)構(gòu)穩(wěn)定性研究-洞察闡釋
- 藥膏市場趨勢分析-洞察闡釋
- 科技驅(qū)動的精準(zhǔn)營銷與食品安全協(xié)同機制-洞察闡釋
- 酰胺鍵生物轉(zhuǎn)化動力學(xué)-洞察闡釋
- 新疆昌吉州教育共同體2025屆高二化學(xué)第二學(xué)期期末學(xué)業(yè)質(zhì)量監(jiān)測試題含解析
- 語用學(xué)視角下的語言進(jìn)化研究-洞察闡釋
- 社會經(jīng)濟背景家庭對兒童語言發(fā)展的研究
- 2025屆新余市重點中學(xué)化學(xué)高一下期末調(diào)研模擬試題含解析
- 人工智能技術(shù)在數(shù)字媒體內(nèi)容分發(fā)中的創(chuàng)新實踐案例研究
- Q∕SY 1836-2015 鍋爐 加熱爐燃油(氣)燃燒器及安全聯(lián)鎖保護(hù)裝置檢測規(guī)范
- 北京輸變電工程標(biāo)準(zhǔn)工藝應(yīng)用圖冊(圖文并茂)
- 儀器使用記錄表
- 三相負(fù)荷(380V)及單相(220V)最大供電距離計算表及電壓降計算表
- 《汽車電工電子技術(shù)》全套教案(完整版)
- 國家職業(yè)技能標(biāo)準(zhǔn) (2021年版) 嬰幼兒發(fā)展引導(dǎo)員
- 計算機網(wǎng)絡(luò)專業(yè)畢業(yè)論文:網(wǎng)上鮮花銷售系統(tǒng)的設(shè)計與實現(xiàn)
- 伯杰氏細(xì)菌系統(tǒng)分類學(xué)手冊
- 班組計件承包協(xié)議書
- 小學(xué)閱讀材料:五年級下冊閱讀題及答案--寫景類(7篇)
- 珠海市工傷保險待遇申請表(20110630)
評論
0/150
提交評論