【正文】 然而，在前面的示例中，您在 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)簽控件。另外，如果 文件為站點(diǎn)指定了一個(gè) Customization 主題，而頁(yè)面中指定了一個(gè) Stylesheet 主題，那么應(yīng)用于頁(yè)面的將是 文件中的Customization 主題。如果使用的是 Customization 主題，那么在皮膚文件中定義的主題將覆蓋所有在 .aspx 頁(yè)面中指定的CSS 類(lèi)，而如果使用的是 Stylesheet 主題，則不會(huì)出現(xiàn)覆蓋。 } (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 所示。下面的列表是為應(yīng)用程序設(shè)置樣式的順序： (1) Stylesheet 主題 (2) CSS 樣式 (3) Element 樣式 (4) Customization 主題 在 Customization 主題中指定的樣式總是會(huì)覆蓋其他所有的樣式。選擇 Customization主題使得站點(diǎn)的設(shè)計(jì)人員能夠更多地控制站點(diǎn)的外觀，而 Stylesheet主題則使得開(kāi)發(fā)人員能夠定義控件的外觀。重新運(yùn)行這個(gè)頁(yè)面將看到字體再次變?yōu)榇煮w。 3. Stylesheet 主題 —— 服務(wù)器控件的 CSS 如果希望將主題像樣式表那樣使用，則只需要在頁(yè)面的頂部使用 StyleSheetTheme 屬 性。 SkinID屬性指定頁(yè)面上的 ImageButton控件將使用為它準(zhǔn)備的那一個(gè)皮膚，因此如果在皮膚文件中定義了多個(gè) ImageButton控件的樣式，這個(gè)屬性將指定在頁(yè)面上使用其中的哪一個(gè)。 圖 522 操作回顧 本例將前一個(gè)“試一試”練習(xí)中創(chuàng)建的主題應(yīng)用到一組簡(jiǎn)單的頁(yè)面上。這意味著如果用戶單擊該圖片， 他將被帶回 。保存該頁(yè)面，這樣第一個(gè)頁(yè)面就制作好了。 圖 517 (5) 在這個(gè)新頁(yè)面的 Content占位符中輸入如下文本：“ Default page!”，然后將兩個(gè) Label控件拖放到該頁(yè)面上。添加一個(gè) 文件并輸入如下代碼： ?xml version= encoding=utf8 ? siteMap xmlns= siteMapNode url= title=Default description= Default Page siteMapNode url= title=Page1 description=Themed Page 1 / siteMapNode url= title=Page2 description=Themed Page 2 / siteMapNode url= title=SubPage description=Sub Page siteMapNode url= title=Page1 description=Page 1 / siteMapNode url= title=Page2 description=Page 2 / /siteMapNode /siteMapNode /siteMap (3) 現(xiàn)在向 Master 頁(yè)面添加一個(gè) SitemapDataSource 控件并設(shè)置 TreeView 控件的DataSource 屬性 —— 就像在第 3 章中做的那樣。注意本章使用的所有代碼都可以從 下載。 可以為每個(gè)主題創(chuàng)建多個(gè) .skin 文件。下面的代碼創(chuàng)建兩個(gè)標(biāo)簽并定義了兩個(gè)應(yīng)該和藍(lán)色以及紅色主題匹配的樣式： asp:Label ID=Label1 runat=server Text=Label FontNames=century gothic FontSize=10pt ForeColor=MidnightBlue/asp:Label asp:Label ID=Label2 runat=server FontNames=garamond FontSize=11pt ForeColor=DarkRed Text=Label/asp:Label 在定義好樣式之后，就為接下來(lái)的步驟做好了準(zhǔn)備。 (6) 在這個(gè)示例中，您將發(fā)現(xiàn)在向皮膚文件添加控件之前，創(chuàng)建一個(gè)簡(jiǎn)單的 頁(yè)面來(lái)試驗(yàn)新的樣式是非常方便的?，F(xiàn)在將其命名為 Blue。這些屬性使得開(kāi)發(fā)人員可以創(chuàng)建帶有多種類(lèi)型的 Label控件或 Image Button控件的站點(diǎn)，并使用皮膚數(shù)據(jù)提供的信息為選中的控件設(shè)置樣式 —— 對(duì)皮膚文件的鏈接由 SkinId 屬性控制。 1. 創(chuàng)建主題 創(chuàng)建一個(gè)主題的過(guò)程包 括創(chuàng)建一個(gè) .skin 文件，該文件定義了頁(yè)面上每個(gè)元素的外觀，以及將這個(gè)皮膚文件放置到一個(gè)文件夾中，這個(gè)文件夾的名稱就是所創(chuàng)建的主題的名稱。然而，與 CSS 不同的是，主題可以指定服務(wù)器端元素，例如 TreeView 控件，在瀏覽器上顯示時(shí)的外觀。width:125px。而單個(gè)的樣式屬性則類(lèi)似于 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。 對(duì)指定了 class 屬性的 HTML 元素，還可以在它的 Style 屬性中指定額外的樣式信息。 圖 59 圖 510 (7) 現(xiàn)在從 Solution Explorer 中將 文 件的圖標(biāo)拖放到設(shè)計(jì)區(qū)中。 } 注意在 CSS 樣式表中所使用的語(yǔ)法與在 Source View 中對(duì)某個(gè) HTML控件設(shè)置 style 屬性時(shí)所使用的語(yǔ)法是相同的，這將有助于 CSS 文件的編寫(xiě)，如圖 59 所示。在這個(gè)文件中，添加如下代碼： .HighlightedText { fontfamily: 39。 (1) 在 Chapter05 站點(diǎn)中創(chuàng)建另一個(gè)名為 。 } a:link, a:visited { color: cc3300。 fontfamily:Courier。作者在 Word 2020中將這個(gè)文件保存為 Web Page(Filtered)，這種方式產(chǎn)生的 HTML代碼比在 Word 中將這個(gè)文件保存為 Web Page 時(shí)自動(dòng)產(chǎn)生的標(biāo)準(zhǔn)代碼要整潔得多。另一種選擇是創(chuàng)建一個(gè)獨(dú)立的外部樣式表來(lái)保存樣式定義，并將這個(gè)外部樣 式表文件鏈接到需要使用它的 Web頁(yè)面。 } a:active { color: ff9900。 1. 樣式的語(yǔ)法 樣式定義包含在花括號(hào)之間。 } .HighlightedText { fontfamily: 39。 在學(xué)習(xí)了如何為頁(yè)面上的元素設(shè)置樣式之后，將樣式表嵌入代碼就不是什么復(fù)雜的問(wèn)題了。 This is highlighted text./div h1 style=fontfamily: 39。開(kāi)發(fā)人員所需做的就是選擇希望應(yīng)用于元素的樣式并單擊 OK 即可。 color:red。例如： div style=fontweight:bold。另外還會(huì)發(fā)現(xiàn)諸如菜單、搜索框、鏈接組、頁(yè)腳等區(qū)域。Web應(yīng)用程序的功能方面主要包括站點(diǎn)的結(jié)構(gòu)、控件的行為、用戶經(jīng)驗(yàn)、保護(hù)應(yīng)用程序安全的代碼、當(dāng)用戶單擊某個(gè)按鈕時(shí)會(huì)發(fā)生什么，等。 本章討論了以下內(nèi)容： ● 為站點(diǎn)設(shè)置樣式，從為單個(gè)元素設(shè)置樣式到使用 CSS 樣式表 ● 在 VWD 中為應(yīng)用程序開(kāi)發(fā)樣式表 ● 使用 的主題 (theme)和皮膚 (skin)快速開(kāi)發(fā)樣式化的 Web 頁(yè)面，使它們符合一致的外觀 ● 使用主題和皮膚為 Wrox United 添加樣式 另外，本章還討 論了實(shí)用性和可存取性，這是兩個(gè)重要的方面，在站點(diǎn)的開(kāi)發(fā)過(guò)程中應(yīng)給予充分考慮。本章將重點(diǎn)討論這個(gè)過(guò)程中涉及到的頁(yè)面樣式化、規(guī)則和層次結(jié)構(gòu) —— 在頁(yè)面上布局元素和放置內(nèi)容是站點(diǎn)設(shè) 計(jì)的一部分，本書(shū)從始至終都將討論這個(gè)主題。 這個(gè)初始站點(diǎn)僅僅包含了少數(shù)幾個(gè)文件，從而為進(jìn)行本章中的示例做好了準(zhǔn)備。如果在屬性值內(nèi)的任意位置單擊鼠標(biāo)，在屬性值的后面將會(huì)出現(xiàn)橢圓按鈕 (?) 。這個(gè)操作將在 Source View 中自動(dòng)添加如下代碼： div style=fontfamily: 39。 圖 56 操作回顧 現(xiàn)在這個(gè)頁(yè)面可能還不是很令人滿意，但修 改其外觀并不需要占用很多時(shí)間。下面是一個(gè)樣式表的一部分代碼，其中分別定義了這兩種樣式： div { fontfamily: 39。 為了將樣式用于元素，并不需要對(duì)元素本身進(jìn)行任何修改；只要頁(yè)面知道在什么地方能夠找到樣式信息，樣式就可以自動(dòng)地得以應(yīng)用 (稍后將討論怎樣定位樣式信息 )。 也可以對(duì)樣式信息使用類(lèi)似錨標(biāo)記 (a)這種帶有特定變化的標(biāo)記，從而在將鼠標(biāo)放置在這些標(biāo)記上時(shí)它們的外觀能夠自動(dòng)發(fā)生變化，如下所示： a:link, a:visited { color: cc3300。 完全使用 CSS 為頁(yè)面設(shè)置樣式的第一步就是決定要為每個(gè)元素設(shè)置什么樣的樣式并創(chuàng)建一組樣式定義。 } /style /head body form id=form1 runat=server div class=HighlightedTextThis is highlighted text./div h1 class=HighlightedTextThis is also highlighted text./h1 /form /body /html 這些代碼和前面示例中所使用的代碼是一樣的。 marginbottom:.0001pt。開(kāi)發(fā)人員需要進(jìn)行的所有工作就是創(chuàng)建一個(gè)擴(kuò)展名為 .css 的文件，將 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。 } 接下來(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à)面。 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控件。 } a:hover { textdecoration: none。 (6) 最后的收尾工作只有一件事情要做，那就是告訴 Web 頁(yè)面引用定義在 .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è)面到什么地方查找樣式信息。相對(duì)而言， Label控件非常