【導(dǎo)讀】開發(fā)任何Web應(yīng)用程序的過(guò)程都是圍繞著兩個(gè)主要方面進(jìn)行的：功能和外觀。用程序安全的代碼、當(dāng)用戶單擊某個(gè)按鈕時(shí)會(huì)發(fā)生什么，等。站點(diǎn)的外觀多少包。括在瀏覽器上顯示的代碼樣式。一個(gè)成功的應(yīng)用程序應(yīng)努力在兩者之間保持平。題上都做得不好。Developer設(shè)置樣式的能力。在介紹編寫?yīng)毩⒌腃SS文件之前，先介紹為單個(gè)控。發(fā)過(guò)程中應(yīng)給予充分考慮。象是很重要的，因此必須正確處理！鏈接組、頁(yè)腳等區(qū)域。發(fā)人員為了驗(yàn)證一個(gè)概念，或者希望嘗試一本書中的某種新技術(shù)。些元素是很重要的，就像組織站點(diǎn)的內(nèi)容以符合站點(diǎn)的樣式一樣。設(shè)置樣式和布局站點(diǎn)是Web開發(fā)中的一個(gè)有機(jī)整體。面，但設(shè)置樣式可能更加復(fù)雜。始至終都將討論這個(gè)主題。從而為進(jìn)行本章中的示例做好了準(zhǔn)備。添加一個(gè)新的空白.aspx頁(yè)面并將其命名為。樣顯示，同時(shí)還可以為特定的樣式創(chuàng)建定義并將其應(yīng)用于頁(yè)面上的相關(guān)元素。定每個(gè)<div>標(biāo)記的實(shí)例都應(yīng)包含藏青色的文本，或者也可以定義一個(gè)名為HighlightedText

　　

【正文】 ion 主題對(duì)頁(yè)面元素的樣式有最終決定作用。如果手動(dòng)設(shè)置頁(yè)面元素的樣式，而該頁(yè)面由 Customization 主題控制，那么這些樣式只有在主題中不包含對(duì)應(yīng)元素的樣式時(shí)才能得以應(yīng)用。 3. Stylesheet 主題 —— 服務(wù)器控件的 CSS 如果希望將主題像樣式表那樣使用，則只需要在頁(yè)面的頂部使用 StyleSheetTheme 屬 性。這個(gè)變化意味著開發(fā)人員可以在每個(gè)標(biāo)記的 style 屬性中設(shè)置少量的樣式，同時(shí)在主題內(nèi)為站點(diǎn)提供一個(gè)一致的外觀。 比較兩種方式差別的最好方法是實(shí)際應(yīng)用一下，所以在下面的“試一試”練習(xí)中將修改前面的示例以查看差別所在。 (1) 打開 “ Styled label”添加 FontBold=“ true”。或者，可以切換到 Design View，選中 Styled label并在 Properties 窗格中將字體設(shè)置為粗體： asp:Label ID=Label1 SkinID=textLabel runat=server Text=Styled label FontBold=True/asp:Label (2) 現(xiàn)在運(yùn)行該頁(yè)面可以看到字體已經(jīng)變成粗體，如圖 523 所示。 圖 523 (3) 在 文件中編輯帶有 SkinID=“ textLabel”的標(biāo)簽，并添加下面的字體聲明： asp:Label SkinId=textLabel runat=server FontNames=Century Gothic FontSize=10pt ForeColor=MidnightBlue FontBold=False/asp:Label (4) 再次運(yùn)行該頁(yè)面，可以看到字體不再是粗體，如圖 524 所示。 圖 524 (5) 將 Theme 屬性修改為 StyleSheetTheme?；蛘撸梢郧袚Q到 Design View，在 Properties 窗格中將頁(yè)面的 StyleSheetTheme 屬性設(shè)置為 Blue，并刪除 Theme 屬性的值。重新運(yùn)行這個(gè)頁(yè)面將看到字體再次變?yōu)榇煮w。 操作回顧 這個(gè)練習(xí)中的第一步是為標(biāo)簽控件添加 FontBold=“ True”屬性。由于粗體屬性在Customizaton 主題中沒(méi)有指定，因此頁(yè)面上的這個(gè)樣式將成功地得以應(yīng)用，同時(shí)控件的文本將顯示為藍(lán)色粗體。 但是，在皮膚文件中為 textLabel 控件添加 FontBold=“ False”將覆蓋在頁(yè)面上指定的樣式，因?yàn)轫?yè)面仍然在使用 Customization 主題 (由頁(yè)面頂部的 Theme 屬性表示 )。結(jié)果，第二次運(yùn)行頁(yè)面的時(shí)候，頁(yè)面上就不存在 藍(lán)色粗體文本了。 最后一個(gè)步驟是將頁(yè)面頂部的 Theme屬性修改為 StyleSheetTheme。這使得頁(yè)面上指定的樣式具有較高的優(yōu)先級(jí)，因此第三次運(yùn)行頁(yè)面的時(shí)候?qū)⒃俅慰吹剿{(lán)色粗體文本。 使用 Stylesheet 主題或者 Customization 主題完全由開發(fā)人員決定。選擇 Customization主題使得站點(diǎn)的設(shè)計(jì)人員能夠更多地控制站點(diǎn)的外觀，而 Stylesheet主題則使得開發(fā)人員能夠定義控件的外觀。然而，必須記住，如果為控件自行添加樣式屬性，那么如果修改主題的內(nèi)容、或者直接切換到一個(gè)完全不同的主題之后， 可能會(huì)發(fā)現(xiàn)站點(diǎn)的外觀看起來(lái)有些奇怪。 4. Stylesheet 主題和 Customization 主題 中沒(méi)有任何規(guī)則指定在頁(yè)面中只能使用 Stylesheet 主題或 Customization 主題。如果希望可以在頁(yè)面中使用兩種級(jí)別的樣式，無(wú)論是出于強(qiáng)制的原因還是最佳的決定，完全可以在站點(diǎn)中使用這兩種主題。 例如，可能會(huì)指定不同頁(yè)面之間的主要元素必須在外觀上保持一致。頁(yè)面的 body標(biāo)記內(nèi)必須總是一種特定的字體， Menu控件必須總是包含特定樣式的節(jié)點(diǎn)，但您也許希望只是將 Label控件所應(yīng)用的樣式作 為參考或默認(rèn)樣式。因此可以創(chuàng)建一個(gè)為主要的頁(yè)面元素和Menu 控件定義樣式的主題，并將其用作 Customization 主題。然后可以使用其他樣式信息創(chuàng)建一個(gè)不同的主題并在創(chuàng)建站點(diǎn)的時(shí)候應(yīng)用它覆蓋特定元素的樣式，接著將這個(gè)主題用作Stylesheet 主題。下面的列表是為應(yīng)用程序設(shè)置樣式的順序： (1) Stylesheet 主題 (2) CSS 樣式 (3) Element 樣式 (4) Customization 主題 在 Customization 主題中指定的樣式總是會(huì)覆蓋其他所有的樣式。 5. 主題和 CSS CSS 是為站點(diǎn)設(shè)置樣式的一種非常好的方法，因此能夠通過(guò)非常簡(jiǎn)單的方法將樣式表整合到主題中也是非常好的。所需進(jìn)行的操作是在主題的文件夾中添加一個(gè)樣式表并將其放置在緊靠皮膚文件的后面。不使用 的設(shè)計(jì)人員知道能夠輕松地將他的設(shè)計(jì)整合到服務(wù)器端頁(yè)面中一定會(huì)很高興！ 由于這不是一個(gè)很深?yuàn)W的概念，因此可以直接通過(guò)一個(gè)簡(jiǎn)單的示例查看這是如果工作的。 (1) 在 VWD 中，右擊 Blue 主題文件夾，選擇 Add New Item。在彈出的對(duì)話框中，添加一個(gè)新的樣式表并將其命名為 。 (2) 在新創(chuàng)建的樣式表中，添加如下代碼： body { fontfamily:Arial。 } .bigtext { fontsize:xxlarge。 } (3) 現(xiàn)在返回 CssClass 屬性，將該屬性的值設(shè)置為“ bigtext”： asp:Label ID=Label2 CssClass=bigtext runat=server Text=Unstyled label /asp:Label (4) 運(yùn)行頁(yè)面將看到標(biāo)簽現(xiàn)在應(yīng)用了 xxlarge 文本樣式 (請(qǐng)查看 CSS 樣式表的定義 )，而頁(yè)面的默認(rèn)字體 (body標(biāo)記內(nèi)的所有文本 )變成了 Arial字體，如圖 525 所示。 圖 525 (5) 切換到 文件并添加另一個(gè) Label控件定義。將該控件的 SkinID 屬性設(shè)置為“ bigLabel”并添加 CssClass 屬性，將該屬性的值設(shè)置為“ bigtext”，保存該文件： asp:Label SkinId=bigLabel runat=server CssClass=bigtext/asp:Label (6) 刪除標(biāo)簽中的 CssClass 屬性并將 SkinID 屬性設(shè)置為“ bigLabel”： asp:Label ID=Label2 SkinID=bigLabel runat=server Text=Unstyled label /asp:Label 注意這時(shí) VWD 中的 IntelliSense 工具將會(huì)彈出來(lái)幫助您指定使用哪一個(gè)標(biāo)簽樣式 (如圖526 所示 )，因?yàn)楝F(xiàn)在在所使用的主題中有多個(gè)可選的樣式。 圖 526 注意只有保存皮膚文件之后，在 IntelliSense 工具的支持。 再次運(yùn)行該頁(yè)面將顯示同樣的結(jié)果；惟一的差別在于樣式信息是包含在皮膚文件中還是包含在頁(yè)面中。 操作回顧 通過(guò)在主題文件夾內(nèi)添加一個(gè) CSS 樣式表，該樣式表就可以應(yīng)用于所有使用這個(gè)主題的頁(yè)面。一旦主題得以應(yīng)用，無(wú)論它是 Customization 主題還是 Stylesheet 主題，位于該主題文件夾內(nèi)的樣式表中的樣式對(duì)皮膚文件和頁(yè)面都是可以使用的。 對(duì)應(yīng)使用 CSS 設(shè)置樣式的服務(wù)器控件，相同的規(guī)則也適用于由 Customization 主題和Stylesheet主題指定的樣式 —— 如果在一個(gè)主題中將 CSS 樣式應(yīng)用于某個(gè)元素，同時(shí)將一種不同的樣式應(yīng)用于頁(yè)面上的一個(gè)元素，結(jié)果將根據(jù)所使用的主題類型而有所不同。如果使用的是 Customization 主題，那么在皮膚文件中定義的主題將覆蓋所有在 .aspx 頁(yè)面中指定的CSS 類，而如果使用的是 Stylesheet 主題，則不會(huì)出現(xiàn)覆蓋。 設(shè)置站點(diǎn)級(jí)別的樣式 在很多情況下，開發(fā)人員可能會(huì)希望為站點(diǎn)內(nèi)的所有頁(yè)面指定一個(gè)一致的外觀。雖然可以為所有的頁(yè)面指定同一個(gè)主題，但是 在某個(gè)中心位置為站點(diǎn)指定默認(rèn)的主題將會(huì)更加迅速和簡(jiǎn)單。在 ，可以在 默認(rèn)的主題。應(yīng)該記得在第 4 章中使用過(guò) 文件為不同的用戶賬戶指定站點(diǎn)的訪問(wèn)權(quán)限。由于 文件是保存所有站點(diǎn)級(jí)別設(shè)置的中心位置，因此可以將站點(diǎn)的默認(rèn)主題信息保存在其中?；镜恼Z(yǔ)法如下所示： ?xml version=? configuration appSettings/ connectionStrings/ pages theme=myTheme styleSheetTheme=myOtherTheme / 可以在 文件中同時(shí)指定 Stylesheet 主題和 Customization 主題。如果在 文件中指定了一個(gè)主題而頁(yè)面中沒(méi)有指定任何主題，那么這個(gè)頁(yè)面將應(yīng)用 文件中的主題。另外，如果 文件為站點(diǎn)指定了一個(gè) Customization 主題，而頁(yè)面中指定了一個(gè) Stylesheet 主題，那么應(yīng)用于頁(yè)面的將是 文件中的Customization 主題。下面是經(jīng)過(guò)細(xì)微修改的樣式優(yōu)先級(jí)，其中包括 題： (1) Stylesheet 主題 (2) 頁(yè)面上的 Stylesheet 主題 (3) CSS 樣式 (4) Element 樣式 (5) Customization 主題 (6) 頁(yè)面上的 Customization 主題 如果希望完全控制整個(gè)站點(diǎn)的外觀，則可以在 Customization主題。 在 下面的“試一試”練習(xí)中，將為本章中創(chuàng)建的小應(yīng)用程序指定一個(gè)站點(diǎn)級(jí)別的主題。 (1) 右擊 Chapter05 文件夾并選擇 Add New Item。在彈出的對(duì)話框中，創(chuàng)建一個(gè)新的Web 配置文件 ()并單擊 OK。 (2) 將下面的代碼 (灰色部分 )添加到 ： ?xml version=? ! Note: As an alternative to hand editing this file you can use the web admin tool to configure settings for your application. Use the Website Configuration option in Visual Studio. A full list of settings and ments can be found in usually located in \Windows\\Framework\\Config configuration appSettings/ connectionStrings/ pages theme=red styleSheetTheme=blue / (3) 刪除所有頁(yè)面中的 Theme 屬性和 Stylesheet 屬性并運(yùn)行該應(yīng)用程序。站點(diǎn)中的所有頁(yè)面都將 應(yīng)用 Red 主題，但請(qǐng)注意圖 527 中顯示的 ThemeDefault 頁(yè)面。 圖 527 操作回顧 所顯示的 頁(yè)面看起來(lái)好像是兩種主題同時(shí)作用的結(jié)果，盡管指定了站點(diǎn)的所有頁(yè)面都應(yīng)該使用 Red Customization 主題。然而，在前面的示例中，您在 Blue 主題中添加了一個(gè) CSS 文件并設(shè)置了一 些樣式信息，同時(shí)因?yàn)?Blue 主題被設(shè)置為站點(diǎn)的Stylesheet主題，而且在 Red 主題中沒(méi)有對(duì)應(yīng)的樣式信息，因此這些樣式將得以從 Blue 主題中提取出來(lái)并應(yīng)用于 body中的文本和“ Unstyled label”標(biāo)簽控件。 該頁(yè)面的 body標(biāo)記內(nèi)的第一行 HTML 代碼是： Default page!br / 因此這些文件將應(yīng)用 文件中的 body 樣式： body { fontfamily:Arial。 } 代碼中的下一個(gè)內(nèi)容是“ Styled label”控件，該控件 的 SkinID 屬性值為 textLabel： asp:Label ID=Label1 SkinID=textLabel runat=server Text= Styled label FontBold=True/asp:Label 由于這個(gè) SkinID 在兩個(gè)主題中都存在，因此將應(yīng)用 Red 主題，因?yàn)檫@個(gè)主題在 Customization 主題： asp:Label SkinId=textLabel runat=server FontNames=Garamond FontSize=11pt ForeColor=DarkRed / 下面是 ： pages theme=red styleSheetTheme=blue / 記住 Theme 屬性表示 Customizaton 主題。然而，在這個(gè)示例中指定的 Red 主題沒(méi)有SkinID 為“