翻譯自：
http://www.asp.net/cssadapters/WalkThru/WalkThrough.aspx
利用 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;
}