使用CSS樣式PPT課件

1、本章內(nèi)容本章內(nèi)容第1頁/共22頁5.1CSSCSS樣式的建立與編輯樣式的建立與編輯案例制作：案例制作：書法背后的人生書法背后的人生 第2頁/共22頁5.1CSSCSS樣式的建立與編輯樣式的建立與編輯1. CSSCSS樣式的作用CSSCSS樣式在網(wǎng)頁設(shè)計(jì)中得到了廣泛的應(yīng)用，大大提高了網(wǎng)頁的制作效率，其主要作用如下：v 實(shí)現(xiàn)了網(wǎng)頁中內(nèi)容與形式的分離，便于網(wǎng)站的管理與維護(hù)。v 創(chuàng)建一個(gè)樣式可以在多個(gè)網(wǎng)頁中多次使用，提高了工作效率。v 使網(wǎng)站中各網(wǎng)頁風(fēng)格統(tǒng)一。第3頁/共22頁5.1CSSCSS樣式的建立與編輯樣式的建立與編輯2. CSS樣式的組織形式Dreamweaver 8.0中CSS樣式有三種組織

2、方式分別為內(nèi)嵌CSS樣式v 文檔內(nèi)部CSS樣式v 外部文件CSS樣式第4頁/共22頁5.1CSSCSS樣式的建立與編輯樣式的建立與編輯3. CSS樣式的類型在Dreamweaver 8.0中CSS樣式根據(jù)作用的不同可以分為以下幾種類型：v自定義CSS樣式自定義CSS樣也稱為類樣式，由用戶命名，可以用于任何標(biāo)簽。v重定義HTML標(biāo)簽重定義HTML標(biāo)簽是將原有的HTML標(biāo)簽重新定義，給原有的標(biāo)簽賦予新的樣式。vCSS選擇器CSS選擇器允許用戶創(chuàng)建用于指定標(biāo)簽組合的樣式，常用于設(shè)置超鏈接，也可創(chuàng)建ID，但I(xiàn)D在網(wǎng)頁中只能使用一次，由于具有惟一的特性，常用于腳本，由符號(hào)“”表示。第5頁/共22頁5.1

3、CSSCSS樣式的建立與編輯樣式的建立與編輯4. CSS樣式面板通過“CSS樣式”面板，可以方便的創(chuàng)建、刪除、編輯CSS樣式等，也可以附加已有的CSS樣式。打開“CSS樣式”面板的方法。v 按ShiftF11鍵。v 選擇主菜單“窗口”“CSS樣式”命令“CSS樣式”面板的結(jié)構(gòu)共分為兩個(gè)部分，上半部分顯示CSS樣式，下半部分則顯示所選定的CSS樣式的屬性。CSS樣式根據(jù)所顯示內(nèi)容的不同分兩種顯示方式，若單擊“全部”按鈕，則顯示該所有的CSS樣式；若選擇“正在”按鈕，則顯示所選中內(nèi)容的CSS樣式，在CSS樣式屬性中可以方便地修改某一屬性。第6頁/共22頁5.1CSSCSS樣式的建立與編輯樣式的建立

4、與編輯5. 5. 創(chuàng)建CSSCSS樣式方法創(chuàng)建CSSCSS樣式的方法如下：1 1）打開新建CSSCSS規(guī)則對(duì)話框, ,新建CSSCSS樣式2 2）定義要?jiǎng)?chuàng)建的CSSCSS樣式類型自定義類型、重定義HTMLHTML標(biāo)簽樣式、創(chuàng)建CSSCSS選擇器樣式3 3）選擇定義CSSCSS樣式的位置4 4）設(shè)置和應(yīng)用CSSCSS樣式的屬性第7頁/共22頁5.1CSSCSS樣式的建立與編輯樣式的建立與編輯6.6.創(chuàng)建自定義CSSCSS樣式在此創(chuàng)建一個(gè)用于修飾文本的自定義樣式，字體為宋體，大小為9pt9pt，顏色代碼為#666666#666666，行高140%140%，來介紹自定義樣式的操作方法。操作步驟如下：

5、1 1）打開“CSSCSS樣式”面板。2 2）單擊“CSSCSS樣式”面板右下角的新建CSSCSS規(guī)則按鈕，打開新建CSSCSS規(guī)則對(duì)話框。3 3）“選擇器類型”項(xiàng)選擇“類”，“名稱”文本框中輸入.content.content，“定義在”選擇“僅對(duì)該文檔”。4 4）單擊“確定”按鈕，打開“CSSCSS規(guī)則定義”對(duì)話框，在“分類”列表中選擇“類型”。設(shè)置字體為宋體，大小為9pt9pt，行高140%140%，顏色為#666666#666666，設(shè)置自定義樣式contentcontent屬性的對(duì)話框。如圖所示。5 5）設(shè)置完成后單擊“確定”按鈕，在“屬性”面板和“CSSCSS樣式”面板中會(huì)顯示新建

6、的樣式。第8頁/共22頁5.1CSSCSS樣式的建立與編輯樣式的建立與編輯第9頁/共22頁5.1CSSCSS樣式的建立與編輯樣式的建立與編輯7. 創(chuàng)建重定義HTML標(biāo)簽樣式重定義HTML標(biāo)簽樣式用于重新定義HTML中的某一標(biāo)簽，被重定義過的HTML標(biāo)簽具有新的格式。在此將表示單元格的標(biāo)簽td重定義。操作步驟如下：1）打開“CSS樣式”面板。單擊“CSS樣式”面板右下角的新建CSS規(guī)則按鈕，打開“新建CSS規(guī)則”對(duì)話框。2）“選擇器類型”選擇“標(biāo)簽”，標(biāo)簽下拉列表框中選擇td，“定義在”選擇“新建樣式表文件”。3）單擊“確定”按鈕，打開“保存樣式表文件”對(duì)話框，輸入文件名td_css，并選擇保存

7、文件的位置。4）單擊“確定”按鈕，打開“CSS規(guī)則定義”對(duì)話框，在“分類”列表中選擇“類型”，右側(cè)字體設(shè)置為宋體，大小為12px，行高150%，顏色為#333333。第10頁/共22頁5.1CSSCSS樣式的建立與編輯樣式的建立與編輯8.8.創(chuàng)建CSSCSS選擇器CSSCSS選擇器很重要的一個(gè)應(yīng)用是對(duì)超鏈接進(jìn)行設(shè)置，超鏈接分為四種狀態(tài)。a:linka:link：初始狀態(tài)的超鏈接。a:visiteda:visited：超鏈接被訪問過后的狀態(tài)a:hovera:hover：光標(biāo)移到超鏈接上的狀態(tài)。a:activea:active：超鏈接被激活時(shí)的狀態(tài)，即在超鏈接上按下鼠標(biāo)時(shí)的狀態(tài)第11頁/共22頁5

8、.1CSSCSS樣式的建立與編輯樣式的建立與編輯在此以對(duì)超鏈接的設(shè)置為例，分別四種高級(jí)樣式進(jìn)行設(shè)置，操作步驟如下。（1 1）設(shè)置a:linka:link1 1）打開“CSSCSS樣式”面板，單擊面板中新建CSSCSS規(guī)則按鈕，打開新建CSSCSS規(guī)則對(duì)話框。2 2）“選擇器類型”項(xiàng)選擇“高級(jí)”，“選擇器”下拉列表框中選擇a:linka:link，“定義在”選擇 “僅對(duì)該文檔”。3 3）單擊“確定”按鈕，打開“CSSCSS規(guī)則定義”對(duì)話框，在“分類”列表中選擇“類型”，右側(cè)設(shè)置字體為宋體，大小為9pt9pt，顏色為#993300#993300，修飾設(shè)為無。單擊“確定”按鈕。（2 2）設(shè)置a:vi

9、siteda:visited設(shè)置字體為宋體，大小為9pt9pt，顏色為#993300#993300，修飾設(shè)為無，單擊“確定”按鈕。（3 3）設(shè)置a:hovera:hover設(shè)置字體為宋體，大小為9pt9pt，顏色為#FF0000#FF0000，修飾設(shè)為下劃線，單擊“確定”按鈕。（4 4）設(shè)置a:activea:active設(shè)置字體為宋體，大小為9pt9pt，顏色為 #FF0000#FF0000，修飾設(shè)為無，第12頁/共22頁5.1CSSCSS樣式的建立與編輯樣式的建立與編輯9. CSS9. CSS樣式的編輯若對(duì)已創(chuàng)建的CSSCSS樣式不滿意，可以進(jìn)行編輯，操作方法如下：v 選擇某一樣式，單擊“

10、CSSCSS樣式”面板底部的編輯樣式表按鈕v 直接雙擊某一樣式，打開“CSS規(guī)則定義”對(duì)話框，進(jìn)行編輯。v 選擇某一樣式，在“CSS樣式”面板顯示的樣式屬性中進(jìn)行編輯，v單擊“添加屬性”按鈕可以添加其他屬性。第13頁/共22頁5.1CSSCSS樣式的建立與編輯樣式的建立與編輯10. CSS樣式表的應(yīng)用（1）應(yīng)用自定義CSS樣式v 如果要應(yīng)用自定義CSS樣式的網(wǎng)頁元素是文本，那么可以選中該文本，在“屬性”面板 中“樣式”選擇要應(yīng)用樣式v 如果要應(yīng)用自定義CSS樣式的是其他網(wǎng)頁元素，如表單、圖像等，則可以選中該元 素，在“屬性”面板中“類”選擇要應(yīng)用的樣式即可。為文本應(yīng)用自定義樣式第14頁/共22

11、頁5.1CSSCSS樣式的建立與編輯樣式的建立與編輯（2 2）應(yīng)用重定義HTMLHTML標(biāo)簽由于重定義HTMLHTML標(biāo)簽樣式是對(duì)原有HTMLHTML標(biāo)簽重新定義，故會(huì)自動(dòng)應(yīng)用。（3 3）應(yīng)用CSSCSS選擇器CSSCSS選擇器如果是對(duì)超鏈接的設(shè)置，則會(huì)自動(dòng)應(yīng)用，如果應(yīng)用“樣式名”的樣式，可選擇要應(yīng)用的樣式，在“屬性面板”中元素編號(hào)的下拉列表框中選擇樣式即可，如果給層應(yīng)用樣式，在“屬性”面板中“層編號(hào)”的下拉列表框中選擇樣式。第15頁/共22頁5.1CSSCSS樣式的建立與編輯樣式的建立與編輯11.CSS11.CSS樣式的刪除選擇“CSS樣式”面板中某一樣式，單擊面板中“刪除CSS規(guī)則”按鈕，

12、可以刪除這一樣式，刪除樣式因樣式表存在的形式不同而細(xì)微的差別。（1 1）文檔內(nèi)部CSSCSS樣式的刪除（2 2）外部文件CSSCSS樣式的刪除第16頁/共22頁5.1CSSCSS樣式的建立與編輯樣式的建立與編輯12. CSS12. CSS樣式屬性的設(shè)置CSSCSS樣式的屬性有很多，以上所接觸的屬性只是一小部分，屬性設(shè)置主要在“CSSCSS規(guī)則定義”對(duì)話框中進(jìn)行，按照類別將屬性設(shè)置介紹如下：v CSSCSS樣式“類型”屬性v CSSCSS樣式“背景”屬性v CSSCSS樣式“區(qū)塊”屬性v CSSCSS樣式“方框”屬性v CSSCSS樣式“邊框”屬性v CSSCSS樣式“列表”屬性v CSSCSS

13、樣式“定位”屬性v CSSCSS樣式“擴(kuò)展”屬性第17頁/共22頁5.1CSSCSS樣式的建立與編輯樣式的建立與編輯通過本案例的操作你將學(xué)會(huì)，如何創(chuàng)建自定義CSSCSS樣式、重定義HTMLHTML標(biāo)簽樣式、CSSCSS選擇器、CSSCSS樣式的各項(xiàng)屬性設(shè)置。第18頁/共22頁5.2CSSCSS樣式的應(yīng)用樣式的應(yīng)用本實(shí)例是把網(wǎng)頁已有網(wǎng)頁中僅應(yīng)用于本網(wǎng)頁的CSSCSS樣式導(dǎo)出，保存到一文件中，然后應(yīng)用到尚沒有CSSCSS樣式的網(wǎng)頁中，使網(wǎng)頁更加美觀。通過本案例的操作，你將學(xué)會(huì)如何將僅應(yīng)用一個(gè)網(wǎng)頁的CSSCSS樣式導(dǎo)出到外部CSSCSS樣式表文件，如何附加外部CSSCSS樣式表文件。如何應(yīng)用CSSCSS樣式。最終效果如圖所示。第19頁/共22頁5.2CSSCSS樣式的應(yīng)用樣式的應(yīng)用1. 附加外部CSS樣式表文件單擊“CSS樣式”面板中的“附加樣式表“按鈕，如圖所示鏈接外部樣式