Dreamweaver中CSS樣式-文檔資料

1、1第6章 CSS樣式2 本章主要內(nèi)容是CSS樣式的創(chuàng)建方法和它的應(yīng)用，并就如何編輯CSS樣式中的文字格式、背景格式、文本塊格式、方框格式、邊框格式、列表格式、定位格式、擴(kuò)展格式等作了詳細(xì)的講解，最后以一個(gè)實(shí)例說明了如何應(yīng)用CSS樣式對(duì)網(wǎng)頁進(jìn)行編輯。36.1 CSS樣式概述 CSS是層疊樣式表（Cascading Style Sheets）的簡稱，利用它可以對(duì)網(wǎng)頁中的文本內(nèi)容進(jìn)行精確的格式化控制。CSS樣式不僅能夠控制一篇文檔中的文本樣式，而且通過采用外部鏈接的方式，還可以控制多篇文檔的文本格式。對(duì)CSS樣式的定義進(jìn)行修改時(shí)，文檔中所有應(yīng)用該樣式的文本格式也會(huì)自動(dòng)發(fā)生改變。 CSS樣式通常用名稱

2、或是HTML標(biāo)記來表示，HTML文檔中的CSS樣式不僅可以控制大多數(shù)傳統(tǒng)的文本格式屬性，如字體、字號(hào)和對(duì)齊方式等，還可以定義一些特殊的HTML屬性，例如定位、特效和鼠標(biāo)輪替等。 CSS樣式的定義代碼一般書寫在HTML文檔的頭部，通常由一系列樣式的定義組成。它可以應(yīng)用到使用標(biāo)注HTML標(biāo)記所格式化的文本上，可以定義到通過class屬性所定義范圍的文本上，也可以應(yīng)用到其他的那些符合CSS標(biāo)準(zhǔn)規(guī)范的文本上。46.2 創(chuàng)建CSS樣式 CSS樣式最大的優(yōu)點(diǎn)是它具有自動(dòng)更新功能，當(dāng)應(yīng)用了CSS格式之后，如果不滿意，僅需要修改CSS樣式就可以更新所有的應(yīng)用，而不用像設(shè)置HTML樣式那樣一個(gè)一個(gè)地修改。6.2

3、.1 創(chuàng)建新CSS樣式 其操作步驟如下：1) 在Dreamweaver中，單擊“窗口”“CSS樣式”，打開CSS 樣式面板如圖6-1所示。圖6-1 CSS 樣式面板52) CSS樣式面板顯示在設(shè)計(jì)浮動(dòng)面板組，單擊面板組右上角的“顯示菜單”按鈕 ，彈出下拉菜單如圖6-2所示。圖6-2 CSS樣式的下拉菜單63) 從其中選擇“新建”選項(xiàng)卡?；蛘邌螕鬋SS樣式面板右下角的【新建CSS樣式】按鈕 ，打開如圖6-3所示的新建樣式對(duì)話框。圖6-3 新建樣式對(duì)話框74) 選擇CSS樣式類型： “類（可應(yīng)用于任何標(biāo)簽）”，可以生成一個(gè)新的樣式表，制作完畢后可以在樣式面板中看到制作完成的樣式。在應(yīng)用的時(shí)候，首先

4、在頁面選中對(duì)象，然后選擇樣式即可。該類型樣式名稱必須以英文句點(diǎn)“.”開頭，如果沒有輸入句點(diǎn)，Dreamweaver會(huì)自動(dòng)添加在“名稱”文本框中。它是唯一可以被應(yīng)用于文檔中任何文本的樣式類型，而不用考慮控制文本的標(biāo)簽。所以可用于類樣式的名稱都將顯示在樣式工具欄中。 選擇“標(biāo)簽（重新定義特定標(biāo)簽的外觀）”，可以將現(xiàn)有的標(biāo)簽賦上樣式，制作完畢以后不需要選中對(duì)象就可以直接應(yīng)用到頁面上去。 5) 定義一個(gè)外部連接的CSS還是定義一個(gè)僅應(yīng)用于當(dāng)前文檔的CSS。 “自定義”：定義一個(gè)外部連接的CSS。 “僅僅對(duì)該文檔”：定義的CSS樣式只能在當(dāng)前文檔中使用。86) 單擊【確定】按鈕，出現(xiàn)保存樣式表對(duì)話框，如

5、圖6-4所示。圖6-4 保存樣式表97) 選擇樣式表所保存的位置，單擊【保存】按鈕，出現(xiàn)CSS設(shè)置對(duì)話框如圖6-5所示，進(jìn)行相應(yīng)的屬性設(shè)置，單擊【確定】，一個(gè)CSS樣式創(chuàng)建成功。圖6-5 CSS設(shè)置對(duì)話框106.2.2 應(yīng)用CSS樣式1. 如果要在文檔中應(yīng)用樣式 操作方法如下：1) 將插入點(diǎn)放置在段落之中，即選擇了整個(gè)段落，可以對(duì)其設(shè)置格式；也可以選中多個(gè)段落，對(duì)多個(gè)段落設(shè)置格式；選擇某些字符還可以對(duì)這些字符設(shè)置格式。2) 在CSS樣式面板中，用鼠標(biāo)點(diǎn)擊某個(gè)定義好的樣式，則該CSS樣式就會(huì)應(yīng)用在這些文檔上。112. 應(yīng)用外部鏈接式CSS樣式1) 打開CSS樣式面板。2) 單擊CSS樣式面板右下

6、角的【附加樣式表】按鈕，出現(xiàn)如圖6-6所示“鏈接外部樣式表”對(duì)話框。3) 單擊【瀏覽】按鈕，從所保存的CSS文件中選取一個(gè)，即可應(yīng)用。圖6-6 “鏈接外部樣式表”對(duì)話框123. 在現(xiàn)有樣式的基礎(chǔ)上創(chuàng)建新樣式1) 在CSS樣式面板上，選中作為基礎(chǔ)的樣式。2) 單擊CSS樣式面板右上角的“顯示菜單”按鈕，打開面板菜單；或者在面板中單擊鼠標(biāo)右鍵，打開快捷菜單，如圖6-7所示。圖6-7 CSS樣式的快捷菜單133) 選擇“重制”命令，系統(tǒng)彈出如圖6-8所示對(duì)話框，并顯示該樣式的設(shè)置。4) 在對(duì)話框中選擇新樣式的類型和定義，輸入新的名稱。5) 單擊【確定】按鈕，確定操作。圖6-8 “重制CSS樣式”對(duì)話

7、框144. 刪除某個(gè)樣式 在CSS樣式面板上，選中要?jiǎng)h除的樣式。單擊CSS樣式面板右上角的“顯示菜單”按鈕，打開面板菜單；或者在面板中單擊鼠標(biāo)右鍵，打開快捷菜單，選擇“刪除”命令。或者單擊面板菜單右下角的“刪除CSS樣式”命令按鈕。將刪除被選擇樣式，同時(shí)該樣式從樣式列表中消失。156.3 設(shè)置CSS樣式格式 在Dreamweaver中，通過CSS樣式定義對(duì)話框可以對(duì)CSS樣式格式進(jìn)行精確定制，在CSS面板上新建CSS樣式時(shí)可以進(jìn)行設(shè)置，或者通過可以打開如圖6-5所示CSS樣式定義對(duì)話框，從中可以看出，CSS共有8個(gè)選項(xiàng)。6.3.1 編輯文字格式 在CSS樣式定義對(duì)話框中單擊左邊的“類型”，右邊

8、區(qū)域顯示可以設(shè)置的有關(guān)文字格式方面的CSS樣式。其中：1)字體：可以在下拉菜單中設(shè)置當(dāng)前樣式所用的字體。2)大?。海O(shè)置字體的大小。可以通過選擇數(shù)字和單位來指定字體，如“磅”、“像素”、“英寸”、“厘米”等，也可以選擇相對(duì)的字體大小，如“極小、“特小”等。163)樣式：通過選擇“正?！?、“斜體”或“偏斜體”來設(shè)置字體的特殊格式，4)行高：設(shè)置文本的行高。選擇“正常”，則由系統(tǒng)自動(dòng)計(jì)算字體的行高和大小；也可以通過輸入一個(gè)精確的數(shù)值并選擇其計(jì)算單位，來具體指定行高。5)粗細(xì)：對(duì)字體應(yīng)用指定的或相對(duì)的粗細(xì)度，有“正?！薄ⅰ按煮w”、“特粗”和“細(xì)體”等。其中“正?！钡扔?00，“粗體”一般為700。6

9、)變量：允許設(shè)置字體的變體形式，有“正常”和“小型大寫字母”。7)大小寫：可以設(shè)置字符的大小寫方式?！笆鬃帜复髮憽?，可以指定將每個(gè)單詞的第一個(gè)字符大寫；“大寫”或“小寫”可以分別將別選擇的文本設(shè)置為大寫或小寫；“無”保持字符本身原有的大小寫格式。8)修飾：可以設(shè)置字體的一些修飾格式。“下劃線”、“上劃線”、“刪除線”、“閃爍”和“無”。9)顏色：用于設(shè)置文字的顏色。176.3.2 編輯背景格式在CSS樣式定義對(duì)話框中單擊左邊的“背景”，右邊區(qū)域顯示可以設(shè)置CSS樣式的背景格式，如圖6-9所示。圖6-9 編輯CSS樣式背景格式18其中：1)背景顏色：設(shè)置樣式的背景顏色。2)背景圖像：設(shè)置作為樣式

10、背景的圖像文件所在的URL地址：單擊【瀏覽】按鈕可以從磁盤中選擇某一個(gè)圖像文件。3)重復(fù)：可以設(shè)置是否允許背景圖像被重復(fù)?！安恢貜?fù)”只在應(yīng)用樣式的元素開始部分顯示一次圖像；“重復(fù)”在應(yīng)用樣式的元素背景上縱向和橫向重復(fù)顯示該圖像；“橫向重復(fù)”相應(yīng)的顯示圖像的橫向重復(fù)延伸；“縱向重復(fù)”相應(yīng)的顯示圖像的縱向重復(fù)延伸。4)附件：設(shè)定當(dāng)拖動(dòng)瀏覽器滾動(dòng)條瀏覽滾動(dòng)頁面時(shí)，背景圖像是固定在它的原始位置，還是同內(nèi)容一起滾動(dòng)?！肮潭ā北砻鞅尘皥D像固定在原始位置；“滾動(dòng)”表明背景圖像可以滾動(dòng)。 有些瀏覽器會(huì)將固定方式始終作為滾動(dòng)方式來處理。5)水平位置和垂直位置：設(shè)置背景圖像相對(duì)于文檔窗口的水平和垂直位置。196.

11、3.3 編輯文本塊格式 在CSS樣式定義對(duì)話框中單擊左邊的“區(qū)塊”，右邊區(qū)域顯示可以設(shè)置CSS樣式的區(qū)塊格式，如圖6-10所示。圖6-10 編輯CSS樣式的塊格式201)單詞間距：可以在文字直接添加空格?？梢暂斎胍粋€(gè)數(shù)值，并在其右方的下拉列表中選擇設(shè)置數(shù)值的單位；如果輸入負(fù)值，顯示的效果會(huì)由瀏覽器來決定。該選項(xiàng)會(huì)受到頁邊距調(diào)整的影響。2)字母間距：可以在字符直接添加空格。如果輸入負(fù)值，其顯示由瀏覽器決定。該選項(xiàng)可以覆蓋由頁邊調(diào)整產(chǎn)生的字母之間的多余空格。3)垂直對(duì)齊：可以設(shè)置各元素相對(duì)于上一級(jí)的縱向?qū)R方式。如果輸入數(shù)值，顯示的是一個(gè)百分比。除了應(yīng)用于IMG標(biāo)簽的情況，該設(shè)置不會(huì)顯示在Drea

12、mweaver的文檔窗口中。4)文本對(duì)齊：設(shè)置文本中元素的對(duì)齊方式。5)文字縮進(jìn)：設(shè)置文本首行縮進(jìn)的距離。如果輸入為負(fù)值時(shí)等于創(chuàng)建了文本凸出（反縮進(jìn)），其顯示取決于瀏覽器。只有當(dāng)標(biāo)簽應(yīng)用于文本塊時(shí)，該設(shè)置才會(huì)顯示在Dreamweaver的文檔窗口中。216)空格：設(shè)置在應(yīng)用樣式元素時(shí)空格的處理方法?！罢！北硎景凑照５姆椒ㄌ幚砜崭?，多個(gè)空格當(dāng)做一個(gè)空格來對(duì)待；“保留”表示保留所有的原始空格形象，比如空格、跳格和回車符等，都作為文本用PRE標(biāo)簽包圍；“不換行”表示設(shè)定文本不會(huì)自動(dòng)換行，只有使用換行標(biāo)記BR才換行。該設(shè)置不會(huì)顯示在Dreamweaver的文檔窗口中。7)顯示：可以設(shè)置哪些元素被顯

13、示以及如何顯示。226.3.4 編輯方框格式 在CSS樣式定義對(duì)話框中單擊左邊的“方框”，右邊區(qū)域顯示可以設(shè)置CSS樣式的框格式，如圖6-11所示。圖6-11 編輯CSS樣式框格式23其中：1)寬和高：設(shè)置元素的大小尺寸。選擇“自動(dòng)”由瀏覽器自行控制；輸入一個(gè)數(shù)值，并在其右邊的下拉列表中選擇數(shù)值的單位，可以固定元素的大小和尺寸。只有在被應(yīng)用于圖像或?qū)訒r(shí)，Dreamweaver的文檔窗口中才會(huì)顯示該屬性。2)浮動(dòng)：設(shè)置元素的的浮動(dòng)位置。頁面不并移動(dòng)，將元素放置在頁面邊緣的左側(cè)或右側(cè)時(shí)，其他元素會(huì)圍繞該元素。只有在被用于IMG標(biāo)簽時(shí)，才會(huì)在Dreamweaver的文檔窗口中顯示該屬性。3)清除：定

14、義元素的某個(gè)邊側(cè)不允許有層出現(xiàn)。如果分層出現(xiàn)在被設(shè)置清除的元素的一邊，該元素會(huì)被移動(dòng)到層的下面。只有在被用于IMG標(biāo)簽時(shí)，才會(huì)在Dreamweaver的文檔窗口中顯示該屬性。244)填充：定義元素的內(nèi)容和邊框之間的空間大小。該設(shè)置不會(huì)顯示在Dreamweaver的文檔窗口中。5)邊界：定義元素邊緣和其他元素之間的空間大小。只有在被應(yīng)用于文本塊一類的元素時(shí)，才會(huì)在Dreamweaver的文檔窗口中顯示該屬性。256.3.5 編輯邊框格式 在CSS樣式定義對(duì)話框中單擊左邊的“邊框”，右邊區(qū)域顯示可以設(shè)置CSS樣式的邊框格式，如圖6-12所示。其中：1)樣式：設(shè)置邊框的樣式，“點(diǎn)劃線”表明邊框是點(diǎn)線

15、形，“虛線”表明邊線是虛線形。通過上、右、下和左可以分別設(shè)置四個(gè)邊的風(fēng)格，“全部相同”表示四邊邊框線的風(fēng)格一致。2)寬度：定義應(yīng)用該樣式的元素邊框的寬度。細(xì)、中、粗和數(shù)值可以作為相應(yīng)的寬度選項(xiàng)。3)顏色：可以設(shè)置邊框?qū)?yīng)位置的顏色。圖6-12 編輯CSS樣式邊框格式266.3.6 編輯列表格式 在CSS樣式定義對(duì)話框中單擊左邊的“列表”，右邊區(qū)域顯示可以設(shè)置CSS樣式的列表格式，如圖6-13所示。其中：1)類型：在下拉列表中，可以選擇無序列表或者有序項(xiàng)目的符號(hào)或編號(hào)的外觀類型。2)項(xiàng)目符號(hào)圖像：可以設(shè)置以圖片作為列表項(xiàng)目的符號(hào)。通過直接在文本框中輸入圖片文件的URL地址，或單擊【瀏覽】按鈕，從

16、磁盤上選擇圖片文件。3)位置：可以設(shè)置列表項(xiàng)換行時(shí)是縮進(jìn)還是邊緣對(duì)齊。圖6-13 編輯CSS樣式列表格式276.3.7 編輯定位格式 在CSS樣式定義對(duì)話框中單擊左邊的“定位”，右邊區(qū)域顯示可以設(shè)置CSS樣式的定位格式，如圖6-14所示。其中：1)類型：在下拉列表中，可以選擇設(shè)置瀏覽器中分層的放置方式。 “絕對(duì)”使用在Placement框中輸入的相對(duì)于頁面左上角的絕對(duì)坐標(biāo)放置分層。 “相對(duì)”使用在Placement框中輸入的坐標(biāo)放置分層，該坐標(biāo)是相對(duì)于文檔中的對(duì)象位置。 “靜態(tài)”將層定位在文本自身的位置。圖6-14 編輯CSS樣式定位格式282) 寬和高：設(shè)置層的位置和大小。3)定位：指定層的

17、位置和大小。它的具體使用依賴于類型部分的設(shè)置，分為上、右、下和左四個(gè)部分。4) 顯示：決定層的初始顯示狀態(tài)，如果沒有設(shè)置該屬性，在默認(rèn)狀態(tài)下，大多數(shù)瀏覽器將繼承其上級(jí)的值。 “繼承”繼承層的上一級(jí)的可見性屬性。 “可見”顯示各個(gè)分層的內(nèi)容，而不考慮其上級(jí)元素。 “隱藏”隱藏層的內(nèi)容，而不考慮其上級(jí)元素。5) Z軸：在下拉列表中可以選擇定義分層的疊放順序。編號(hào)高的分層顯示在編號(hào)低的分層之上。其數(shù)值可以為正也可以為負(fù)。296)溢出：如果在分層中的內(nèi)容超出了分層的邊界，在此決定處理方式。 可見：當(dāng)分層中的內(nèi)容超出分層的邊界時(shí)，分層會(huì)自動(dòng)向下或向右擴(kuò)展它的大小，以容納分層的內(nèi)容，使之可見。 隱藏：當(dāng)分

18、層中的內(nèi)容超出分層的邊界時(shí)，分層大小不變，也不出現(xiàn)滾動(dòng)條，超出邊界的內(nèi)容不顯示。 滾動(dòng)：無論分層中的內(nèi)容是否超出分層范圍，分層上總會(huì)出現(xiàn)滾動(dòng)條，利用滾動(dòng)條進(jìn)行瀏覽。 自動(dòng)：在分層中的內(nèi)容超出分層的邊界時(shí)，出現(xiàn)滾動(dòng)條以便顯示所有分層內(nèi)容。7) 剪輯：可以定義分層可見部分的位置和大小。如果指定了碎片區(qū)域，可以通過腳本語言如JavaScript來對(duì)其進(jìn)行操作，例如可以輸入其屬性以創(chuàng)建特殊效果。306.3.8 編輯擴(kuò)展格式 在CSS樣式定義對(duì)話框中單擊左邊的“擴(kuò)展”，右邊區(qū)域顯示可以設(shè)置CSS樣式的擴(kuò)展格式，如圖6-15所示。圖6-15 編輯CSS樣式擴(kuò)展格式31 擴(kuò)展樣式更多的是對(duì)自定義功能的擴(kuò)展，

19、可能不被某些瀏覽器所支持。其中：1)分頁：可以設(shè)置在打印頁面時(shí)強(qiáng)制分頁的位置。在“之前”和“之后”的下拉列表中，可分別設(shè)置分頁前和分頁后的位置。此屬性只有4.0以上版本的瀏覽器支持。2) 視覺效果：可以設(shè)置樣式的一些可視效果。 光標(biāo)：用于設(shè)置當(dāng)鼠標(biāo)掠過被樣式控制的對(duì)象時(shí)的指針外觀。如選擇hand，鼠標(biāo)指針會(huì)變?yōu)椤笆中巍?，只?.0及其以上版本的瀏覽器支持此屬性。 過濾鏡：在其下拉菜單中選擇需要的特效，對(duì)被樣式控制的對(duì)象指定特殊的效果，包括模糊和反轉(zhuǎn)，只有4.0及其以上版本的瀏覽器支持此屬性。32 利用編輯CSS樣式對(duì)話框可以對(duì)CSS樣式進(jìn)行編輯。其步驟如下：1) 在樣式面板空白處單擊鼠標(biāo)右鍵，從彈出的菜單中選擇“編輯”命令；或者從CSS面板菜單的右下角處選擇【編輯樣式】按鈕。打開如圖6-16所示編輯樣式對(duì)話框。2) 選擇要編輯的樣式，單擊【編輯】按鈕，打開如圖6-15所示選擇編輯CSS樣式對(duì)話框。3) 選中要編輯的樣式，可以鏈接外部樣式表，可以新建一個(gè)樣式，可以編輯、復(fù)制和刪除CSS樣式。圖6-16編輯樣式對(duì)話框6.4 編輯管理CSS樣式336.5 將CSS樣式轉(zhuǎn)換為HTML標(biāo)記 CSS樣式只能在4.0或更高版