資源描述：
《《使用CSS樣式》PPT課件.ppt》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。
1、學(xué)習(xí)目標(biāo)能夠創(chuàng)建、編輯、刪除CSS樣式能夠創(chuàng)建自定義樣式、重定義HTML標(biāo)簽、CSS選擇器能夠應(yīng)用CSS樣式5.1CSS樣式的建立與編輯5.2CSS樣式的應(yīng)用本章內(nèi)容5.1CSS樣式的建立與編輯5.1.1案例制作：書法背后的人生通過(guò)本案例的操作，你將學(xué)會(huì)創(chuàng)建CSS樣式的一般方法、如何創(chuàng)建自定義CSS樣式、如何創(chuàng)建重定義HTML標(biāo)簽樣式、如何創(chuàng)建CSS選擇器、如何編輯CSS樣式。5.1CSS樣式的建立與編輯5.1.2新知解析1.CSS樣式的作用CSS樣式在網(wǎng)頁(yè)設(shè)計(jì)中得到了廣泛的應(yīng)用，大大提高了網(wǎng)頁(yè)的制作效率，其主要作用如下：實(shí)現(xiàn)了網(wǎng)頁(yè)中內(nèi)容與形式的分離，便于網(wǎng)站的管理與維護(hù)。創(chuàng)建一個(gè)樣式可
2、以在多個(gè)網(wǎng)頁(yè)中多次使用，提高了工作效率。使網(wǎng)站中各網(wǎng)頁(yè)風(fēng)格統(tǒng)一。5.1CSS樣式的建立與編輯2.CSS樣式的組織形式Dreamweaver8.0中CSS樣式有三種組織方式分別為內(nèi)嵌CSS樣式文檔內(nèi)部CSS樣式外部文件CSS樣式5.1CSS樣式的建立與編輯3.CSS樣式的類型在Dreamweaver8.0中CSS樣式根據(jù)作用的不同可以分為以下幾種類型：自定義CSS樣式自定義CSS樣也稱為類樣式，由用戶命名，可以用于任何標(biāo)簽。重定義HTML標(biāo)簽重定義HTML標(biāo)簽是將原有的HTML標(biāo)簽重新定義，給原有的標(biāo)簽賦予新的樣式。CSS選擇器CSS選擇器允許用戶創(chuàng)建用于指定標(biāo)簽組合的樣式，常用于設(shè)置超鏈
3、接，也可創(chuàng)建ID，但I(xiàn)D在網(wǎng)頁(yè)中只能使用一次，由于具有惟一的特性，常用于腳本，由符號(hào)“＃”表示。5.1CSS樣式的建立與編輯4.CSS樣式面板通過(guò)“CSS樣式”面板，可以方便的創(chuàng)建、刪除、編輯CSS樣式等，也可以附加已有的CSS樣式。打開“CSS樣式”面板的方法。按Shift＋F11鍵。選擇主菜單“窗口”｜“CSS樣式”命令?！癈SS樣式”面板的結(jié)構(gòu)共分為兩個(gè)部分，上半部分顯示CSS樣式，下半部分則顯示所選定的CSS樣式的屬性。CSS樣式根據(jù)所顯示內(nèi)容的不同分兩種顯示方式，若單擊“全部”按鈕，則顯示該所有的CSS樣式；若選擇“正在”按鈕，則顯示所選中內(nèi)容的CSS樣式，在CSS樣式屬性中可
4、以方便地修改某一屬性。5.1CSS樣式的建立與編輯5.創(chuàng)建CSS樣式方法創(chuàng)建CSS樣式的方法如下：1）打開新建CSS規(guī)則對(duì)話框,新建CSS樣式2）定義要?jiǎng)?chuàng)建的CSS樣式類型自定義類型、重定義HTML標(biāo)簽樣式、創(chuàng)建CSS選擇器樣式3）選擇定義CSS樣式的位置4）設(shè)置和應(yīng)用CSS樣式的屬性5.1CSS樣式的建立與編輯6.創(chuàng)建自定義CSS樣式在此創(chuàng)建一個(gè)用于修飾文本的自定義樣式，字體為宋體，大小為9pt，顏色代碼為#666666，行高140%，來(lái)介紹自定義樣式的操作方法。操作步驟如下：1）打開“CSS樣式”面板。2）單擊“CSS樣式”面板右下角的新建CSS規(guī)則按鈕，打開新建CSS規(guī)則對(duì)話框。3
5、）“選擇器類型”項(xiàng)選擇“類”，“名稱”文本框中輸入.content，“定義在”選擇“僅對(duì)該文檔”。4）單擊“確定”按鈕，打開“CSS規(guī)則定義”對(duì)話框，在“分類”列表中選擇“類型”。設(shè)置字體為宋體，大小為9pt，行高140%，顏色為#666666，設(shè)置自定義樣式content屬性的對(duì)話框。如圖所示。5）設(shè)置完成后單擊“確定”按鈕，在“屬性”面板和“CSS樣式”面板中會(huì)顯示新建的樣式。5.1CSS樣式的建立與編輯5.1CSS樣式的建立與編輯7.創(chuàng)建重定義HTML標(biāo)簽樣式重定義HTML標(biāo)簽樣式用于重新定義HTML中的某一標(biāo)簽，被重定義過(guò)的HTML標(biāo)簽具有新的格式。在此將表示單元格的標(biāo)簽td重定
6、義。操作步驟如下：1）打開“CSS樣式”面板。單擊“CSS樣式”面板右下角的新建CSS規(guī)則按鈕，打開“新建CSS規(guī)則”對(duì)話框。2）“選擇器類型”選擇“標(biāo)簽”，標(biāo)簽下拉列表框中選擇td，“定義在”選擇“新建樣式表文件”。3）單擊“確定”按鈕，打開“保存樣式表文件”對(duì)話框，輸入文件名td_css，并選擇保存文件的位置。4）單擊“確定”按鈕，打開“CSS規(guī)則定義”對(duì)話框，在“分類”列表中選擇“類型”，右側(cè)字體設(shè)置為宋體，大小為12px，行高150%，顏色為#333333。5.1CSS樣式的建立與編輯8.創(chuàng)建CSS選擇器CSS選擇器很重要的一個(gè)應(yīng)用是對(duì)超鏈接進(jìn)行設(shè)置，超鏈接分為四種狀態(tài)。a:li
7、nk：初始狀態(tài)的超鏈接。a:visited：超鏈接被訪問(wèn)過(guò)后的狀態(tài)a:hover：光標(biāo)移到超鏈接上的狀態(tài)。a:active：超鏈接被激活時(shí)的狀態(tài)，即在超鏈接上按下鼠標(biāo)時(shí)的狀態(tài)5.1CSS樣式的建立與編輯在此以對(duì)超鏈接的設(shè)置為例，分別四種高級(jí)樣式進(jìn)行設(shè)置，操作步驟如下。（1）設(shè)置a:link1）打開“CSS樣式”面板，單擊面板中新建CSS規(guī)則按鈕，打開新建CSS規(guī)則對(duì)話框。2）“選擇器類型”項(xiàng)選擇“高級(jí)”，“選擇器”下拉列表框中選擇a
