CSS Classes and Styles"

From Documentation
Line 29: Line 29:
  
 
=sclass=
 
=sclass=
In additions, you could specify the style class by use of <javadoc method="setSclass(java.lang)">org.zkoss.zk.ui.HtmlBasedComponent</javadoc>.
+
In additions, you could specify the style class by use of <javadoc method="setSclass(java.lang.String)">org.zkoss.zk.ui.HtmlBasedComponent</javadoc>, such that you could apply the same CSS style to multiple components.
 +
 
 +
<source lang="xml">
 +
<window>
 +
    <style>
 +
        .red {
 +
            color: blue;
 +
            font-style: oblique;
 +
        }
 +
    </style>
 +
    <textbox sclass="red" /> <!-- first textbox -->
 +
    <textbox sclass="red" /> <!-- another textbox -->
 +
</window>
 +
</source>
 +
 
 +
You could apply multiple style classes too. As shown below, just separate them with a space.
 +
 
 +
<source lang="xml">
 +
<textbox sclass="red error"/>
 +
</source>
  
 
=zclass=
 
=zclass=

Revision as of 09:51, 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(String), such that you could apply the same CSS style to multiple components.

<window>
    <style>
        .red {
            color: blue;
            font-style: oblique;
        }
    </style>
    <textbox sclass="red" /> <!-- first textbox -->
    <textbox sclass="red" /> <!-- another textbox -->
</window>

You could apply multiple style classes too. As shown below, just separate them with a space.

<textbox sclass="red error"/>

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.