使用CSS樣式美化和布局網(wǎng)項目管理知識

使用CSS樣式美化和布局網(wǎng)頁項目7知識要點

了解CSS基本概念1掌握CSS樣式的創(chuàng)建和使用方法2掌握CSS樣式屬性設(shè)置方法37.1網(wǎng)頁展示：在“商旅管理”頁面中應(yīng)用CSS樣式

在“商旅管理”頁面中應(yīng)用CSS樣式在“樂途網(wǎng)”站點的“ch7”文件夾中創(chuàng)建“商旅管理”頁面ctmindex.html，運用表格布局頁面，插入網(wǎng)頁中相關(guān)的內(nèi)容，再創(chuàng)建CSS樣式，對網(wǎng)頁內(nèi)容進行美化，效果如圖所示。

7.2網(wǎng)頁制作7.2.1使用表格布局制作“商旅管理頁面”

步驟1啟動DreamweaverCS4，新建HTML文檔，將文檔命名為ctmindex.html，保存在“樂途網(wǎng)”站點根目錄下的“ch7”文件夾中。 步驟2按照制作“樂途網(wǎng)”首頁的方式，在ctmindex.html中插入表格，對“商旅管理”頁面進行布局。 步驟3在表格中對應(yīng)位置插入相應(yīng)圖片或文本，并設(shè)置表格或單元格的背景顏色，完成“商旅管理”頁面的制作

7.2網(wǎng)頁制作7.2.2創(chuàng)建文本CSS樣式

步驟1打開“商旅管理”子頁（ctmindex.html），按下Shift+F11組合鍵，打開【CSS樣式】面板，單擊“新建CSS規(guī)則”按鈕，打開【新建CSS規(guī)則】對話框。 步驟2在【選擇器類型】選項組中選擇“類（可以應(yīng)用于任何HTML元素）”。在【選擇器名稱】下拉列表框中輸入類樣式的名稱：.black12。在【規(guī)則定義】選項組中選擇“新建樣式表文件”，若選擇“僅限該文檔”，則該樣式只能應(yīng)用在當前網(wǎng)頁中。7.2網(wǎng)頁制作 步驟3單擊“確定”按鈕，彈出【將樣式表文件另存為】對話框。將CSS規(guī)則定義在mycss.css文件中，保存在站點目錄下“ch7”文件夾中。 步驟4單擊“保存”按鈕，彈出【.black12的CSS規(guī)則定義】對話框，設(shè)置.black12類樣式的屬性。在【分類】中選擇【類型】，設(shè)置字體大小為“12px”，行高為“20px”，顏色為“#000”，修飾設(shè)置為無。單擊“確定”按鈕，完成.black12的CSS規(guī)則的定義。7.2網(wǎng)頁制作7.2.3創(chuàng)建表格CSS樣式

步驟1在【CSS樣式】面板中，單擊“新建CSS規(guī)則”按鈕，在【新建CSS規(guī)則】對話框中定義名稱為.talbe1的類樣式，將樣式規(guī)則定義在已經(jīng)保存的mycss.css樣式表文件中。 步驟2單擊“確定”按鈕，打開【.table1的CSS規(guī)則定義】對話框。選擇【分類】中的【背景】，設(shè)置表格背景顏色為“#9C0”。 步驟3選擇【分類】中的【邊框】，設(shè)置邊框的樣式、寬度和顏色。單擊“確定”按鈕，完成.table1樣式規(guī)則的定義。7.2網(wǎng)頁制作7.2.4創(chuàng)建超級鏈接CSS樣式 步驟1在【CSS樣式】面板中，單擊“新建CSS規(guī)則”按鈕，打開【新建CSS規(guī)則】對話框。在【選擇器類型】下拉列表框中選擇“復(fù)合內(nèi)容（基于選擇的內(nèi)容）”，設(shè)置網(wǎng)頁中各種超級鏈接的風(fēng)格。 步驟2在【選擇器名稱】中選擇【a:link】，將規(guī)則定義在mycss.css文件中，單擊【確定】按鈕，打開【a:link的CSS規(guī)則定義】對話框。選擇【分類】中的【類型】，設(shè)置字體大小為“12px”，顏色為“#06F”，修飾為無（表示無下劃線。單擊“確定”按鈕，完成a:link樣式規(guī)則的定義。7.2網(wǎng)頁制作 步驟3同定義a:link的CSS規(guī)則方法一樣，在步驟1對話框中選擇【a:visited】，在【a:visited的CSS規(guī)則定義】對話框中設(shè)置a:visited超鏈接樣式。 步驟4以相同的方法，在mycss.css文件中定義a:hover超鏈接樣式。7.2網(wǎng)網(wǎng)頁頁制作應(yīng)應(yīng)用類類CSS樣式下面來應(yīng)應(yīng)用創(chuàng)建建好的CSS樣樣式美化化頁面。。因為在在創(chuàng)建““.black12””、“.table””以及超超級鏈接接樣式時時，“商商旅管理理”欄目目網(wǎng)頁（（ctmindex.html）為為當前打打開頁面面，因此此，可以以直接應(yīng)應(yīng)用mycss.css樣式式表文件件中的CSS樣樣式。步驟1在在““商旅管管理”網(wǎng)網(wǎng)頁（ctmindex.html）的設(shè)設(shè)計視圖圖中，用用鼠標選選中商旅旅管理介介紹的文文本。步驟2在在【【屬性】】面板的的【類】】下拉列列表中選選擇類樣樣式“black12”，如如圖所示示，這樣樣所選中中的文本本就設(shè)置置成“black12”所定定義的樣樣式?！緦傩浴俊棵姘逯兄羞x擇樣樣式7.2網(wǎng)網(wǎng)頁頁制作步驟3選選中中要應(yīng)用用“table1”CSS樣樣式的表表格，如如圖所示示。步驟4在在【【屬性】】的面板板的【類類】下拉拉列表中中選擇““table1”樣式式，如圖圖所示，，將所選選中的表表格設(shè)置置為“table1””樣式。。選中要應(yīng)應(yīng)用“table1””樣式的的表格在【屬性性】面板板中設(shè)置置類樣式式7.2網(wǎng)網(wǎng)頁頁制作主主頁應(yīng)應(yīng)用CSS樣式式表文件件步驟1在在右右側(cè)【文文件】浮浮動面板板中，鼠鼠標雙擊擊打開““樂途網(wǎng)網(wǎng)”首頁頁index.html。步驟2單單擊擊【CSS樣式式】面板板中的【【附加樣樣式表】】命令，，或者直直接單擊擊面板下下的“附附加樣式式表”按按鈕，打打開【鏈鏈接外部部樣式表表】對話話框。步驟3在在““文件/URL”文本本框中輸輸入mycss.css的路路徑及文文件名，，也可單單擊“瀏瀏覽”按按鈕從對對話框中中選擇該該文件。。7.2網(wǎng)網(wǎng)頁頁制作步驟4在在““添加為為”設(shè)置置區(qū)域，，選擇添添加該樣樣式的方方式，有有“鏈接接”和““導(dǎo)入””兩種方方式。如果選中中“鏈接接”單選選按鈕，，然后單單擊“確確定”按按鈕，則則會在頁頁面的頭頭部插入入以下代代碼。<linkhref="mycss.css"rel="stylesheet"type="text/css"/>即通過<link>標標簽將樣樣式表文文件mycss.css與網(wǎng)網(wǎng)頁文檔檔鏈接。。7.2網(wǎng)網(wǎng)頁頁制作如果選中中“導(dǎo)入入”單選選按鈕，，然后單單擊“確確定”按按鈕，則則會在網(wǎng)網(wǎng)頁頭部部的<style>和和</style>標標簽之間間插入下下列代碼碼。@importurl("mycss.css");也就是說說，通過過@import標簽簽實際上上將mycss.css中的的內(nèi)容嵌嵌入到網(wǎng)網(wǎng)頁文檔檔的代碼碼中。步驟5附附加加樣式表表后，在在當前網(wǎng)網(wǎng)頁文檔檔中就可可以應(yīng)用用mycss.css樣式表表文件中中所定義義的CSS樣式式了。7.3知知識鏈鏈接CSS簡簡介認識【CSS樣樣式】面面板管理CSS樣式式設(shè)置CSS樣式式屬性簡簡介1.CSS及及其作用用CSS是是CascadingStyleSheets的英英文縮寫寫，即層層疊樣式式表。CSS是是一種用用來進行行網(wǎng)頁風(fēng)風(fēng)格設(shè)計計的樣式式表技術(shù)術(shù)。使用用CSS可以對對網(wǎng)頁中中文本的的大小、、字體、、顏色、、邊框、、鏈接狀狀態(tài)等內(nèi)內(nèi)容進行行統(tǒng)一設(shè)設(shè)置，保保證站點點頁面的的整體風(fēng)風(fēng)格一致致。7.3.1CSS簡介2.CSS的特點點（1）創(chuàng)建建一個CSS樣式，，可以用于于多個網(wǎng)頁頁文檔。（2）若修修改了某個個CSS樣樣式，則文文檔中所有有應(yīng)用該樣樣式的文檔檔格式都會會自動進行行更新。（3）CSS樣式可可以為網(wǎng)頁頁中的元素素設(shè)置各種種過濾器，，從而產(chǎn)生生特殊效果果，如陰影影、輝光、、模糊和透透明等。（4）可以以精確地控控制網(wǎng)頁中中元素的位位置。（5）由于于是直接的的HTML格式的代代碼，因而而網(wǎng)頁打開開速度比較較快。（6）使用用CSS可可以將設(shè)計計部分剝離離出來放在在一個獨立立樣式文件件中，讓多多個網(wǎng)頁文文件共同使使用，省去去在每一個個網(wǎng)頁文件件中都要重重復(fù)設(shè)置樣樣式的麻煩煩。（7）CSS有很好好的兼容性性，只要是是可以識別別CSS樣樣式的瀏覽覽器都可以以應(yīng)用它。。（8）CSS容易編編寫，在Dreamweaver中提提供相應(yīng)的的輔助工具具。7.3.1CSS簡介3.CSS的語法法規(guī)則CSS格式式設(shè)置規(guī)則則由兩部分分組成：選選擇器和聲聲明塊。在下面的示示例中，h1

是選選擇器，介介于大括號號“{}””之間的所所有內(nèi)容都都是聲明塊塊：h1{font-size:16pixels;font-family:Helvetica;font-weight:bold;}在DreamweaverCS4中中可以定義義以下樣式式類型：（1）類樣樣式（2）HTML標簽樣樣式（（3）高級級樣式7.3.1CSS簡介4.CSS的保存存方式CSS樣式式表可以保保存在網(wǎng)頁頁內(nèi)部或者者網(wǎng)頁外部部：（1）保存存在網(wǎng)頁內(nèi)內(nèi)部：將CSS樣式式保存在當當前網(wǎng)頁<head>與</head>之間的的style標簽中中，樣式只只對當前網(wǎng)網(wǎng)頁有效，，僅當前網(wǎng)網(wǎng)頁中的對對象才能應(yīng)應(yīng)用相應(yīng)的的樣式。（2）保存存在網(wǎng)頁外外部：將CSS樣式式保存在一一個獨立的的樣式表文文件中（.CSS）），在網(wǎng)頁頁中只要鏈鏈接該樣式式表文件，，就可以使使用其中的的樣式，多多個網(wǎng)頁可可以使用同同一樣式表表文件。7.3.2認識【【CSS樣樣式】面板板在Dreamweaver中中，可以使使用【CSS樣式】】面板來創(chuàng)創(chuàng)建層疊式式樣式表。。用戶可以以使用“窗窗口/CSS樣式””命令，或或者使用Shift+F11組合鍵打打開【CSS樣式】】面板，如如圖所示。?！綜SS樣樣式】面板板7.3.3管理CSS樣式式1．編輯CSS樣式式（1）在【【CSS規(guī)規(guī)則定義】】對話框中中修改【CSS規(guī)規(guī)則定義】】對話框7.3.3管理CSS樣式式（2）在【【CSS樣樣式】面板板中修改選擇要修改改的樣式修修改屬屬性設(shè)置7.3.3管理CSS樣式式（3）在CSS文件件代碼中修修改7.3.3管理CSS樣式式2．刪除CSS樣式式在【CSS樣式】面面板中選中中要刪除的的CSS樣樣式，再單單擊“刪除除CSS規(guī)規(guī)則”按鈕鈕，或者按按Del鍵鍵，即可刪刪除該CSS樣式。。7.3.4設(shè)置CSS樣式式屬性1．類型樣樣式設(shè)置【類型】對對話框如圖圖所示，可可以用來設(shè)設(shè)置文本的的樣式。7.3.4設(shè)置CSS樣式式屬性1．類型樣樣式設(shè)置各項功能如如下：字體（Font-family）：用來選選擇文本的的字體。大?。‵ont-size）：用來設(shè)設(shè)置文本的的大小。樣式（Font-style）：用于于設(shè)置文本本的傾斜格格式，有““正?！?、、“斜體””和“偏斜斜體”三種種選項。行高（Line-height）：設(shè)置文文本所在行行的高度。。修飾（Text-decoration）：向向文本中添添加下劃線線、上劃線線或者刪除除線，或者者使文本閃閃爍。粗細（Font-weight）：用于設(shè)設(shè)置文本加加粗的程度度。變體（Font-variant）：設(shè)置文文本的小型型大寫字母母變量。大小寫（Text-transform）：用于設(shè)設(shè)置文本的的大小寫。。顏色（Color）：單擊““下三角””按鈕，可可以打開調(diào)調(diào)色板設(shè)置置文本的顏顏色，也可可以在該按按鈕后邊的的文本框中中直接輸入入顏色的HTML代碼。7.3.4設(shè)置CSS樣式式屬性2．背景樣樣式設(shè)置【背景】對對話框如圖圖所示，可可以用來設(shè)設(shè)置網(wǎng)頁元元素的背景景屬性。7.3.4設(shè)置CSS樣式式屬性2．背景樣樣式設(shè)置各項功能如如下：背景顏色（（Background-color）：設(shè)置置元素的背背景顏色。。背景圖像（（Background-image）：設(shè)置置元素的背背景圖片。。重復(fù)（Backgound-repeat）：：設(shè)置背景景圖像的重重復(fù)方式。。“不重復(fù)復(fù)”只在元元素開始處處顯示一次次圖像；““重復(fù)”在在元素后面面水平和垂垂直平鋪圖圖像；“橫橫向重復(fù)””和“縱向向重復(fù)”分分別顯示圖圖像的水平平帶區(qū)和垂垂直帶區(qū)，，圖像被剪剪輯為適合合元素的邊邊界。附件（Background-attachment））：設(shè)置背背景圖像是是固定在其其原始位置置還是隨內(nèi)內(nèi)容一起滾滾動。水平位置和和垂直位置置：設(shè)置背背景圖像相相對于元素素的初始位位置，可以以用于將背背景圖像與與頁面中心心水平和垂垂直對齊。。7.3.4設(shè)置CSS樣式式屬性3．區(qū)塊樣樣式設(shè)置【區(qū)塊】對對話框如圖圖所示，可可以用來設(shè)設(shè)置文本的的間距和對對齊格式。。7.3.4設(shè)置CSS樣式式屬性3．區(qū)塊樣樣式設(shè)置各項功能如如下：單詞間距（（Word-spacing）：設(shè)置置字詞的間間距。字母間距（（Letter-spacing）：：增加或減減少字母或或字符的間間距。垂直對齊（（Vertical-align）：：設(shè)置元素素的垂直對對齊方式。。文本對齊（（Text-align）：：設(shè)置文本本在元素內(nèi)內(nèi)的對齊方方式。文字縮進（（Text-indent））：設(shè)置第第一行文本本縮進的程程度。空格（White-space）：設(shè)設(shè)置處理元元素中空格格的方式。。“正?！薄北硎臼湛s縮空白；““保留”表表示保留所所有空白；；“不換行行”表示僅僅遇到br標簽時文文本才換行行。顯示（Display）：用用來設(shè)置是是否以及如如何顯示元元素。7.3.4設(shè)置CSS樣式式屬性4．方框樣樣式設(shè)置【方框】對對話框如圖圖所示，用用來設(shè)置元元素（如圖圖像和層））的高度、、寬度、浮浮動、內(nèi)容容與邊框之之間的距離離以及元素素內(nèi)邊框與與外邊框之之間的距離離等屬性。。7.3.4設(shè)置CSS樣式式屬性4．方框樣樣式設(shè)置各項功能如如下：寬（Width）和和高（Height）：設(shè)置置元素的寬寬度和高度度。浮動（Float））：設(shè)置其其他元素（（如文本、、APDiv、表表格等）圍圍繞元素的的哪個邊浮浮動。其他他元素按通通常的方式式圍繞在浮浮動元素的的周圍。清除（Clear））：定義不不允許AP元素的邊邊。如果清清除邊上出出現(xiàn)AP元元素，則帶帶清除設(shè)置置的元素將將移到該AP元素的的下方。填充（Padding）：設(shè)設(shè)置元素內(nèi)內(nèi)容與元素素邊框之間間的間距（（如果沒有有邊框，則則為邊距））。取消選選擇“全部部相同”選選項可以設(shè)設(shè)置元素各各個邊的填填充值。邊距（Margin）：設(shè)置置一個元素素的邊框與與另一個元元素之間的的間距（如如果沒有邊邊框，則為為填充）。。取消選擇擇“全部相相同”可設(shè)設(shè)置元素各各個邊的邊邊距。7.3.4設(shè)置CSS樣式式屬性5．邊框樣樣式設(shè)置【邊框】對對話框如圖圖所示，用用于設(shè)置元元素邊框的的一些屬性性，主要有有四個邊的的樣式、寬寬度以及顏顏色等。7.3.4設(shè)置CSS樣式式屬性6．列表樣樣式設(shè)置【列表】對對話框如圖圖所示，用用于設(shè)置類類表的一些些屬性，包包括類型、、項目符號號圖像以及及位置等屬屬性。7.3.4設(shè)置CSS樣式式屬性7．定位樣樣式設(shè)置【定位】對對話框如圖圖所示，一一般用來對對層的位置置、大小等等屬性進行行設(shè)置。7.3.4設(shè)置CSS樣式式屬性7．定位樣樣式設(shè)置各項功能如如下：類型（Position）：：確定瀏覽覽器應(yīng)如何何定位選定定的元素。。顯示（Visibility）：設(shè)置置內(nèi)容的初初始顯示條條件。Z軸（Z-Index）：設(shè)設(shè)置內(nèi)容的的堆疊順序序。Z軸值值較高的元元素顯示在在Z軸值較較低的元素素的上方。。溢出（Overflow）：設(shè)置當當容器（如DIV）中內(nèi)內(nèi)容超出容器器的顯示范圍圍時的處理方方式。定位（Placement）：設(shè)置置內(nèi)容塊的位位置和大小。。剪輯（Clip）：設(shè)置置內(nèi)容的可見見部分。設(shè)設(shè)置CSS樣式屬性8．擴展樣式式設(shè)置【擴展】對話話框如圖所示示，用于設(shè)置置一些擴展屬屬性，如打印印時的分頁屬屬性、當鼠標標移動到元素素上時鼠標的的形狀以及濾濾鏡等。設(shè)設(shè)置CSS樣式屬性8．擴展樣式式設(shè)置各項功能如下下：（1）分頁：：在打印期間間在樣式所控控制的對象之之前或者之后后強行分頁。?？稍谙吕瞬藛沃羞x擇要要設(shè)置的選項項。（2）光標（（Cursor）：設(shè)置置當鼠標移動動到元素上時時鼠標的形狀狀。（3）過濾器器（Filter）：對對樣式所控制制的對象應(yīng)用用特殊效果。。過濾器中所所包括的各類類效果及其參參數(shù)說明如下下：設(shè)設(shè)置CSS樣式屬性Alpha：：透明效果BlendTrans：：漸隱漸現(xiàn)效效果Blur：動動感模糊效果果Chroma：色度Dropshadow：：下拉陰影效效果FlipH：：水平翻轉(zhuǎn)FlipV：：垂直翻轉(zhuǎn)Glow：光光暈效果Gray：黑黑白效果Invert：反轉(zhuǎn)效果果Light：：燈光效果Mask：蒙蒙版效果RevealTrans：圖像轉(zhuǎn)換換顯示效果Shadow：：陰影影效果果Wave：：波浪浪效果果Xray：：X光光透視視效果果7.4總總結(jié)提提升CSS樣式式是一一種高高級的的格式式化網(wǎng)網(wǎng)頁元元素的的技術(shù)術(shù)，它它可以以以樣樣式表表文件件的形形式保保存在在磁盤盤上，，需要要時可可以““附加加”到到某一一個網(wǎng)網(wǎng)頁文文檔，，而且且以后后一旦旦修改改了某某個CSS樣式式，文文檔中中所有有應(yīng)用用該樣樣式的的對象象都會會自動動得到到更新新。本章通通過制制作““樂途途網(wǎng)””的““商旅旅管理理”欄欄目頁頁面，，講解解了CSS樣式式的創(chuàng)創(chuàng)建、、應(yīng)用用、管管理以以及屬屬性設(shè)設(shè)置等等內(nèi)容容。讀讀者在在掌握握CSS的的創(chuàng)建建與使使用方方法后后，可可以舉舉一反反三，，制作作出各各種各各樣的的CSS樣樣式，，這樣樣在網(wǎng)網(wǎng)頁制制作中中可以以方便便地美美化頁頁面、、統(tǒng)一一頁面面樣式式，減減少HTML代代碼量量。本本章內(nèi)內(nèi)容將將為今今后學(xué)學(xué)習(xí)Div的網(wǎng)網(wǎng)頁布布局奠奠定基基礎(chǔ)。。謝謝！9、靜夜四無鄰鄰，荒居舊業(yè)業(yè)貧。。2023/1/72023/1/7Saturday,January7,202310、雨中黃葉葉樹，燈下下白頭人。。。2023/1/72023/1/72023/1/71/7/202311:36:42AM11、以我我獨沈沈久，，愧君君相見見頻。。。2023/1/72023/1/72023/1/7Jan-2307-Jan-2312、故人人江海海別，，幾度度隔山山川。。。2023/1/72023/1/72023/1/7Saturday,January7,202313、乍見翻翻疑夢，，相悲各各問年。。。2023/1/72023/1/72023/1/72023/1/71/7/202314、他鄉(xiāng)生生白發(fā)，，舊國見見青山。。。07一一月20232023/1/72023/1/72023/1/715、比不了得就就不比，得不不到的就不要要。。。一月232023/1/72023/1/72023/1/71/7/202316、行動出成果果，工作出財財富。。2023/1/72023/1/707January202317、做前，能夠夠環(huán)視四周；；做時，你只只能或者最好好沿著以腳為為起點的射線線向前。。2023/1/72023/1/72023/1/72023/1/79、沒有有失敗敗，只只有暫暫時停停止成成功?。?。2023/1/72023/1/7Saturday,January7,202310、很多多事情情努力力了未未必有有結(jié)果果，但但是不不努力力卻什什么改改變也也沒有有。。。2023/1/72023/1/72023/1/71/7/202311:36:42AM11、成功就就是日復(fù)復(fù)一日那那一點點點小小努努力的積積累。。。2023/1/72023/1/72023/1/7Jan-2307-Jan-2312、世間成事事，不求其其絕對圓滿滿，留一份份不足，可可得無限完完美。。2023/1/72023/1/72023/1/7Saturday,January7,202313、不知香積寺寺，數(shù)里入云云峰。。2023/1/72023/1/72023/1/72023/1/71/7/202314、意志堅堅強的人人能把世世界放在在手中像像泥塊一一樣任意意揉捏。。07一一月20232023/1/72023/1/72023/1/715、楚塞塞三湘湘接，，荊門門