《層疊樣式表》PPT課件.ppt

第6章 層疊樣式表,丁躍潮 張濤 葉文來 劉韻華 程旭曼 丁瀟 張?zhí)鞓?概述,教學(xué)提示：XML為存儲(chǔ)結(jié)構(gòu)化數(shù)據(jù)提供了強(qiáng)大的方法，但是它沒有提供關(guān)于數(shù)據(jù)如何顯示的信息，這實(shí)際上是XML的優(yōu)點(diǎn)：數(shù)據(jù)的結(jié)構(gòu)完全與數(shù)據(jù)表示無關(guān)。當(dāng)有必要表示格式化XML文件中的數(shù)據(jù)時(shí)，格式化的詳細(xì)信息放置在層疊樣式表CSS中。 教學(xué)目標(biāo)：理解層疊樣式表CSS的概念，掌握層疊樣式表CSS的方法，掌握CSS與XML結(jié)合的方法，學(xué)會(huì)綜合運(yùn)用CSS。,6.1 CSS簡(jiǎn)介 6.2 設(shè)置字體屬性 6.3 設(shè)置色彩和背景圖象屬性 6.4 設(shè)置邊界屬性 6.5 CSS2新增功能 6.6 綜合實(shí)例,6.1 CSS簡(jiǎn)介,CSS 是用于為XML數(shù)據(jù)定義顯示參數(shù)的一種技術(shù)，它利用簡(jiǎn)單的規(guī)則來控制元素內(nèi)容在瀏覽器中的表現(xiàn)方式。CSS最初是被開發(fā)來為HTML文檔指定顯示的，同時(shí)也適合于XML數(shù)據(jù)。樣式表中的顯示規(guī)范與XML數(shù)據(jù)分離，這意味著相同的數(shù)據(jù)通過應(yīng)用不同的樣式表可以以不同的方式顯示。同樣，相同的樣式表可以應(yīng)用到多個(gè)XML文件。,6.1.1 CSS的概念,CSS（Cascading Style Sheet）層疊樣式表，也稱為級(jí)聯(lián)樣式表，是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計(jì)的。在網(wǎng)頁制作時(shí)采用CSS技術(shù)，可以有效地對(duì)頁面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。只要對(duì)相應(yīng)的代碼做一些簡(jiǎn)單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。,6.1.2 CSS的使用,1. CSS基本語法 2. 一個(gè)無CSS樣式表XML文件 3. 一個(gè)使用CSS樣式表XML文件,1. CSS基本語法,CSS的規(guī)則是通過屬性與屬性值來共同設(shè)定。屬性名稱是CSS的關(guān)鍵字，如font-family(字體)、font-size(文字大小)、display(顯示屬性)、color(顏色)等。屬性用語指定元素某一方面的特性，而屬性值則用于指定元素的特性的具體特征。 樣式表的建立要符合CSS規(guī)則，它們一般被定義成以下形式的句法： 標(biāo)志標(biāo)志屬性1:屬性值1;標(biāo)志屬性2:屬性值2;標(biāo)志屬性3:屬性值3;.,2. 一個(gè)無CSS樣式表XML文件,【例6.1】這是一個(gè)沒有應(yīng)用層疊樣式表的XML文檔，code6_1.xml 望廬山瀑布 唐.李白 日照香爐升紫煙 遙看瀑布掛前川 飛流直下三千尺 疑是銀河落九天 ,2. 一個(gè)無CSS樣式表XML文件,3. 一個(gè)使用CSS樣式表XML文件,在XML文檔的開頭部分寫一個(gè)關(guān)于樣式單的如下聲明語句： 也可以使用完整的URL指定CSS樣式表文件，像下面這個(gè)例子： ,一個(gè)使用CSS樣式表XML文件,charset “gb2312“; namedisplay:block; font-family: 黑體; font-size: 20pt; letter-spacing:10pt; text-align:center; writerdisplay:block; font-family: 魏碑; font-size:10pt; font-weight:bold; letter-spacing:10pt; line-height:40pt; text-align:center; color: Black; ,contentdisplay:block; font-family: 隸書; font-size: 20pt; font-weight:bold; line-height: 30pt; letter-spacing:10pt; text-align:center; color: Black; ,一個(gè)使用CSS樣式表XML文件,6.2.1 font屬性集,。,1. font屬性的分類 font屬性通常用于設(shè)置指定字體的風(fēng)格、大小、亮度等參數(shù)。該屬性在XML樣式表分類中屬于通用字體類，由CSS樣式表定義。font屬性的常見子屬性見表6.1,表6.1 font屬性的常見子屬性,2. font屬性的用法,和常見的CSS屬性設(shè)置類似，font屬性使用示例如下： elementfont-style:italic;font-size: “20pt“; font-family: “楷體_gb2312“;,3. 字體字型font-family屬性,font-family屬性用于指定字體名稱，屬性值使用逗號(hào)分隔的字體名稱。如果字體名稱中出現(xiàn)空格，必須使用雙引號(hào)將字體括起來，如“Times New Roma”。 font-family屬性可用的值取決于用戶系統(tǒng)中已經(jīng)安裝了的字體，在Windows系統(tǒng)的安裝目錄下單位的“fonts”文件夾中保存了系統(tǒng)安裝的所有字體。 font-family屬性的參數(shù)值可以有幾個(gè)，在指定font-family屬性的時(shí)候，可以同時(shí)指定幾個(gè)字符集。這樣，在瀏覽器找不到第1個(gè)字符集的時(shí)候可以按順序使用第2個(gè)字符集顯示字體。,4. 字體風(fēng)格font-style屬性,5. 字體亮度font-weight屬性,font-weight屬性設(shè)置字體的粗體程度，用于決定文本以多黑(粗)或多淺(細(xì))顯示文本。,5. 字體亮度font-weight屬性,6. 設(shè)置為大寫字母font-variant屬性,7. 設(shè)置字體大小font-size屬性,8. 文本屬性,9. 在CSS樣式表中顯示中文,在XML文檔中使用中文元素名稱時(shí)，我們需要在文檔序文部分添加encoding=“gb2312”的XML指令聲明。但是在CSS中，要對(duì)目標(biāo)元素進(jìn)行格式指定，則要求目標(biāo)元素只能是由XML的標(biāo)準(zhǔn)命名字符命名（例如大小英文字母、數(shù)字、下劃線等），而絕對(duì)不能使用中文元素名稱。 由于CSS1在支持非字母文字方面表現(xiàn)很不盡如人意，所以在CSS2中針對(duì)這個(gè)問題進(jìn)行了改善。CSS2標(biāo)準(zhǔn)中對(duì)于多語言功能的支持是通過關(guān)鍵字“charset”再加上需要使用的語言字符集名稱實(shí)現(xiàn)的，例如要使用的是中文國(guó)標(biāo)字符集，就要在CSS文件的第1行加入語句： charset“gb2312“,6.3 設(shè)置色彩和背景圖象屬性,在互聯(lián)網(wǎng)中，沒有色彩的頁面即便做得再精致也缺乏吸引力。CSS樣式表中對(duì)于色彩和圖像的設(shè)定功能也是比較完善和強(qiáng)大的，接下來就讓我們學(xué)習(xí)在樣式表中添加色彩屬性的定義。,6.3.1 定義前景色,1.color屬性,2.color屬性的用法,現(xiàn)在，定義code6_4.css文件。 charset“gb2312“; namedisplay:“block“; font-size:“22pt“; color:blue; writerdisplay:“block“; color:red; contentAdisplay:“block“; color:“#FOF“; contentBdisplay:“block“; color:rgb(100%,50%,50%); contentCdisplay:“block“; color:rgb(000,000,256); contentDdisplay:“block“; color:rgb(000,256,256);,2.color屬性的用法,6.3.2 定義背景色,1.background屬性集,2.設(shè)置背景顏色,（1）#RGB （2）#RRGGBB （3）rgb（RRR，GGG，BBB） （4）rgb（R%，G%，B%） （5）顏色名稱,3.設(shè)置背景圖案,（1）background-image：定義背景圖形。取值為none、url，當(dāng)取值為none時(shí)表示不用圖形作背景，url表示提供圖形文件的URL地址。 （2）直接的圖像文件名稱（如image001.gif），這里是指和CSS樣式表文件在同一目錄下的文件。,4.設(shè)置背景圖案重復(fù)方式,（1）repeat：使用背景圖案完全填充元素大小的空間。 （2）repeat-x：使用背景圖案在水平方向從左到右填充元素大小的空間。 （3）repeat-y：使用背景圖案在豎直方向從上到下填充元素大小的空間。 （4）no-repeat：不使用背景圖案重復(fù)填充元素。,5.設(shè)置背景圖案滾動(dòng)方式,（1）scroll：表示在文字頁面滾動(dòng)時(shí)，背景一起滾動(dòng)。 （2）Fixed：表示在文字頁面滾動(dòng)時(shí)，背景固定不滾動(dòng)。,6.設(shè)置背景圖案起始位置,（1）top：表示背景圖案位于指定元素的頂部。 （2）center：表示背景圖案位于指定元素的中部。 （3）bottom：表示背景圖案位于指定元素的底部。 （4）left：表示背景圖案位于指定元素的左部。 （5）right：表示背景圖案位于指定元素的右部。,6.4 設(shè)置邊界屬性,設(shè)置元素在文件中的位置。 在元素周圍添加邊框，并設(shè)置邊框的樣式，大小。 控制相鄰元素的位置。,6.4.1 設(shè)置邊框?qū)傩?6.4.2 設(shè)置填充屬性,給元素與頂，底，左，右邊框添加填充 padding-top padding-bottom padding-left padding-right,6.4.3 設(shè)置大小屬性,在CSS中設(shè)置邊框大小的屬性為width、height。取值為auto、指定大小或父元素寬度的百分比。當(dāng)width、h