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

1、第5章 CSS層疊樣式表,5.1 CSS基本概念 5.2 在DW中創(chuàng)建CSS 5.3 CSS濾鏡,5.1 CSS基本概念,CSS是Cascading Style Sheets（層疊樣式表）的縮寫 CSS是HTML的擴(kuò)展，是網(wǎng)頁(yè)設(shè)計(jì)中不可或缺的核心技術(shù) 利用CSS可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其他效果實(shí)現(xiàn)更精準(zhǔn)的控制 CSS技術(shù)最大的優(yōu)勢(shì)就是實(shí)現(xiàn)了結(jié)構(gòu)與形式的分離，從而更加有利于網(wǎng)站的開發(fā)和維護(hù) CSS布局（CSS層）是很有效的網(wǎng)頁(yè)布局方式,5.1 CSS基本概念,CSS樣式,選擇符（selector）,屬性（properties）,屬性值（value）,選擇符 屬性 : 值 ,選擇

2、符 屬性1 : 值1; 屬性2 : 值2 ,基本格式：,復(fù)合樣式：,5.1.1 樣式和規(guī)則,5.1 CSS基本概念,5.1.1 樣式和規(guī)則,（1）單個(gè)“HTML標(biāo)簽”作為選擇符 例如，body、table、p 等 例1：body color: black 效果：頁(yè)面主體（body）中的文字為黑色 例2：p font-family: 隸書 效果：定義了段落字體為隸書 例3：p text-align: center; color: red ;font-size:50pt 效果：定義了段落居中排列，段落中的文字為紅色，字號(hào)50 注意：需要對(duì)一個(gè)選擇符指定多個(gè)屬性時(shí)，屬性之間使用分號(hào)分隔,5.1 CS

3、S基本概念,5.1.1 樣式和規(guī)則,【案例1】在HTML文檔中加入CSS樣式 步驟： 復(fù)制文件“css_1a.html”，更名為“css_1b.html” 在標(biāo)記之間輸入以下代碼： 說(shuō)明： 1. CSS樣式要放在中 2. stype=“text/css”表示使用CSS語(yǔ)法 3. ,5.1 CSS基本概念,5.1.1 樣式和規(guī)則,（2）選擇符組 把具有相同屬性和值的選擇符組合起來(lái)書寫，用逗號(hào)將選擇符分開，以減少重復(fù)定義 例：h1, h2, h4, h6color:green 效果：組里所有標(biāo)題元素的文字都為綠色 例：p, tablefont-size: 9pt 效果：段落和表格的文字大小為9號(hào)字

4、,5.1 CSS基本概念,5.1.1 樣式和規(guī)則,（3）類選擇符 把相同元素分類定義為不同的樣式（用法一） 定義類選擇符時(shí)，在自定類的名稱前面加一個(gè)點(diǎn)號(hào) 類名為英文單詞或以英文開頭與數(shù)字的組合 例：為段落定義兩個(gè)類，一個(gè)向右對(duì)齊，一個(gè)居中對(duì)齊 1. 先定義類 p.righttext-align:right p.centertext-align:center 2. 應(yīng)用時(shí)，在HTML標(biāo)簽里加入class類參數(shù) 這個(gè)段落向右對(duì)齊的 這個(gè)段落是居中排列的,5.1 CSS基本概念,5.1.1 樣式和規(guī)則,（3）類選擇符 在選擇符中不指明HTML標(biāo)簽名，這樣可以把幾個(gè)不同的元素定義成相同的樣式（用法二）

5、 例：定義一個(gè)right類 ，表示文字靠右對(duì)齊 .righttext-align:right 這樣定義的類，可以應(yīng)用到任何元素，如段落、標(biāo)題等： 這個(gè)段落向右對(duì)齊 這個(gè)標(biāo)題向右對(duì)齊 這個(gè)標(biāo)題向右對(duì)齊,5.1 CSS基本概念,5.1.2 層疊和順序,在Web頁(yè)面中，CSS有下面3種層疊方式： 外部樣式：存儲(chǔ)在一個(gè)單獨(dú)的外部CSS文件中的若干組CSS規(guī)則。使用link標(biāo)簽鏈接到外部樣式表文件（.css文件），如果修改外部樣式表文件，那么所有鏈接到該樣式表文件的網(wǎng)頁(yè)都將隨之變化 內(nèi)部樣式：若干組包括在HTML文檔head部分的style標(biāo)簽中的CSS規(guī)則，為當(dāng)前網(wǎng)頁(yè)設(shè)置樣式信息。內(nèi)部樣式的內(nèi)容在“C

6、SS樣式”面板中的“所有規(guī)則”窗格內(nèi)列出，此樣式僅對(duì)當(dāng)前文檔有效 內(nèi)聯(lián)樣式：通過(guò)HTML標(biāo)簽的style屬性為單個(gè)網(wǎng)頁(yè)元素嵌套樣式信息（內(nèi)聯(lián)樣式不符合“結(jié)構(gòu)與形式分離”的網(wǎng)頁(yè)設(shè)計(jì)原則，故不建議使用） 順序問(wèn)題： 當(dāng)同一個(gè)元素（例如段落P的顏色）出現(xiàn)不同的CSS定義時(shí)，內(nèi)層屏蔽外層（內(nèi)層定義優(yōu)先）,5.1 CSS基本概念,5.1.2 層疊和順序,內(nèi)聯(lián)樣式 在HTML標(biāo)簽內(nèi)使用style屬性定義的，適用于該標(biāo)簽的個(gè)別樣式 例如： 內(nèi)聯(lián)樣式舉例 ,5.1 CSS基本概念,5.1.2 層疊和順序,內(nèi)部樣式 在與之間用style標(biāo)簽加入css樣式定義 適用于所指定的網(wǎng)頁(yè)樣式 例如：前面的【案例1】在HT

7、ML文檔中加入CSS樣式,5.1 CSS基本概念,5.1.2 層疊和順序,外部樣式 方法一：鏈接樣式（Linked styles） 在網(wǎng)頁(yè)文件的head部分用link標(biāo)簽鏈接外部樣式表文件 方法二：導(dǎo)入樣式（Imported styles） 在網(wǎng)頁(yè)文件的head部分import命令引用外部樣式表文件。 ,提示：?jiǎn)螕魧傩悦姘迳系摹皹邮健?，選擇“附加樣式表”，如圖所示,5.2 在DW中創(chuàng)建CSS,5.2.1 建立CSS規(guī)則,建立CSS規(guī)則，可以使用方法： 用“頁(yè)面屬性”（“屬性面板”上的按鈕） 設(shè)置后查看代碼，例如：body,td,th font-size: 12px ，指定了整個(gè)網(wǎng)頁(yè)，表格單元格

8、和表格標(biāo)題的3個(gè)標(biāo)簽的樣式 用“CSS面板” 課堂演示（教材P.148） 用“屬性面板” 先選定對(duì)象，再通過(guò)屬性面板，如設(shè)置文本的字體、顏色、大小、對(duì)齊等，系統(tǒng)將自動(dòng)創(chuàng)建樣式,5.2 在DW中創(chuàng)建CSS,【案例2】 利用CSS為網(wǎng)頁(yè)設(shè)置樣式,設(shè)置前,設(shè)置后,5.2 在DW中創(chuàng)建CSS,【案例2】 利用CSS為網(wǎng)頁(yè)設(shè)置樣式 （樣例文件為：mysite_ch5exam8_10css-0.html） 單擊“頁(yè)面屬性”按鈕，設(shè)置“頁(yè)面字體”為幼圓，“大小”12pt，“文本顏色” 為#006600，自動(dòng)添加如下代碼及樣式（如圖）： ,5.2 在DW中創(chuàng)建CSS,【案例2】 利用CSS為網(wǎng)頁(yè)設(shè)置樣式 （樣

9、例文件為：mysite_ch5exam8_10css-0.html） 展開“CSS樣式”面板，單擊“新建CSS規(guī)則”按鈕，設(shè)置標(biāo)簽td的行高為135%，如圖所示。 代碼如下： td line-height: 135%; ,可以單擊“CSS樣式”面板上的某條規(guī)則，查看其“屬性” 或者單擊“編輯屬性”按鈕，修改屬性,5.2 在DW中創(chuàng)建CSS,【案例2】 利用CSS為網(wǎng)頁(yè)設(shè)置樣式 （樣例文件為：mysite_ch5exam8_10css-0.html） 展開“CSS樣式”面板，單擊“新建CSS規(guī)則”按鈕，創(chuàng)建類“.title_1”，如圖所示。 將樣式應(yīng)用與網(wǎng)頁(yè)中的兩個(gè)標(biāo)題,前面建立的是“標(biāo)簽選擇器

10、”，這里是“類選擇器”,5.2 在DW中創(chuàng)建CSS,【案例2】 利用CSS為網(wǎng)頁(yè)設(shè)置樣式 （樣例文件為：mysite_ch5exam8_10css-0.html） 使用“屬性”面板，設(shè)置當(dāng)前選定對(duì)象的CSS樣式屬性 例如：選擇最后一行文字，設(shè)置為藍(lán)色，加粗，如下圖,這里自動(dòng)設(shè)置為“類選擇器”,全部設(shè)置完成后,5.2 在DW中創(chuàng)建CSS,5.2.2 套用CSS,在網(wǎng)頁(yè)中套用已經(jīng)建立的CSS樣式，可以采用以下方法： 用“屬性面板” 方法：選定要套用對(duì)象，在屬性面板的“樣式”下拉列表中選取樣式 用“CSS面板” 方法：選定要套用對(duì)象，右擊 “CSS面板”中的樣式，在菜單中選擇“套用”,5.3 CSS

11、濾鏡,能使網(wǎng)頁(yè)中的文字或者圖片產(chǎn)生豐富多彩的藝術(shù)效果 CSS具有14個(gè)濾鏡（filter）屬性 （參考教材P.158） 例如： Alpha 濾鏡 Opacity-透明度，范圍從0 到 100（從透明到不透明） Finishopacity-設(shè)置漸變透明，用來(lái)指定結(jié)束時(shí)的透明度，范圍也是從0 到 100 Style-指定透明區(qū)域的形狀特征。其中0代表統(tǒng)一形狀、1代表線形、2代表放射狀、3代表長(zhǎng)方形 startx和starty-代表漸變透明效果開始的X和Y坐標(biāo) finishx和finishy-代表漸變透明效果結(jié)束的X和Y的坐標(biāo),5.3 CSS濾鏡,【案例3】 利用CSS濾鏡設(shè)置文字和圖片的顯示效果

12、（樣例文件1：mysite_ch5filter_1.html） （樣例文件2：mysite_ch5filter_2.html） （樣例文件3：mysite_ch5filter_3.html） style=“FILTER: alpha(opacity=50)” （圖片為半透明） style=“FILTER: alpha(opacity=0, finishopacity=100, style=2, startx=0, starty=0, finishx=180, finishy=270” （圖片為線性漸變） 文字濾鏡參見“filter_3.html”,本章作業(yè),教材P.16115 先創(chuàng)建一個(gè)網(wǎng)頁(yè)，創(chuàng)建完成后保存文檔。然