資源描述：
《網(wǎng)頁設(shè)計(jì)6：CSS樣式.ppt》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、網(wǎng)頁設(shè)計(jì)適用軟件學(xué)院第6課:CSS樣式學(xué)習(xí)目標(biāo)：學(xué)會(huì)使用CSS控制頁面元素的顯示效果學(xué)習(xí)任務(wù)：1、掌握CSS樣式的創(chuàng)建、編輯和應(yīng)用2、掌握濾鏡的用法重難點(diǎn)：1、CSS樣式的設(shè)置2、CSS濾鏡的設(shè)置和使用樣式樣式是指一組可控制文本塊或文本區(qū)域外觀的格式屬性。字符的樣式是指字符外觀的顯示方式。Dreamweaver中的常用樣式（文本選項(xiàng)卡下）加粗：文字加粗顯示。斜體：文字顯示為傾斜格式。加強(qiáng)：加強(qiáng)格式根據(jù)瀏覽器不同規(guī)定而顯示，多為加粗方式顯示。強(qiáng)調(diào)：強(qiáng)調(diào)格式根據(jù)瀏覽器不同規(guī)定顯示，多為斜體顯示。段落：標(biāo)簽
所定義的顯示方
2、式。引用塊：表明選中的文字是被引用的，有縮進(jìn)。已編排格式：指的是用戶預(yù)先對(duì)
標(biāo)簽中的文字排版格式將在瀏覽器中原樣的顯示。字符：插入特殊字符（利用鍵盤不能直接輸入的字符。）使用菜單“文本”—“樣式”下的子菜單設(shè)置文本樣式。CSS樣式CSS是一種樣式表的技術(shù)，全稱為“級(jí)聯(lián)樣式表”，是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計(jì)的。CSS的作用可以將格式和結(jié)構(gòu)分離HTML語言只是定義了網(wǎng)頁的結(jié)構(gòu)和個(gè)別要素的功能，而讓瀏覽器自己決定應(yīng)該讓各要素的顯示方式。CSS通過將定義結(jié)構(gòu)的部分和定義格式的部分分離，能夠?qū)撁娴牟季质┘痈嗟目刂?。CSS
3、可以更精確的控制頁面的布局。CSS使網(wǎng)頁文件變的更小、下載更快。CSS可以更快更容易的維護(hù)及更新大量的網(wǎng)頁。CSS分類嵌入式在獨(dú)立的文檔應(yīng)用CSS樣式外部鏈接式應(yīng)用于多個(gè)文檔，生成專門的*.CSS文件。創(chuàng)建新CSS樣式打開CSS樣式面板：“窗口”—“CSS樣式”或Shift+F11單擊CSS樣式面板中的“新建CSS樣式”按鈕，打開“新建CSS樣式”對(duì)話框。1、名稱：為新樣式命名（名稱前必須以英文句點(diǎn)開頭，如無此點(diǎn)，Dreamweaver自動(dòng)添加）2、選擇器類型：類：自定義一個(gè)新的樣式，可應(yīng)用于任何標(biāo)簽。標(biāo)簽：重新定義HTML標(biāo)簽
4、，定義之后不需要選中對(duì)象就直接應(yīng)用到頁面中去了。高級(jí)：針對(duì)超級(jí)鏈接狀態(tài)進(jìn)行設(shè)置。共四種狀態(tài)。a:Link：超級(jí)鏈接的正常狀態(tài)，沒有任何動(dòng)作的時(shí)候。a:Visited：訪問過的超級(jí)鏈接狀態(tài)。a:Hover：光標(biāo)移上超級(jí)鏈接狀態(tài)。a:Active：選中超級(jí)鏈接狀態(tài)。3、定義在：新建樣式表文件：在網(wǎng)頁外部定義一個(gè)新的CSS樣式表文件。僅對(duì)該文檔：將CSS樣式定義在該文檔內(nèi)部，僅能在該文檔中應(yīng)用。編輯現(xiàn)有樣式：內(nèi)部CSS樣式的修改：在CSS面板中右擊樣式，在彈出菜單中選擇“編輯”，在“樣式定義”對(duì)話框中編輯樣式。外部CSS樣式的修改：(
5、方法同上)應(yīng)用CSS樣式：應(yīng)用嵌入式CSS樣式如果設(shè)置段落將光標(biāo)定位在段落中或選中段落，如果設(shè)置多個(gè)段落需要選中這些段落，如果設(shè)置字符需要選中字符在CSS樣式面板中，選擇某個(gè)樣式右擊選擇“套用”或者在屬性面板樣式菜單中選擇某個(gè)樣式。應(yīng)用外部鏈接式CSS樣式打開CSS樣式面板單擊“附加樣式表”按鈕，打開“鏈接外部樣式表”對(duì)話框。在“文件/URL”文件域中輸入或通過瀏覽找到外部CSS樣式表地址和名稱。鏈接：通過鏈接調(diào)用外部樣式表文件導(dǎo)入：在頁面打開時(shí)加載外部樣式表文件。重置：在現(xiàn)有樣式的基礎(chǔ)上創(chuàng)建新樣式。刪除樣式：選中樣式，單擊“刪
6、除CSS樣式”按鈕。定義CSS樣式設(shè)置CSS樣式的8個(gè)面板：類型、背景、區(qū)塊、方框、邊框、列表、定位、擴(kuò)展類型：此面板可定義樣式的基本類型設(shè)置。字體：為樣式設(shè)置字體類型。大小：定義文本字體的大小。粗細(xì)：對(duì)字體應(yīng)用指定的或相對(duì)的粗細(xì)度。樣式：指定樣式為普通、斜體或偏斜體。變量：設(shè)置字體變量（主要應(yīng)用于英文）.行高：設(shè)置文本所在地方的行高。大小寫：設(shè)置文本的大小寫狀態(tài)（應(yīng)用于英文。）裝飾：使用下劃線、上劃線、刪除線裝飾文本。閃爍效果只在NC瀏覽器中可以看到。顏色：定義文本顏色。背景：此面板主要是對(duì)元素的背景進(jìn)行設(shè)置，包括背景顏色、背
7、景圖象、背景圖象的控制。一般是對(duì)BODY（頁面）、TABLE（表格）、DIV（區(qū)域）的設(shè)置。背景顏色：設(shè)置元素的背景色。背景圖像：設(shè)置元素的背景圖像。重復(fù)：確定背景圖像是否以及如何重復(fù)。重復(fù)：在元素的背景部分水平和垂直方向平鋪圖像。不重復(fù)：在元素的開頭顯示一遍圖像。橫向重復(fù)：在水平方向重復(fù)顯示縱向重復(fù)：在垂直方向重復(fù)顯示附件：固定背景圖像在最初位置或者跟隨內(nèi)容滾動(dòng)。有些瀏覽器會(huì)將固定當(dāng)作滾動(dòng)看待。水平位置：指定背景圖像的水平位置。左對(duì)齊、右對(duì)齊和居中分別是指相對(duì)于元素的對(duì)齊方式。垂直位置：指定背景圖像的垂直位置。頂部、居中、底部
8、分別是指相對(duì)于元素的對(duì)齊方式。區(qū)塊：此面板主可定義樣式的空格和對(duì)齊方式。單詞間距：設(shè)置單詞之間的間距?？梢栽O(shè)置負(fù)值。字母間距：設(shè)置字符之間的間距?？梢灾付ㄘ?fù)值。因?yàn)橹形囊彩亲址?，這個(gè)參數(shù)可以設(shè)置文字間的間距。垂直方式：指定元素的垂直對(duì)齊方式。通常是相對(duì)于其上一級(jí)
