CSS Classes and Styles"

From Documentation
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>
  
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]].
+
=sclass=
 +
In additions, you could specify the style class by use of <javadoc method="setSclass(java.lang)">org.zkoss.zk.ui.HtmlBasedComponent</javadoc>.
  
=sclass=
 
 
=zclass=
 
=zclass=
 
=content style and sclass=
 
=content style and sclass=

Revision as of 09:44, 29 November 2010


CSS Classes and Styles


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.

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

Last Update : 2010/11/29


Version Date Content
     


Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.