在GWT的文檔里說，大致上CSS的命名規則是這樣的"[project]-[widget]，比如gwt-Button，你可以在CSS里定義如下：

.gwt-Button{font-size:150%;}

但是這樣的說明是不充分的，所以這里有必要把他真正的樣式表來列一下，以供查看。

AbsolutePanel 用一個DIV來實現，默認的設置了overflow:hidden。這個DIV里邊的內容可以用一個x,y坐標來確定位置。

Botton 就是一個正常的HTML的Button.默認的樣式名字是gwt-Button.

CellPanel

用一個table來實現，沒有默認的樣式，可以設置border,cell-spacing屬性。

CheckBox

就是正常的Html的CheckBox，默認的樣式名字為gwt-CheckBox，會自動生成一個不重復的id，checkN(N是一個整數)，可以使用checked,defaultChecked,disabled等屬性。默認樣式是空的。

DeckPanel

用一個DIV來實現，包含了一系列的子對象。每一個對象可以用單獨的display屬性來設置是否顯示。這個有點像Swing里面的CardLayout的方式有點像，添加了一系列的組件，但是只能顯示一個。

DialogBox

缺省的樣式有gwt-DialogBox，Caption兩個都是相關。用一個DIV來實現，標題Caption也是一個DIV。

Caption

Content

DockPanel

用一個Table來實現，cell-spacin,cell-padding都默認為0，為了實現DockPanel里邊的tr,td比較麻煩一些。

FlexTable

只是一個簡單的Table，沒什么特別的東西。

FlowPanel

用一個DIV來實現，設定里display屬性為inline。

content

FocusPanel 只是一個DIV，重要的是它聲明了focusevents,keyevents,onclick和mouseevents，對對于那些沒有聲明的這些事件"子組件"很有用處。

content

FocusWidget

可以是任何組件，只是它可以幫助捕獲Focusevents,keyevents。

Frame

是一個IFrame,他的默認的樣式是gwt-Frame

Grid

就是一個Table

HTML

一個DIV，默認的樣式是gwt-HTML，可以設定屬性white-space為normal,nowrap。

HTMLPanel

就是一個DIV，可以容納HTML或是其他組件，不適用gwt-HTML樣式。最有用的屬性就是createUniqueId，可以設定一個id,HTMLPanel_N。和前面的CheckBox的checkN,相比，這里用大寫字母和下劃線。看起來多少有點怪異。

content

HTMLTable

沒有疑問，這是用一個Table實現的，重要的是，它是Grid,FlexTable的父類。提供了設定每行或是每一個單元格的樣式設定的方法。表格中沒有thead。假如要設定表頭的話，可能通過設定第一行的樣式來區別。

table.getRowFormtter(0).setStyleName("style");

HorizontalPanel 水平排列的面板，用一個只有一行的表格實現。

Item 1

Item 2

HyperLink

一個有定義了錨點的DIV，默認的樣式名：gwt-HyperLink

Image

沒有問題，肯定是IMG.gwt-Image樣式沒有實現。

Label

一個DIV，默認的樣式是gwt-Label。Label不能解析HTML內容，假如你想要的話，可以用HTML來代替，兩者都提供鼠標事件。Label會自動換行，但是你也可以通過setWordWrap來修改。

content

ListBox

就是用Select和Option來實現。gwt-ListBox樣式沒有被實現。可以設定selected,size,multples等屬性。

MenuBar

用一個包含表格的DIV實現。一個水平的菜單，只有一行，用單元格來設置菜單項，一個垂直的菜單，用行來區分菜單項。gwt-MenuBar只是設定外層的DIV的樣式。

text or html

text or html

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.

content

SimplePanel

就是一個Div.

StackPanel

用一個表格來實現，每一個組用兩行來保存，第一行放了標簽，第二行放了內容。默認的這個表格使用gwt-StackPanel樣式，標簽行用了gwt-StackPanelItem和gwt-StackPanelItem-selected.當一個標簽被選中的時候，它的樣式就由原來的gwt-StackPanelItem替換成為gwt-StackPanelItem-seleted.

text/html

content -- a widget

TabBar

TabBar使用一個HorizontalPanel來實現，所以它也是一個Table,表格的樣式是gwt-TabBar。對于第一個標簽，通常是一個空的，它的樣式是gwt-TabBarFirst,就是為了裝飾,最后也會加上一個空的標簽，指定樣式為gwt-TabBarRest。當一個標簽被選中的時候，gwt-TabBarItem-selected的樣式會附加到樣式中，這點和MenuItem是一樣的。

 

Tab #1

Tab #2

 

TabPanel

用一個VerticalPanel來實現，包含了一個TabBar和一個DeckPanel，這樣就嵌套幾層表格，樣式gwt-TabPanel用到最外層表格。gwt-TabBar用到TabBar,gwt-TabPanelBottom用到DeckPanel的DIV上了。需要注意的是TabBar獲取了width:100%樣式，這樣你就知道TabBar中的gwt-TabBarRest樣式的必要了。

   

TextArea

就是一個TextArea,默認的樣式為gwt-TextArea.

TextBox

Tree

就是一個包含了多個TreeItem的Div，默認樣式gwt-Tree,設定overflow:auto.

TreeItem

用一個包含了一個表格的DIV來實現。默認的樣式gwt-TreeItem和gwt-TreeItem-selected，來修飾里面的內容。但選中的時候gwt-TreeItem-selected會替換gwt-TreeItem。這個StackPanel是一樣的。

content

children

VerticalPanel

用一個表格來實現，所有的東西按行來排列。

Item 1

Item 2

Technorati : gwt css

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的java games_Java Me Games的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。