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

　　

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