Dreamweaver中CSS樣式-文檔資料

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

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

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

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

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

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

7、框144. 刪除某個樣式 在CSS樣式面板上，選中要刪除的樣式。單擊CSS樣式面板右上角的“顯示菜單”按鈕，打開面板菜單；或者在面板中單擊鼠標右鍵，打開快捷菜單，選擇“刪除”命令?；蛘邌螕裘姘宀藛斡蚁陆堑摹皠h除CSS樣式”命令按鈕。將刪除被選擇樣式，同時該樣式從樣式列表中消失。156.3 設置CSS樣式格式 在Dreamweaver中，通過CSS樣式定義對話框可以對CSS樣式格式進行精確定制，在CSS面板上新建CSS樣式時可以進行設置，或者通過可以打開如圖6-5所示CSS樣式定義對話框，從中可以看出，CSS共有8個選項。6.3.1 編輯文字格式 在CSS樣式定義對話框中單擊左邊的“類型”，右邊

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

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

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

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

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

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

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

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

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

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

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

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