CSS Classes and Styles"
From Documentation
(→style) |
|||
| Line 11: | Line 11: | ||
* <javadoc method="setZclass(java.lang.String)" type="interface">org.zkoss.zk.ui.HtmlBasedComponent</javadoc> (i.e., zclass) assigns the main CSS style class to a component. Unlike style and sclass, if zclass is changed, all default CSS styles won't be applied. | * <javadoc method="setZclass(java.lang.String)" type="interface">org.zkoss.zk.ui.HtmlBasedComponent</javadoc> (i.e., zclass) assigns the main CSS style class to a component. Unlike style and sclass, if zclass is changed, all default CSS styles won't be applied. | ||
* Some components have a so-called content area and they have a separated set of methods to change the CSS style of the content area, such as <javadoc method="setContentStyle(java.lang.String)">org.zkoss.zul.Window</javadoc> and <javadoc method="setContentSclass(java.lang.String)">org.zkoss.zul.Window</javadoc>. | * Some components have a so-called content area and they have a separated set of methods to change the CSS style of the content area, such as <javadoc method="setContentStyle(java.lang.String)">org.zkoss.zul.Window</javadoc> and <javadoc method="setContentSclass(java.lang.String)">org.zkoss.zul.Window</javadoc>. | ||
| + | |||
| + | Notice that the DOM structures of many ZUL components are complicate, and CSS customization might depend on the DOM structure. For more information about how individual component is styled, please refer to [[ZK Style Guide]]. | ||
=style= | =style= | ||
| Line 26: | Line 28: | ||
</source> | </source> | ||
| − | + | =sclass= | |
| + | In additions, you could specify the style class by use of <javadoc method="setSclass(java.lang)">org.zkoss.zk.ui.HtmlBasedComponent</javadoc>. | ||
| − | |||
=zclass= | =zclass= | ||
=content style and sclass= | =content style and sclass= | ||
Revision as of 09:44, 29 November 2010
CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of a (HTML) document. It is an important part of ZK to customize component's look and feel. If you are not familiar with CSS, please refer to CSS Tutorial.
There are a set of methods that could be used to set CSS styles for an individual component.
- HtmlBasedComponent.setStyle(String) assigns CSS styles directly to a component
- HtmlBasedComponent.setSclass(String) (i.e., sclass) assigns one or multiple CSS style classes to a component.
- HtmlBasedComponent.setZclass(String) (i.e., zclass) assigns the main CSS style class to a component. Unlike style and sclass, if zclass is changed, all default CSS styles won't be applied.
- Some components have a so-called content area and they have a separated set of methods to change the CSS style of the content area, such as Window.setContentStyle(String) and Window.setContentSclass(String).
Notice that the DOM structures of many ZUL components are complicate, and CSS customization might depend on the DOM structure. For more information about how individual component is styled, please refer to ZK Style Guide.
style
Specifying the style is straightforward:
<textbox style="color: red; font-style: oblique;"/>
or, in Java:
Textbox tb = new Textbox();
tb.setStyle("color: red; font-style: oblique;");
sclass
In additions, you could specify the style class by use of HtmlBasedComponent.setSclass(lang).
zclass
content style and sclass
Version History
| Version | Date | Content |
|---|---|---|