【正文】 件，將 Web頁(yè)面內(nèi)的樣式信息復(fù)制到該文件中，并以如下方式添加該樣式表的鏈接： head runat=server titleStyled Page 2/title link href= rel=stylesheet type=text/css / /head 樣式表文件中只包含樣式信息，因此可以說(shuō)現(xiàn)在已擁有一個(gè)包含所有樣式代碼的樣式表： .HighlightedText { fontfamily: 39。Trebuchet MS39。 color: Navy。 } a:link, a:visited { color: cc3300。 textdecoration: underline。 } a:hover { textdecoration: none。 } a:active { color: ff9900。 textdecoration: underline。 } 接下來(lái)可以將該樣式表鏈接到 Web 頁(yè)面，并在頁(yè)面中添加如下灰色部分代碼： form id=form1 runat=server div class=HighlightedTextThis is highlighted text./div h1 class=HighlightedTextThis is also highlighted text./h1 diva href=This is a sample link/a/div /form 在查看這個(gè)頁(yè)面時(shí)將看到如圖 58 所示的畫(huà)面。 圖 58 接下來(lái)將實(shí)踐這些概念。在下面的“試一試”練習(xí)中，將在前面創(chuàng)建的 頁(yè) 面的基礎(chǔ)上創(chuàng)建一個(gè)簡(jiǎn)單的樣式化頁(yè)面。 (1) 在 Chapter05 站點(diǎn)中創(chuàng)建另一個(gè)名為 。 (2) 從 div標(biāo)記和標(biāo)題，并刪除每個(gè)元素中的 style 屬性。在相同的位置上，添加一個(gè) class 屬性，并將其值設(shè)置為“ HighlightedText”。 form id=form1 runat=server div class=HighlightedText This is highlighted text./div h1 class=HighlightedText This is also highlighted text./h1 /form (3) 在頁(yè)面的標(biāo)題下面添加一個(gè)文本為“ This is a sample link”的超鏈接。將“ ”設(shè)置為它的 href 屬性的值。 form id=form1 runat=server div class=HighlightedText This is highlighted text./div h1 class=HighlightedText This is also highlighted text./h1 diva href=This is a sample link/a/div /form (4) 該鏈接的后面添加一個(gè)換行符，并在該換行符的后面添加一個(gè) 的 Label控件。您應(yīng)該記得服務(wù)器控件有一組與標(biāo)準(zhǔn)控件不相同的屬性，因此將該標(biāo)簽控件的CssClass 屬性設(shè)置為“ HighlightedText”，同時(shí)將 FontItalic 屬性設(shè)置為“ true”： This is also highlighted text./h1 diva href=This is a sample link/a/divbr / asp:Label CssClass=HighlightedText FontItalic=true ID=Label1 runat=server Text=This is an label/asp:Label /form (5) 在 Solution Explorer 中右擊 Chapter05 站點(diǎn)并選擇 Add New Item。從圖標(biāo)列表中選擇 StyleSheet 并接受默認(rèn)名稱： 。在這個(gè)文件中，添加如下代碼： .HighlightedText { fontfamily: 39。Trebuchet MS39。 color: Navy。 } a:link, a:visited { color: cc3300。 textdecoration: underline。 } a:hover { textdecoration: none。 } a:active { color: ff9900。 textdecoration: underline。 } 注意在 CSS 樣式表中所使用的語(yǔ)法與在 Source View 中對(duì)某個(gè) HTML控件設(shè)置 style 屬性時(shí)所使用的語(yǔ)法是相同的，這將有助于 CSS 文件的編寫(xiě)，如圖 59 所示。 另外還要注意到工具欄上的 Build Style 圖標(biāo)；如果單擊這個(gè)按鈕，將啟動(dòng) Style Builder對(duì)話框?？梢宰约簢L試使用這個(gè)對(duì)話框 —— 添加另一個(gè)元素定義 (例如 div)，并在其后添加一對(duì)花括號(hào)。將光標(biāo)放置在花括號(hào)內(nèi)并單擊該按鈕啟動(dòng) Style Builder。在選擇所需的樣式之后，只需單擊 OK，這些樣式就將作為一個(gè) CSS 條目出現(xiàn)在 文件中。 (6) 最后的收尾工作只有一件事情要做，那就是告訴 Web 頁(yè)面引用定義在 .css文件中的樣式。切換回 Design View。應(yīng)該看 到如圖 510 所示的畫(huà)面。 圖 59 圖 510 (7) 現(xiàn)在從 Solution Explorer 中將 文 件的圖標(biāo)拖放到設(shè)計(jì)區(qū)中。該操作一完成，頁(yè)面的外觀就將發(fā)生變化 (如圖 511)所示。 圖 511 如果現(xiàn)在運(yùn)行這個(gè)頁(yè)面，將會(huì)在瀏覽器窗口中看到幾乎相同的畫(huà)面。 操作回顧 使用 CSS文件為頁(yè)面中的 HTML元素添加樣式只需完成兩件事情。一件是定義表示元素樣式的類，另一件是在頁(yè)面中添加一個(gè)鏈接以便定位 CSS文件。當(dāng)把 CSS文件 拖放到設(shè)計(jì)區(qū)時(shí)，頁(yè)面的頂部將添加如下代碼： html xmlns= head runat=server titleStyled Page 2/title link href= rel=stylesheet type=text/css / /head 頁(yè)面頂部的這個(gè)鏈接告訴 Web 頁(yè)面到什么地方查找樣式信息。從此刻起，頁(yè)面中的任何 class 屬性都將試圖引用這個(gè) CSS 樣式表以便為這些元素 找到樣式信息。如果找不到相應(yīng)的類，就不會(huì)有任何樣式應(yīng)用于元素，除非在元素的 Style 屬性中手動(dòng)指定了樣式。 對(duì)指定了 class 屬性的 HTML 元素，還可以在它的 Style 屬性中指定額外的樣式信息。任何定義在 Style 屬性中的樣式都將重寫(xiě)那些在 CSS 文件中指定的樣式，從而使得開(kāi)發(fā)人員可以調(diào)整頁(yè)面上特定元素的外觀。 服務(wù)器控件有些不同。由于服務(wù)器控件在呈現(xiàn)時(shí)會(huì)被轉(zhuǎn)換為恰當(dāng)?shù)?HTML 代碼，所以可以使用的屬性將會(huì)不盡相同。在這個(gè)示例中，使用了一個(gè) Label 控件。相對(duì)而言， Label控件非常簡(jiǎn)單，所以可對(duì)其添加的樣式不 是很多。在本示例中，您為其添加了一個(gè) CSS 鏈接，并定義了另一個(gè)樣式。服務(wù)器控件所使用的 CssClass 屬性直接和 HTML 元素的 class屬性相關(guān)。而單個(gè)的樣式屬性則類似于 HTML 元素中的 style 屬性： asp:Label CssClass=HighlightedText FontItalic=true ID=Label1 runat=server Text=This is an label/asp:Label 在呈現(xiàn)該標(biāo)簽的時(shí)候，將產(chǎn)生如下代碼： span id=Label1 class=HighlightedText style=fontstyle:italic。 This is an label/span 注意在瀏覽器中自定義的樣式屬性被轉(zhuǎn)換為一個(gè)標(biāo)準(zhǔn)的 style 標(biāo)記。因?yàn)?CSS樣式在客戶端才起作用，所以頁(yè)面一旦呈現(xiàn)之后， HTML元素的 class 屬性和 style 屬性都將得以應(yīng)用，就像靜態(tài)的 HTML 元素那樣。 4. CSS 的局限性和使用服務(wù)器端代碼設(shè)置樣式 在使用 CSS 為站點(diǎn)設(shè)置樣式時(shí)，可以指定特定元素在頁(yè)面上的外觀。這對(duì) 于一個(gè)靜態(tài)的 HTML 站點(diǎn)是可以的，單對(duì)于服務(wù)器端元素，這可能會(huì)有一些問(wèn)題。例如，一個(gè)簡(jiǎn)單的 控件 Panel。如果將一個(gè) Panel 控件拖放到頁(yè)面上，添加一些文本，并在兩個(gè)不同的瀏覽器中查看這個(gè)頁(yè)面 (例如， Inter Explorer 和一個(gè)比較老的或功能有限的瀏覽器，如Links)，在查看頁(yè)面的源代碼時(shí)會(huì)看到不同的結(jié)果。下面是一些源代碼示例： form id=form1 runat=server asp:Panel ID=Panel1 runat=server Height=50px Width= 125pxThis text is contained within an Panel control /asp:Panel /form 現(xiàn)在，如果在 Inter Explorer 6 或 Firefox 中查看 Web 頁(yè)面，將產(chǎn)生如下所示的代碼： form method=post action= id=form1 div input type=hidden span=__VIEWSTATE id=__VIEWSTATE value=/wEPDwULLTEwODU4OTkxMzRkZHehxD/SHmjEeZzCKx7+bB752B3R / /div div id=Panel1 style=height:50px。width:125px。 This text is contained within an Panel control /div /form 如果在比較老的瀏覽器 (例如 Mozilla )中查看這個(gè)頁(yè)面，將產(chǎn) 生如下代碼： form name=form1 method=post action= id=form1 input type=hidden span=__VIEWSTATE id=__VIEWSTATE value=/wEPDwULLTEwODU4OTkxMzRkZHBovyeleyCJNtOpi+uco+l/zE5a / div id=Panel1 This text is contained within an Panel control /div /form 注意在兩種情況下 Panel 都被呈現(xiàn)為一個(gè) div控件，但在第二種情況中，它丟失了高度和寬度信息。這里只是一個(gè)小小的變化，但是卻是對(duì) 的一項(xiàng)很重大的改進(jìn)。 的 Panel控件呈現(xiàn)為 HTML 的表格。例如： table id=Panel1 cellpadding=0 cellspacing=0 border=0 height= 50 width=125 trtd This text is contained within an Panel control /td/tr /table 現(xiàn)在雖然 已經(jīng)將很多類似的問(wèn)題從我們的日常編程工作中移除，但有一個(gè)問(wèn)題仍然存在，那就是在服務(wù)器端看到的內(nèi)容與在客戶端看到的內(nèi)容不一樣，而且無(wú)法保證同一個(gè)元素在不同的瀏覽器上會(huì)以相同的方式進(jìn)行呈現(xiàn)。 所要做的是提供一種機(jī)制，這種機(jī)制基于服務(wù)器端控件的類型而不是客戶端控件的類型來(lái)指定元素的外觀 ，因此當(dāng)一個(gè)控件在不同的瀏覽器上顯示時(shí)，其一致性將能盡可能地保持。這個(gè)目標(biāo)是通過(guò)使用主題和皮膚實(shí)現(xiàn)的。 主題 主題 (theme)用于定義站點(diǎn)的外觀，類似于使用 CSS設(shè)置頁(yè)面的樣式。然而，與 CSS 不同的是，主題可以指定服務(wù)器端元素，例如 TreeView 控件，在瀏覽器上顯示時(shí)的外觀。記住服務(wù)器控件必須轉(zhuǎn)換為標(biāo)準(zhǔn)的 HTML，而且如果瀏覽器理解在頁(yè)面上如何呈現(xiàn) JavaScript的話，還可能會(huì)有一些 JavaScript 腳本。在瀏覽器請(qǐng)求頁(yè)面時(shí)，一個(gè)設(shè)置了主題的服務(wù)器控件將轉(zhuǎn)換為帶有 style 屬性的相關(guān) 客戶端元素。 一個(gè)主題在創(chuàng)建好之后有兩種使用方式?？梢詫⑺米?Stylesheet主題，其行為類似于一個(gè)普通的 CSS 樣式表。另一種方式是將它用作 Customization 主題，這將改變您習(xí)慣使用的樣式選取規(guī)則，因?yàn)?Customizaton 主題將指定用于每個(gè)元素的樣式，覆蓋在單獨(dú)的樣式表中指定的所有樣式，或者甚至覆蓋元素的 style 屬性中指定的樣式。 無(wú)論以哪種方式使用主題，創(chuàng)建它的基本技術(shù)都是一樣的。另外，可以選擇在整個(gè)站點(diǎn)中使用一個(gè)主題，也可以為每個(gè)頁(yè)面指定一個(gè)主題。 1. 創(chuàng)建主題 創(chuàng)建一個(gè)主題的過(guò)程包 括創(chuàng)建一個(gè) .skin 文件，該文件定義了頁(yè)面上每個(gè)元素的外觀，以及將這個(gè)皮膚文件放置到一個(gè)文件夾中，這