網(wǎng)頁制作案例教程-清華大學(xué)出版社-第8章-CSS樣式表

1、 網(wǎng)頁制作案例教程 毋建軍 鄭寶昆 郭銳 編著 清華大學(xué)出版社第8章 CSS樣式表本章學(xué)習(xí)目標(biāo)（知識(shí)要點(diǎn)）n了解CSS樣式的概念n掌握CSS樣式表的創(chuàng)建方法n掌握應(yīng)用CSS樣式表的方法本章學(xué)習(xí)導(dǎo)航nCSS不屬于HTML，它屬于HTML的輔助語言，是對(duì)HTML語言功能的一種擴(kuò)展，用CSS可以做出美觀工整令瀏覽者賞心悅目的網(wǎng)頁，CSS能給網(wǎng)頁添加許多我們想象不到的效果，本章主要介紹創(chuàng)建CSS樣式的操作，編輯和應(yīng)用CSS樣式的基本操作。n本章內(nèi)容在全書知識(shí)結(jié)構(gòu)中所處位置如圖所示 基礎(chǔ)篇HTML篇CSS篇JavaScript篇提高篇網(wǎng)頁設(shè)計(jì)與開發(fā)流程（AscentSys醫(yī)藥商務(wù)系統(tǒng)）網(wǎng)頁制作基礎(chǔ)HTM

2、L基礎(chǔ)網(wǎng)頁基本元素設(shè)計(jì)網(wǎng)頁布局規(guī)劃設(shè)計(jì)交互式網(wǎng)頁表單的設(shè)計(jì)與使用利用模板和庫創(chuàng)建網(wǎng)頁CSS樣式表使用CSS布局規(guī)劃網(wǎng)頁JavaScript網(wǎng)頁應(yīng)用Javascript概述網(wǎng)頁中常見Flash制作Web服務(wù)器創(chuàng)建網(wǎng)站發(fā)布、測試和維護(hù) 8.1 CSS入門n8.1.1 CSS簡介nCSS為Cascading Style Sheets的簡寫，即層疊樣式表。這里的樣式就是指的格式，是各種網(wǎng)頁元素所呈現(xiàn)的形態(tài)，比如網(wǎng)頁中字體的大小、顏色、圖片的安排等。層疊的意思就是CSS通常被譯作層疊樣式表單，是用于增強(qiáng)控制網(wǎng)頁樣式并允許將信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。CSS提供比HTML標(biāo)簽屬性更多的特性讓用戶設(shè)

3、置，應(yīng)用起來也相對(duì)靈活。有了CSS樣式表后，許多HTML無法實(shí)現(xiàn)的功能均可以實(shí)現(xiàn)了，并且會(huì)變得簡潔，容量縮小。n8.1.2 CSS基本語法n選擇符屬性:值;n（1）選擇符n用來指定針對(duì)哪一個(gè)HTML標(biāo)簽應(yīng)用樣式表的部分，任何HTML元素都可以是一個(gè)CSS的選擇符。例如，nP color: red n當(dāng)中的選擇符是P，規(guī)則就會(huì)選擇所有標(biāo)簽的樣式，該規(guī)則表示在段落標(biāo)簽里的內(nèi)容為紅色。n（2）聲明n聲明是包含在大括號(hào)中的內(nèi)容，首先給出屬性名，可以包括顏色、邊界和字體等，然后是屬性值，來給一個(gè)屬性能夠接受的值，加上分號(hào)之后可以指定多個(gè)樣式。例如：nH1 font-size: 24pt; color:

4、green n上述語句表示標(biāo)題中的字體大小為24pt，顏色為綠色。n（3）組合規(guī)則n用戶通過大括號(hào)內(nèi)列出聲明，有時(shí)候?qū)τ谕粋€(gè)選擇符列出了幾個(gè)規(guī)則，這時(shí)候規(guī)則是可以合并起來寫的，同時(shí)很多不同的選擇符卻具有重復(fù)的樣式表聲明，為了減少樣式表的重復(fù)聲明，組合的選擇符聲明是允許的。例如：nH1, H2, H3, H4, H5, H6 n color: red;n font-family: sans-serif n該規(guī)則標(biāo)明H1, H2, H3, H4, H5, H6的顏色都為紅色，并且字體為sans-serif。n（4）繼承n實(shí)際上，所有在選擇符中嵌套的選擇符都會(huì)繼承外層選擇符指定的屬性值，除非另外更

5、改。例如，一個(gè)BODY定義了的顏色值也會(huì)應(yīng)用到段落的文本中。n有些情況是內(nèi)部選擇符不繼承周圍的選擇符的值，但理論上這些都是特殊的。例如，上邊界屬性是不會(huì)繼承的；直覺上，一個(gè)段落不會(huì)有同文檔BODY一樣的上邊界值。n（5）注釋n注釋是用戶嵌入CSS代碼中的專用位，瀏覽器會(huì)忽略掉注釋。樣式表里面的注解使用C語言編程中一樣的約定方法去指定。CSS的注釋以字符/*開始以*/結(jié)束，兩者之間的內(nèi)容瀏覽器都會(huì)忽略掉，注解的例子如以下格式：n（6）關(guān)于單位n用CSS來指定大小的時(shí)候，在數(shù)值后面可以加上一些單位來限定，這些單位分成絕對(duì)值的單位和相對(duì)值的單位。具體描述表8-1-1。單位單位描述描述例例in英寸（i

6、nch）width：10incm厘米（centimeter）Height：1cmmm毫米（millimeter）Font-size：5mmpt磅（point）Font-size：7ptpc皮卡（pica）Font-size：1pcem相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸Font-size：1.5em表示為當(dāng)前字符的表示為當(dāng)前字符的1.5倍大小倍大小ex相對(duì)于字符高度的相對(duì)尺寸Font-size：1.5expx像素（pixel）Font-size：10px%針對(duì)其他基準(zhǔn)的大小的百分比針對(duì)其他基準(zhǔn)的大小的百分比Width：50%n（7）選擇器nCSS中一個(gè)很重要的概念是選擇器（selector），所有H

7、TML語言中的標(biāo)記都是通過不同的CSS選擇器進(jìn)行控制的，通過它告訴CSS要它給什么東西設(shè)置格式，用戶只需要通過選擇器對(duì)不同的HTML標(biāo)簽進(jìn)行控制，并賦予各種樣式聲明，即可實(shí)現(xiàn)各種效果。n選擇器包括：n標(biāo)簽選擇器n類選擇器nid選擇器n群組選擇器n后代選擇器n偽類（Pseudoclasses）n8.1.3 CSS樣式和樣式表類型n（1）外部文件方式n外部文件方式即將CSS寫成一個(gè)文件的方式，在HTML 文檔頭通過文件引用來進(jìn)行風(fēng)格控制。CSS文件可在Dreamweaver的菜單下的styles選項(xiàng)來創(chuàng)建，相對(duì)說來，在Dreamweaver下創(chuàng)建比較簡單；如果熟悉CSS 屬性，可直接在記事本里寫，

8、最后的文件擴(kuò)展名為CSS。n（2）內(nèi)部文檔頭方式 n這種方式與外部文件方式區(qū)別在于這種方式是將風(fēng)格直接定義在文檔頭之間，而不是形成文件。n（3）直接插入式 n直接插入式很簡單，只是在每個(gè)HTML標(biāo)志后書寫CSS屬性就可以了。n8.1.4 CSS樣式和樣式表應(yīng)用方法n（1）行內(nèi)樣式表n行內(nèi)樣式表是最簡單的一種使用方式，由標(biāo)簽style屬性支持，css規(guī)則直接寫在標(biāo)簽內(nèi)，如：nn（2）嵌入樣式表（Embeded Styles）n 嵌入式樣式表是一個(gè)樣式集，它是網(wǎng)頁代碼的一部分，在帶有標(biāo)簽的HTML文件內(nèi)直接嵌入CSS，它與行間樣式表有相似的地方，但是又不同，行間樣式表的作用域只有一行，而嵌入式樣式

9、表可以作用在整個(gè)文檔中。n對(duì)于嵌入式樣式表，使用標(biāo)簽，它也只能在內(nèi)使用，語法格式為：nn 其他CSS規(guī)則nn（3）鏈接樣式表（Linked Style）n鏈接樣式表也是外部樣式表，它首先定義個(gè)擴(kuò)展名為.css的文件，該文件包含所有需要用到的CSS規(guī)則，不包含任何HTML代碼，比如blue.css。創(chuàng)建樣式表文件后，需要將其與要進(jìn)行格式設(shè)置的HTML文件進(jìn)行關(guān)聯(lián)，這種添加樣式表的方式是通過HTML中標(biāo)簽來實(shí)現(xiàn)的， Link標(biāo)簽只在HTML頁面的部分出現(xiàn)。鏈接樣式表的方法就是在HTML文件的部分添加如下所示代碼：nnlinennn（4）輸入樣式表（Imported Styles）n輸入外部樣式表方

10、法同鏈接的方法類似，不同之處在于鏈接法不能同其他方法結(jié)合使用，但輸入法則可以。注意，使用”import”導(dǎo)入外部的樣式表文件時(shí)，需要在標(biāo)簽內(nèi)，如：nimport url(company.css);8.2 CSS樣式編輯與屬性設(shè)置n8.2.1 創(chuàng)建CSS新樣式n（1）創(chuàng)建樣式表文件n1）從CSS樣式模板中創(chuàng)建CSS樣式表文件n單擊菜單欄中“文件”|“新建”命令，打開新建文檔對(duì)話框，可以選擇“空白頁”或“示例中的頁”n點(diǎn)擊“創(chuàng)建”按鈕，新建了一個(gè)CSS樣式表文件。n新建的CSS樣式表文件與HTML文檔不同的地方是：只有“代碼”視圖，其他視圖按鈕已被禁用。CSS樣式表是純文本文件，其內(nèi)容將不能在瀏覽

11、器中查看。n編輯樣式表后，單擊菜單欄中“文件”|“保存”命令，則可以保存一個(gè)外部的樣式表文件。n2）在CSS樣式面板中創(chuàng)建CSS樣式表文件n下面以創(chuàng)建一個(gè)大字的CSS為例，在CSS面板中創(chuàng)建CSS樣式的操作為：n在CSS樣式面板中，單擊“新建”按鈕 ，打開“新建CSS規(guī)則”對(duì)話框，如圖8-2-3所示。圖8-2-3 “新建CSS規(guī)則”對(duì)話框圖n類（可應(yīng)用于任何HTML元素）：CSS樣式可應(yīng)用到網(wǎng)頁中任何范圍或任何文本區(qū)域中。nID（僅應(yīng)用于一個(gè)HTML元素）：CSS樣式只能應(yīng)用到網(wǎng)頁中一個(gè)HTML元素。n標(biāo)簽（基于選擇的內(nèi)容）：標(biāo)簽樣式將重新定義HTMLn符合內(nèi)容（ID、上下文選擇器等）：CSS

12、樣式選擇器樣式將重新定義一些標(biāo)簽的特定格式或包含某特定屬性的所有標(biāo)簽的格式。n設(shè)置選擇器類型為“類”，名字為.dazin選擇樣式表的保存位置，輸入樣式表的文件名，單擊“保存”按鈕，保存樣式表文件，同時(shí)打開“.dazi的CSS規(guī)則定義”的對(duì)話框，如圖8-2-5所示。圖8-2-5 “.dazi的CSS規(guī)則定義”的對(duì)話框n（2）附加外部CSS樣式n網(wǎng)頁如果需要鏈接或套用外部的樣式表，就需要將外部的樣式附加到當(dāng)前網(wǎng)頁中，操作為：n1）打開CSS樣式表面板。n2）執(zhí)行以下操作之一：n單擊CSS面板底部的“附加樣式表”按鈕n或者右鍵單擊CSS樣式面板，在彈出的快捷菜單中選擇“附加樣式表”命令。n3）打開“

13、鏈接外部樣式表”對(duì)話框，如圖8-2-7所示。圖8-2-7 “鏈接外部樣式表”對(duì)話框圖n4）點(diǎn)擊“瀏覽”按扭，選擇要添加的樣式文件。添加的形式有兩種：n“鏈接”：網(wǎng)頁與樣式表文件的關(guān)系是鏈接關(guān)系，而且不將樣式表的信息導(dǎo)入網(wǎng)頁中。n“導(dǎo)入”：將外部樣式表文件的信息導(dǎo)入到當(dāng)前網(wǎng)頁文檔中。n5）單擊“確定”按鈕。這樣外部的CSS樣式就會(huì)鏈接或?qū)氲疆?dāng)前文檔中。n（3）應(yīng)用CSS樣式n將設(shè)計(jì)好的CSS樣式應(yīng)用到網(wǎng)頁中，具體操作為：n1）首先要打開需要鏈接CSS樣式的文檔，選中文字或圖片等網(wǎng)頁元素，執(zhí)行以下操作之一：n在屬性檢查器中的“類”下拉列表中選擇編輯好的樣式，如選擇“dazi”n在CSS樣式面板中

14、，右擊要應(yīng)用的樣式名稱（如.dazi），在彈出的快捷菜單中選擇“套用”。n2）取消樣式的應(yīng)用，只需在選擇己應(yīng)用樣式的文本，在“屬性檢查器”中的“樣式”下拉列表中選擇“無”即可。n8.2.2 編輯CSS樣式n對(duì)已經(jīng)定義的CSS樣式進(jìn)行重新編輯，要在CSS樣式面板中選擇要編輯的樣式名稱，然后點(diǎn)擊面板下方的 按鈕，會(huì)彈出“CSS規(guī)則定義”對(duì)話框，在對(duì)話框中可以對(duì)CSS樣式重新編輯。n8.2.3 設(shè)置CSS樣式屬性n（1）CSS 類型屬性nFont-family為樣式設(shè)置字體系列（或多組字體系列）。nFont-size定義文本大小。nFont-style指定“正常”、“斜體”或“偏斜體”作為字體樣式。

15、nLine-height設(shè)置文本所在行的高度。nText-decoration向文本中添加下劃線、上劃線或刪除線，或使文本閃爍。nFont-weight對(duì)字體應(yīng)用特定或相對(duì)的粗體量。nFont-variant設(shè)置文本的小型大寫字母變體。nText-transform將所選內(nèi)容中的每個(gè)單詞的首字母大寫或?qū)⑽谋驹O(shè)置為全部大寫或小寫。ncolor 設(shè)置文本顏色。n（2）CSS 樣式背景屬性n背景顏色設(shè)置元素的背景顏色。兩種瀏覽器都支持背景顏色屬性。n背景圖像設(shè)置元素的背景圖像。兩種瀏覽器都支持背景圖像屬性。nBackground Repeat確定是否以及如何重復(fù)背景圖像。兩種瀏覽器都支持重復(fù)屬性。n

16、Background Attachment確定背景圖像是固定在其原始位置還是隨內(nèi)容一起滾動(dòng)。nBackground Position (X) 和 Background Position (Y)指定背景圖像相對(duì)于元素的初始位置。n（3）CSS 樣式區(qū)塊屬性n字母間距增加或減小字母或字符的間距。n垂直對(duì)齊指定應(yīng)用此屬性的元素的垂直對(duì)齊方式。n文本對(duì)齊設(shè)置文本在元素內(nèi)的對(duì)齊方式。n文字縮進(jìn)指定第一行文本縮進(jìn)的程度。n空格確定如何處理元素中的空格。n顯示指定是否以及如何顯示元素。n（4）CSS 樣式方框?qū)傩詎寬和高設(shè)置元素的寬度和高度。 n浮動(dòng)設(shè)置其它元素（如文本、AP Div、表格等）在圍繞元素的哪

17、個(gè)邊浮動(dòng)。n清除定義不允許 AP 元素的邊。n填充指定元素內(nèi)容與元素邊框之間的間距n全部相同為應(yīng)用此屬性的元素的“上”、“右”、“下”和“左”設(shè)置相同的填充屬性。n邊距指定一個(gè)元素的邊框與另一個(gè)元素之間的間距n全部相同為應(yīng)用此屬性的元素的“上”、“右”、“下”和“左”設(shè)置相同的邊距屬性。n（5）CSS 樣式邊框?qū)傩詎類型 設(shè)置邊框的樣式外觀。樣式的顯示方式取決于瀏覽器。取消選擇“全部相同”可設(shè)置元素各個(gè)邊的邊框樣式。n全部相同 為應(yīng)用此屬性的元素的“上”、“右”、“下”和“左”設(shè)置相同的邊框樣式屬性。n寬度 設(shè)置元素邊框的粗細(xì)。兩種瀏覽器都支持“寬度”屬性。取消選擇“全部相同”可設(shè)置元素各個(gè)邊

18、的邊框?qū)挾取全部相同 為應(yīng)用此屬性的元素的“上”、“右”、“下”和“左”設(shè)置相同的邊框?qū)挾取顏色 設(shè)置邊框的顏色。可以分別設(shè)置每條邊的顏色，但顯示方式取決于瀏覽器。取消選擇“全部相同”可設(shè)置元素各個(gè)邊的邊框顏色。n全部相同 為應(yīng)用此屬性的元素的“上”、“右”、“下”和“左”設(shè)置相同的邊框顏色。n設(shè)置完這些選項(xiàng)后，在面板左側(cè)選擇另一個(gè) CSS 類別以設(shè)置其它的樣式屬性，或單擊“確定”。n（6）CSS 樣式列表屬性n“CSS 規(guī)則定義”對(duì)話框的“列表”類別為列表標(biāo)簽定義列表設(shè)置（如項(xiàng)目符號(hào)大小和類型）。nList style type 設(shè)置項(xiàng)目符號(hào)或編號(hào)的外觀。兩種瀏覽器都支持“類型”。nLi

19、st style image 使您可以為項(xiàng)目符號(hào)指定自定義圖像。單擊“瀏覽”(Windows) 或“選擇”(Macintosh) 通過瀏覽選擇圖像，或鍵入圖像的路徑。 nList style position 設(shè)置列表項(xiàng)文本是否換行并縮進(jìn)（外部）或者文本是否換行到左邊距（內(nèi)部）。 n（7）CSS 樣式定位屬性n“定位”樣式屬性確定與選定的 CSS 樣式相關(guān)的內(nèi)容在頁面上的定位方式。n可見性 確定內(nèi)容的初始顯示條件。如果不指定可見性屬性nZ 軸 確定內(nèi)容的堆疊順序。n溢出確定當(dāng)容器（如 DIV 或 P）的內(nèi)容超出容器的顯示范圍時(shí)的處理方式。n位置指定內(nèi)容塊的位置和大小。n剪輯定義內(nèi)容的可見部分。

20、如果指定了剪輯區(qū)域n（8）CSS 樣式擴(kuò)展屬性n“擴(kuò)展”樣式屬性包括濾鏡、分頁和指針選項(xiàng)。 8.3項(xiàng)目案例學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo) 案例描述案例描述 學(xué)習(xí)和使用CSS樣式及其屬性的設(shè)置。使用CSS樣式表，在Dreamweaver CS5中制作醫(yī)藥商務(wù)管理頁面案例要點(diǎn)案例要點(diǎn) CSS樣式的基本寫法以及相關(guān)屬性的設(shè)定。案例實(shí)施案例實(shí)施 （1）選擇“開始”“所有程序”“Adobe Dreamweaver CS5”，啟動(dòng)Adobe Dreamweaver CS5，新建一站點(diǎn)，將images素材文件夾復(fù)制到本站點(diǎn)文件夾中。（2）選擇“文件”“新建”菜單項(xiàng)，打開“新建文檔”對(duì)話框，選擇“空白頁”“HTML”“無”

21、，單擊“創(chuàng)建”按鈕，新建一個(gè)網(wǎng)頁。（3）在打開的空白文檔中，選擇“文件”“保存”菜單項(xiàng)，將文件保存在根目錄下，文件名為8.3.html。（4）在頁面8.3.html的文檔編輯區(qū)的【標(biāo)題】文本框里，將標(biāo)題命名為“醫(yī)藥商務(wù)網(wǎng)站”。案例實(shí)施案例實(shí)施 （5）選擇“插入”|“常用”|“表格”，插入4行1列的表格，如圖8-3-2所示。案例實(shí)施案例實(shí)施 （6）插入表格后，在屬性面板改變表格“寬度”屬性值為760像素，對(duì)齊方式為居中對(duì)齊。（7）選中第一行，然后點(diǎn)擊“插入”|“圖像”，彈出如圖8-3-3所示的選擇圖像源文件對(duì)話框，選擇images文件夾下的top.gif。案例實(shí)施案例實(shí)施 （8）選中表格第2行，

22、并改變其高度為110像素，然后選擇“修改”下拉菜單“表格”|“拆分單元格”選項(xiàng)，如圖8-3-5所示。案例實(shí)施案例實(shí)施 （9）彈出如圖8-3-6所示的對(duì)話框，將其拆分為5列，拆分后將其第一列的寬度設(shè)置為30%。案例實(shí)施案例實(shí)施 （10）在每個(gè)單元格內(nèi)輸入相應(yīng)的文字，調(diào)整每個(gè)單元格的寬度以適應(yīng)文字的寬度，如圖8-3-7所示。案例實(shí)施案例實(shí)施 （11）單擊CSS面板的新增CSS規(guī)則按鈕 ，會(huì)彈出“新建CSS規(guī)則”對(duì)話框，如圖8-3-8所示。案例實(shí)施案例實(shí)施 （12）選中如圖8-3-7所示的菜單，在屬性面板的“類”下拉框中選擇“style”，如圖8-3-10所示。案例實(shí)施案例實(shí)施 （13）將光標(biāo)放在表

23、格第3行，單擊“插入”|“常用”面板的插入表格按鈕 ，會(huì)彈出如圖8-3-12對(duì)話框，插入1行2列的表格。案例實(shí)施案例實(shí)施 （14）單擊CSS面板的新增CSS規(guī)則按鈕 ，會(huì)彈出“新建CSS規(guī)則”對(duì)話框，如圖8-3-8所示，新建4個(gè)規(guī)則，分別為：.ju、p、a:link、.xian，這4個(gè)規(guī)則在“新建CSS規(guī)則”對(duì)話框中“選擇器類型”分別選擇“類（可應(yīng)用于任何HTML元素）”、“標(biāo)簽（基于選擇的內(nèi)容）”、“符合內(nèi)容（ID、上下文選擇器等）”、“類（可應(yīng)用于任何HTML元素）”，在相應(yīng)的“CSS規(guī)則定義對(duì)話框”中相應(yīng)的屬性選擇如下：.ju padding-top: 10px;padding-left

24、: 10px;p font-size: 12px;font-style: normal;line-height: 1.75em;font-weight: normal;color: #666666;text-align: left;text-indent: 2em;a:link font-size: 12px;color: #336699;text-decoration: underline;.xian color: #aaa89c;案例實(shí)施案例實(shí)施 （15）在第3行左側(cè)單元格中輸入相應(yīng)內(nèi)容，并進(jìn)行相應(yīng)的CSS設(shè)定，效果如圖8-3-13所示。案例實(shí)施案例實(shí)施 （16）在表格第3行右側(cè)單元格中插入一個(gè)1行1列的表格，相應(yīng)的屬性設(shè)