c課件第11章網(wǎng)站建設與網(wǎng)頁制作

1、c課件第11章網(wǎng)站建設與網(wǎng)頁制作網(wǎng)站開發(fā)主要分兩方面網(wǎng)站開發(fā)主要分兩方面: :u Web Web頁面設計頁面設計 HTML(HTML(超文本標記語言超文本標記語言) )實現(xiàn)。實現(xiàn)。u WebWeb邏輯功能設計邏輯功能設計 指實現(xiàn)內(nèi)部邏輯功能，早期使用腳本語言實現(xiàn)，如指實現(xiàn)內(nèi)部邏輯功能，早期使用腳本語言實現(xiàn)，如JavaSJavaScriptcript、VBScriptVBScript等，但是腳本語言功能較弱，實現(xiàn)復雜。等，但是腳本語言功能較弱，實現(xiàn)復雜。 11.1 網(wǎng)站的創(chuàng)建 VS202XVS202X提供了三種創(chuàng)建站點的位置類型提供了三種創(chuàng)建站點的位置類型: : 文件系統(tǒng)文件系統(tǒng) FTPFTP

2、HTTPHTTP 三種類型中，一般使用文件系統(tǒng)。它可在本機任何一個位置三種類型中，一般使用文件系統(tǒng)。它可在本機任何一個位置創(chuàng)建網(wǎng)站，也可直接將創(chuàng)建的網(wǎng)站從一個文件夾移動或復制創(chuàng)建網(wǎng)站，也可直接將創(chuàng)建的網(wǎng)站從一個文件夾移動或復制到另一個文件夾，或者直接復制到另一臺機器中。到另一個文件夾，或者直接復制到另一臺機器中。 HTMLHTML和和XHTMLXHTMLu 在在VS202XVS202X中網(wǎng)頁默認使用的目標架構為：中網(wǎng)頁默認使用的目標架構為：u XHTML 1.0 Transitional XHTML 1.0 TransitionaluXHTMLXHTML是在是在HTMLHTML（超文本標記語言

3、）基礎上為適應目前（超文本標記語言）基礎上為適應目前流行的流行的XMLXML（可擴展標記語言）而發(fā)展的新一代（可擴展標記語言）而發(fā)展的新一代WebWeb標記標記語言。語言。uW3CW3C在在202X202X年年1 1月首次提出月首次提出XHTMLXHTML時，目標是將時，目標是將WebWeb翻翻譯為譯為XMLXML。是作為一種幫助。是作為一種幫助WebWeb開發(fā)人員和創(chuàng)作工具開發(fā)人員和創(chuàng)作工具制造商放棄傳統(tǒng)制造商放棄傳統(tǒng)HTMLHTML標記語言，遷移到一個基于標記語言，遷移到一個基于XMLXML的新的的新的HTML-XMLHTML-XML的混合體而開發(fā)的，因此叫做的混合體而開發(fā)的，因此叫做XH

4、TML XHTML 1.0 Transitional1.0 Transitional。 HTMLHTML和和XHTMLXHTML( (續(xù)續(xù)) ) 從使用角度說明從使用角度說明HTMLHTML與與XHTMLXHTML的不同：的不同：u大小寫大小寫 HTMLHTML不區(qū)分大小寫，元素和屬性名稱可以是大寫、小寫或大小寫混合；不區(qū)分大小寫，元素和屬性名稱可以是大寫、小寫或大小寫混合；而而XHTMLXHTML要求所有元素和屬性名稱必須是小寫的，而屬性值則大小寫均可。要求所有元素和屬性名稱必須是小寫的，而屬性值則大小寫均可。u標記嵌套標記嵌套 在在HTMLHTML中使用不正確的嵌套，一樣可以在很多瀏覽器中

5、使用；而中使用不正確的嵌套，一樣可以在很多瀏覽器中使用；而XHTMLXHTML則要求則要求嵌套必須完全正確。嵌套必須完全正確。 u有否結(jié)束標記有否結(jié)束標記 在在HTMLHTML中有些標記是可以沒有結(jié)束標記；而中有些標記是可以沒有結(jié)束標記；而XHTMLXHTML要求所有標記都必須有結(jié)要求所有標記都必須有結(jié)束標記束標記 。u引號引號 HTMLHTML中的屬性值可以用引號引起來，也可以不使用引號；但中的屬性值可以用引號引起來，也可以不使用引號；但XHTMLXHTML中要求中要求所有屬性值都必須加引號。所有屬性值都必須加引號。u樣式樣式 如果不使用樣式表，如果不使用樣式表，HTMLHTML中的每一個樣

6、式都可以直接使用屬性名中的每一個樣式都可以直接使用屬性名= =屬性值的方法屬性值的方法設置樣式；但是在設置樣式；但是在XHTMLXHTML中，如果不樣式表，則必須通過中，如果不樣式表，則必須通過StyleStyle屬性來設置。屬性來設置。 11.2.1 HTML11.2.1 HTML和和XHTMLXHTML的格式與標記的格式與標記u基本格式：基本格式： HTMLHTML文檔文檔= =首部（首部（headhead）+ +主體（主體（bodybody）u首部：由標記首部：由標記和和之間的內(nèi)容構成。用于設置之間的內(nèi)容構成。用于設置HTMLHTML文件的標題、文件的標題、作者等信息（瀏覽器中不顯示）。

7、首部中可包含標題標記符作者等信息（瀏覽器中不顯示）。首部中可包含標題標記符 title title 、樣、樣式標記符式標記符 stylestyle、腳本語言標記符、腳本語言標記符 scriptscript等。等。u主體：由標記主體：由標記和和之間的內(nèi)容構成。網(wǎng)頁中的所有內(nèi)容，包之間的內(nèi)容構成。網(wǎng)頁中的所有內(nèi)容，包括文字、圖形、鏈接以及其他頁面元素都包含在該標記符內(nèi)。括文字、圖形、鏈接以及其他頁面元素都包含在該標記符內(nèi)。11.2.1 HTML11.2.1 HTML和和XHTMLXHTML的格式與標記的格式與標記( (續(xù)續(xù)) )u HTMLHTML文檔的一般形式為文檔的一般形式為 : : 文檔標題

8、文檔標題 這是這是xhtmlxhtml文檔的主體部分文檔的主體部分 u 在在HTMLHTML文檔中，文檔中，標記標記和和/ /標記標記都是配對使用的。都是配對使用的。11.2.1 HTML11.2.1 HTML和和XHTMLXHTML的格式與標記的格式與標記( (續(xù)續(xù)) ) 中可以包含屬性，一般格式為：中可以包含屬性，一般格式為：標記標記 屬性屬性1=1=值值1 1 屬性屬性2=2=值值2 2 例如：例如： 標記之間必須使用空格隔開，屬性名和屬性值之間用等號隔開，等號左邊是屬性標記之間必須使用空格隔開，屬性名和屬性值之間用等號隔開，等號左邊是屬性名稱，右邊是屬性值。名稱，右邊是屬性值。例例11

9、-4: HTML11-4: HTML標記示例，主要代碼如下標記示例，主要代碼如下: :11.2.1 11.2.1 HTMLHTML和和XHTMLXHTML的格式與標記的格式與標記( (續(xù)續(xù)) ) 一個很有意義的計算題！一個很有意義的計算題！ !- - 如果令如果令A-Z A-Z 分別等于百分之分別等于百分之1-261-26，那么，那么 Hard work Hard work （努力工作）（努力工作）H+A+R+D+W+O+R+K = 8+1+18+4+23+15+18+11 = 98%H+A+R+D+W+O+R+K = 8+1+18+4+23+15+18+11 = 98% Knowledge

10、Knowledge（知識）（知識）& & &K+N+O+W+L+E+D+G+E =11+14+15+23+12+5+4+7+5 = 96%& & &K+N+O+W+L+E+D+G+E =11+14+15+23+12+5+4+7+5 = 96%11.2.1 HTML11.2.1 HTML和和XHTMLXHTML的格式與標記的格式與標記( (續(xù)續(xù)) )LoveLove（愛情）（愛情）& & &L+O+V+E = 12+15+22+5 = 54%& & &L+O+V+E = 12+15+22+5 = 54% Luck Luck（好運）（好運）& & &L+U+C+K = 12+21+3+11 = 4

11、7%& & &L+U+C+K = 12+21+3+11 = 47% （這些我們通常認為重要的東西往往并不是最重要的）（這些我們通常認為重要的東西往往并不是最重要的） 什么能使得生活變得圓滿？什么能使得生活變得圓滿？ 是是MoneyMoney（金錢）嗎（金錢）嗎?& ?& 不不! ! M+O+N+E+Y = 13+15+14+5+25 = 72% M+O+N+E+Y = 13+15+14+5+25 = 72% 11.2.1 HTML11.2.1 HTML和和XHTMLXHTML的格式與標記的格式與標記( (續(xù)續(xù)) ) 是是LeadershipLeadership（領導能力）嗎（領導能力）嗎?&

12、?& 不不! ! L+E+A+D+E+R+S+H+I+P = 12+5+1+4+5+18+19+9+16 = 89%L+E+A+D+E+R+S+H+I+P = 12+5+1+4+5+18+19+9+16 = 89% 那么，什么能使生活變成那么，什么能使生活變成100%100%的圓滿呢？的圓滿呢？ 標記：設置文件中的標題。與其相似的有標記：設置文件中的標題。與其相似的有到到，其中，其中表示最大標題，表示最大標題，表示最小標題。其中的表示最小標題。其中的text-aligntext-align屬性設置標題的水平對齊方式。屬性設置標題的水平對齊方式。 11.2.1 HTML11.2.1 HTML和和

13、XHTMLXHTML的格式與標記的格式與標記( (續(xù)續(xù)) )u URLURL（統(tǒng)一資源定位符）用于定位（統(tǒng)一資源定位符）用于定位WebWeb上的文件信息，有絕上的文件信息，有絕對和相對之分。對和相對之分。u 絕對絕對URLURL：指完整的資源地址。：指完整的資源地址。u 具體形式：協(xié)議名稱具體形式：協(xié)議名稱:/:/計算機域名計算機域名/ /路徑和文件名。路徑和文件名。u 如：。如：。u 其中其中 表示超文本傳輸協(xié)議，是文件所在的計算機表示超文本傳輸協(xié)議，是文件所在的計算機的域名，的域名，/202X0624/3141719.html /202X0624/3141719.html 表示路徑和文件名

14、在表示路徑和文件名在指定外部指定外部InternetInternet資源時一般使用絕對資源時一般使用絕對URLURL。u 相對相對URLURL：指資源相對于當前頁面的路徑，如：指資源相對于當前頁面的路徑，如u 表示當前目錄下的表示當前目錄下的imageimage子目錄下的文件。子目錄下的文件。 11.2.1 HTML11.2.1 HTML和和XHTMLXHTML的格式與標記的格式與標記( (續(xù)續(xù)) ) 例例11-511-5：設計兩個靜態(tài)頁面，第一個頁面鏈接到第二個頁：設計兩個靜態(tài)頁面，第一個頁面鏈接到第二個頁面。面。11.3 11.3 頁面定位與布局方法頁面定位與布局方法 網(wǎng)頁中常用的布局方法

15、有兩種：網(wǎng)頁中常用的布局方法有兩種：u利用表格進行布局利用表格進行布局u利用層進行布局利用層進行布局 兩種布局方法各有優(yōu)缺點，設計者可以根據(jù)實際情況選擇一種或同時使用，而頁面兩種布局方法各有優(yōu)缺點，設計者可以根據(jù)實際情況選擇一種或同時使用，而頁面中的元素定位則是利用中的元素定位則是利用positionposition樣式屬性。樣式屬性。 11.3.1 11.3.1 表格表格 表格除了可直接在單元格內(nèi)顯示內(nèi)容，還可將整個頁面劃分為若干個獨表格除了可直接在單元格內(nèi)顯示內(nèi)容，還可將整個頁面劃分為若干個獨立的部分，精確地定位文本、圖像或其它元素。表格由行和列組成，行列交立的部分，精確地定位文本、圖像或

16、其它元素。表格由行和列組成，行列交叉構成了單元格。如下面代碼對應右邊的圖：叉構成了單元格。如下面代碼對應右邊的圖： 第一行第一個單元格第一行第一個單元格 第一行第二個單元格第一行第二個單元格 在這段代碼中，每一個在這段代碼中，每一個作為一行，每一個作為一行，每一個作為該行中作為該行中的一個單元格。的一個單元格。11.3.1 11.3.1 表格（續(xù)）表格（續(xù)）例例11-611-6：使用可視化界面設計表格。：使用可視化界面設計表格。 11.3.1 11.3.1 表格（續(xù)）表格（續(xù)）修改表格修改表格在在VS202XVS202X中非規(guī)則表格可以通過菜單和代碼兩種方式操作。中非規(guī)則表格可以通過菜單和代碼

17、兩種方式操作。 例例 11-7 11-7：效果：效果：11.3.2 11.3.2 利用表格進行頁面布局利用表格進行頁面布局VS202XVS202X中的表格布局模板簡化了頁面布局的制作過程。中的表格布局模板簡化了頁面布局的制作過程。 例例11-811-8：利用表格模板進行頁面布局：利用表格模板進行頁面布局 11.3.3 11.3.3 頁內(nèi)框架頁內(nèi)框架 網(wǎng)頁制作中一個頁面內(nèi)的一部分區(qū)域中顯示另一頁面的內(nèi)容，網(wǎng)頁制作中一個頁面內(nèi)的一部分區(qū)域中顯示另一頁面的內(nèi)容，可以利用頁內(nèi)框架完成?？梢岳庙搩?nèi)框架完成。 頁內(nèi)框架只能在源視圖下用直接輸入代碼的方式創(chuàng)建。常用格頁內(nèi)框架只能在源視圖下用直接輸入代碼的方

18、式創(chuàng)建。常用格式為：式為：不支持頁內(nèi)框架瀏覽器顯示的內(nèi)容不支持頁內(nèi)框架瀏覽器顯示的內(nèi)容 例例11-911-9：在上例中使用頁內(nèi)框架制作頁面。：在上例中使用頁內(nèi)框架制作頁面。11.3.3 11.3.3 頁內(nèi)框架（續(xù)）頁內(nèi)框架（續(xù)） target target 屬性是控制超鏈接的目標文件如何顯示的。屬性是控制超鏈接的目標文件如何顯示的。A A標記的標記的targettarget屬性的特殊值：屬性的特殊值： u _top_top：表示目標頁面將占用整個瀏覽器窗口：表示目標頁面將占用整個瀏覽器窗口 u _self _self ：表示在當前超鏈接所在的框架中顯示目標頁面：表示在當前超鏈接所在的框架中顯示

19、目標頁面u _blank _blank ：表示在一個新的瀏覽器窗口中顯示頁面：表示在一個新的瀏覽器窗口中顯示頁面 u _parent _parent ：表示將目標頁面裝入當前框架的父框架中，但是有的瀏覽器將：表示將目標頁面裝入當前框架的父框架中，但是有的瀏覽器將其解釋為其解釋為_top _top u 自定義自定義url url ：指出目標頁的路徑：指出目標頁的路徑 11.3.4 11.3.4 層的使用與布局方法層的使用與布局方法 divdiv標記是一個區(qū)塊級的標記是一個區(qū)塊級的HTMLHTML標記，在該標記之間可以添加段落、表格、圖片等內(nèi)標記，在該標記之間可以添加段落、表格、圖片等內(nèi)容。它的基

20、本功能就是將一些標記元素組織起來，應用容。它的基本功能就是將一些標記元素組織起來，應用divdiv標記的屬性為這些標記標記的屬性為這些標記元素定義統(tǒng)一的樣式，也可以為某些不支持特定屬性的標記元素應用該屬性樣式。元素定義統(tǒng)一的樣式，也可以為某些不支持特定屬性的標記元素應用該屬性樣式。利用利用JavascriptJavascript技術，可使同一層中所有元素一起顯示、移動或隱藏。技術，可使同一層中所有元素一起顯示、移動或隱藏。 例例11-10 11-10 ：divdiv標記的基本用法。標記的基本用法。11.3.4 11.3.4 層的使用與布局方法（續(xù)）層的使用與布局方法（續(xù)）uz-index屬性

21、指當兩個或多個元素占據(jù)同一區(qū)域時應以什么樣的順序顯示元素。利指當兩個或多個元素占據(jù)同一區(qū)域時應以什么樣的順序顯示元素。利 用它可以實現(xiàn)不同內(nèi)容的重疊顯示效果。其值大的層顯示時位于上方，值小的位用它可以實現(xiàn)不同內(nèi)容的重疊顯示效果。其值大的層顯示時位于上方，值小的位于下方，該值可正可負。若不定義則默認為第于下方，該值可正可負。若不定義則默認為第0 0層。層。uposition屬性 指將層放在頁面的位置。它有三個值：指將層放在頁面的位置。它有三個值：absoluteabsolute、relativerelative和和staticstatic。若不指定。若不指定則默認為則默認為staticstati

22、c（正常流中的位置）。（正常流中的位置）。 absoluteabsolute指指相對于父容器左上角的的絕對坐標位置，位置，與屏幕分辨率無關； relativerelative則指相對于父容器中流的起始位置，不一定是左上角。父容器指包含它則指相對于父容器中流的起始位置，不一定是左上角。父容器指包含它的最近的一級，可以是的最近的一級，可以是tabletable，也可以是，也可以是divdiv。 例例 11-1111-11：層的重疊顯示效果。：層的重疊顯示效果。11.4 11.4 母版頁母版頁 母版頁（母版頁（Master PageMaster Page）的擴展名為）的擴展名為“.master.ma

23、ster”，它相當，它相當于網(wǎng)頁的模板。母版頁除了留給其它網(wǎng)頁修改的部分用專于網(wǎng)頁的模板。母版頁除了留給其它網(wǎng)頁修改的部分用專門的門的ContentPlaceHolderContentPlaceHolder控件預留出來以外，其它部分與控件預留出來以外，其它部分與一般網(wǎng)頁的設計沒有什么區(qū)別。一般網(wǎng)頁的設計沒有什么區(qū)別。 母版頁的內(nèi)容無法直接在瀏覽器中察看，只有通過其它頁母版頁的內(nèi)容無法直接在瀏覽器中察看，只有通過其它頁面的引用才可以顯示。面的引用才可以顯示。 在其他網(wǎng)頁中，只要引用了母版頁，母版頁的頁面就可以在其他網(wǎng)頁中，只要引用了母版頁，母版頁的頁面就可以自動被解析出來，但是設計者只可以修改引

24、用的母版頁中自動被解析出來，但是設計者只可以修改引用的母版頁中預留的部分，而其它部分則不能修改，這樣就可以使多個預留的部分，而其它部分則不能修改，這樣就可以使多個頁面的風格保持一致，給網(wǎng)頁設計帶來了很大的方便。頁面的風格保持一致，給網(wǎng)頁設計帶來了很大的方便。 11.4 11.4 母版頁（續(xù)）母版頁（續(xù)）例例11-12 11-12 ：利用母版頁建立頁面外觀風格一致的網(wǎng)頁。：利用母版頁建立頁面外觀風格一致的網(wǎng)頁。11.5 CSS11.5 CSS樣式設計樣式設計 層疊樣式表簡稱層疊樣式表簡稱CSSCSS（Cascading Style SheetsCascading Style Sheets），它可

25、以控制網(wǎng)頁中一個或多），它可以控制網(wǎng)頁中一個或多個元素的外觀。由于改變樣式表中任何一個元素的顯示樣式，網(wǎng)頁中所有與該個元素的外觀。由于改變樣式表中任何一個元素的顯示樣式，網(wǎng)頁中所有與該樣式級聯(lián)的元素都會自動發(fā)生改變，因此使用樣式表可以減少很多具有相同外樣式級聯(lián)的元素都會自動發(fā)生改變，因此使用樣式表可以減少很多具有相同外觀元素的重復設置工作，從而給網(wǎng)頁的設計和維護帶來了很大的方便。觀元素的重復設置工作，從而給網(wǎng)頁的設計和維護帶來了很大的方便。 u 設置樣式的方法有兩種，一種是在代碼編輯方式下直接使用設置樣式的方法有兩種，一種是在代碼編輯方式下直接使用stylestyle設置樣式，另一設置樣式，另

26、一種是使用可視化界面。種是使用可視化界面。11.5.1 11.5.1 樣式與樣式表（續(xù)）樣式與樣式表（續(xù)）例例11-13 11-13 ：使用：使用stylestyle設置樣式設置樣式 ，部分代碼如下：，部分代碼如下： 第第1111章網(wǎng)站建設與網(wǎng)頁制作章網(wǎng)站建設與網(wǎng)頁制作 1 11.1 1.1 網(wǎng)站的創(chuàng)建復制與發(fā)布網(wǎng)站的創(chuàng)建復制與發(fā)布11.5.1 11.5.1 樣式與樣式表（續(xù)）樣式與樣式表（續(xù)） 上面的方法設置的樣式稱為上面的方法設置的樣式稱為內(nèi)聯(lián)式樣式設置。式設置。 優(yōu)點：直觀、方便。優(yōu)點：直觀、方便。 缺點：若不喜歡某種樣式，只好不厭其煩的重新逐一修改每一個元素的樣式。缺點：若不喜歡某種樣

27、式，只好不厭其煩的重新逐一修改每一個元素的樣式。 為避免一個個重復修改的麻煩，可以使用下面介紹的直接嵌入式樣式設計。為避免一個個重復修改的麻煩，可以使用下面介紹的直接嵌入式樣式設計。 部分代碼如下：部分代碼如下： 樣式引用示例樣式引用示例 h1font-size:40px; color:Red; h1font-size:40px; color:Red; h2font-size:20px; color:Blue; h2font-size:20px; color:Blue; 11.5.1 11.5.1 樣式與樣式表（續(xù)）樣式與樣式表（續(xù)） 第第1111章網(wǎng)站建設與網(wǎng)頁制作章網(wǎng)站建設與網(wǎng)頁制作 11

28、.1 11.1 網(wǎng)站的創(chuàng)建復制與發(fā)布網(wǎng)站的創(chuàng)建復制與發(fā)布 11.2 11.2 常用常用HTMLHTML標記標記 第第1212章章ASP.NET WebASP.NET Web服務器控件服務器控件 12.1 12.1 標準控件標準控件 12.2 12.2 數(shù)據(jù)操作控件數(shù)據(jù)操作控件 與內(nèi)聯(lián)式樣式不同的是，直接嵌入式樣式將所有樣式集中放了與內(nèi)聯(lián)式樣式不同的是，直接嵌入式樣式將所有樣式集中放了 head和和之間的之間的和和中了，而中了，而和和內(nèi)的標記不再有內(nèi)的標記不再有stylestyle屬性了。屬性了。11.5.1 11.5.1 樣式與樣式表（續(xù)）樣式與樣式表（續(xù)） 直接嵌入式樣式只適用于它所在的網(wǎng)頁

29、。如果要將其用于直接嵌入式樣式只適用于它所在的網(wǎng)頁。如果要將其用于其它網(wǎng)頁，就把樣式放在一個獨立的文件中其它網(wǎng)頁，就把樣式放在一個獨立的文件中 。u 樣式表（常用）樣式表（常用） 樣式表：將網(wǎng)頁元素的樣式定義設計為一個獨立的文件。樣式表：將網(wǎng)頁元素的樣式定義設計為一個獨立的文件。凡是在網(wǎng)頁的凡是在網(wǎng)頁的headhead部分與該樣式表文件建立鏈接的部分與該樣式表文件建立鏈接的HTMLHTML文文件，其頁面元素的樣式就會按照樣式表中的定義顯示。樣式件，其頁面元素的樣式就會按照樣式表中的定義顯示。樣式文件的擴展名為文件的擴展名為“.css.css” 文件中每個樣式的一般格式為：文件中每個樣式的一般格

30、式為： 樣式定義選擇符樣式定義選擇符 樣式屬性樣式屬性1:1:值值1; 1; 樣式屬性樣式屬性2:2:值值2; 2; 11.5.1 11.5.1 樣式與樣式表（續(xù)）樣式與樣式表（續(xù)）u 瀏覽器采用瀏覽器采用“就近使用就近使用”的原則，即采用最近定義的樣式。的原則，即采用最近定義的樣式。u 樣式表中若沒設置樣式，它會以默認黑色樣式顯示。樣式表中若沒設置樣式，它會以默認黑色樣式顯示。 例例11-1411-14：同時使用三種方法設置樣式同時使用三種方法設置樣式 11.5.2 11.5.2 樣式規(guī)則樣式規(guī)則定義樣式一般格式為：定義樣式一般格式為： 樣式定義選擇符樣式定義選擇符 樣式屬性樣式屬性1:1:

31、值值1; 1; 樣式屬性樣式屬性2:2:值值2; 2; 其中樣式定義選擇符指樣式定義的對象，可選項有：其中樣式定義選擇符指樣式定義的對象，可選項有：HTMLHTML標記、用戶自定義的類、用戶自定義的標記、用戶自定義的類、用戶自定義的IDID、虛類等。、虛類等。uHTMLHTML標記標記 HTMLHTML標記是最典型的選擇符類型。如果有多個不同的標標記是最典型的選擇符類型。如果有多個不同的標記要使用相同的樣式，則可以采用編組的方法簡化定義。記要使用相同的樣式，則可以采用編組的方法簡化定義。 如：如：H1,H2,H3 color:redH1,H2,H3 color:red 則所有的則所有的H1H1

32、、H2H2、H3H3標題都將以紅色顯示，這種表示法標題都將以紅色顯示，這種表示法中，各元素之間要用逗號中，各元素之間要用逗號“, ,”分隔。分隔。11.5.2 11.5.2 樣式規(guī)則（續(xù)）樣式規(guī)則（續(xù)）u類類 （classclass） 用戶自定義的類是用來為某一個用戶自定義的類是用來為某一個HTMLHTML標記創(chuàng)建多個樣標記創(chuàng)建多個樣式，或者為多個標記創(chuàng)建同一種樣式。式，或者為多個標記創(chuàng)建同一種樣式。語法格式：語法格式：樣式定義選擇符樣式定義選擇符. .類名類名 樣式屬性樣式屬性1:1:值值1; 1; 樣式屬性樣式屬性2:2:值值2;2; 如：如：的樣式代碼：的樣式代碼：H1.first co

33、lor:red;font-size:32pxH1.first color:red;font-size:32px的樣式代碼：的樣式代碼： H1.secondcolor:green;font-size:44pxH1.secondcolor:green;font-size:44px 的的 代碼如下：代碼如下：11.5.2 11.5.2 樣式規(guī)則（續(xù)）樣式規(guī)則（續(xù)） 樣式引用示例樣式引用示例33 link type=text/css href=CssExle4.css rel=Style sheet / 第第1111章章 網(wǎng)站建設與網(wǎng)頁制作網(wǎng)站建設與網(wǎng)頁制作 第第1212章章 ASP.NET Web

34、ASP.NET Web服務器控件服務器控件/h1 在設計視圖下可以看到前一個在設計視圖下可以看到前一個h1h1標題為紅色標題為紅色3232像素大小，像素大小，而后一個而后一個h1h1標題為綠色標題為綠色4444像素大小。像素大小。 11.5.2 11.5.2 樣式規(guī)則（續(xù)）樣式規(guī)則（續(xù)） 使用類的定義可以為同一個標記定義不同的樣式，若要用使用類的定義可以為同一個標記定義不同的樣式，若要用類的定義為不同的標記定義相同的樣式，則在類的定義時直類的定義為不同的標記定義相同的樣式，則在類的定義時直接使用接使用“. .”類名的方式，而不需要指定或選擇某一標記名。類名的方式，而不需要指定或選擇某一標記名。

35、如：在樣式表中定義類：如：在樣式表中定義類： .rrcolor:red .rrcolor:red 在在HTMLHTML文檔中做如下引用：文檔中做如下引用： 本段落文字為紅色本段落文字為紅色 本標題為紅色本標題為紅色 則則標記和標記和標記中的文字因?qū)偻粋€類，都以紅色標記中的文字因?qū)偻粋€類，都以紅色字體顯示。字體顯示。11.5.2 11.5.2 樣式規(guī)則（續(xù)）樣式規(guī)則（續(xù)）u 自定義自定義ID ID 自定義自定義IDID以以“# #”為標志，如：為標志，如：#customId1 color:red#customId1 color:red網(wǎng)頁中，在引用該樣式的標記符內(nèi)使用網(wǎng)頁中，在引用該樣式的標

36、記符內(nèi)使用idid屬性即可，如：屬性即可，如： P id= 本段落文字為紅色本段落文字為紅色 IDID與類主要區(qū)別：類可以在同一個網(wǎng)頁的多個標記中重復與類主要區(qū)別：類可以在同一個網(wǎng)頁的多個標記中重復使用；而使用；而IDID則在同一網(wǎng)頁中只能使用一次。則在同一網(wǎng)頁中只能使用一次。11.5.2 11.5.2 樣式規(guī)則（續(xù)）樣式規(guī)則（續(xù)）u虛類虛類 虛類是專用于虛類是專用于A A標記的選擇符，使用虛類可以設置不同類型標記的選擇符，使用虛類可以設置不同類型超鏈接的顯示方式。超鏈接的顯示方式。1.1. A:link A:link 未被訪問過的超鏈接未被訪問過的超鏈接 2.2. A:visited A:v

37、isited 已被訪問過的超鏈接已被訪問過的超鏈接 3.3. A:active A:active 當超鏈接處于選中狀態(tài)當超鏈接處于選中狀態(tài) 4.4. A:hover A:hover 當鼠標指針移動到超鏈接上當鼠標指針移動到超鏈接上 使用使用【添加樣式規(guī)則添加樣式規(guī)則】對話框，虛類是被作為對話框，虛類是被作為HTMLHTML標記中標記中的一項來定義的，可以從的一項來定義的，可以從【元素元素】的下拉框中找到這些定義的下拉框中找到這些定義對象。對象。11.5.2 11.5.2 樣式規(guī)則（續(xù)）樣式規(guī)則（續(xù)） 若在樣式表文件中做如下樣式設計：若在樣式表文件中做如下樣式設計：A:linkcolor:blu

38、e; font-size:32px;A:linkcolor:blue; font-size:32px;A:hovercolor:red; font-size:150%; text-decoration:none;A:hovercolor:red; font-size:150%; text-decoration:none; 在其鏈接的在其鏈接的HTMLHTML文件的文件的間添加代碼：間添加代碼：進入百度搜索進入百度搜索 保存并執(zhí)行該保存并執(zhí)行該HTMLHTML文件，看到文件，看到“進入百度搜索進入百度搜索”的超鏈接的超鏈接文字為藍色文字為藍色3232像素字體；當鼠標移到超鏈接上，字體會變?yōu)橄袼刈?/p>

39、體；當鼠標移到超鏈接上，字體會變?yōu)榧t色紅色4848像素大小且沒有下劃線。像素大小且沒有下劃線。11.5.2 11.5.2 樣式規(guī)則（續(xù)）樣式規(guī)則（續(xù)）u包含選擇符包含選擇符 對于有包含關系的元素可以利用包含選擇符來定義被包含對于有包含關系的元素可以利用包含選擇符來定義被包含元素的樣式。描述方式為：元素的樣式。描述方式為：選擇符選擇符1 1 選擇符選擇符2 2 屬性屬性: :值值; ; 即選擇符即選擇符1 1中包含選擇符中包含選擇符2 2，選擇符之間用空格分隔，這種，選擇符之間用空格分隔，這種方式的定義只對選擇符方式的定義只對選擇符1 1中的選擇符中的選擇符2 2起作用，對單獨的選擇起作用，對單

40、獨的選擇符符1 1或選擇符或選擇符2 2無效。無效。 例例11-16:11-16:定義包含樣式，使段落文字中的粗體字以紅色顯示。定義包含樣式，使段落文字中的粗體字以紅色顯示。11.5.2 11.5.2 樣式規(guī)則（續(xù)）樣式規(guī)則（續(xù)） HTML HTML標記、類和標記、類和IDID三者中，因為三者中，因為IDID選擇符是對所定義選擇符是對所定義元素的唯一標識，所以優(yōu)先權最高，其次是類，元素的唯一標識，所以優(yōu)先權最高，其次是類，HTMLHTML標記的標記的優(yōu)先權最低。優(yōu)先權最低。 如，在一個樣式表文件中有如下的樣式定義：如，在一個樣式表文件中有如下的樣式定義：P color: BlueP color

41、: Blue.aa color:Red .aa color:Red #bb color:Yellow #bb color:Yellow 在鏈接此樣式表文件的在鏈接此樣式表文件的HTMLHTML文件中加入代碼：文件中加入代碼：本段落文字為本段落文字為IDID定義的黃色！定義的黃色！ 在瀏覽器中看到的文字是優(yōu)先權最高的在瀏覽器中看到的文字是優(yōu)先權最高的IDID所定義的黃色。所定義的黃色。11.5.2 11.5.2 樣式生成器（最常用）樣式生成器（最常用）例例11-18:11-18:使用樣式生成器設計使用樣式生成器設計h1h1、h2h2標記的樣式。標記的樣式。11.5.4 CSS11.5.4 CSS

42、單位單位u 長度單位長度單位 CSSCSS的長度單位主要分絕對單位和相對單位兩種。的長度單位主要分絕對單位和相對單位兩種。 絕對單位：絕對單位：cmcm（厘米）、（厘米）、mmmm（毫米）、（毫米）、pxpx（像素）、（像素）、inin（英寸）、（英寸）、ptpt（點，（點，1pt=1/721pt=1/72英寸）、英寸）、pcpc（1pc=121pc=12點）點） 相對單位：（百分比）、相對單位：（百分比）、emem（當前瀏覽器字體中大寫字母（當前瀏覽器字體中大寫字母“M M”的寬度）、的寬度）、exex（當前瀏覽器默認字體中小寫字母（當前瀏覽器默認字體中小寫字母“x x”的高度）。的高度）。 常用：常用：pxpx、ptpt、% %。11.5.4 CSS11.5.4 CSS單位（續(xù)）單位（續(xù)）u顏色單位顏色單位 常用有兩種：常用有兩種：1.1. 顏色名顏色名直接使用標準顏色名稱；直接使用