如何在Vaadin 6中编写CSS？

我在瓦丁6号做一个项目。我为我的项目创建了所有的布局。但是，我被困在CSS样式。我找不到任何简单的方法将CSS样式应用到我的布局中

我在《圣经》中看到了这个例子

登录
用户名：
密码：
登录

在这方面；他们为他们添加的所有组件获得了一个默认类名。但是，在我的项目中，我没有得到我添加的所有组件的默认类名

我不是通过类应用样式，而是通过内联函数应用样式。我想，这是因为我在设计布局时调整了组件的大小

我的代码：

<div style="height: 781px; width: 762px; overflow: hidden; float: left; padding-left: 6px; padding-top: 0px;">
<div style="float: left; margin-left: 0px;">
<div style="overflow: hidden; height: 781px; width: 762px;" class="v-verticallayout">
<div style="overflow: hidden; margin: 0px; width: 762px; height: 781px;">
<div style="height: 573px; width: 762px; overflow: hidden; padding-left: 0px; padding- top: 0px;">
<div style="float: left; margin-left: 0px;">
<div class="v-customcomponent" style="height: 573px; width: 762px;">
<div class="v-absolutelayout" style="height: 573px; width: 762px;">
<div style="position: relative; overflow: hidden; height: 573px; width: 762px;">
<div class="v-absolutelayout-wrapper" style="top: 0px; left: 0px; right: 0px; bottom: 0px;">
<div class="v-tabsheet v-tabsheet-hover-closable hover-closable" style="overflow: hidden; height: 573px; width: 762px;">

这是因为我在设计布局时调整了组件的大小吗？还是这很普遍

如何避免这种内联样式

在瓦丁的造型似乎有点困难。如果我错了，有人能告诉我应用样式的最佳和标准方法吗

我是否需要遵循任何标准或方法来设计布局以避免内联样式？ . . .

---

在Vaadin 6中，在Java代码中完成的任何组件样式（例如component.setWidth（）等）都直接作为内联css插入。如果不想将其内联，可以在

VAADIN/themes/themename/

目录下的

styles.css

文件中手动定义这些规则，并在应用程序类上设置

@Theme（“themename”）

注释

但是如果你想做CSS样式，你真的应该转向Vaadin 7——Jouni和其他人已经非常彻底地清理了一切（主要是通过放弃传统的IE支持），这使得使用CSS进行样式设计变得实际可行。你现在也可以使用SASS了。有关更多信息，请查看

---

编辑：
要回答列表中的第4个问题，我的方法是制作一个

CustomComponent

，它有一个

CustomLayout

（）作为基本布局。（或者可以扩展

CustomLayout

，而不是扩展CustomComponent。）我使用

pageXLayout.html

作为框架或模板，在任何需要页面交互或可更改部分（按钮、编辑字段、图形、“视图”等）的地方，我都会放置一个

标记。然后，您可以随时填写这些div（初始化时、延迟加载时、响应服务器事件或用户交互时，等等），甚至根据需要删除并替换它们

所以，这可能太明显了。但是，这种构建页面的方式的好处在于，只要您不进行任何服务器端大小调整或任何会影响组件视觉样式的更改，您将拥有一个完全没有任何内联样式的最终html页面。您可以通过更改现有的Vaadin css类或添加自己的id（

component.setId（“myId”）

）或类（

component.addStyleName（“myStyle”）

）来完成所有视觉样式设置。如果方便的话，您还可以将ID和类名添加到location div本身（

）。但有时这些样式可能会被组件自己的基于Vaadin的css覆盖（您可以在

myTheme.scss

或

myTheme.css

文件中自行更改）

（我忘了，前面的假设是Vaadin7.6可能仍然添加内联样式。）

---

无论如何，这就是我最终如何以简单的方式构建基本上对设计师友好的html和基于css的单页Web应用程序的原因。你甚至可以添加任何你想要的基于javascript的前端chrome，但这对于GWT应用处理页面重新加载和状态的方式来说更为深入和棘手。

Hello Christopher。我在应用样式方面没有问题。但是，我的问题是那些内联样式。真的是setWidth（）和setHeight（）等等是这些内联样式的原因吗？@Gugan这就是Vaadin 6的工作原理。您不应该试图覆盖CSS上的大小。@Henri我不仅仅是试图覆盖大小。我没有得到很多div的类名。@Gugan，你是什么意思？通过说mycop.addStylename（“foobar”）？@Gugan yep为组件添加类名，内联样式由java端组件大小/间距等生成。Henri是对的（当然——他在Vaadin团队：）可以设置组件的类名，但在Vaadin 6中，div结构是。。。冗长的。瓦丁7号更干净。

<div style="height: 781px; width: 762px; overflow: hidden; float: left; padding-left: 6px; padding-top: 0px;">
<div style="float: left; margin-left: 0px;">
<div style="overflow: hidden; height: 781px; width: 762px;" class="v-verticallayout">
<div style="overflow: hidden; margin: 0px; width: 762px; height: 781px;">
<div style="height: 573px; width: 762px; overflow: hidden; padding-left: 0px; padding- top: 0px;">
<div style="float: left; margin-left: 0px;">
<div class="v-customcomponent" style="height: 573px; width: 762px;">
<div class="v-absolutelayout" style="height: 573px; width: 762px;">
<div style="position: relative; overflow: hidden; height: 573px; width: 762px;">
<div class="v-absolutelayout-wrapper" style="top: 0px; left: 0px; right: 0px; bottom: 0px;">
<div class="v-tabsheet v-tabsheet-hover-closable hover-closable" style="overflow: hidden; height: 573px; width: 762px;">