第6章 用CCS美化網(wǎng)頁(yè).ppt

1、第6章 用CCS美化網(wǎng)頁(yè),層疊樣式表，簡(jiǎn)稱為CSS，是英語(yǔ)Cascading Style Sheets的縮寫。它是W3C定義和維護(hù)的標(biāo)準(zhǔn)，是一種用來(lái)為結(jié)構(gòu)化文檔（如HTML文檔或XML應(yīng)用）添加樣式（字體、間距和顏色等）的計(jì)算機(jī)語(yǔ)言。 樣式表可以使網(wǎng)頁(yè)制作者的工作更加輕松和靈活，現(xiàn)在越來(lái)越多的網(wǎng)站采用了CSS技術(shù)。 本章介紹CSS在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用技術(shù)，主要內(nèi)容有： CSS基礎(chǔ) 創(chuàng)建CSS CSS基本應(yīng)用 鏈接外部CSS樣式文件 在“代碼”視圖編輯CSS樣式,6.1 CSS基礎(chǔ),CSS的基本概念在于可將網(wǎng)頁(yè)要展示的內(nèi)容與樣式設(shè)定分開，也就是將網(wǎng)頁(yè)的外觀設(shè)定信息從網(wǎng)頁(yè)內(nèi)容獨(dú)立出來(lái)，并集中管理。這

2、樣，當(dāng)要改變網(wǎng)頁(yè)外觀時(shí)，只需更改樣式設(shè)定的部分，HTML文件本身并不需要更改。 Dreamweaver是最早支持CSS開發(fā)網(wǎng)頁(yè)的軟件之一。通過(guò)直觀的界面，設(shè)計(jì)者可以定義各種各樣的CSS規(guī)則，這些規(guī)則可以影響到網(wǎng)頁(yè)中的任何元素。,6.1.1 認(rèn)識(shí)“CSS樣式”面板,在Dreamweaver中，“CSS樣式”面板是新建、編輯、管理CCS的主要工具。選擇“窗口”|“CSS樣式”命令可以打開或者關(guān)閉“CSS樣式”面板。 在沒有定義CSS前，“CSS樣式”面板是空白顯示。如果在Dreamweaver中定義了CSS，那么“CSS樣式”面板中會(huì)顯示所定義好的CSS規(guī)則，如圖6-1所示。,6.1.2 新建CS

3、S規(guī)則,新建一個(gè)HTML網(wǎng)頁(yè)文檔，打開“CSS樣式”面板，單擊“新建CSS規(guī)則”按鈕，彈出“新建CSS規(guī)則”對(duì)話框，如圖所示。,6.1.3 在網(wǎng)頁(yè)中應(yīng)用CSS樣式,定義好CSS樣式后，就可以在網(wǎng)頁(yè)文檔中套用這些樣式了。套用樣式表的方法主要有3種，下面分別進(jìn)行介紹。,1在“屬性”面板選擇應(yīng)用特定的樣式,2利用【標(biāo)簽選擇器】選擇樣式,3使用右鍵快捷菜單,4清除樣式 如果想清除網(wǎng)頁(yè)中應(yīng)用的某個(gè)樣式，可以先選中對(duì)象，然后從右鍵快捷菜單中選擇“CSS樣式”|“無(wú)”命令，即可清除原有的樣式。,5查看正在應(yīng)用的樣式屬性列表,如果想查看網(wǎng)頁(yè)中正在應(yīng)用的CSS樣式的屬性情況，可以先將鼠標(biāo)光標(biāo)定位在某個(gè)應(yīng)用CSS

4、樣式的位置，或者選中應(yīng)用CSS樣式的對(duì)象，然后在“CSS樣式”面板中單擊“現(xiàn)在”選項(xiàng)卡，即可顯示出正在應(yīng)用的CSS樣式的屬性列表情況，如圖所示。,6.2 創(chuàng)建CSS,創(chuàng)建CSS樣式時(shí)，在“新建CSS規(guī)則”對(duì)話框中，設(shè)置不同的“選擇器類型”可以創(chuàng)建不同類型的CSS樣式。一般情況下，經(jīng)常創(chuàng)建的CSS樣式類型包括類選擇符、標(biāo)識(shí)選擇符、重定義HTML標(biāo)簽、超級(jí)鏈接的CSS樣式等。,6.2.1 類選擇符,CSS選擇符有類選擇符和標(biāo)識(shí)選擇符兩種。類選擇符以英文句點(diǎn)（.）開頭，而標(biāo)識(shí)選擇符以英文井號(hào)（#）開頭。類選擇符和標(biāo)識(shí)選擇符的不同之處在于，類選擇符用在不止一個(gè)的元素上，而標(biāo)識(shí)選擇符則用在唯一的元素上。

5、,1建立類選擇符CSS樣式,2CSS樣式應(yīng)用于文本,3CSS樣式應(yīng)用于圖片,4理解類標(biāo)識(shí)符的CSS代碼,在head標(biāo)簽中定義了一個(gè)名字為.myCSS_Class的樣式，在body標(biāo)簽中應(yīng)用了兩次這個(gè)樣式。一次應(yīng)用是在第一個(gè)P標(biāo)簽中，另一次應(yīng)用是在img標(biāo)簽中，應(yīng)用類標(biāo)識(shí)符樣式時(shí)，都是通過(guò)class屬性的設(shè)置實(shí)現(xiàn)的： class=myCSS_Class 專家點(diǎn)撥：在“代碼視圖”下，通過(guò)手動(dòng)添加代碼，編輯某個(gè)HTML標(biāo)簽的class屬性，就可以讓這個(gè)HTML標(biāo)簽控制范圍內(nèi)的元素應(yīng)用類選擇符樣式。,6.2.2 標(biāo)識(shí)選擇符,標(biāo)識(shí)選擇符又可以稱為ID選擇符，它的名字以英文井號(hào)（#）開頭，這種選擇符樣式只

6、能用在一個(gè)元素上。 1建立標(biāo)識(shí)選擇符樣式 2在單元格中應(yīng)用樣式 3理解標(biāo)識(shí)選擇符的CSS代碼,在head標(biāo)簽中定義了一個(gè)名字為#myCSS_ID的樣式，在td標(biāo)簽中應(yīng)用了這個(gè)樣式。應(yīng)用類標(biāo)識(shí)符樣式時(shí)，都是通過(guò)HTML標(biāo)簽的id屬性的設(shè)置實(shí)現(xiàn)的： id=myCSS_ID,ID屬性是HTML標(biāo)簽的一個(gè)重要屬性，一個(gè)網(wǎng)頁(yè)中的標(biāo)簽的ID屬性值不能重復(fù)，因此在利用ID屬性應(yīng)用標(biāo)識(shí)選擇符CSS樣式時(shí)，只能應(yīng)用于一個(gè)標(biāo)簽。如果應(yīng)用于多個(gè)標(biāo)簽，就會(huì)造成標(biāo)簽的ID屬性沖突。,6.2.3 用CSS重新定義HTML標(biāo)簽,創(chuàng)建CSS樣式時(shí)，在“新建CSS規(guī)則”對(duì)話框中，將“選擇器類型”設(shè)置為“標(biāo)簽（重新定義特定標(biāo)簽的

7、外觀）”，可以實(shí)現(xiàn)用CSS重新定義HTML標(biāo)簽的外觀的功能。 下面以p標(biāo)簽為例討論用CSS重新定義HTML標(biāo)簽的外觀的方法。 1修改HTML標(biāo)簽 2設(shè)置p標(biāo)簽的屬性,6.2.4 超級(jí)鏈接的CSS樣式,網(wǎng)頁(yè)中的文本上建立超級(jí)鏈接后，文字就會(huì)變成藍(lán)色，同時(shí)還出現(xiàn)下劃線，這是HTML默認(rèn)的超級(jí)鏈接外觀。如果想改變超級(jí)鏈接的默認(rèn)外觀，可以利用CSS樣式進(jìn)行處理。 1創(chuàng)建超級(jí)鏈接,2用CSS樣式重新定義超級(jí)鏈接的外觀,專家點(diǎn)撥：在如圖6-32所示的【新建CSS規(guī)則】對(duì)話框中，“選擇器”列表框中共有4個(gè)選項(xiàng)。 a:link 超級(jí)鏈接的正常狀態(tài)，沒有任何動(dòng)作的時(shí)候。 a:visited 訪問(wèn)過(guò)的超級(jí)鏈接狀態(tài)

8、。 a:hover 光標(biāo)指向超級(jí)鏈接的狀態(tài)。 a:active 選中超級(jí)鏈接狀態(tài)。,6.3 CSS基本應(yīng)用,前面學(xué)習(xí)了創(chuàng)建CSS樣式的基本方法以及CSS樣式的類型，本節(jié)將分門別類地對(duì)CSS樣式提供的各類屬性進(jìn)行討論，并通過(guò)一些實(shí)例講解CSS在網(wǎng)頁(yè)制作中的基本應(yīng)用。,6.3.1 課堂實(shí)例用CSS格式化文本,1創(chuàng)建內(nèi)部CSS規(guī)則 2應(yīng)用CSS規(guī)則,6.3.2 課堂實(shí)例用CSS控制表格,前面學(xué)習(xí)過(guò)在代碼視圖中設(shè)置表格以及單元格的各種屬性，從代碼提示工具彈出的那個(gè)冗長(zhǎng)列表中就能知道，、這是一件相當(dāng)繁瑣復(fù)雜的事情，如果要為多個(gè)表格設(shè)置屬性，就更加不勝其煩了?，F(xiàn)在通過(guò)CSS可以非常方便地設(shè)置表格樣式。下面

9、將通過(guò)CSS制作邊框?yàn)楹谏?xì)實(shí)線，表格內(nèi)部邊框?yàn)榛疑摼€的表格。,1控制表格邊框 2左上角的單元格邊框 3右下角的單元格邊框,6.3.3 課堂實(shí)例用CSS控制列表,前面已經(jīng)學(xué)習(xí)過(guò)，在Dreamweaver的【屬性】面板有【項(xiàng)目列表】和【編號(hào)列表】的圖標(biāo)按鈕，能夠產(chǎn)生自動(dòng)列表功能。在默認(rèn)狀態(tài)下，它有兩種形式，即圓點(diǎn)和阿拉伯?dāng)?shù)字。 利用點(diǎn)或者數(shù)字制作一般的列表項(xiàng)目的時(shí)候，只要在【屬性】面板中直接選擇相應(yīng)的設(shè)置按鈕即可。但是，如果想利用鏤空的圓形或者方形、漂亮圖標(biāo)來(lái)編排列表項(xiàng)目，就要利用CSS樣式表來(lái)定義。 1建立段落列表 2用CSS自定義段落列表,6.3.4 課堂實(shí)例用CSS控制背景,背景可以用于

10、很多頁(yè)面元素，比如表格、表格的單元格、頁(yè)面、層等，都可以有自己的背景圖片，一般在【屬性】檢查器中也能進(jìn)行背景的設(shè)置，但是如果使用CSS進(jìn)行背景圖片的設(shè)置，選項(xiàng)可以更加豐富，而且能夠反復(fù)使用。 1建立標(biāo)識(shí)選擇符 2設(shè)置背景圖片 3使用標(biāo)識(shí)選擇符,6.3.5 課堂實(shí)例用CSS控制區(qū)塊,CSS“區(qū)塊”規(guī)則的設(shè)置內(nèi)容包括段落內(nèi)文字的對(duì)齊方式、首行縮進(jìn)、字符間距等，運(yùn)用于圖片的“區(qū)塊”規(guī)則還可以控制圖片和文本的對(duì)齊方式。 1創(chuàng)建CSS規(guī)則 2應(yīng)用CSS規(guī)則到文本 3應(yīng)用CSS規(guī)則到圖片,6.3.6 課堂實(shí)例CSS樣式濾鏡的應(yīng)用,Alpha：設(shè)置透明度。 Blur：建立模糊效果。 Chroma：把指定的顏

11、色設(shè)置為透明。 DropShadow：建立一種偏移的影像輪廓，即投射陰影。 FlipH：水平反轉(zhuǎn)。 FlipV：垂直反轉(zhuǎn)。 Glow：為對(duì)象的外邊界增加光效。 Grayscale：降低圖片的彩色度。 Invert：將色彩、飽和度及亮度值完全反轉(zhuǎn)建立底片效果。 Light：在一個(gè)對(duì)象上進(jìn)行燈投影。 Mask：為一個(gè)對(duì)象建立透明膜。 Shadow：建立一個(gè)對(duì)象的固體輪廓，即陰影效果。 Wave：在X軸和Y軸方向用正弦波紋打亂圖片。 Xray：只顯示對(duì)象的輪廓。,模糊濾鏡效果,CSS提供了濾鏡功能，在制作網(wǎng)頁(yè)的時(shí)候，即使不用圖片，通過(guò)CSS濾鏡，只需簡(jiǎn)單的操作，也同樣可以使網(wǎng)頁(yè)中的文字、圖片或者按鈕

12、鮮艷無(wú)比，充滿生氣，從而增強(qiáng)了自己網(wǎng)頁(yè)的視覺效果。,6.4 鏈接外部CSS樣式文件,前面在創(chuàng)建CSS樣式時(shí)，都是直接將CSS樣式嵌入到網(wǎng)頁(yè)文檔中，這屬于網(wǎng)頁(yè)文檔的內(nèi)部CSS樣式應(yīng)用。CSS樣式不但可以直接嵌入在頁(yè)面中，而且可以保存為獨(dú)立的樣式文件（擴(kuò)展名為.css），需要引用樣式文件中的CSS樣式時(shí)，可以將其鏈接到網(wǎng)頁(yè)文檔中。多個(gè)網(wǎng)頁(yè)文件可以共享一個(gè).css樣式文件，對(duì).css樣式文件的修改將會(huì)影響所有以鏈接方式調(diào)用這個(gè).css樣式文件的網(wǎng)頁(yè)文件。,6.4.1 制作CSS樣式文件,1從CSS模板新建CSS文件 2修改CSS樣式,6.4.2 通過(guò)鏈接使用外部樣式表,1鏈接外部CSS文件 2在網(wǎng)頁(yè)中應(yīng)用CSS樣式,專家點(diǎn)撥：網(wǎng)頁(yè)文檔鏈接了外部CSS樣式文件后，在代碼視圖中，可以觀察到head標(biāo)簽中增加了一行代碼： 這就是鏈接外部CSS樣式文件的代碼。,本章習(xí)題上機(jī)練習(xí),練習(xí)1 用CSS控制網(wǎng)頁(yè)文字和段落,創(chuàng)建一個(gè)包含若干文字段落的網(wǎng)頁(yè)文檔，在這個(gè)網(wǎng)頁(yè)文檔中定義一個(gè)類選擇符CSS樣式，利用這個(gè)CSS樣式控制網(wǎng)頁(yè)中的文字和段落格式。,練習(xí)2 用CSS控制表