CSS對.的分析(Google web toolkit)

(備註1.)由範例kitchen sink 中 CSS對

.gwt-Tree {
}

.gwt-Tree .gwt-TreeItem {
  font-size: smaller;
}

.gwt-Tree .gwt-TreeItem-selected {
  background-color: #C3D9FF;
}

三者做分析 再裏面都各加入加了property  background-color

並三者設定 property value不同(顏色不同)

.gwt-Tree {} 設定 為黃色
.gwt-Tree .gwt-TreeItem {} 設定綠色

.gwt-Tree .gwt-TreeItem-selected {}設定紅色

進行方式如下：

1.先正常的跑一次kitchen sink的程式

2.再來根據CSS2.1顏色表

maroon #800000	red #ff0000	orange #ffA500	yellow #ffff00	olive #808000	purple #800080	gray #808080
fuchsia #ff00ff	white #ffffff	lime #00ff00	green #008000	navy #000080	blue #0000ff	silver #c0c0c0
aqua #00ffff	teal #008080	black #000000

加上 background-color 再執行一次

.gwt-Tree { background-color:#ffff00;

}

.gwt-Tree .gwt-TreeItem {
background-color:#00ff00;
  font-size: smaller;
}

.gwt-Tree .gwt-TreeItem-selected {
  background-color: #ff0000;
}

看看結果

執行的結果跟下面程式一樣
.gwt-Tree { background-color:#ffff00;

}
 .gwt-TreeItem {
background-color:#00ff00;
  font-size: smaller;
}

 .gwt-TreeItem-selected {
  background-color: #ff0000;
}

用firebug觀看也是顯示同樣的html文件(隨便看tree裡的元素)
更改過的
<span style="display: inline;" class="gwt-TreeItem gwt-TreeItem-selected" role="treeitem" id="gwt-uid-10" aria-level="2" aria-setsize="4" aria-posinset="1" aria-expanded="false" aria-selected="true">Concertos</span>

原先的
<span style="display: inline;" class="gwt-TreeItem gwt-TreeItem-selected" role="treeitem" id="gwt-uid-34" aria-level="2" aria-setsize="4" aria-posinset="1" aria-expanded="false" aria-selected="true">Concertos</span>


網路找到的：

• .gwt-Tree { the tree itself }
• .gwt-Tree .gwt-TreeItem { a tree item }
• .gwt-Tree .gwt-TreeItem-selected { a selected tree item }

實驗二
再對他做多一點的實驗

.gwt-TabBar {
  background-color: #C3D9FF;
  font-size: smaller;
}

.gwt-TabBar .gwt-TabBarFirst {
  height: 100%;
  border-bottom: 1px solid #87B3FF;
  padding-left: 3px;
}

.gwt-TabBar .gwt-TabBarRest {
  border-bottom: 1px solid #87B3FF;
  padding-right: 3px;
}

.gwt-TabBar .gwt-TabBarItem {
  border-top: 1px solid #C3D9FF;
  border-bottom: 1px solid #87B3FF;
  padding: 2px;
  cursor: pointer;
  cursor: hand;
}

.gwt-TabBar .gwt-TabBarItem-selected {
  font-weight: bold;
  background-color: #E8EEF7;
  border-top: 1px solid #87B3FF;
  border-left: 1px solid #87B3FF;
  border-right: 1px solid #87B3FF;
  border-bottom: 1px solid #E8EEF7;
  padding: 2px;
  cursor: default;
}
依序更改或加入成


 .gwt-TabBar  background-color: #800000;紅
 

 .gwt-TabBar .gwt-TabBarFirst background-color: #ffA500;橘


 .gwt-TabBar .gwt-TabBarRest background-color: #808000;綠


 .gwt-TabBar .gwt-TabBarItem background-color: #800080;紫


 .gwt-TabBar .gwt-TabBarItem-selected background-color: #808080;灰

網路資源：
GWT style with CSS

Add css styles for gwt widgets

Note. CSS gives so much power to the "class" attribute, that authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the "class" attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not.

Note: If an element has multiple class attributes， their values must be concatenated with spaces between the values before searching for the class.As of this time the working group is not aware of any manner in which this situation can be reached, however, so this behavior is explicitly non-normative in this specification.

補充：
GWT style names are of the form [project]-[widget].
style name：gwt-button
widget:button
Class selectors:.gwt-Button
any P element whose "class" attribute has been assigned a list of space-separated values that includes "pastoral" and "marine":
p.marine.pastoral { color: green }

 

 

備註1.kitchen sink為Google web toolkit教學的程式，程式碼內建於GWT.

http://gwt.google.com/samples/KitchenSink/KitchenSink.html