【正文】 樣式在客戶端才起作用，所以頁(yè)面一旦呈現(xiàn)之后， HTML元素的 class 屬性和 style 屬性都將得以應(yīng)用，就像靜態(tài)的 HTML 元素那樣。在本示例中，您為其添加了一個(gè) CSS 鏈接，并定義了另一個(gè)樣式。 服務(wù)器控件有些不同。從此刻起，頁(yè)面中的任何 class 屬性都將試圖引用這個(gè) CSS 樣式表以便為這些元素 找到樣式信息。 圖 511 如果現(xiàn)在運(yùn)行這個(gè)頁(yè)面，將會(huì)在瀏覽器窗口中看到幾乎相同的畫面。切換回 Design View?？梢宰约簢L試使用這個(gè)對(duì)話框 —— 添加另一個(gè)元素定義 (例如 div)，并在其后添加一對(duì)花括號(hào)。 } a:active { color: ff9900。 color: Navy。您應(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。在相同的位置上，添加一個(gè) class 屬性，并將其值設(shè)置為“ HighlightedText”。 圖 58 接下來(lái)將實(shí)踐這些概念。 } a:hover { textdecoration: none。Trebuchet MS39。對(duì)這種情況的解決方案是將樣式定義移到一個(gè)單獨(dú)的 CSS 文件中。 lineheight:112%。 marginright:0cm。注意怎樣使用 style標(biāo)記在頁(yè)面的head區(qū)域內(nèi)簡(jiǎn)便地嵌入樣式信息。 2. 將樣式信息從 style屬性移到 style 區(qū)域 如果只對(duì)單個(gè)頁(yè)面設(shè)置樣式，則可以將樣式信息嵌入到頁(yè)面的 HTML 語(yǔ)言的 head標(biāo)記內(nèi)，如下所示： html xmlns= head runat=server titleStyled Page 1/title style .HighlightedText { fontfamily: 39。 可以將樣式定義存放在兩個(gè)位置從而將其應(yīng)用到 Web頁(yè)面上。 } 此代碼將在頁(yè)面上顯示帶有下劃線的紅色鏈接，當(dāng)用戶將鼠標(biāo)放在鏈接上時(shí)，下劃線將消失，而在單擊鏈 接時(shí)，它們立即變成淺橙色。 textdecoration: underline。Trebuchet MS39。然而，為元素指定某個(gè) 特定的自定義類樣式時(shí)，可以使用 Class 屬性，例如： div class=HighlightedTextThis is highlighted text./div h1 class=HighlightedTextThis is also highlighted text./h1 雖然在本書(shū)中看不到文本的顏色，但是可以看到在前面的樣式類定義的字體樣式已經(jīng)應(yīng)用于這兩個(gè)元素，如圖 57 所示。 Color: Navy。Trebuchet MS39。 樣式表的概念從出現(xiàn)至今已有數(shù)年的時(shí)間 (它最初是由 W3C在 1996年 12月作為一個(gè)建議提出來(lái)的 )，每個(gè)設(shè)計(jì)得很優(yōu)秀的站點(diǎn)都包含有 一個(gè)定義明確的 CSS樣式表，這個(gè)樣式表為站點(diǎn)定義了一個(gè)特定的外觀。接下來(lái)就可以把這項(xiàng)技術(shù)用于站點(diǎn)上的每個(gè)元素。Color: Navy。Trebuchet MS39。 圖 54 (5) 創(chuàng)建另一個(gè) .aspx頁(yè)面并將其命名為 。單擊該按鈕將會(huì)看到如圖54所示的 Style Builder 對(duì)話框。 This is a styled div tag /div /form 請(qǐng)注意 VWD 是如何幫助您輸入樣式信息的 (如圖 52所示 )。 (2) 添加一個(gè)新的空白 .aspx 頁(yè)面并將其命名為 。borderbottom:solid 2pt navyThis is a styled div tag/div 圖 51 顯示了這個(gè) style 屬性在 Inter Explorer 中的效果。 style 屬性 改變 Web 頁(yè)面上元素外觀的最快捷的方法是添加 style 屬性。準(zhǔn)確地放置這些元素是很重要的，就像組織站點(diǎn)的內(nèi)容以符合站點(diǎn)的樣式一樣。 為站點(diǎn)設(shè)置樣式 站點(diǎn)的首頁(yè)是訪客首先看到的頁(yè)面，雖然我們知道不能通過(guò)一本書(shū)的封面判斷其價(jià)值 (特別是 Wrox 出版社的書(shū)籍，不能通過(guò)作者的面部照片判斷書(shū)籍價(jià)值 )，但我們?nèi)詴?huì)根據(jù)書(shū)籍的外觀產(chǎn)生第一印象，無(wú)論是一種普通的反應(yīng) (一般吧，功能還可以，搜索框在哪里？ )，一種肯定的反應(yīng) (整潔、樸實(shí)、美觀，我想瀏覽其他頁(yè)面！ )，還是一種否定的反應(yīng) (哇，一團(tuán)糟，我要到其他地方去！ )。一個(gè)成功的應(yīng)用程序應(yīng)努力在兩者之間保持平衡，既保證在視覺(jué)上給用戶享受，又保證使用上的簡(jiǎn)單性，但很多站點(diǎn)在這個(gè)問(wèn)題上都做得不好。開(kāi)發(fā)任何 Web應(yīng)用程序的過(guò)程都是圍繞著兩個(gè)主要方面進(jìn)行的：功能和外觀。 本章首先介紹為 Web 應(yīng)用程序制作樣式的基本工具，然后介紹 Visual Web Developer 設(shè)置樣式的能力。第一印象是很重要的，因此必須正確處理！ 任何站點(diǎn)設(shè)計(jì)中都包 含有常見(jiàn)的元素；例如，一個(gè)顯示公司名稱的標(biāo)題，站點(diǎn)主要內(nèi)容的介紹，或者您瀏覽站點(diǎn)的原因。 設(shè)置樣式和布局站點(diǎn)是 Web 開(kāi)發(fā)中的一個(gè)有機(jī)整體。 Web 頁(yè)面上任何可見(jiàn)的元素都具有 style 屬性。 圖 51 在下面的“試一試”練習(xí)中，首先將創(chuàng)建一個(gè)可以在其中進(jìn)行本章所有示例的站點(diǎn)。直接切換到Source View 并在 Form 標(biāo)記之間輸入灰色部分的代碼： form id=form1 runat=server div style=fontweight:bold。 圖 52 (3) 現(xiàn)在切換到 Design View 并觀察這些格式化信息是如何應(yīng)用到頁(yè)面上的，如圖 53所示。 在為元素設(shè)置樣式時(shí)這個(gè)對(duì)話框非常有用，因?yàn)槭褂盟梢圆槐赜涀∶總€(gè)樣式的語(yǔ)法。在這個(gè)頁(yè)面中，需要添加一個(gè) div元素，該元素內(nèi)的文本是“ This is highlighted text”以及一個(gè)標(biāo)題 1(h1)元素，該元素內(nèi)的文本是“ This is also highlighted text”。Color: Navy。 This is also highlighted text./h1 圖 55 (7) 在瀏覽器中查看該頁(yè)面以便瀏覽完成后的文檔?？梢栽谝粋€(gè)站點(diǎn)中使用多種不同的樣式屬性，附錄 E中列出了一些最常用的元素，可以幫助開(kāi)發(fā)人員為站點(diǎn)選擇最喜歡的樣式。使用樣式表，開(kāi)發(fā)人員可以定義頁(yè)面上每種類型的元素應(yīng)怎樣顯示，同時(shí)還可以為特定的樣式創(chuàng)建定義并將其應(yīng)用于頁(yè)面上的相關(guān)元素。 Color: Navy。 } 注意這兩者之間的惟一差別是 HighlightedText 類的前面有一個(gè)點(diǎn)號(hào)，這個(gè)類名是用戶自定義的。 圖 57 當(dāng)然，如果親自進(jìn)行這個(gè)練習(xí)，將看到字體呈藏青色。 Color: Navy。 } a:hover { textdecoration: none。通過(guò)這種方式可以提示用戶鼠標(biāo)正位于某個(gè)鏈接之上，并且剛才單擊過(guò)某個(gè)鏈接。第一個(gè)位置是將其存放在頁(yè)面頂部 head元素內(nèi)的 style標(biāo)記內(nèi)。Trebuchet MS39。在單個(gè)頁(yè)面中使用這種技術(shù)是很好的 —— 實(shí)際上，如果曾經(jīng)將 Word文檔保存為 HTML，將看到這種技術(shù)用于定義文檔的樣式從而使得該文檔呈現(xiàn)為 HTML。 marginbottom:0cm。 fontsize:。 3. 將樣式信息移動(dòng)到單獨(dú)的 CSS 文件中 這可能是最簡(jiǎn)單的一個(gè)步驟。 color: Navy。 } a:active { color: ff9900。在下面的“試一試”練習(xí)中，將在前面創(chuàng)建的 頁(yè) 面的基礎(chǔ)上創(chuàng)建一個(gè)簡(jiǎn)單的樣式化頁(yè)面。 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”的超鏈接。從圖標(biāo)列表中選擇 StyleSheet 并接受默認(rèn)名稱： 。 } a:link, a:visited { color: cc3300。 textdecoration: underline。將光標(biāo)放置在花括號(hào)內(nèi)并單擊該按鈕啟動(dòng) Style Builder。應(yīng)該看 到如圖 510 所示的畫面。 操作回顧 使用 CSS文件為頁(yè)面中的 HTML元素添加樣式只需完成兩件事情。如果找不到相應(yīng)的類，就不會(huì)有任何樣式應(yīng)用于元素，除非在元素的 Style 屬性中手動(dòng)指定了樣式。由于服務(wù)器控件在呈現(xiàn)時(shí)會(huì)被轉(zhuǎn)換為恰當(dāng)?shù)?HTML 代碼，所以可以使用的屬性將會(huì)不盡相同。服務(wù)器控件所使用的 CssClass 屬性直接和 HTML 元素的 class屬性相關(guān)。 4. CSS 的局限性和使用服務(wù)器端代碼設(shè)置樣式 在使用 CSS 為站點(diǎn)設(shè)置樣式時(shí)，可以指定特定元素在頁(yè)面上的外觀。下面是一些源代碼示例： 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。 的 Panel控件呈現(xiàn)為 HTML 的表格。 主題 主題 (theme)用于定義站點(diǎn)的外觀，類似于使用 CSS設(shè)置頁(yè)面的樣式。 一個(gè)主題在創(chuàng)建好之后有兩種使用方式。另外，可以選擇在整個(gè)站點(diǎn)中使用一個(gè)主題，也可以為每個(gè)頁(yè)面指定一個(gè)主題。這個(gè)文件中的 TreeView 控件和 Calendar 控件定義了站點(diǎn)上的每個(gè)日歷控件和樹(shù)型視圖控件的外觀。 在這個(gè)皮膚文件中的另外兩個(gè)控件 Label和 Image Button都有相關(guān)的 SkinId 屬性。將在本章后面的示例中使用這個(gè)主題和另一個(gè)主題。 圖 512 (2) 將在應(yīng)用程序內(nèi)創(chuàng)建一個(gè)名為 App_Themes 的文件夾，以及一個(gè)在 App_Themes 內(nèi)的新的空文件夾，必須為這個(gè)文件夾命名。 (4) 右擊 Blue 文 件夾并選擇 Add New Item。 圖 514 (5) 重復(fù)這個(gè)步驟為 Red 主題添加一個(gè)皮膚文件，并將其命名為 。接下來(lái)為這兩個(gè)控件設(shè)置樣式，第一步是手動(dòng)為每個(gè)控件添加一些樣式，使其中一個(gè)用于藍(lán)色主題，而另一個(gè)用于紅色主題。 表 51 Blue Skin 屬 性 樣 式 代 碼 FontNames Century Gothic asp:Calendar ID=Calendar1 runat=server FontSize Small OtherMonthDayStyle BackColor Lavender DayStyleForeColor MidnightBlue TitleStyleBackColor LightSteelBlue FontNames=Century Gothic FontSize=Small OtherMonthDayStyle BackColor=Lavender / DayStyle ForeColor=MidnightBlue / TitleStyle BackColor=LightSteelBlue / /asp:Calendar 表 5