AJAX Control Toolkit (Atlas) 提供了許多方便的AJAX控制項，關於其中Tab Container(標籤容器)： 針對預設CSS Style要修改的話，可以在開發頁面中，使用 IE Develop Tool 找出該控制項包含的CSS樣式；把預設的 ajax__tab_xp 改成自訂的名稱如 .sam__tab_xp，然後再控制項的CssClass屬性指定即可。
因為預設樣式的Tab大小(Height)只有21px，對於中文字及大多數的版面需求來說有點不夠，然而此控制項會運用到一些圖片來美化，我把它改成28px，有興趣的可以參考附件。修改時注意.ajax__tab_tab這個屬性，原始檔在官網上可以下載。
01 .sam__tab_xp .ajax__tab_body
02 {
03 BORDER-RIGHT: #999999 1px solid;
04 PADDING-RIGHT: 8px;
05 BORDER-TOP: #999999 0px solid;
06 PADDING-LEFT: 8px;
07 FONT-SIZE: 10pt;
08 PADDING-BOTTOM: 8px;
09 BORDER-LEFT: #999999 1px solid;
10 PADDING-TOP: 8px;
11 BORDER-BOTTOM: #999999 1px solid;
12 FONT-FAMILY: 微軟正黑體,verdana,tahoma,helvetica;
13 BACKGROUND-COLOR: #ffffff;
14 }
15
16 .sam__tab_xp .ajax__tab_header
17 {
18 BACKGROUND:url(Image/AjaxTab/tab-line.gif) repeat-x bottom;
19 FONT-SIZE: 16px;
20 FONT-FAMILY: 微軟正黑體,verdana,tahoma,helvetica;
21 }
22
23 .sam__tab_xp .ajax__tab_outer
24 {
25 PADDING-RIGHT: 0px;
26 BACKGROUND:url(Image/AjaxTab/tab-right-h28.gif) no-repeat right;
27 HEIGHT: 28px;
28 }
29
30 .sam__tab_xp .ajax__tab_inner
31 {
32 PADDING-LEFT: 3px;
33 BACKGROUND:url(Image/AjaxTab/tab-left-h28.gif) no-repeat;
34 }
35
36 .sam__tab_xp .ajax__tab_tab
37 {
38 BACKGROUND:url(Image/AjaxTab/tab-h28.gif) repeat-x;
39 PADDING-RIGHT: 6px;
40 PADDING-LEFT: 6px;
41 PADDING-BOTTOM: 3px;
42 MARGIN: 0px;
43 PADDING-TOP: 5px;
44 HEIGHT: 20px;
45 }
46
47 .sam__tab_xp .ajax__tab_hover .ajax__tab_outer
48 {
49 BACKGROUND:url(Image/AjaxTab/tab-hover-right-h28.gif) no-repeat right;
50 }
51
52 .sam__tab_xp .ajax__tab_hover .ajax__tab_inner
53 {
54 BACKGROUND:url(Image/AjaxTab/tab-hover-left-h28.gif) no-repeat;
55 }
56
57 .sam__tab_xp .ajax__tab_hover .ajax__tab_tab
58 {
59 BACKGROUND:url(Image/AjaxTab/tab-hover-h28.gif) repeat-x;
60 }
61
62 .sam__tab_xp .ajax__tab_active .ajax__tab_outer
63 {
64 BACKGROUND:url(Image/AjaxTab/tab-active-right-h28.gif) no-repeat right;
65 }
66
67 .sam__tab_xp .ajax__tab_active .ajax__tab_inner
68 {
69 BACKGROUND:url(Image/AjaxTab/tab-active-left-h28.gif) no-repeat;
70 }
71
72 .sam__tab_xp .ajax__tab_active .ajax__tab_tab
73 {
74 BACKGROUND:url(Image/AjaxTab/tab-active-h28.gif) repeat-x;
75 }