与大多数 Web 应用程序一样，GWT 应用程序使用层叠样式表 (CSS) 进行视觉样式化。

• 样式化现有小部件
• 复杂样式
• 关联 CSS 文件
• GWT 视觉主题
• 文档

样式化现有小部件

GWT 小部件依赖于层叠样式表 (CSS) 进行视觉样式化。

在 GWT 中，每个小部件类都具有一个关联的样式名称，该样式名称将其绑定到 CSS 规则。此外，您可以为特定组件分配一个 id 以创建仅应用于该组件的 CSS 规则。默认情况下，每个组件的类名是 gwt-<classname>。例如，按钮小部件 的默认样式为 gwt-Button。

为了使所有按钮都具有更大的字体，您可以在应用程序的 CSS 文件中添加以下规则：

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

使用 GWT 工具包创建的所有小部件都将具有默认类名，但可以使用 setStyleName() 设置小部件的样式名称。静态元素可以在应用程序的 HTML 源代码中设置其类。

使用样式表的方法是引用单个小部件。为此，您需要知道小部件或 DOM 元素的 id 属性的值。

默认情况下，浏览器或 GWT 不会为小部件创建默认 id 属性。您必须显式为要以这种方式引用的元素创建 id，并确保每个“id”值都唯一。一种常见的方法是在 HTML 主页 中的静态元素上设置它们。

<div id="my-button-id"/>

要设置 GWT 小部件的 id，请检索其 DOM 元素，然后按如下方式设置 id 属性：

Button b = new Button();
  DOM.setElementAttribute(b.getElement(), "id", "my-button-id")

这将允许您在样式表中按如下方式引用特定小部件：

#my-button-id { font-size: 100%; }

复杂样式

一些小部件与多个样式相关联。例如，菜单栏 具有以下样式：

.gwt-MenuBar { 
       /* properties applying to the menu bar itself */ 
   }
   .gwt-MenuBar .gwt-MenuItem { 
       /* properties applying to the menu bar's menu items */ 
   }
   .gwt-MenuBar .gwt-MenuItem-selected { 
       /* properties applying to the menu bar's selected menu items */
   }

在上面的样式表代码中，有两个样式规则适用于菜单项。第一个适用于所有菜单项（包括已选和未选），而第二个（带有 -selected 后缀）仅适用于已选菜单项。已选菜单项的样式名称将设置为 "gwt-MenuItem gwt-MenuItem-selected"，指定将应用这两个样式规则。最常见的方法是使用 setStyleName 设置基本样式名称，然后使用 addStyleName() 和 removeStyleName() 添加和删除第二个样式名称。

关联 CSS 文件

有多种方法可以将 CSS 文件与您的模块关联起来：

• 在 主机 HTML 页面 中使用 <link> 标签。
• 在 模块 XML 文件 中使用 <stylesheet> 元素。
• 使用包含在 客户端捆绑 中的 CssResource。
• 在 UiBinder 模板中使用内联 <ui:style> 元素。

现代 GWT 应用程序通常使用 CssResource 和 UiBinder 的组合。较旧的应用程序应该只使用前两个选择中的一个。

在 HTML 主机页面中包含样式表（已弃用）

通常，样式表位于模块 公共路径 的一部分。您只需在 主机页面 中包含指向样式表的 <link> 即可，例如：

<link rel="stylesheet" href="mystyles.css" type="text/css"/>

在模块 XML 文件中包含样式表（已弃用）

在模块中包含样式表的另一种方法是使用 模块 XML 文件 中的 <stylesheet> 元素。这使用 自动资源包含 将 .css 文件与您的模块捆绑在一起。

在 HTML 中使用 <link> 标签和在模块 XML 文件中使用 <stylesheet> 元素之间的区别在于，使用模块 XML 文件方法，样式表将始终跟随您的模块，无论您将其部署在哪个主机 HTML 页面上。

为什么这很重要？因为如果您创建并共享模块，它不包含主机页面，因此您无法保证样式表的可用性。自动资源包含解决了这个问题。如果您不关心共享或重用模块，那么您只需在主机页面中使用标准的 HTML link rel 东西即可。

提示：为包含资源的 .css 文件使用唯一名称以避免冲突。如果您自动包含“styles.css”并共享您的模块，并且某人将其放在已具有“styles.css”的页面上，就会出现问题。

GWT 视觉主题

GWT 提供三种默认视觉主题供您选择：标准、Chrome 和深色。标准主题使用微妙的蓝色色调来创建活泼的用户界面。Chrome 主题使用灰色背景，营造精致、专业的视觉效果。深色主题使用深灰色和黑色，并使用鲜艳的靛蓝色强调色，营造大胆、醒目的体验。当您继承视觉主题时，几乎所有小部件都将具有一些默认样式。视觉主题允许您将更多时间集中在应用程序开发上，而将更少时间花在应用程序的样式化上。

默认情况下，新的 GWT 应用程序使用标准主题，但您可以选择上面提到的任何主题。打开您的模块 XML 文件 (gwt.xml) 并取消注释继承您选择的主题的行。

<!-- Inherit the default GWT style sheet. You can change       -->
<!-- the theme of your GWT application by uncommenting          -->
<!-- any one of the following lines.                           -->
<!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
<!-- <inherits name="com.google.gwt.user.theme.chrome.Chrome"/> -->
<inherits name="com.google.gwt.user.theme.dark.Dark"/>

如果您要为阿拉伯语等从右到左书写的语言设计网站，GWT 视觉主题还提供 RTL（从右到左）版本。您可以通过在模块名称末尾添加 RTL 来包含 RTL 版本：

<inherits name="com.google.gwt.user.theme.dark.DarkRTL"/>

带宽敏感型应用程序

如果您要编写带宽敏感型应用程序（例如手机应用程序），您可能不希望要求用户下载与您喜欢的主题关联的整个样式表（约 27k）。或者，您可以创建您自己的精简版样式表，该样式表仅定义适用于您的应用程序的样式。要做到这一点，首先通过将以下行添加到您的 gwt.xml 文件中来包含与其中一个主题关联的公共资源：

<inherits name='com.google.gwt.user.theme.standard.StandardResources'/>

每个主题都具有一个“资源”版本，它仅包含与主题关联的公共资源，但不会将样式表注入页面。您需要创建一个新的样式表，并将其注入页面，如上面的部分所述。

最后，将 com.google.gwt.user.theme.standard 包中位于 public/gwt/standard/standard.css 文件的样式表内容复制到您的新样式表中。删除您不想包含的任何样式，减少文件的大小。当您运行应用程序时，GWT 将注入您精简版的样式表，但您仍然可以引用与标准视觉主题关联的文件。

文档

通常的做法是，将每个小部件类的相关 CSS 样式名称作为其文档注释的一部分进行记录。有关简单示例，请参见 Button。有关更复杂的示例，请参见 MenuBar。