HTML語言與網(wǎng)頁設(shè)計(jì)

1、12.HTML語言與網(wǎng)頁設(shè)計(jì)語言與網(wǎng)頁設(shè)計(jì)復(fù)習(xí)要點(diǎn)：復(fù)習(xí)要點(diǎn)：HTML通用標(biāo)記結(jié)構(gòu)、通用標(biāo)記結(jié)構(gòu)、HTML文檔的基本結(jié)構(gòu)、文檔的基本結(jié)構(gòu)、meta標(biāo)記、超鏈接標(biāo)記、字符實(shí)體、各種表單標(biāo)記標(biāo)記、超鏈接標(biāo)記、字符實(shí)體、各種表單標(biāo)記什么是什么是CSS樣式表定義語法、樣式表定義語法、CSS選擇符選擇符樣式引用的基本方式樣式引用的基本方式樣式的優(yōu)先級(jí)樣式的優(yōu)先級(jí)html與與xhtml的主要區(qū)別的主要區(qū)別22.HTML語言與網(wǎng)頁設(shè)計(jì)語言與網(wǎng)頁設(shè)計(jì)2.1 HTML語言簡介語言簡介HTML，即超文本標(biāo)記語言，是英文HyperText Markup Language的縮寫，是一種獨(dú)立于操作系統(tǒng)的網(wǎng)頁編寫語言。H

2、TML的最大特點(diǎn)就是用標(biāo)記描述和表現(xiàn)信息的顯示格式和內(nèi)容。所謂標(biāo)記就是采用一系列的指令符號(hào)來控制輸出的效果，為： 內(nèi)容內(nèi)容 元素名即預(yù)定義的標(biāo)記（簽）屬性：用來指定標(biāo)記的行為確定元素內(nèi)容的顯示方式，如果標(biāo)記有屬性，則將跟在元素名后，屬性之間用一個(gè)或多個(gè)制表符、空格、回車符分開，不區(qū)分出現(xiàn)的順序。：把標(biāo)記和標(biāo)記所描述的內(nèi)容區(qū)分開，一般成對出現(xiàn)，結(jié)束標(biāo)記沒有屬性HTML的元素名、屬性不區(qū)分大小寫（xHTML區(qū)分且只能用小寫），但最好用小寫（有的操作系統(tǒng)大小敏感，如unix）HTML的源文件是純文本文件，可以用任何一種文本編輯器來編寫，但后綴應(yīng)用.htm或.html。32.2 HTML文檔的基本結(jié)構(gòu)

3、的基本結(jié)構(gòu)HTML文檔包含定義文檔內(nèi)容的文本和定義文檔結(jié)構(gòu)及外觀的標(biāo)記，基本結(jié)構(gòu)如下： ：容器標(biāo)記：容器標(biāo)記 頭標(biāo)記，用于定義文檔標(biāo)題及其它可能會(huì)用于控制文檔顯示或訪問的參數(shù)，如、等 正文，包括要顯示的文本和文檔的控制標(biāo)記 ：容器結(jié)束標(biāo)記：容器結(jié)束標(biāo)記42.3 HTML的常用元素和標(biāo)記的常用元素和標(biāo)記（1）標(biāo)記 功能：界定一個(gè)完整的HTML文檔 屬性：dir, lang, version 結(jié)束標(biāo)記： 包含: head_tag, body_tag, frames dir屬性：內(nèi)容的顯示方式，用于本標(biāo)記用于決定整個(gè)文檔的顯示方向，默認(rèn)為”ltr”，用于其它標(biāo)記則用于決定該標(biāo)記內(nèi)的內(nèi)容的顯示方向 l

4、ang屬性：文檔或文本的顯示語言 version屬性：說明支持的html標(biāo)準(zhǔn)的版本，在HTML4中已棄用，并用標(biāo)記來代替.例： ,如yahoo5（2）標(biāo)記標(biāo)記功能：定義文檔頭區(qū)屬性：dir, lang, profile結(jié)束標(biāo)記：包含: head_content，如base、object、link、style、script、meta使用范圍：html_tag6（3）標(biāo)記標(biāo)記功能：定義文檔標(biāo)題屬性：dir, lang結(jié)束標(biāo)記：包含: plain_text使用范圍：head_content說明：此標(biāo)記只能在head標(biāo)記內(nèi)出現(xiàn). title的內(nèi)容通常在瀏覽器的標(biāo)題欄中顯示. 瀏覽器中收藏夾內(nèi)書簽的名稱

5、是title的內(nèi)容. title的內(nèi)容可以方便搜索引擎索引頁面. 從搜索引擎搜索到的內(nèi)容的標(biāo)題往往是網(wǎng)頁title的內(nèi)容. 示例：當(dāng)當(dāng)7標(biāo)記標(biāo)記功能：提供用戶不可見信息，為其它應(yīng)用程序和搜索引擎訪問提供可用信息屬性：meta屬性主要分為兩組屬性主要分為兩組 name屬性與屬性與content屬性屬性 name屬性用于是以名稱/值形式的名稱描述網(wǎng)頁,name屬性的值所描述的內(nèi)容(值)通過content屬性表示,便于搜索引擎機(jī)器人查找,分類.其中最重要的是description, keywords和robots. http-equiv屬性與屬性與content屬性屬性 http-equiv屬性用于

6、提供HTTP協(xié)議的響應(yīng)頭報(bào)文(MIME文檔頭),它是以名稱/值形式的名稱,http-equiv屬性的值所描述的內(nèi)容(值)通過content屬性表示,通常為網(wǎng)頁加載前提供給瀏覽器等設(shè)備使用.其中最重要的是content-type charset 提供編碼信息,refresh刷新與跳轉(zhuǎn)頁面,no-cache 頁面緩存,expires網(wǎng)頁緩存過期時(shí)間.結(jié)束標(biāo)記：無使用范圍： head_content8標(biāo)記應(yīng)用：標(biāo)記應(yīng)用：name屬性與content屬性組合定義網(wǎng)頁關(guān)鍵詞 阿里巴巴定義網(wǎng)頁簡短描述 定義搜索引擎索引要求 robotterms是一組使用逗號(hào)(,)分割的值，通常有如下幾種取值：none，n

7、oindex，nofollow，all，index和follow。sciencedirect9標(biāo)記應(yīng)用：標(biāo)記應(yīng)用：http-equiv屬性與content屬性組合 定義文件內(nèi)容類型及編碼信息 type的常見取值為application, audio, image, message ,multipart, text, video 示例：阿里巴巴Alibaba10 設(shè)置網(wǎng)頁緩存過期時(shí)間 用法：說明：指定網(wǎng)頁在緩存中的過期時(shí)間，一旦網(wǎng)頁過期，必須到服務(wù)器上重新加載。 注意：必須使用GMT的時(shí)間格式，或直接設(shè)為0(數(shù)字表示多少時(shí)間后過期)。 11 定義頁面緩存 說明:為了提高速度一些瀏覽器會(huì)緩存瀏覽者

8、瀏覽過的頁面,通過上面的定義,瀏覽器一般不會(huì)緩存頁面,而且瀏覽器無法脫機(jī)瀏覽. 重定向:刷新與跳轉(zhuǎn)頁面 12標(biāo)記標(biāo)記功能:定義基URL用于頁面的鏈接與引用 屬性:href,target結(jié)束標(biāo)記:單獨(dú)出現(xiàn)使用范圍:head區(qū)href屬性:當(dāng)前文檔的完整URLtarget屬性:指定目標(biāo)窗口或框架 網(wǎng)易說明:當(dāng)使用相對路徑定義鏈接時(shí)，可以使用base標(biāo)記定義基URL解析所有文檔中定義的相對路徑的URL。 Our Products Have you seen our Bird Cages? 13其它常用其它常用head區(qū)標(biāo)記區(qū)標(biāo)記 :在文檔中聲明使用外部資源 阿里巴巴 :聲明樣式 ,用來創(chuàng)建CSS屬性

9、，以控制整個(gè)文檔主體內(nèi)容的顯示特性 :在文檔中使用腳本 :定義瀏覽器輸出非標(biāo)準(zhǔn)對象的方法,在網(wǎng)頁中嵌入除圖片外的多媒體 14標(biāo)記標(biāo)記 功能：定義文檔主體 屬性：控制文檔外觀的屬性；將文檔自身與其它可編程功能相聯(lián)系的屬性；標(biāo)記和說明文檔主體以供將來參考的屬性 結(jié)束標(biāo)記： 包含: body_content 使用范圍：html_tag15注釋標(biāo)記注釋標(biāo)記: 描述文檔的各個(gè)部分要做什么 解釋為什么要這樣編寫某段代碼 包含不想在文件中顯示的信息 標(biāo)示文件的禁用部分162.3.2 字符實(shí)體字符實(shí)體用于標(biāo)識(shí)特殊字符：不可見字符和特殊用途字符格式格式：&#：#代表字符實(shí)體名稱或者字符的ASCII碼值

10、/TR/html4/sgml/entities.html 顯示方式顯示方式數(shù)字標(biāo)識(shí)符數(shù)字標(biāo)識(shí)符實(shí)體名稱實(shí)體名稱對象對象注釋注釋&#09Tab鍵&#13回車鍵&#32&nbsp 空格!&#33驚嘆號(hào)“&#34&quot引號(hào)在腳本中很有用/&#47斜線（斜杠）&#62&gt大于號(hào)&#92反斜線（反斜杠）&#133省略號(hào)TM&#153商標(biāo)&#160&amp位與運(yùn)算符(&)&#169&copy版權(quán)&#174&re

11、g注冊商標(biāo)&#177&plusmn加號(hào)或減號(hào)172.3.3 對象與多媒體標(biāo)記對象與多媒體標(biāo)記 標(biāo)記 標(biāo)記18object標(biāo)記標(biāo)記 object標(biāo)記是成對出現(xiàn)的,以開始，結(jié)束 使用object標(biāo)記可以在網(wǎng)頁中嵌入各種多媒體或復(fù)雜外部應(yīng)用即對象，例如Flash,Java Applets,MP3,QuickTime Movies等 object標(biāo)記通常配合param 標(biāo)記一同使用,后者用于對象初始化 在網(wǎng)頁中嵌入圖像，一般使用img標(biāo)記 object可以完全代替標(biāo)準(zhǔn)不贊成使用的applet, embed, bgsound標(biāo)記 19一般屬性 archive - 包含多個(gè)使用逗號(hào)(,)分

12、割的Java類或外部資源，用于增強(qiáng)applet的功能，定義applet代碼 border - 邊框 classid - 關(guān)聯(lián)一個(gè)應(yīng)用程序，執(zhí)行嵌入內(nèi)容的應(yīng)用程序在windows系統(tǒng)中的唯一id(不能改變此id，否則程序?qū)⒊霈F(xiàn)異常)，例如 clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 - Flash codebase - 為相對路徑提供基URL，IE瀏覽器通常將此屬性中的內(nèi)容定義為運(yùn)行嵌入內(nèi)容所要加載的插件，例如 http:/ - Flash codetype - 嵌入內(nèi)容的MIME類型，例如 application/java - Java applica

13、tion/x-shockwave-flash - Flash declare - 聲明沒有實(shí)例化的嵌入對象，此對象通常在加載后，或者當(dāng)嵌入對象的某些參數(shù)將使用其它嵌入對象時(shí)可以使用,即實(shí)例化以后使用.此時(shí)對象需指定iddata - 嵌入內(nèi)容(實(shí)例對象)的URL，可以是基于codebase屬性的相對路徑 height - 嵌入內(nèi)容的高度，單位像素 hspace - 嵌入內(nèi)容水平方向的空白，應(yīng)使用CSS margin代替 standby - 文檔加載時(shí)顯示的文本信息 tabindex - 使用Tab鍵的遍歷順序 usemap - 定義圖像點(diǎn)擊區(qū)域 vspace - 嵌入內(nèi)容垂直方向的空白，應(yīng)使用C

14、SS margin代替 width - 嵌入內(nèi)容的寬度，單位像素 20param 標(biāo)簽標(biāo)簽:初始化對象初始化對象 為object標(biāo)簽提供嵌入內(nèi)容的運(yùn)行時(shí)參數(shù)的name與value對 param標(biāo)簽是單獨(dú)出現(xiàn)的param標(biāo)簽用于定義網(wǎng)頁中嵌入內(nèi)容的運(yùn)行時(shí)參數(shù) param標(biāo)簽應(yīng)使用在object或applet標(biāo)簽內(nèi) 屬性 id - 唯一標(biāo)識(shí)符 name - 名稱，name與value屬性組成一對type - 嵌入內(nèi)容的MIME類型 value - name的對應(yīng)值 valuetype - 指定參數(shù)類型 udata - 參數(shù)是一個(gè)簡單的字符串，默認(rèn)值 uref - 參數(shù)是URL uobject -

15、參數(shù)是另一個(gè)嵌入式對象聲明的id21示例示例:嵌入嵌入MediaPlayer播放器播放器22示例示例:嵌入嵌入flash 廣東商學(xué)院23標(biāo)記標(biāo)記導(dǎo)入圖像 img標(biāo)簽是單獨(dú)出現(xiàn)的. 屬性: 一般屬性 alt - 代表圖像的替代文字 src 說明圖像源(就是圖像的保存地點(diǎn)) height - 圖像的高度 width - 圖像的寬度 usemap:定義圖像點(diǎn)擊區(qū)域語法語法: 242.3.4 超鏈接標(biāo)記超鏈接標(biāo)記顯示的文本或圖像內(nèi)容 常用屬性name = cdata :指定錨點(diǎn)(目標(biāo)鏈接)的名稱id =name:指定錨點(diǎn)的元素標(biāo)識(shí)符class =classname:指定錨點(diǎn)的類名href = uri:

16、指定超鏈接的目標(biāo)地址rel = link-types :指定前向鏈接類型rev= link-types:指定后向鏈接類型target = frame-target :指定目標(biāo)窗口或框架:_blank,_self,_parent,_toptabindex = number :遍歷鏈接焦點(diǎn)title=text:顯示提示信息25(2) 圖像地圖標(biāo)記圖像地圖標(biāo)記 功能:用于熱區(qū)超鏈接 語法: map基本屬性:name,id area基本屬性: shape:指定熱區(qū)形狀 coords:指定熱區(qū)坐標(biāo),其值個(gè)數(shù)取決于shape屬性 href:指定熱區(qū)鏈接目標(biāo)地址 target:指定熱區(qū)鏈接顯示窗口或框架26

17、示例示例:指定位置鏈接指定位置鏈接 鏈接到頁面下部 鏈接到頁面上部 . .more document. . 27示例示例2:打開指定郵件鏈接打開指定郵件鏈接 示例示例3:打開圖像鏈接打開圖像鏈接28示例示例4:熱區(qū)鏈接熱區(qū)鏈接 This is a navigation bar. 292.3.5 版式控制標(biāo)記：頁面布局設(shè)計(jì)版式控制標(biāo)記：頁面布局設(shè)計(jì) 列表 表格 框架30列表列表1.無序列表:項(xiàng)目符號(hào) .列表項(xiàng)列表項(xiàng) 列表項(xiàng). 例例:當(dāng)當(dāng) 新浪2.有序列表:連續(xù)標(biāo)號(hào) .列表項(xiàng)列表項(xiàng) 列表項(xiàng) . 如何設(shè)計(jì)列表樣式？如何設(shè)計(jì)列表樣式？CSS list-style-typeCSS list-style-

18、type、list-style-imagelist-style-image、list-list-style-position style-position 屬性屬性 31表格：數(shù)據(jù)表、控制網(wǎng)頁布局表格：數(shù)據(jù)表、控制網(wǎng)頁布局 屬性屬性：align：頁面對齊方式，left, right, centerwidth:整個(gè)表格的寬度，可以是像素值或百分比height：整個(gè)表格的高度，可以是像素值或百分比，通?？墒÷裕瑸g覽器會(huì)自動(dòng)調(diào)整border:邊框的寬度，以像素為單位，缺省值為0，用于排版時(shí)通常取0值。cellpadding:單元格與邊框之間的距離，以像素為單位，缺省值為0cellspacing: 單

19、元格之間的距離，以像素為單位，缺省值為232、 、 :嵌在 內(nèi)，表示表格體 :嵌在 內(nèi)，表示表格的一行屬性：對齊方式，left, right, centeralign:行內(nèi)單元格水平對齊方式，left, right, centervalign：行內(nèi)單元格垂直對齊方式，top, middle, bottom :嵌在 內(nèi)，表示在當(dāng)前行內(nèi)增加一個(gè)單元格屬性：align:行內(nèi)單元格水平對齊方式，left, right, centervalign：行內(nèi)單元格垂直對齊方式，top, middle, bottomnowrap: 表示單元格內(nèi)的文本段只有出現(xiàn)顯式換行標(biāo)記時(shí)才中斷rowspan: 指定該單元格所

20、跨的行數(shù)colspan: 指定該單元格所跨的列數(shù) : 用法同標(biāo)記，惟一區(qū)別在于這個(gè)元素是用來標(biāo)記“頭單元格”的，所謂頭單元格是指表格中位于第一行或第一列用來指示其余各行或各列內(nèi)容的單元格33表格應(yīng)用例表格應(yīng)用例:佳能報(bào)價(jià)單佳能報(bào)價(jià)單佳能 Canon型號(hào)像素/變焦/屏幕/存儲(chǔ)介質(zhì)本周報(bào)價(jià)IXUS 60600萬3X2.5SD2150IXUS 65600萬3X3SD2350IXUS I ZOOM500萬2.4X2.5SD1570EOS 30D(套)800萬EFS17-852.5CF134003435表作為版式工具示例表作為版式工具示例Listing 3-6 Page Using Tables Lis

21、tings Listing 3-1 Listing 3-2 Listing 3-3 Listing 3-4 This page demonstrates using a table for page layout. It is organized with local links on the left, external links on the right, content in the center, and a header at the top. Organizations Microsoft Microsoft Press W3C Useful Sites SBN Workshop

22、 MSDN WebR WebR 36表作為版式工具示例表作為版式工具示例37表作為版式工具示例表作為版式工具示例 卓越亞馬遜 yahoo38框架 它是一個(gè)標(biāo)準(zhǔn)的HTML文件，只包括如何分割網(wǎng)頁和文件在每個(gè)區(qū)域如何顯示的信息Listing 3-8 /定義框架頁面 /定義一個(gè)框架 /對不支持框架的設(shè)備進(jìn)行提示,或相關(guān)操作 瀏覽器不支持框架! 39框架示例框架示例40嵌套框架：多級(jí)版式Listing 3-9 41嵌套框架示例42跨框架定位 增加導(dǎo)航框架（包括其它框架的鏈接，目標(biāo)框架的定位屬性）Listing 3-10 導(dǎo)航欄（框架）：Go to Frame 1Go to Frame 2Go to F

23、rame 3 43導(dǎo)航框架示例導(dǎo)航框架示例442.3.6 表單：互動(dòng)表單：互動(dòng)表單是網(wǎng)頁上的一個(gè)特定區(qū)域。這個(gè)區(qū)域是由一對元素定義的。其間是各種接受用戶輸入的控件 HTML表單是HTML頁面與瀏覽器端實(shí)現(xiàn)交互的重要手段。利用表單可以收集客戶端提交的有關(guān)信息。在HTML里，我們可以定義表單，并且使表單與CGI或ASP等服務(wù)器端的表單處理程序配合。什么時(shí)候用到表單？搜索、注冊、登陸、論壇、交易、調(diào)查4表單的基本語法結(jié)構(gòu) . . . action屬性：用來定義表單處理程序（ASP、JSP或CGI程序）的位置(相對地址或絕對地址)。method屬性定義表單結(jié)果從瀏覽器傳送到服務(wù)器的方法

24、，一般有兩種方法：get、post。 ，4 簡單文本輸入標(biāo)記 type=*決定控件類型，分為輸入型,選擇型,點(diǎn)擊型。每個(gè)控件都應(yīng)該包含type和name屬性，并且大多數(shù)都包括value屬性。1) 按鈕：激活某個(gè)操作按鈕：激活某個(gè)操作普通按鈕提交按鈕重置按鈕472) 復(fù)選框復(fù)選框(Checkbox) ：選擇多個(gè)項(xiàng)目：選擇多個(gè)項(xiàng)目在一個(gè)表單里的所有多選框可以有一個(gè)或多個(gè)被選中。483) 單選按鈕單選按鈕(RadioButton)：只能選擇一項(xiàng)：只能選擇一項(xiàng)一個(gè)表單里的所有變量名相同的單選框只能夠有一個(gè)被選中。各個(gè)選項(xiàng)的各個(gè)選項(xiàng)的name必須一樣必須一樣494) 文本輸入框：輸入單行

25、文本文本輸入框：輸入單行文本 ? 文本框的名字* text或password* 默認(rèn)值或?yàn)榭? 長度? 最大輸入字符數(shù)505) 圖象域：圖像按鈕圖象域：圖像按鈕6) 文件域：上傳文件文件域：上傳文件7)7)隱藏域隱藏域input type=” 示例示例5 文本域文本域:多行多列的文本輸入框多行多列的文本輸入框 . * 文本域的名字 * 行數(shù)或列數(shù) * off,soft,hard ：不換行、自動(dòng)換行、強(qiáng)制換行5 下拉列表：從列表中選擇一個(gè)或多個(gè)選項(xiàng)下拉列表：從列表中選擇一個(gè)或多個(gè)選項(xiàng) 說明 說明2 multiple：有該項(xiàng)說明可以選擇多項(xiàng)示例 53表單示例：代碼表

26、單示例：代碼 Listing 4-2/由網(wǎng)站http:/ 的jsp目錄下的prc.jsp程序處理。 /控件類型This text is next to check box 1.This text is next to check box 2./name值必須一致This text is next to the first radio button.This text is next to the second radio button./自動(dòng)換行的文本域 This text is inside TEXTAREA 1. Note how lines of code are automatical

27、ly wrapped and how line breaks in the code cause breaks.54表單示例：圖示表單示例：圖示文本輸入框：普通文本文本輸入框：密碼復(fù)選框單選按鈕普通按鈕文件域重置按鈕提交按鈕圖像域55文本域示例：代碼文本域示例：代碼Listing 4-3 This text is inside TEXTAREA 1. Note how lines of code are automatically wrapped and how line breaks in the code cause breaks. This text is inside TEXTAREA

28、 2. Note how lines of code are not automatically wrapped and how line breaks in the code cause breaks.56文本域示例：圖示文本域示例：圖示自動(dòng)換行的文本域不自動(dòng)換行的文本域57下拉列表示例：代碼下拉列表示例：代碼Listing 4-4Select one item: Text of option 1 Text of option 2 Text of option 3 Text of option 4 Text of option 5Select one item: Text of option

29、 1 Text of option 2 Text of option 3 Text of option 4 Text of option 5Select multiple items: Text of option 1 Text of option 2 Text of option 3 Text of option 4 Text of option 558下拉列表示例：圖示下拉列表示例：圖示顯示選中選項(xiàng)，由用戶打開列表定位反顯選中選項(xiàng)且自動(dòng)打開列表，用滾動(dòng)條上下移動(dòng)定位反顯選中選項(xiàng)且自動(dòng)打開列表，用滾動(dòng)條上下移動(dòng)，且可選擇多個(gè)目標(biāo)選項(xiàng)：連續(xù)選擇：按shift鍵并連續(xù)選擇目標(biāo)選項(xiàng)不連續(xù)選擇：按C

30、trl鍵單擊目標(biāo)選項(xiàng)592.4 CSS技術(shù)：數(shù)據(jù)與表現(xiàn)分離技術(shù)：數(shù)據(jù)與表現(xiàn)分離 CSS（Cascading Style Sheet，層疊樣式表）是一種格式化網(wǎng)頁的標(biāo)準(zhǔn)方式，它擴(kuò)展了 HTML 的功能，使網(wǎng)頁設(shè)計(jì)者能夠以更有效的方式設(shè)置網(wǎng)頁格式。 CSS是一種分離web文檔內(nèi)容與格式的技術(shù)，可以控制web文檔的外觀和版式，使用CSS可以改變：文本的大小、格式、顏色、字間距、邊框、元素周圍的補(bǔ)白，乃至網(wǎng)頁上對象的精確位置。 共享樣式設(shè)定 個(gè)性化的標(biāo)準(zhǔn)網(wǎng)頁：CSS+DIV=web標(biāo)準(zhǔn)60兩個(gè)簡單例子兩個(gè)簡單例子使用使用HTML方式方式 一級(jí)標(biāo)題一級(jí)標(biāo)題 .其他正文其他正文. 一級(jí)標(biāo)題一級(jí)標(biāo)題 H1t

31、ext- align:center; font-family:楷體楷體_GB2312使用使用CSS方式方式 一級(jí)標(biāo)題一級(jí)標(biāo)題 .其他正文其他正文. 一級(jí)標(biāo)題一級(jí)標(biāo)題612.4.1 樣式表定義語法樣式表定義語法樣式表：也稱樣式定義，或樣式規(guī)則，可包含于文檔中，也可保存于.css文件中?；窘Y(jié)構(gòu)為：Selectorproperty1:value1;property2:value2;property3:value3;Selector定義樣式作用的對象，稱為選擇器，花括號(hào)中為樣式聲明塊，其中property為CSS屬性，value為屬性對應(yīng)的值，各樣式聲明之間用分號(hào)隔開。 H1 text-align:

32、center; font-family:黑體選擇器樣式定義樣式屬性屬性取值62常用常用Selector類型類型 HTML標(biāo)記符 用戶定義的類 用戶定義的ID 偽類63HTML Selector不帶尖括號(hào)的標(biāo)記名作選擇符 HTML標(biāo)記符是最常用的selector，它重新定義了HTML標(biāo)記符的顯示效果。例如：H1text-align:center;color:red 使所有用H1標(biāo)記符修飾的內(nèi)容都居中和用紅色顯示body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,divmargin:0;padding:0;border:0;ul

33、,ollist-style-type:none;64選擇符應(yīng)用示例基本清單選擇符應(yīng)用示例基本清單 New Port Richey The New Port Richey Dog Show Show Date: 7/31/2001 New Port Richey, FL Best In Show: CH Sarahs Razzle Dazzle (Yorkshire Terrier) Complete results Herding Group: German Shepherd Dog CH Sabre Dawn Toy Group: Yorkshire Terrier CH Sarahs Ra

34、zzle Dazzle Sporting Group: Golden Retriever CH Chases Golden Chance Non-Sporting Group: Tibetan Terrier CH Winston of Sunny Brook Lane 65選擇符應(yīng)用示例基本清單代碼運(yùn)行頁面選擇符應(yīng)用示例基本清單代碼運(yùn)行頁面66標(biāo)記選擇符應(yīng)用示例清單標(biāo)記選擇符應(yīng)用示例清單. * font-family: Verdana . 67標(biāo)記選擇符應(yīng)用示例運(yùn)行結(jié)果標(biāo)記選擇符應(yīng)用示例運(yùn)行結(jié)果68Selector:用戶定義類用戶定義類 .classnameproperty:value 表示

35、任何class屬性為classname的標(biāo)記符都采用所定義的樣式。 類選擇符的語法是在類名前面加一個(gè)點(diǎn)號(hào)（.） 類是一種增強(qiáng)頁面可管理性的出色方法，因?yàn)橹恍瓒x和修改樣式表，就可以對站點(diǎn)的外觀進(jìn)行全面定義和修改。 69類選擇符應(yīng)用示例清單類選擇符應(yīng)用示例清單. font-family: Verdana td font-size: 10pt . 70類選擇符應(yīng)用示例運(yùn)行結(jié)果類選擇符應(yīng)用示例運(yùn)行結(jié)果71Selector:用戶定義的用戶定義的ID #idnameproperty:value 表示任何ID屬性為idname的標(biāo)記符都采用所定義的樣式。 ID選擇符的語法是在類名前面加一個(gè)#號(hào)（#） 用戶

36、定義ID與class的作用完全相同，但I(xiàn)D 在一個(gè)文檔中應(yīng)該是惟一的。 72ID選擇符應(yīng)用示例選擇符應(yīng)用示例. font-family: Verdana td font-size: 10pt .category font-weight: bold; td.category font-style: italic . 73ID選擇符應(yīng)用示例運(yùn)行結(jié)果選擇符應(yīng)用示例運(yùn)行結(jié)果74Selector:偽類偽類偽類的語法是在原有的語法里加上一個(gè)偽類（pseudo-class）：selector:pseudo-class property: value（選擇符:偽類 屬性: 值）偽類和類不同，是CSS已經(jīng)定義好

37、的，不能象類選擇符一樣隨意用別的名字，根據(jù)上面的語法可以解釋為對象（選擇符）在某個(gè)特殊狀態(tài)下（偽類）的樣式。 常用的偽類 :link 未訪問過的超鏈接 :visited 訪問過的超鏈接 :hover 懸停狀態(tài)的超鏈接 :active 活動(dòng)超鏈接75偽類選擇符應(yīng)用示例清單偽類選擇符應(yīng)用示例清單. * font-family: Verdana td font-size: 10pt .category font-weight: bold; td.category font-style: italic #bestinshow color: red . 76偽類選擇符應(yīng)用示例運(yùn)行結(jié)果偽類選擇符應(yīng)用示例運(yùn)

38、行結(jié)果77Selector:后代、子、同胞后代、子、同胞 CSS 不但允許根據(jù)元素名應(yīng)用規(guī)則，還允許根據(jù)元素在整個(gè)文檔中的位置應(yīng)用規(guī)則。例如，一個(gè)規(guī)則可以只選擇段落標(biāo)記內(nèi)的鏈接。 繼承繼承：嵌套的子對象（嵌套元素）繼承外部元素或父元素的格式，除非子對象另有格式定義 后代：空格連接 子：大于號(hào)連接 同胞：加號(hào)連接78層次結(jié)構(gòu)關(guān)系選擇符應(yīng)用示例清單層次結(jié)構(gòu)關(guān)系選擇符應(yīng)用示例清單. font-family: Verdana td font-size: 10pt .category font-weight: bold; td.category font-style: italic #bestinsho

39、w color: red :hover background-color: red . 79后代后代同胞同胞802.4.2 樣式引用樣式引用n嵌入式樣式嵌入式樣式 ：內(nèi)聯(lián)引用n樣式表樣式表 全局樣式表：全局樣式表：內(nèi)部引用 鏈接的格式頁：鏈接的格式頁：外部引用81嵌入式樣式使用style屬性將樣式應(yīng)用于單個(gè)元素上，實(shí)現(xiàn)對特定元素的精確控制，優(yōu)先于樣式表控制，可以應(yīng)用于任何標(biāo)記，并且只影響所應(yīng)用的標(biāo)記style=”單個(gè)或以分號(hào)分隔的若干樣式聲明（聲明塊）”樣式聲明:屬性：屬性值Listing 11-2This text is in a SPAN.This text is not in a SPA

40、N.82全局樣式表通過將樣式表嵌入標(biāo)記內(nèi)的標(biāo)記對內(nèi)實(shí)現(xiàn)，控制文檔中相應(yīng)標(biāo)記的樣式標(biāo)記的格式樣式表83Listing 11-7 H1 font-size: 16pt; font-weight: bold; color: red H2 font-style: italic; font-size: 24pt; color: green SPAN font-weight: bold; font-style: italic.adivheight:52px;width:145px :hoverbackground-color:red / /本文檔懸停狀態(tài)的超接鏈的背景色為紅色本文檔懸停狀態(tài)的超接鏈的背景色

41、為紅色This text is in a SPAN.This text is in an H1.This text is in an H2. /本塊的高度為本塊的高度為52px,52px,寬度為寬度為145px145pxHerding Group: Toy Group: This is modified H2 text./本塊的高度為本塊的高度為52px，寬度為寬度為145px84全局樣式表示例85鏈接的樣式表 以.css為擴(kuò)展名的包含格式定義的文本文件，可用來控制若干個(gè)網(wǎng)頁或整web站點(diǎn)的樣式。使用方法為在文檔的區(qū)使用標(biāo)記引用： nH1 font-size: 16pt; font-weigh

42、t: bold; color: red （styles.css）nH2 font-style: italic; font-size: 24pt; color: greennSPAN font-weight: bold; font-style: italicListing 11-8This text is in a SPAN.This text is in an H1.This text is in an H2.This is modified H2 text.import命令: 格式頁包含命令，即在格式頁中加載其它格式頁86鏈接的樣式表示例872.4.3 樣式的優(yōu)先級(jí)樣式的優(yōu)先級(jí) 樣式的優(yōu)先級(jí)

43、遵循“就近優(yōu)先”的原則，也就是說，距離所修飾對象越近的樣式，其優(yōu)先級(jí)越高。 樣式如果沖突，則采用高優(yōu)先級(jí)樣式；如果不沖突，則采用疊加的樣式效果。882.4.4 CSS+DIV：模塊化、結(jié)構(gòu)化設(shè)計(jì)：模塊化、結(jié)構(gòu)化設(shè)計(jì)l模塊化設(shè)計(jì)要求相對封閉獨(dú)立性、可重復(fù)性、可修改性、統(tǒng)一性等 l結(jié)構(gòu)化設(shè)計(jì)的意思是你需要分析網(wǎng)站的內(nèi)容塊，以及每塊內(nèi)容服務(wù)的目的，然后再根據(jù)這些內(nèi)容目的建立起相應(yīng)的HTML結(jié)構(gòu)。 l仔細(xì)分析和規(guī)劃你的頁面結(jié)構(gòu)，你可能得到類似這樣的幾塊： 標(biāo)志和站點(diǎn)名稱 主頁面內(nèi)容 站點(diǎn)導(dǎo)航(主菜單) 子菜單 搜索框功能區(qū)(例如購物車、收銀臺(tái)) 頁腳(版權(quán)和有關(guān)法律聲明) 89我們通常采用DIV元素來

44、將這些結(jié)構(gòu)定義出來，例如： div id=“header”/div div id=“content”/div div id=“globalnav”/div div id=“subnav”/div div id=“search”/div div id=“shop”/div div id=“footer”/div 起類似作用的還有span,通常與類選擇符、ID選擇符一起使用例：新浪90新浪新浪DIV示例示例 91新浪樣式表部分規(guī)則新浪樣式表部分規(guī)則:導(dǎo)航欄導(dǎo)航欄(主萊單主萊單).logonav BORDER-RIGHT: #e0e0e0 1px solid; BORDER-TOP: #e0e0e0

45、 1px; BACKGROUND: url(http:/ #f9f9f9 repeat-x 0px -400px; MARGIN-BOTTOM: 8px; OVERFLOW: hidden; BORDER-LEFT: #e0e0e0 1px solid; BORDER-BOTTOM: #e0e0e0 1px solid; POSITION: relative; HEIGHT: 85px.logo LEFT: 10px; WIDTH: 145px; POSITION: absolute; TOP: 0px; HEIGHT: 52px.logo H1 LEFT: 13px; OVERFLOW: h

46、idden; WIDTH: 117px; POSITION: absolute; TOP: 10px; HEIGHT: 42px.weather Z-INDEX: 98; LEFT: 6px; OVERFLOW: hidden; POSITION: absolute; TOP: 57px; HEIGHT: 20px.nav RIGHT: 0px; OVERFLOW: hidden; WIDTH: 790px; POSITION: absolute; TOP: 0px; HEIGHT: 85px.nav_2 FLOAT: left; OVERFLOW: hidden; PADDING-TOP:

47、13px; _display: inline-block.nav_3 FLOAT: left; OVERFLOW: hidden; PADDING-TOP: 13px; _display: inline-block.nav_2 DISPLAY: inline; BACKGROUND: url(http:/ no-repeat 106px -287px; MARGIN-LEFT: 3px; WIDTH: 107px.nav_3 WIDTH: 125px.nav UL CLEAR: both; HEIGHT: 23px.nav LI PADDING-RIGHT: 6px; PADDING-LEFT: 6px; BACKGROUND: url(http:/ no-repeat 0px -250px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN-LEFT: -1px; LINE-HEIGHT: 14px;