網(wǎng)頁制作基礎教程 （Dreamweaver CC）（第3版）課件 第5章 CSS樣式

職業(yè)教育教學用書網(wǎng)頁制作基礎教程（DreamweaverCC）網(wǎng)站制作前的準備1網(wǎng)頁布局與規(guī)劃2網(wǎng)頁的編輯3網(wǎng)頁的多媒體效果4網(wǎng)站的管理與上傳5模塊目錄CSS樣式CSS概述使用CSS設置行間距項目一編輯CSS樣式使用CSS去掉文本超鏈接下畫線子項目1CSS概述樣式表又被稱為“樣式”，是目前網(wǎng)頁制作中普遍應用的一項技術(shù)。它通過設置HTML代碼標簽來實現(xiàn)對網(wǎng)頁中文本的字體、顏色、填充、邊距和字間距等進行格式化操作。在應用了樣式表的網(wǎng)頁中，如果要更改一些特定文本的樣式風格，可以直接使用自定義的樣式表。用戶通過CSS可以控制HTML元素的顏色、字體、字號、元素之間的間距、元素的位置和排列、背景圖片或顏色，以及不同設備和屏幕尺寸的顯示效果等。它可以讓設計者根據(jù)自己的需求和創(chuàng)意來設計網(wǎng)頁，讓網(wǎng)頁更加美觀、易于閱讀和使用，從而提升用戶體驗。子項目1CSS概述CSS樣式可以通過3種方式應用到網(wǎng)頁中：在HTML元素中使用style屬性來定義樣式的被稱為“內(nèi)聯(lián)樣式”（InlineStyle）；在HTML文檔中使用<style>標簽來定義樣式的被稱為“內(nèi)部樣式表”（InternalStyleSheet）；在HTML文檔中使用<link>標簽或@import指令來引用外部CSS文件的被稱為“外部樣式表”（ExternalStyleSheet）。子項目1CSS概述CSS的基本語法是由選擇器、屬性和值組成的。其中，選擇器用于指定要應用樣式的元素；屬性用于指定要修改的特征；值用于指定要使用的具體效果。CSS有許多不同類型的選擇器，也有許多不同類型的屬性，可以控制元素的布局、字體、顏色、背景、邊框等。CSS還支持媒體查詢，這就可以讓設計者靈活地根據(jù)設備來調(diào)整設計樣式，使網(wǎng)頁的適應性更強。CSS還支持過渡等功能，通過動畫、變形等增加網(wǎng)頁的交互性，從而提升視覺效果。子項目2使用CSS設置行間距“CSS設計器”面板主要由4個窗格組成，這4個窗格的主要功能如下。（1）“源”窗格：顯示所有與文檔相關的樣式表，也用于創(chuàng)建CSS并將其應用到文檔中。（2）“@媒體”窗格：列出所選源中的全部媒體查詢，媒體查詢可以根據(jù)不同的設備和屏幕尺寸來調(diào)整網(wǎng)頁的布局及樣式。（3）“選擇器”窗格：顯示所選源中的全部選擇器，選擇器的個數(shù)會受到媒體查詢的限制。（4）“屬性”窗格：顯示已選定的“選擇器”的屬性。讀一讀：在浮動面板組中單擊“CSS設計器”按鈕，在打開的面板中單擊“源”窗格中的“+”按鈕，在彈出的下拉列表中選擇“創(chuàng)建新的CSS文件”選項。打開“創(chuàng)建新的CSS文件”對話框子項目2使用CSS設置行間距子項目2使用CSS設置行間距“創(chuàng)建新的CSS文件”對話框中有4個選項，其主要功能如下。（1）“文件/URL”文本框：用于輸入CSS文件名稱，也可以單擊“瀏覽”按鈕，指定文件的存放路徑。（2）“鏈接”單選按鈕：將文檔鏈接到CSS文件。（3）“導入”單選按鈕：將CSS文件導入當前文檔中。（4）“有條件使用（可選）”選項：在顯示的選項區(qū)域中指定要與CSS文件關聯(lián)的媒體查詢。讀一讀：在“創(chuàng)建新的CSS文件”對話框的“文件/URL”文本框中輸入“hangjv”，選中“鏈接”單選按鈕，單擊“確定”按鈕?！霸础贝案裰谐霈F(xiàn)了一個名為“hangjv.css”的文件。子項目2使用CSS設置行間距在“源”窗格中選中“hangjv.css”文件，單擊“選擇器”窗格上的按鈕，此時彈出一個文本框，首先在該文本框中輸入“b”，然后在彈出的下拉列表中選擇“body”選項，將選中的CSS文件定義在全局下。此時，“屬性”窗格中顯示布局、文本、邊框、背景等內(nèi)容。子項目2使用CSS設置行間距子項目2使用CSS設置行間距CSS樣式的屬性分為“布局”“文本”“邊框”“背景”“其他”幾種類型。其中，“布局”用于確定位置的設置選項主要有以下幾個。（1）margin屬性：用于快速設置外邊距。外邊距是指元素邊框以外的空白區(qū)域，用于設置元素4個方向（上、下、左、右）的間距，可以用像素、百分比或自動計算等方式來指定。（2）padding屬性：用于快速設置內(nèi)邊距。內(nèi)邊距是指元素邊框和內(nèi)容之間的距離，可以單獨設置元素4個方向（上、下、左、右）的值，也可以一次性設置所有的值，用于控制元素的大小和背景范圍。內(nèi)邊距可以用像素、百分比或自動計算等方式來指定。（3）position屬性：用于快速設置元素的位置，有top（頂部）、bottom（底部）、left（左端）、right（右端）4個值可以設置。讀一讀：在“屬性”窗格中單擊“文本”按鈕，找到“l(fā)ine-height”選項，單擊其右側(cè)的文本框，在彈出的下拉列表中選擇“px”選項，在文本框中輸入“30px”作為行高的像素值。在文檔編輯區(qū)空白處，單擊可以發(fā)現(xiàn)，文字的行間距發(fā)生了變化子項目2使用CSS設置行間距子項目2使用CSS設置行間距做一做：面將hangjv.css文件應用到其他網(wǎng)頁中。打開新網(wǎng)頁，在“CSS設計器”面板的“源”窗格中單擊“+”按鈕，然后在彈出的下拉列表中選擇“附加現(xiàn)有的CSS文件”，在彈出的對話框中單擊“瀏覽”按鈕，在“選擇樣式表文件”對話框中選擇hangjv.css文件，，單擊“確定”按鈕。在“使用現(xiàn)有的CSS文件”對話框中單擊“確定”按鈕?？梢园l(fā)現(xiàn)，文字的行間距發(fā)生了變化，在“源”窗格中選中“hangjv.css”文件，單擊“選擇器”窗格上的按鈕，此時彈出一個文本框，首先在該文本框中輸入“b”，然后在彈出的下拉列表中選擇“body”選項，將選中的CSS文件定義在全局下。此時，“屬性”窗格中顯示布局、文本、邊框、背景等內(nèi)容。子項目2使用CSS設置行間距子項目2使用CSS設置行間距做一做：打開網(wǎng)站中的其他網(wǎng)頁，將hangjv.css文件應用到其他網(wǎng)頁中。子項目3使用CSS去掉文本超鏈接下畫線在“CSS設計器”面板的“源”窗格中單擊“+”按鈕，在彈出的下拉列表中選擇“創(chuàng)建新的CSS文件”，在“創(chuàng)建新的CSS文件”對話框，的“文件/URL”文本框中輸入“xiahuaxian”作為CSS文件名。子項目3使用CSS去掉文本超鏈接下畫線在“源”窗格中選中“xiahuaxian.css”文件，然后單擊“選擇器”窗格中的“+”，選擇“blockquotepa”選項定義在全局下。此時，“屬性”窗格中顯示布局、文本、背景等相關內(nèi)容。在“屬性”窗格中單擊“文本”按鈕，然后移動垂直滾動條，找到“text-decoration”選項單擊其右側(cè)的（none按鈕），去掉文本的所有修飾。此時可以發(fā)現(xiàn)，超鏈接熱區(qū)文本下畫線消失。子項目3使用CSS去掉文本超鏈接下畫線做一做：打開nlinjv.html網(wǎng)頁，將該網(wǎng)頁頂部錨記超鏈接的熱區(qū)文本下畫線去掉。實現(xiàn)鼠標指針懸停文字變色效果實現(xiàn)鼠標指針懸停文字變大效果項目二使用CSS過渡效果子項目1實現(xiàn)鼠標指針懸停文字變色效果CSS過渡效果CSS過渡效果可以實現(xiàn)網(wǎng)頁元素不同狀態(tài)之間的平滑過渡，經(jīng)常用來制作一些動畫效果。CSS過渡效果易受完成時間、運動曲線和延遲時間的影響，從而產(chǎn)生不同的動畫效果。選擇菜單欄中的“窗口”→“CSS過渡效果”命令，打開“CSS過渡效果”面板。在“CSS過渡效果”面板中單擊“+”按鈕，在彈出的“新建過渡效果”對話框中，設置“目標規(guī)則”為“body”；單擊“過渡效果開啟”右側(cè)的下拉按鈕，在彈出的下拉列表中選擇“hover”選項，即可設置懸停效果。在“持續(xù)時間”文本框中輸入“5”，其右側(cè)下拉列表選擇“s”選項，即可讓過渡效果持續(xù)5秒；在“延遲”文本框中輸入“1”，其右側(cè)下拉列表選擇“s”選項，即可使鼠標指針在文字上懸停時不會立即出現(xiàn)過渡效果，等待1秒后才開始出現(xiàn)懸停效果；單擊“計時功能”右側(cè)的下拉按鈕，在彈出的下拉列表中選擇“ease”選項，表示讓過渡動畫先慢速開始，再加快速度，最后慢速結(jié)束，子項目1實現(xiàn)鼠標指針懸停文字變色效果讀一讀過渡效果的“計時功能”共有6個選項，其含義如下。（1）“cubic-bezier(x1,y1,x2,y2)”選項：在cubic-bezier()函數(shù)中定義值，數(shù)值范圍為0～1。（2）“ease”選項：先以慢速開始，再加快速度，最后慢速結(jié)束的一種過渡效果。（3）“ease-in”選項：以慢速開始的過渡效果。（4）“ease-in-out”選項：以慢速開始和慢速結(jié)束的過渡效果。（5）“ease-out”選項：以慢速結(jié)束的過渡效果。（6）“l(fā)inear”選項：以相同速度開始至結(jié)束的過渡效果。在“新建過渡效果”對話框中單擊“屬性”選項區(qū)右下角的下拉按鈕，設置變化文字屬性。在彈出的下拉列表中選擇“color”選項。在“新建過渡效果”對話框中單擊“屬性”選項區(qū)右下角的下拉按鈕，設置變化文字屬性。在彈出的下拉列表中選擇“color”選項，單擊“結(jié)束值”右側(cè)的色塊，在彈出的“顏色”對話框中選擇“紅色”，單擊“創(chuàng)建過渡效果”按鈕，此時會在“CSS過渡效果”面板中出現(xiàn)“hover”效果和“1個實例”字樣。預覽網(wǎng)頁可以看到效果。子項目2實現(xiàn)鼠標指針懸停文字變大效果打開網(wǎng)頁，在“CSS設計器”面板的“源”窗格中單擊“+”按鈕，在“創(chuàng)建新的CSS文件”對話框的“文件/URL”文本框中輸入“tuchu”作為CSS文件名。在“源”窗格中選中“tuchu.css”文件，然后在“選擇器”窗格中單擊“+”按鈕，在彈出的下拉列表中選擇“trtdstrong”選項，增加的選擇器將會顯示在“選擇器”窗格中。子項目2實現(xiàn)鼠標指針懸停文字變大效果在“CSS過渡效果”面板中單擊“+”按鈕，在彈出的“新建過渡效果”對話框中，單擊“目標規(guī)則”右側(cè)的下拉按鈕，在彈出的下拉列表中選擇“trtdstrong”選項。單擊“過渡效果開啟”右側(cè)的下拉按鈕，在彈出的下拉列表中選擇“hover”選項。設置“持續(xù)時間”為“5”秒，“延遲”為“0”秒，“計時功能”為“l(fā)inear”（正常速度）子項目2實現(xiàn)鼠標指針懸停文字變大效果單擊“屬性”選項區(qū)右下角的下拉按鈕，在彈出的下拉列表中選擇“font-size”選項，單擊“結(jié)束值”右側(cè)的下拉按鈕，在彈出的下拉列表中選擇“l(fā)arge”選項，即可將文字變大。單擊“創(chuàng)建過渡效果”按鈕，關閉“新建過渡效果”對話框。子項目2實現(xiàn)鼠標指針懸停文字變大效果在“CSS過渡效果”面板中可以發(fā)現(xiàn)，CSS過渡效果已經(jīng)創(chuàng)建成功，有4個實例實現(xiàn)了鼠標指針懸停文字變大效果，在瀏覽器中預覽網(wǎng)頁，將鼠標指針懸停在網(wǎng)頁中的文字上時可以發(fā)現(xiàn)文字變大。子項目2實現(xiàn)鼠標指針懸停文字變大效果做一做：打開nlinjv.html網(wǎng)頁，將錨記超鏈接文字改為鼠標指針懸停文字變大的CSS過渡效果。項目三設置CSS的規(guī)則屬性子項目1“CSS規(guī)則定義”對話框中的“類型”在屬性檢查器中單擊“目標規(guī)則”右側(cè)的下拉按鈕，在彈出的下拉列表中選擇“body:hover”選項，最后單擊“編輯規(guī)則”按鈕，彈出“CSS規(guī)則定義”對話框。子項目1“CSS規(guī)則定義”對話框中的“類型”“CSS規(guī)則定義”對話框由兩部分組成，左側(cè)為“分類”列表框，共有“類型”“背景”“區(qū)塊”“方框”“邊框”“列表”“定位”“擴展”“過渡”9個選項；右側(cè)為設置區(qū)域，右側(cè)的設置項會隨著左側(cè)選擇的不同選項而發(fā)生相應變化。子項目1“CSS規(guī)則定義”對話框中的“類型”在“類型”設置區(qū)域可以設定CSS樣式的基本字體和類型，其部分選項說明如下。（1）“Font-family”下拉列表：用于設置CSS樣式的字體。（2）“Font-size”下拉列表：用于設置字號，有in、cm等多種單位可以選擇，也可以按照百分比選擇。（3）“Font-style”下拉列表：用于設置字體的樣式。（4）“Line-height”下拉列表：用于設置文本的行高。（5）“Text-decoration”選項區(qū)：用于為文本添加underline、overline、line-through、blink及none。子項目2“CSS規(guī)則定義”對話框中的“背景”在“背景”設置區(qū)域可以設定網(wǎng)頁中各個元素的背景，其主要選項說明如下。（1）“Background-color”按鈕：用于設置元素的背景顏色，可以直接輸入顏色值，也可以通過單擊顏色塊選取相應顏色。（2）“Background-image”下拉列表：用于設置元素的背景圖像。（3）“Background-repeat”下拉列表：用于設置如何重復使用背景圖像。no-repeat表示不重復；repeat表示重復；repeat-x表示在X軸重復；repeat-y表示在Y軸重復。（4）“Background-attachment”下拉列表：用于設置背景圖像是固定位置還是跟隨內(nèi)容進行滾動。fixed表示固定位置；scroll表示滾動模式。（5）“Background-position（X）”下拉列表和“Background-position（Y）”下拉列表：用于指定背景圖像最初的相對位置。子項目3“CSS規(guī)則定義”對話框中的“區(qū)塊”在“區(qū)塊”設置區(qū)域可以設置標簽和屬性的間距及對齊方式，其主要選項說明如下。（1）“Word-spacing”下拉列表：用于設置字詞的間距，從圖5.3.5中可以看出有多種度量方式可供選擇。（2）“Letter-spacing”下拉列表：用于增加/減少字母或字符之間的間距。（3）“Vertical-align”下拉列表：用于指定網(wǎng)頁元素的垂直對齊方式。（4）“Text-align”下拉列表：用于設置文本在元素中的對齊方式。（5）“Text-indent”文本框：用于設置第1行文本的縮進程度。（6）“White-space”下拉列表：用于設置如何處理空格。normal表示空白會被瀏覽器忽略；pre表示空白會被瀏覽器保留；nowrap表示將強制文本不換行，直到遇到標簽為止。（7）Display：用于指定如何顯示元素。子項目4“CSS規(guī)則定義”對話框中的“方框”在“方框”設置區(qū)域可以設置網(wǎng)頁元素在頁面上的放置方式，其主要選項說明如下。（1）“Width”下拉列表：用于設置網(wǎng)頁元素的寬度。（2）“Height”下拉列表：用于設置網(wǎng)頁元素的高度。（3）“Float”下拉列表：用于設置網(wǎng)頁元素圍繞哪個邊進行浮動，有l(wèi)eft、right、none這3個選項可供選擇。（4）“Clear”下拉列表：用于清除哪個邊的AP元素，被清除的AP元素會被移動到該元素的下方。（5）“Padding”選項區(qū)：用于設置內(nèi)容與邊框之間的距離，取消勾選“全部相同”復選框可以設置內(nèi)容與各個邊的間距值。（6）“Margin”選項區(qū)：用于設置兩個網(wǎng)頁元素之間的邊框距離，取消勾選“全部相同”復選框可以設置兩個網(wǎng)頁元素各個邊的間距值。子項目5“CSS規(guī)則定義”對話框中的“邊框”在“邊框”設置區(qū)域可以設置網(wǎng)頁元素周邊的邊框?qū)傩?，如寬度、顏色等，其主要選項說明如下。（1）“Style”選項區(qū)：用于設置邊框的樣式外觀，取消勾選“全部相同”復選框可以設置網(wǎng)頁元素各個邊的邊框樣式。（2）“Width”選項區(qū)：用于設置邊框的粗細，取消勾選“全部相同”復選框可以設置網(wǎng)頁元素各個邊的邊框粗細。（3）“Color”選項區(qū)：用于設置邊框的顏色，取消勾選“全部相同”復選框可以設置網(wǎng)頁元素各個邊的邊框顏色。子項目6“CSS規(guī)則定義”對話框中的“列表”在“列表”設置區(qū)域可以設置列表標簽的屬性，如項目符號的大小、類型等，其主要選項說明如下。（1）“List-style-type”下拉列表：用于設置項目符號或編號的外觀，從圖5.3.8中可以看出一共有9個選項。（2）“List-style-i