在GWT的文檔裡說，大緻上CSS的命名規則是這樣的"[project]-[widget]，比如gwt-Button，你可以在CSS裡定義如下：
.gwt-Button{font-size:150%;}
但是這樣的說明是不充分的，是以這裡有必要把他真正的樣式表來列一下，以供檢視。
AbsolutePanel
用一個DIV來實作，預設的設定了overflow:hidden。這個DIV裡邊的内容可以用一個x,y坐标來确定位置。
<div style="overflow: hidden;"></div>
Botton
就是一個正常的HTML的Button.預設的樣式名字是gwt-Button.
<button class="gwt-Button"/>
CellPanel
用一個table來實作，沒有預設的樣式，可以設定border,cell-spacing屬性。
<table></table>
CheckBox
就是正常的Html的CheckBox，預設的樣式名字為gwt-CheckBox，會自動生成一個不重複的id，checkN(N是一個整數)，可以使用checked,defaultChecked,disabled等屬性。預設樣式是空的。
<checkbox class="gwt-CheckBox">
DeckPanel
用一個DIV來實作，包含了一系列的子對象。每一個對象可以用單獨的display屬性來設定是否顯示。這個有點像Swing裡面的CardLayout的方式有點像，添加了一系列的元件，但是隻能顯示一個。
<div style="width: 100%; height: 100%"></div>
DialogBox
預設的樣式有gwt-DialogBox，Caption兩個都是相關。用一個DIV來實作，标題Caption也是一個DIV。
<div class="gwt-DialogBox">
<table cell-spacin="0" cell-padding="0">
<tbody>
<tr><td><div class="Caption">Caption</div></td></tr>
<tr><td>Content</td></tr>
</tbody>
</table>
</div>
DockPanel
用一個Table來實作，cell-spacin,cell-padding都預設為0，為了實作DockPanel裡邊的tr,td比較麻煩一些。
<table cell-spacing="0" cell-padding="0">
<tbody></tbody>
</table>
FlexTable
隻是一個簡單的Table，沒什麼特别的東西。
<table>
<tbody></tbody>
</table>
FlowPanel
用一個DIV來實作，設定裡display屬性為inline。
<div style="display:inline;">content</div>
FocusPanel
隻是一個DIV，重要的是它聲明了focusevents,keyevents,onclick和mouseevents，對對于那些沒有聲明的這些事件"子元件"很有用處。
<div>content<div>
FocusWidget
可以是任何元件，隻是它可以幫助捕獲Focusevents,keyevents。
Frame
是一個IFrame,他的預設的樣式是gwt-Frame
<iframe></iframe>
Grid
就是一個Table
<table><tbody></tbody></table>
HTML
一個DIV，預設的樣式是gwt-HTML，可以設定屬性white-space為normal,nowrap。
HTMLPanel
就是一個DIV，可以容納HTML或是其他元件，不适用gwt-HTML樣式。最有用的屬性就是createUniqueId，可以設定一個id,HTMLPanel_N。和前面的CheckBox的checkN,相比，這裡用大寫字母和下劃線。看起來多少有點怪異。
<div>content</div>
HTMLTable
沒有疑問，這是用一個Table實作的，重要的是，它是Grid,FlexTable的父類。提供了設定每行或是每一個單元格的樣式設定的方法。表格中沒有thead。假如要設定表頭的話，可能通過設定第一行的樣式來差別。
<table><tbody></tbody></table>
table.getRowFormtter(0).setStyleName("style");
HorizontalPanel
水準排列的面闆，用一個隻有一行的表格實作。
<table cell-spacing="0" cell-padding="0">
<tbody>
<tr>
<td style="display: static; vertical-align: top;" align="left">Item 1</td>
<td style="display: static; vertical-align: top;" align="left">Item 2</td>
</tr>
</tbody>
</table>
HyperLink
一個有定義了錨點的DIV，預設的樣式名：gwt-HyperLink
<div></div>
Image
沒有問題，肯定是IMG.gwt-Image樣式沒有實作。
<img src="..."/>
Label
一個DIV，預設的樣式是gwt-Label。Label不能解析HTML内容，假如你想要的話，可以用HTML來代替，兩者都提供滑鼠事件。Label會自動換行，但是你也可以通過setWordWrap來修改。
<div class="gwt-Label">content</div>
ListBox
就是用Select和Option來實作。gwt-ListBox樣式沒有被實作。可以設定selected,size,multples等屬性。
MenuBar
用一個包含表格的DIV實作。一個水準的菜單，隻有一行，用單元格來設定菜單項，一個垂直的菜單，用行來區分菜單項。gwt-MenuBar隻是設定外層的DIV的樣式。
<div class="gwt-MenuBar">
<table>
<tbody>
<tr>
<td class="gwt-MenuItem">text or html</td>
<td class="gwt-MenuItem">text or html</td>
</tr>
<!--一個垂直菜單的例子
<tr><td class="gwt-MenuItem">text or html</td></tr>
<tr><td class="gwt-MenuItem">text or html</td></tr>
-->
</tbody>
</table>
</div>
MenuItem
一個菜單項就是在菜單條中的一個單元格。它的預設屬性是gwt-MenuItem.選中的時候有一個附加的屬性，gwt-MenuItem- selected.在菜單項預設的樣式class="gwt-MenuItem",在選中的時候就改變成class="gwt-MenuItem gwt-MenuItem-selected".
PasswordTextBox
用Password實作，使用gwt-PasswordTextBox樣式。
PopupPanel
隻是一個DIV.
RadioButton
用一個INPUT實作，使用gwt-RadioButton樣式。
RootPanel
一個RootPanel可以附加到任何的元件上，但是以前屬于這個元件的所有的内容都會被清除。假如你仔細想想，你會發現除了初始化之外，這個元件還有很多用處。
ScrollPanel
一個Div設定了overflow屬性為scroll 或auto.
<div style="overflow: auto;">
content
</div>
SimplePanel
就是一個Div.
StackPanel
用一個表格來實作，每一個組用兩行來儲存，第一行放了标簽，第二行放了内容。預設的這個表格使用gwt-StackPanel樣式，标簽行用了gwt- StackPanelItem和gwt-StackPanelItem-selected.當一個标簽被選中的時候，它的樣式就由原來的gwt- StackPanelItem替換成為gwt-StackPanelItem-seleted.
<table class="gwt-StackPanel" cell-spacing="0" cell-padding="0">
<tbody>
<tr>
<td class="gwt-StackPanelItem" height="1px">text/html</td>
</tr>
<tr>
<td height="100%" valign="top">
content -- a widget
</td>
</tr>
</tbody>
</table>
TabBar
TabBar 使用一個HorizontalPanel來實作，是以它也是一個Table,表格的樣式是gwt-TabBar。對于第一個标簽，通常是一個空的，它的樣式是gwt-TabBarFirst,就是為了裝飾,最後也會加上一個空的标簽，指定樣式為gwt-TabBarRest。當一個标簽被選中的時候， gwt-TabBarItem-selected的樣式會附加到樣式中，這點和MenuItem是一樣的。
<table class="gwt-TabBar" cell-spacing="0" cell-padding="0">
<tbody>
<tr>
<td class="gwt-TabBarFirst" style="height: 100%;"><div class="gwt-HTML" style="height: 100%;"> </div></td>
<td>Tab #1</td>
<td>Tab #2</td>
<td class="gwt-TabBarRest" style="width: 100%;"><div class="gwt-HTML" style="height: 100%;"> </div></td>
</tr>
</tbody>
</table>
TabPanel
用一個VerticalPanel來實作，包含了一個TabBar和一個DeckPanel，這樣就嵌套幾層表格，樣式gwt-TabPanel用到最外層表格。gwt-TabBar用到TabBar,gwt-TabPanelBottom用到DeckPanel的DIV上了。需要注意的是TabBar擷取了width:100%樣式，這樣你就知道TabBar中的gwt-TabBarRest樣式的必要了。
<table class="gwt-TabPanel" cell-spacing="0" cell-padding="0">
<tbody>
<tr>
<td>
<table class="gwt-TabBar" style="width: 100%;" cell-spacing="0" cell-padding="0">
<tbody>
<tr>
<td class="gwt-TabBarFirst" style="height: 100%;"><div class="gwt-HTML" style="height: 100%;"> </div></td>
<td class="gwt-TabBarRest" style="width: 100%;"><div class="gwt-HTML" style="height: 100%;"> </div></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div class="gwt-TabPanelBottom">
</div>
</td>
</tr>
</tbody>
</table>
TextArea
就是一個TextArea,預設的樣式為gwt-TextArea.
TextBox
<input type="text" class="gwt-TextBox" />
Tree
就是一個包含了多個TreeItem的Div，預設樣式gwt-Tree,設定overflow:auto.
<div class="gwt-Tree" style="overflow: auto;">
<div style="position: relative; margin-left: 16;" (handle)>
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
TreeItem
用一個包含了一個表格的DIV來實作。預設的樣式gwt-TreeItem和gwt-TreeItem-selected，來修飾裡面的内容。但選中的時候gwt-TreeItem-selected會替換gwt-TreeItem。這個StackPanel是一樣的。
<div style="position: relative; margin-left: 16; white-space: nowrap" (handle)>
<table style="white-space: nowrap;">
<tr>
<td style="vertical-align: middle;"><img src="tree_white.gif" /></td>
<td style="vertical-align: middle;">content</td>
</tr>
</table>
children
</div>
VerticalPanel
用一個表格來實作，所有的東西按行來排列。
<table cell-spacing="0" cell-padding="0">
<tbody>
<tr><td style="display: static; vertical-align: top;" align="left">Item 1</td></tr>
<tr><td style="display: static; vertical-align: top;" align="left">Item 2</td></tr>
</tbody>
</table>
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)