1、第6章 CSS樣式表入門本章介紹的主要內容有： CSS樣式表簡介創(chuàng)建CSS樣式表的方法 內部CSS樣式表的應用 鏈接外部CSS樣式表 在代碼視圖編輯CSS樣式表為何要用用CSS樣式表表？能給人賞賞心悅目目、工工工整整的的感覺內容和形形式的分分離便于于站點的的維護簡練代碼碼，縮短短瀏覽器器加載的的時間DW很多地方方是基于于CSS的6.1CSS樣式表基基礎6.1.1認識CSSCSS是CascadingStyleSheets（層疊樣樣式表）的簡稱稱1CSS樣式的類類型(選擇器的的類型)類樣式：（可應應用于頁頁面任何何標簽）。HTML標簽樣式式：重定定義HTML標簽樣式式。高級樣式式：（重重新定義義特

2、定元元素組合合的格式式，tdh2,重定義包包含特定定id屬性的標標簽格式式，#mystyle）。內聯(lián)樣式式表外部樣式式表2CSS規(guī)則CSS格式設置置規(guī)則由由兩部分分組成：選擇器器和聲明明h1font-size: 16 pixels;font-family:宋體;font-weight:bold;在這個CSS規(guī)則中，h1是選擇器器，介于于大括號號之間的所所有內容容都是聲聲明塊。各個聲明明由兩部部分組成成：屬性性（如font-family）和值（如16pixels）。6.1.2對樣式表表操作的的三種方方式1第一種種方式執(zhí)行【窗口】【CSS樣式】命令，打打開【CSS樣式】面板2第二種種方式3第三種種

3、方式在空白處處右擊6.1.3“CSS樣式”面面板樣式表文件名CSS規(guī)則列表屬性和屬性值列表工具按鈕欄在Dreamweaver中，“CSS樣式”面面板是新新建、編編輯、管管理CCS的主要工工具。選選擇“窗窗口”|“CSS樣式”命命令可以以打開或或者關閉閉“CSS樣式”面面板。類別視圖6.2新建CSS規(guī)則和應應用CSS樣式6.2.1定義樣式式表選項項在【CSS樣式】面板上，單擊【新建CSS規(guī)則】按鈕，打打開【新建CSS規(guī)則】對話框。1【定義在】選項（1）【新建樣式式表文件件】（2）【僅對該文文檔】2【選擇器類類型】選項（1）【類（可應應用于任任何標簽簽）】（2）【標簽（重重新定義義特定標標簽的外外

4、觀）】（3）【高級（ID、偽類選選擇器等等）】3【名稱】文本框在這個文文本框中中輸入CSS規(guī)則名稱稱。根據據所選擇擇的“選選擇器類類型”的的不同，這里可以以輸入或或者選擇擇 不同同的名稱稱。6.2.2在網頁中中應用樣樣式1在【屬性】面板選擇擇應用樣樣式2利用【標簽選擇擇器】選擇樣式式3使用右右鍵快捷捷菜單(套用)4清除樣樣式Css樣樣式定義義的分類類說明類型對對文字字的字體體、大小小、顏色色、效果果等基本本樣式進進行設置置。背景對對元素素的背景景進行設設置，一一般對頁頁面、表表格、區(qū)區(qū)域的設設置區(qū)塊設設置對象文本本的文字間間距、對對齊方式式、上標標、下標標、排列列方式、首行縮縮進等方框設設置對

5、象的邊界、間距、高度、寬度和和漂浮方方式等邊框設設置對象象邊框的的寬度、顏色及及樣式列表設設置列表表樣式、列表項項圖像和和位置定位相相當與對對象放在在一個層層里來定定位，它它相當于于HTML的DIV標標記擴展設設置打印印網頁時時或者是是對象視視覺顯示示效果6.3創(chuàng)建和應應用CSS樣式6.3.1控制瀏覽覽器中的的文字大大小：“穩(wěn)定性性”6.3.2設置行間間距：使使不大不不小，美美觀6.3.3為圖片加上上邊框效效果：可可隨意設設置邊框框顏色6.3.4利用“自自定義樣樣式表”改變鼠鼠標指針針的形態(tài)態(tài)hand：是大家家所熟悉悉的手型型。crosshair：是十字字型。text：是平時時鼠標移移動到文文

6、本上的的樣式。wait：是等待待的效果果。default：是默認認的那種種效果。help：是帶問問號的鼠鼠標樣式式。e-resize：是向右右的箭頭頭。ne-resize：是向右右上方的的箭頭。n-resize：是向上上的箭頭頭。nw-resize：是向左左上方的的箭頭。w-resize：是向左左的箭關關。sw-resize：是向左左下的箭箭頭。s-resize：是向下下的箭頭頭。se-resize：是向右右下方的的箭頭。auto：是系統(tǒng)統(tǒng)自動的的效果。6.3.5利用有關關鏈接的的樣式表表修改鏈鏈接的格格式a:link定義了鏈鏈接文字字的樣式式。a:visited瀏覽者已已經訪問問過的鏈鏈接樣

7、式式。a:hover定義了鼠鼠標懸浮浮在鏈接接文字上上時的樣樣式。a:active定義鏈接接被激活活時的樣樣式，即即鼠標已已經單擊擊了鏈接接，但頁頁面還沒沒有跳轉轉時。6.3.6控制頁面面背景圖圖像的樣樣式執(zhí)行【修改】【頁面屬性性】命令，彈彈出【頁面屬性性】對話框。通過重新新定義body標簽的CSS規(guī)則來控控制網頁頁的背景景圖像。6.3.7利用自定定義樣式式表制作作項目圖圖標定義一個個類控制制器，設設置這個個CSS規(guī)則的“列表”屬性，然后將將CSS規(guī)則應用用在HTML文檔的ul或者ol標簽上。6.3.8CSS樣式濾鏡鏡的應用用下面是各各個濾鏡鏡的意義義：Alpha：設置透透明度。Blur：建立

8、模模糊效果果Chroma：把指定定的顏色色設置為為透明。DropShadow：建立一一種偏移移的影像像輪廓，即投射射陰影。FlipH：水平反反轉。FlipV：垂直反反轉。Glow：為對象象的外邊邊界增加加光效。Grayscale：降低圖圖片的彩彩色度。Invert：將色彩彩、飽和和度及亮亮度值完完全反轉轉建立底底片效果果。Light：在一個個對象上上進行燈燈投影。Mask：為一個個對象建建立透明明膜。Shadow：建立一一個對象象的固體體輪廓，即陰影影效果。Wave：在X軸和Y軸方向用用正弦波波紋打亂亂圖片。Xray：只顯示示對象的的輪廓舉例說明明:Blur(Add=true,Directio

9、n=135,Strength=10)6.4外部CSS樣式表6.4.1建立外部部CSS樣式表文文件并定定義文字字和段落落樣式6.4.2定義表格格樣式通過重新新定義table標簽控制制網頁中中的表格格的外觀觀。6.4.3定義超級級鏈接樣樣式通過定義義a:link和a:hover兩個高級級樣式來來控制網網頁中的的超級鏈鏈接的外外觀。6.4.4定義特殊殊段落的的樣式網頁中經經常會有有一些特特殊段落落，比如如程序代代碼等，為了讓讓這些特特殊段落落和其他他段落區(qū)區(qū)分開來來，本小小節(jié)再定定義一個個特殊段段落的樣樣式。6.4.5鏈接外部部CSS樣式表在【CSS樣式】面板上單單擊【附加樣式式表】按鈕，在在彈出的

10、的【鏈接外部部樣式表表】對話框中中的【添加為】單選項中中選擇【鏈接】，然后單單擊“瀏瀏覽”按按鈕鈕，選擇擇創(chuàng)建的的外部樣樣式表文文件“mycss.css”。6.4.6在網頁中中應用外外部CSS樣式表（1）因為控控制超鏈鏈接和表表格的CSS規(guī)則，是是用相應應的標簽簽重新定定義得到到的，所所以網頁頁中的超超鏈接和和表格會會自動應應用樣式式。（2）我們可可以將.text樣式應用用到標簽上，這樣網網頁中的的文字都都被.text這個樣式式控制外外觀。（3）對于網網頁中的的程序代代碼段落落，可以以用.teshu樣式來控控制外觀觀。6.5在【代碼視圖圖】手動添加加和編輯輯CSS6.5.1CSS樣式表的的標記

11、和和語句格格式1內聯(lián)樣樣式表的的代碼結結構CSS樣式代碼樣式表的的代碼一一般格式式：樣式表名名稱屬性1:屬性1值;屬性2:屬性2值;2類選擇擇器的CSS代碼結構構應用類標標識符樣樣式時，都是通通過class屬性的設設置實現現的：class=myCSS_Class在“代碼碼視圖”下，通通過手動動添加代代碼，編編輯某個個HTML標簽的class屬性，就就可以讓讓這個HTML標簽控制制范圍內內的元素素應用類類選擇符符樣式。3ID選擇器的的CSS代碼結構構應用ID選擇器樣樣式時，都是通通過HTML標簽的id屬性的設設置實現現的：id=myCSS_ID“ID屬性是HTML標簽的一一個重要要屬性，一個網網

12、頁中的的標簽的的ID屬性值不不能重復復，因此此在利用用ID屬性應用用標識選選擇符CSS樣式時，只能應應用于一一個標簽簽。如果果應用于于多個標標簽，就就會造成成標簽的的ID屬性沖突突。4鏈接外外部樣式式表的代代碼結構構網頁文檔檔鏈接了了外部CSS樣式文件件后，在在代碼視視圖中，可以觀觀察到head標簽中增增加了一一行類似似于下面面的代碼碼：這就是鏈鏈接外部部CSS樣式文件件的代碼碼。6.5.2通過編輯輯CSS代碼改變變網頁滾滾動條的的外觀在網頁代代碼和之間插入入下面的的代碼：body SCROLLBAR-FACE-COLOR:#3333FF;/立體滾動動條凸出出部分的的顏色SCROLLBAR-HIGHLIGHT-COLOR:#505050;/滾動條空空白部分分的顏色色SCROLLBAR-SHADOW-COLOR:#fc2400;/立體滾動動條陰影影的顏色色SCROLLBAR-ARROW-COLOR:#666666;/上下按鈕鈕上三角角箭頭的的顏色SCROLLBAR-BASE-COLOR:#333333;/滾動條的的基本顏顏色SCROLLBAR-DARK-SHADOW-COLOR:#b4f