第08章 CSS樣式表.ppt

1、第8章 CSS樣式表,1,第8章 CSS樣式表,第8章 CSS樣式表,2,在短短的幾年內(nèi)，HTML的功能有了長足地進步，但是，顯示內(nèi)容和樣式的混合一直是HTML語言的一大缺陷。為了能夠讓網(wǎng)頁更好地在各種平臺上兼容，W3C標準化組織推出了CSS規(guī)范，將樣式描述內(nèi)容徹底地獨立于文檔結(jié)構(gòu)。CSS彌補了HTML語言在定義網(wǎng)頁顯示方面的不足，為用戶提供了方便的控制頁面外觀的方法。本章將對CSS的基本概念、如何創(chuàng)建CSS樣式、CSS樣式的應(yīng)用方式以及設(shè)置CSS的擴展屬性進行詳細介紹。,第8章 CSS樣式表,3,8.1.1 CSS的基本概念,CSS是一系列格式設(shè)置規(guī)則，它們控制Web頁面內(nèi)容的顯示方式。使用

2、CSS設(shè)置頁面格式時，可將內(nèi)容與表現(xiàn)形式分開。用于定義代碼表現(xiàn)形式的CSS規(guī)則通常保存在另一個文件(外部樣式表)或HTML文檔的文件頭部分。CSS的定義代碼由一系列的格式定義組成，它可以應(yīng)用到使用標準HTML標記格式的文本上，也可以應(yīng)用到通過Class(類)屬性所設(shè)定范圍的文本上，還可以應(yīng)用到其他符合CSS標準規(guī)范的文本上。,第8章 CSS樣式表,4,8.1.2 CSS樣式表特點, 可以將網(wǎng)頁的顯示控制與顯示內(nèi)容分離。 能更有效地控制頁面的布局。 可以制作出體積更小、下載更快的網(wǎng)頁。 可以更快、更方便地維護及更新大量的網(wǎng)頁。,第8章 CSS樣式表,5,8.1.3 CSS樣式的類型, 自定義CS

3、S(類樣式) 重定義標簽的CSS CSS選擇器樣式(高級樣式),第8章 CSS樣式表,6,8.1.3 CSS樣式的類型, 自定義CSS(類樣式) 自定義樣式最大的特點就是具有可選擇性，可以由用戶自由決定將該樣式應(yīng)用于哪些元素。就文本操作而言，用戶可以選擇一個字、一行、一段乃至整個頁面中的文本添加自定義的樣式。選擇樣式應(yīng)用范圍實質(zhì)是在要使用樣式的一對標簽之間(如選擇范圍中沒有標簽，則Dreamweaver會自動添加一個名為“span”的標簽)添加一個class=”classname”語句(classname是引用的樣式名稱)。,第8章 CSS樣式表,7,8.1.3 CSS樣式的類型, 重定義標簽

4、的CSS 它實際上重新定義了現(xiàn)有HTML標簽的默認屬性，具有“全局性”。一旦對某個標簽重定義樣式，頁面中所有該標簽都會按CSS的定義顯示。注意：只有成對出現(xiàn)的HTML標簽(如)才能進行重定義，單個標簽(如)不能進行重定義。,第8章 CSS樣式表,8,8.1.3 CSS樣式的類型, CSS選擇器樣式(高級樣式) 可以用來控制標簽屬性，通常用來設(shè)置鏈接文字的樣式。對鏈接文字的控制，有以下4種類型： “a:link”(鏈接的初始狀態(tài))：用于定義鏈接的常規(guī)狀態(tài)。 “a:hover”(鼠標指向的狀態(tài))：如果定義了這種狀態(tài)，當鼠標指針移到鏈接上時，即按該定義顯示，用于增強鏈接的視覺效果。 “a:visit

5、ed”(訪問過的鏈接)：對已經(jīng)訪問過的鏈接，按此定義顯示。為了能正確區(qū)分已經(jīng)訪問過的鏈接?！癮:visited”的顯示方式要不同于普通文本及鏈接的其它狀態(tài)。圖8.1 CSS樣式面板 “a:active”(在鏈接上按下鼠標時的狀態(tài))：用于表現(xiàn)鼠標按下時的鏈接狀態(tài)。實際中應(yīng)用較少。如果沒有特別的需要，可以定義成與“a:link”狀態(tài)或者“a:hover”狀態(tài)相同。,第8章 CSS樣式表,9,8.1.4 CSS樣式面板,使用主菜單【窗口】|【CSS樣式】或單擊屬性面板中的“CSS”按鈕可以打開CSS面板，,第8章 CSS樣式表,10,8.1.5 創(chuàng)建CSS樣式的步驟, 將插入點放在文檔中，然后在“C

6、SS樣式”面板中，單擊面板右下側(cè)的“新建CSS規(guī)則”按鈕或選擇主菜單【文本】|【CSS樣式】|【新建CSS規(guī)則】，打開“新建CSS規(guī)則”對話框 在“新建CSS規(guī)則”對話框中，根據(jù)要創(chuàng)建的CSS樣式類型，選擇“類”、“標簽”或“高級”。 為樣式命名。 選擇定義樣式的保存位置。 單擊【確定】按鈕，出現(xiàn)“CSS規(guī)則定義”對話框。 在“CSS規(guī)則定義”對話框中，完成樣式有關(guān)屬性的設(shè)置(詳見8.4設(shè)置CSS樣式)。,第8章 CSS樣式表,11,8.2 創(chuàng)建CSS樣式,自定義樣式的創(chuàng)建 重定義HTML標記 高級樣式,第8章 CSS樣式表,12,8.2.1 自定義樣式的創(chuàng)建,如果一個或多個網(wǎng)頁中的某一部分需

7、要使用特殊的樣式，就可以定義一個自定義樣式，并把該自定義樣式應(yīng)用到相應(yīng)部分。自定義樣式是唯一可以應(yīng)用于文檔中任意元素的CSS樣式類型。當創(chuàng)建了自定義樣式以后，與當前文檔關(guān)聯(lián)的所有自定義樣式都顯示在“CSS樣式”面板中和屬性面板的“樣式”下拉列表中。用戶可以先選擇要添加樣式的元素，然后在“CSS樣式”面板或?qū)傩悦姘宓摹皹邮健毕吕斜碇羞x擇要添加的自定義樣式。,第8章 CSS樣式表,13,8.2.1 自定義樣式的創(chuàng)建,【例8.1】現(xiàn)有一網(wǎng)頁文件如圖所示，要求用自定義樣式方法將其中宋詞的標題設(shè)置為黑體，大小為18點居中顯示；宋詞的內(nèi)容設(shè)置為宋體，大小為12點，首行空2字符，居左顯示。,第8章 CSS

8、樣式表,14,8.2.2 重定義HTML標記,在實際的網(wǎng)頁設(shè)計中，有時要對網(wǎng)頁中的某些特定元素更改樣式。如對表格中的內(nèi)容進行樣式的更改，這時可以通過重新定義HTML的td標記來實現(xiàn)。定義后的樣式會直接應(yīng)用到文檔中對應(yīng)的標記上。,第8章 CSS樣式表,15,8.2.2 重定義HTML標記,【例8.2】將左圖中課程表的內(nèi)容用樣式方法設(shè)置為宋體、大小為9點，行高為20點，顏色為藍色，達到右圖的顯示效果。,第8章 CSS樣式表,16,8.2.3 高級樣式,絕大多數(shù)站點的CSS中定義了鏈接的各種狀態(tài)。定義鏈接的各種狀態(tài)，實際上就是定義錨標記的各種屬性。CSS樣式類型中的“高級”可完成這一功能。類似于重定

9、義標簽方法，定義過的鏈接狀態(tài)也會直接應(yīng)用到文檔中。,第8章 CSS樣式表,17,8.2.3 高級樣式,【例8.3】左圖顯示的是默認的鏈接樣式，文字格式采用藍色，下劃線，文字也很大。這種默認的鏈接樣式有一些弊端(如下劃線是為了容易分辨鏈接，但是如果鏈接很多，下劃線反而不利于閱讀)。要求通過定義高級樣式來改變其顯示格式。,第8章 CSS樣式表,18,8.3 CSS樣式的兩種應(yīng)用方式,在創(chuàng)建CSS時，可以根據(jù)設(shè)計需要，選擇不同的保存方式：如果希望用同一個樣式控制多個文檔的格式，使用“外部CSS樣式表”是最有效的方法；如果只有一個頁面需要應(yīng)用CSS樣式，則使用相對簡單的“僅對該文檔的CSS”。,第8章

10、 CSS樣式表,19,8.3.1 “僅對該文檔”樣式的創(chuàng)建和應(yīng)用,定義了“僅對該文檔”樣式的HTML文檔頭部分代碼如下： 我的文檔 在定義了“僅對該文檔”的CSS樣式后，即可在文檔中直接引用。,第8章 CSS樣式表,20,8.3.2 “外部樣式表”樣式的創(chuàng)建和應(yīng)用,外部樣式表樣式將CSS寫在一個文件中，在HTML文檔頭中通過引用所定義的樣式文件來進行格式控制。 如當前文件目錄下建有CSS文件mystyle.css，在一個HTML文檔中引用它時，系統(tǒng)會自動在該文檔的和標記之間添加以下語句： 應(yīng)用外部CSS文件的優(yōu)點是可以在站點中的任何一個HTML文檔中進行引用，從而使整個站點在風(fēng)格上保持一致，避

11、免重復(fù)的CSS屬性設(shè)置。另外，當需要改版或做某些重大調(diào)整時，直接修改該CSS文件中的相關(guān)樣式，即可更改網(wǎng)頁中應(yīng)用該樣式的對象格式。,第8章 CSS樣式表,21,8.3.3 使用已有的“外部樣式表”文件,當已經(jīng)建立有“外部樣式表”時，就可以將其鏈接到當前文檔使用。 將外部樣式表鏈接到當前文檔后，其所定義的樣式就可以和文檔內(nèi)部定義的樣式一樣使用了。 如果想把當前文檔內(nèi)部建立的CSS樣式表導(dǎo)出為一個外部CSS樣式表文件，可以使用主菜單【文件】|【導(dǎo)出】|【CSS樣式】命令來完成。,第8章 CSS樣式表,22,8.4 設(shè)置CSS樣式,在Dreamweaver中，可以對CSS樣式格式進行精確定制。當新建

12、或編輯CSS樣式時，都會打開“CSS規(guī)則定義”對話框，通過該對話框完成樣式的有關(guān)設(shè)置。設(shè)置內(nèi)容包括類型、背景、區(qū)塊、方框、邊框、列表、定位和擴展8大類別。,第8章 CSS樣式表,23,8.4.1 類型,【字體】下拉列表：為樣式設(shè)置字體。 【大小】組合框：定義文本大小?？稍O(shè)置相對大小或者絕對大小，設(shè)置絕對大小時還可以在其右邊的下拉列表中選擇單位。常使用“點數(shù)(pt)”為單位，一般把正文字體大小設(shè)置為9pt或10.5pt。 【樣式】下拉列表：設(shè)置字體的特殊格式，包括“正?！薄ⅰ靶斌w”和“偏斜體”三個選項。 【行高】下拉列表：設(shè)置文本所在行的高度。選擇“正?！表?，則由系統(tǒng)自動計算行高和字體大小，也可

13、以直接在其中輸入具體的行高數(shù)值，然后在右邊的下拉列表中選擇單位。注意行高的單位應(yīng)該和文字的單位一致，行高的值應(yīng)等于或略大于文字大小。,第8章 CSS樣式表,24,8.4.1 類型,【修飾】選項區(qū)域：向文本中添加下劃線、上劃線或刪除線，或使文本閃爍。常規(guī)文本的默認設(shè)置是“無”。鏈接的默認設(shè)置是“下劃線”。 【粗細】下拉列表：設(shè)置文字的筆畫粗細。選擇粗細數(shù)值，可以指定字體的絕對粗細程度，選擇“粗體”、“特粗”和“細體”則可以指定字體相對的粗細程度。 【變體】下拉列表：設(shè)置文本的小型大寫字母變體。即將小寫字母改為大寫，但顯示尺寸仍按小寫字母的尺寸顯示。該設(shè)置只有在瀏覽器中才能看到效果。 【大小寫】下

14、拉列表：將英文單詞的首字母大寫或全部大寫或全部小寫。 【顏色】：設(shè)置文本顏色。,第8章 CSS樣式表,25,8.4.2 背景,在不使用CSS樣式的情況下，利用頁面屬性只能夠使用單一顏色或用圖像水平垂直平鋪來設(shè)置背景。使用“CSS規(guī)則定義”對話框的“背景”類別能夠更加靈活的設(shè)置背景?？梢詫撁嬷械娜魏卧貞?yīng)用背景屬性，例如，可以創(chuàng)建一個樣式，將背景顏色或背景圖像添加到文本塊、表格等頁面元素中。,第8章 CSS樣式表,26,8.4.2 背景,【背景顏色】項：設(shè)置元素的背景顏色。 【背景圖像】項：設(shè)置元素的背景圖像。 【重復(fù)】下拉列表：設(shè)置當使用圖像作為背景時是否需要重復(fù)顯示，一般用于圖像尺寸小于頁

15、面元素面積的情況，包括以下4個選項。 “不重復(fù)”：表示只在元素開始處顯示一次圖像。 “重復(fù)”：表示在應(yīng)用樣式的元素背景的水平方向和垂直方向上重復(fù)顯示該圖像。 “橫向重復(fù)”：表示在應(yīng)用樣式的元素背景的水平方向上重復(fù)顯示該圖像。 “縱向重復(fù)”：表示在應(yīng)用樣式的元素背景的垂直方向上重復(fù)顯示該圖像。 【附件】下拉列表：有兩個選項：“固定”和“滾動”。分別決定背景圖像是固定在原始位置還是可以隨內(nèi)容一起滾動。 【水平位置】和【垂直位置】：指定背景圖像相對于元素的對齊方式。如果附件屬性為“固定”，則位置相對于文檔窗口而不是元素?？梢杂糜趯⒈尘皥D像與頁面中心水平和垂直對齊。,第8章 CSS樣式表,27,8.4

16、.3 區(qū)塊,使用“區(qū)塊”類別可以定義段落文本中文字的字距、對齊方式等格式， 【單詞間距】組合框：設(shè)置英文單詞之間的距離。 【字母間距】組合框：增加或減小文字之間的距離。若要減小字符間距，可以指定一個負值(例如-4)。 【垂直對齊】下拉列表：設(shè)置應(yīng)用元素的垂直對齊方式。 【文本對齊】下拉列表：設(shè)置應(yīng)用元素的水平對齊方式。包括“居左”、“居右”、“居中”和“兩端對齊”四個選項。 【文字縮進】文本框：指定每段中的第一行文本縮進的距離?？梢允褂秘撝祫?chuàng)建文本凸出，但顯示方式取決于瀏覽器。 【空格】下拉列表：確定如何處理元素中的空格。包括以下3個選項： “正常”：按正常的方法處理其中的空格，即將多個空格處

17、理為一個。 “保留”：將所有的空格都作為文本用標記進行標識，保留應(yīng)用樣式元素原始狀態(tài)。 “不換行”：文本只有在遇到標記時才換行。 【顯示】下拉列表：設(shè)置是否以及如何顯示元素。如果選擇“無”則會關(guān)閉應(yīng)用此屬性的元素的顯示。,第8章 CSS樣式表,28,8.4.4 方框,在圖像的屬性面板上，可以設(shè)置圖像的大小、圖像水平和垂直方向上的空白區(qū)域等。方框樣式完善并豐富了這些屬性設(shè)置，它定義特定元素的大小及其與周圍元素間距等屬性。,第8章 CSS樣式表,29,8.4.4 方框,【寬】和【高】文本框：設(shè)置元素的圖8.22 CSS規(guī)則定義對話框之方框定義寬度和高度，只有在樣式應(yīng)用于圖像或?qū)訒r，才起作用。 【浮

18、動】下拉列表：設(shè)置文本、層、表格等元素在哪個邊圍繞元素浮動。元素按設(shè)置的方式環(huán)繞在浮動元素的周圍。 【清除】下拉列表：設(shè)置元素的哪一邊不允許有層。如果層出現(xiàn)在被清除的那一邊，則元素將移動到層的下面。 【填充】選項區(qū)域：指定元素內(nèi)容與元素邊框之間的間距(如果沒有邊框，則為邊距)。“全部相同”為應(yīng)用此屬性元素的“上”、“右”、“下”和“左”側(cè)設(shè)置相同的填充屬性。取消選擇“全部相同”選項可分別設(shè)置元素各個邊的填充。 【邊界】選項區(qū)域：指定一個元素的邊框與其它元素之間的間距(如果沒有邊框，則為填充)。只有當樣式應(yīng)用于文本塊一類的元素(段落、標題、列表等)時，才起作用。“全部相同”為應(yīng)用此屬性元素的“上

19、”、“右”、“下”和“左”側(cè)設(shè)置相同的邊距屬性。取消選擇“全部相同”選項可分別設(shè)置元素各個邊的邊距。,第8章 CSS樣式表,30,8.4.5 邊框,使用“邊框”類別可以定義元素周圍的邊框的寬度、顏色和樣式等設(shè)置，如圖8.23所示。 【樣式】選項：設(shè)置邊框的外觀樣式。邊框樣式包括無、點劃線、虛線、實線、雙線、槽狀、脊狀、凹陷和凸出等。所定義的樣式只有在瀏覽器中才呈現(xiàn)出效果，且實際顯示方式還與瀏覽器有關(guān)。 【寬度】選項：設(shè)置元素邊框的粗細。包括細、中、粗，也可設(shè)定具體數(shù)值。 【顏色】選項：設(shè)置邊框的顏色。,第8章 CSS樣式表,31,8.4.6 列表,“列表”類別為列表標記定義項目符號、大小和類型

20、等列表設(shè)置。 【類型】下拉列表：設(shè)置項目符號或編號的外觀。 【項目符號圖像】組合框：用于為項目符號指定自定義圖像?？梢暂斎雸D像的路徑，或單擊“瀏覽”按鈕選擇圖像。 【位置】下拉列表：設(shè)置列表項換行時是縮進還是邊緣對齊。選擇“內(nèi)”設(shè)置列表換行時為縮進，選擇“外”設(shè)置列表換行時為邊緣對齊。,第8章 CSS樣式表,32,8.4.7 定位,“定位”類別(如圖8.25所示)用于設(shè)置層(層的相關(guān)概念參見第9章)的相關(guān)屬性。使用定位樣式可以自動新建一個層并把頁面中使用該樣式的對象放到層中，并且用在對話框中設(shè)置的相關(guān)參數(shù)控制新建層的屬性。 【類型】下拉列表：確定瀏覽器應(yīng)如何來定位層，選項有以下三個： “絕對”

21、：使用絕對坐標定位層，在“定位”文本框中輸入相對于頁面左上角的坐標值。 “相對”：使用相對坐標定位層，在“定位”文本框中輸入相對于應(yīng)用樣式的元素在網(wǎng)頁中原始位置的偏離值，這一設(shè)置無法在編輯窗口中看到效果。 “靜態(tài)”：使用固定位置，設(shè)置層的位置不移動。,第8章 CSS樣式表,33,8.4.7 定位,【顯示】下拉列表：確定層的可見性。如果不指定顯示屬性，則默認情況下大多數(shù)瀏覽器都繼承父級的屬性。 【Z軸】下拉列表：確定層的疊加順序。 【溢位】下拉列表：確定當層的內(nèi)容超出層的大小時的處理方式。圖8.26 CSS規(guī)則定義對話框之擴展定義 【置入】選項：指定層的位置和大小。具體含義主要根據(jù)在【類型】下拉

22、列表中的設(shè)置。由于層是矩形的，需要兩個點就可以準確地描繪層的位置和形狀。第1個是左上角的頂點，由“左”和“上”兩項進行設(shè)置；第2個是右下角的頂點，用“下”和“右”兩項進行調(diào)協(xié)。 【裁切】選項：設(shè)置限定層中可見區(qū)域的位置和大小。,第8章 CSS樣式表,34,8.4.8 擴展,“擴展”類別包括分頁、光標指針和濾鏡選項，能更好地對自定義功能進行擴展。 【分頁】選項：設(shè)置為網(wǎng)頁添加分頁符號，通過指定在某元素之前或之后進行分頁。當打印網(wǎng)頁中的內(nèi)容時在指定的位置停止并強行換頁。 【光標】下拉列表：用于設(shè)置當鼠標指針位于樣式所控制的對象上時指針類型。 【濾鏡】：對樣式所控制的對象應(yīng)用特殊效果。作為CSS樣式

23、的新擴展，CSS濾鏡屬性能把可視化的濾鏡和轉(zhuǎn)換效果添加到一個標準的HTML元素上。,第8章 CSS樣式表,35,8.5 CSS樣式中的濾鏡,“濾鏡”本來是圖像處理中一種常用技術(shù)，用于實現(xiàn)圖像的一些特殊效果。隨著網(wǎng)頁設(shè)計技術(shù)的發(fā)展，在CSS中也加入了濾鏡技術(shù)，在Dreamweaver 8的CSS規(guī)則之擴展定義中提供了豐富的濾鏡，使得制作網(wǎng)頁時，直接在Dreamweaver中即可實現(xiàn)原來只有在圖像處理工具中才能實現(xiàn)的濾鏡效果。濾鏡效果可以添加到圖像、表格、按鈕、層等HTML對象上。,第8章 CSS樣式表,36,8.5.1 Alpha濾鏡,“Alpha”濾鏡是把一個目標元素與背景混合。設(shè)計者可以指定

24、數(shù)值來控制混合的程度。這種“與背景混合”通俗地說就是一個元素的透明度。通過指定坐標，可以指定點、線、面的透明度。,第8章 CSS樣式表,37,8.5.1 Alpha濾鏡,其語法格式如下： Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?) 其中的各個參數(shù)含義如下： “Opacity ”代表透明的程度。默認的范圍是從0到100，單位是百分比。0代表完全透明，100代表完全不透明。當設(shè)置漸變的透明效果時，它為起始透明度。 “FinishOpacity”是一個可選參數(shù)，如果要設(shè)置漸變

25、的透明效果，用它來指定結(jié)束透明度。范圍也是0到100。 “Style”參數(shù)指定了透明區(qū)域的形狀特征。其中0代表統(tǒng)一形狀，1代表線形，2代表放射狀，3代表長方形。 “StartX”和“StartY”設(shè)置漸變透明效果開始時的X和Y坐標。 “FinishX”和“FinishY”設(shè)置漸變透明效果結(jié)束時的X和Y坐標。,第8章 CSS樣式表,38,8.5.1 Alpha濾鏡,【例8.4】定義一個Alpha濾鏡，設(shè)置一個漸變透明效果，然后把該CSS樣式應(yīng)用到網(wǎng)頁中的一張圖像上，圖像大小為200*160。,第8章 CSS樣式表,39,8.5.2 Blur濾鏡,用手指在一幅尚未干透的油畫上迅速劃過時，畫面就會變

26、得模糊?！癇lur”就是用于產(chǎn)生同樣的模糊效果。其語法格式如下： Blur(Add=?, Direction=?, Strength=?) 其中各個參數(shù)含義如下： “Add”參數(shù)是一個布爾值，可以是“TRUE(默認)”或者“FALSE”。它指定圖片是否被改變成模糊效果。 “Direction”參數(shù)用來設(shè)置模糊的方向。模糊效果是按照順時針的方向進行的，其中0度代表垂直向上，然后每45度為一個單位。它的默認值是270度。 “Strength”值只能使用整數(shù)來指定，它代表有多少像素的寬度將受到模糊影響。默認是5像素。,第8章 CSS樣式表,40,8.5.3 DropShadow濾鏡,“DropShaow”濾鏡的作用是添加對象的陰影效果。其工作原理是將當前對象復(fù)制后建立一個偏移量，加上較深的顏色，其語法格式如下： DropShadow(Color=?, OffX=?, OffY=?, Positive=?) 其中的各個參數(shù)含義如下： “Color”代表投射陰影的顏色，指定的方法可以使用#RRGGBB的形式。