利用 CSS Friendly Control Adapters 將 ASP.NET 控制項轉為符合WEB標準的、有語意的HTML頁面 CSS 樣式表控制。
例如，Menu、TreeView等控制項均將輸出< table>標籤，而基於Web標準中的“有語意的”這一條，顯然應該選擇<ul>標籤。
而使用CSS Friendly Control Adapters 會將其轉為使用嵌套的<ul>標籤渲染，這被稱為純CSS menu(http://www.meyerweb.com/eric/css/edge/menus/demo.html).
而對於以前不支援CSS的舊式瀏覽器，可以通過在設定檔中設定不同版本的瀏覽器使用不同的 Control Adapters
來解決！這樣對於PocketPC也能通過提供不同的Control Adapters來獲得支援！
== 下載和安裝 ==
訪問網站：http://www.asp.net/cssadapters/，單擊“download source”按鈕，下載ASPNETCssFriendlyAdapters.vsi。
或者直接下載： http://download.microsoft.com/download/b/a/3/ba3aee5e-2e28-4056-9e71-036b2e7f58af/ASPNETCssFriendlyAdapters.vsi
該檔案是一個 Visual Studio Content Installer 安裝包，需要 Visual Web Developer or Visual Studio 2005 方能運行解包。安裝後將在你的Visual Studio中添加幾個新的Web Site 模版。
== 使用 ==
進入 Visual Studio，選擇 File -> New Web Site 功能表項目，選擇新加入的“ASP.NET CSS Friendly Web Site”模版，開始你自己的CSS樣式表網站設計，或者
選擇“Tutorial on ASP.NET CSS Friendly Control Adapters”模版建立教程網站，學習CSS Friendly sample adapters的功能。
建立新網站後，你可以看看裡面的readme.txt 檔案，瞭解下注意事項。
== 運行 ==
所有的adapted controls的例子放在頁頂部的Exmaples菜單下面的，第一個就是被轉換的<asp:menu>菜單控制項例子：用嵌套的<ul>標籤代替了不規範的<table>標籤。
點擊進入菜單控制項例子頁面，你能更清晰的看到轉換前後有什麼不同：
每一個例子都可以通過設定在是否使用轉化接頭(Adapters)之間切換：
另外可以通過Theme Chooser在兩個不同樣式Theme(Basic, Enhanced)之間切換，樣式檔案在App_Themes中：
要聯機查看每個例子的來源程式，可以通過點擊“view source code”按鈕：
== 檔案的組織 ==
* 分頁檔放在網站的根目錄下面。
* 專用代碼放在App_Code\SiteSpecific 檔案夾下，只對這個教程網站有用的，沒有實用意義的。
* CSS Friendly Control Adapters的原始碼放在App_Code\Adapters下。
* App_Themes: 存放了兩個不同的Theme樣式
* bin目錄下放的是一個顯示高亮度文法的工具：Wilco Bauer's handy utility(http://www.wilcob.com/Wilco/Toolbox/SyntaxHighlighter.aspx)
* App_data 存放的是某些例子使用的xml資料
* CSS 目錄，存放的是與Theme無關的，被Control Adapters使用的樣式，這些樣式包含的是插接的控制項的behavior規範而不是介面表現。例如，對於pure css 菜單，有顏色，字型的介面規範；更重要的是還要有菜單如何工作的規範，比如如何顯示菜單子項（當滑鼠移上菜單的時候），如何隱藏菜單子項（當滑鼠離開菜單的時候），這些CSS的通用規範被放於這個檔案夾。旗下的子檔案夾browser-specific包含了針對特定瀏覽器的CSS規範。
* App_Browsers 目錄，設定使用CSS Friendly Control Adapters 的瀏覽器，你可以設定成不管瀏覽器的類型版本如何，始終使用這些Adapters；也可以設定成只針對特定的瀏覽器以及特定的版本才使用。
* Javascript目錄，部分Control Adapters使用了一些JS代碼實現，這些JS代碼被存放於此。如果要改變該路徑的名稱，你需要在web.config檔案中的appSettings節 添加/改變 CSSFriendly-JavaScript-Path 的值：<add key="CSSFriendly-JavaScript-Path" value="~/JavaScript" />
* Membership 目錄，示範了如何插接ASP.NET 2.0 的membership 控制項。
每一個轉換的CSS控制項都有自己的樣式表，例如：<asp:GridView> 控制項 has a style sheet named GridViewSample.css。該教程網站包含了兩個Theme樣式：
Basic and Enhanced, 因此在 Basic 檔案夾和 Enhanced 檔案夾中均有 GridViewSample.css 檔案。
本教程網站在 App_Browsers 目錄下的配置的.browse檔案為 CSSFriendlyAdapters.browser，它配置為預設使用 CSS Friendly Control Adapters，當然你頁可以將refID 改為 IE6to9, Gecko, Opera8to9 等等。
運行了例子，瞭解了檔案的組織和意義，現在該是建立自己的網站的時候。如何修改CSS改變控制項的外觀?
讓我們從menu講起，首先我們修改下當滑鼠移動到菜單上的顏色，在VS中，開啟 App_Themes\Basic\MenuExample.css.檔案：
CSS
.PrettyMenu ul.AspNet-Menu li:hover,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover
{
background:#4682B3;
}
將該顏色改成其它的值如 #27408B。儲存，然後重新整理菜單控制項例子頁面：
還需要改變的是 .skin 檔案，當瀏覽器不使用轉換件的時候，控制項預設會用該檔案，開啟 App_Themes\Basic\Basic.skin 檔案，修改菜單的 DynamicHoverStyle 中的顏色值：
=== 使用CSS轉換件的空頁面 ===
<%@ Page Language="C# or VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link runat="server" rel="stylesheet" href="~/CSS/Import.css" type="text/css" id="AdaptersInvariantImportCSS" />
<!--[if lt IE 7]>
<link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu6.css" type="text/css" id="IEMenu6CSS" />
<![endif]-->
</head>
<body>
<form id="form1" runat="server">
<!-- adapted control(s) here-->
</form>
</body>
</html>
Import.css 是 Theme無關的CSS，表示的是CSS轉換件的 behavioral 規則。
IEMenu6.css 是一個有條件的串連選項，當使用以前版本的IE瀏覽器需要。
=== 打造Pure CSS 菜單頁面 ===
ASP.NET
<script runat="server">
Public Sub OnClick(ByVal sender As Object, ByVal e As MenuEventArgs)
MessageLabel.Text = "You selected " & e.Item.Text & "."
e.Item.Selected = True
End Sub
</script>
<asp:Menu ID="EntertainmentMenu" runat="server" Orientation="Horizontal" onmenuitemclick="OnClick" CssSelectorClass="SimpleEntertainmentMenu">
<Items>
<asp:MenuItem Text="Music">
<asp:MenuItem Text="Classical" />
<asp:MenuItem Text="Rock">
<asp:MenuItem Text="Electric" />
<asp:MenuItem Text="Acoustical" />
</asp:MenuItem>
<asp:MenuItem Text="Jazz" />
</asp:MenuItem>
<asp:MenuItem Text="Movies" Selectable="false">
<asp:MenuItem Text="Action" />
<asp:MenuItem Text="Drama" />
<asp:MenuItem Text="Musical" />
</asp:MenuItem>
</Items>
</asp:Menu>
CSS
.SimpleEntertainmentMenu .AspNet-Menu-Selected
{
border: solid 1px #00ff00 !important;
}
.SimpleEntertainmentMenu .AspNet-Menu-ChildSelected
{
border: solid 1px #ff0000 !important;
}
.SimpleEntertainmentMenu .AspNet-Menu-ParentSelected
{
border: solid 1px #0000ff !important;
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
