CSS Classes and Styles"

From Documentation
m ((via JWB))
(10 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{{ZKDevelopersReferencePageHeader}}
 
{{ZKDevelopersReferencePageHeader}}
  
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 [http://www.w3schools.com/css/default.asp CSS Tutorial].
+
__TOC__
 +
 
 +
CSS ([http://en.wikipedia.org/wiki/Cascading_Style_Sheets 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 [http://www.w3schools.com/css/default.asp CSS Tutorial].
  
 
There are a set of methods that could be used to set CSS styles for an individual component.
 
There are a set of methods that could be used to set CSS styles for an individual component.
Line 9: 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=
 +
 +
Specifying the style is straightforward:
 +
<source lang="xml">
 +
<textbox style="color: red; font-style: oblique;"/>
 +
</source>
 +
 +
or, in Java:
 +
 +
<source lang="xml">
 +
Textbox tb = new Textbox();
 +
tb.setStyle("color: red; font-style: oblique;");
 +
</source>
 +
 +
=sclass=
 +
In addition, 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=
 +
 +
Like sclass, zclass is used to specify the CSS style class. However, zclass is the main CSS that each mold of each component has. If it is changed, all default CSS of the given component won't be applied. In other words, you have to provide a full set of CSS rules that a component's mold has.
 +
 +
Rule of thumb: specify zclass if you want to customize the look completely. Otherwise, use sclass to customize one or a few CSS styles.
 +
 +
For more more information, please refer to [[ZK Style Guide/ZK Class Concept/Zclass|ZK Style Guide]].
 +
 +
=content style and sclass=
 +
 +
Some container component such as [[ZK Component Reference/Containers/Window|window]], [[ZK Component Reference/Containers/Groupbox|groupbox]], [[ZK Component Reference/Data/Grid/Detail|detail]] have a content block, you have to use <code>contentStyle</code> to set its style.
 +
 +
For example,
 +
<source lang="xml" >
 +
<window title="below is content"  contentStyle="background:yellow">
 +
    Hello, World!   
 +
</window>
 +
</source>
 +
 +
==Scrollable Window==
 +
 +
A typical use of contentStyle is to make a window scrollable as follows.
 +
 +
<source lang="xml" >
 +
<window title="Scroll Example" width="150px" height="100px" contentStyle="overflow:auto" >
 +
This is a long line to spread over several lines, and more content to display.
 +
Finally, the scrollbar becomes visible.
 +
This is another line.
 +
</window>
 +
</source>
  
 
=Version History=
 
=Version History=
{{LastUpdated}}
+
 
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-

Revision as of 07:37, 8 July 2022


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 addition, 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

Like sclass, zclass is used to specify the CSS style class. However, zclass is the main CSS that each mold of each component has. If it is changed, all default CSS of the given component won't be applied. In other words, you have to provide a full set of CSS rules that a component's mold has.

Rule of thumb: specify zclass if you want to customize the look completely. Otherwise, use sclass to customize one or a few CSS styles.

For more more information, please refer to ZK Style Guide.

content style and sclass

Some container component such as window, groupbox, detail have a content block, you have to use contentStyle to set its style.

For example,

<window title="below is content"  contentStyle="background:yellow">
    Hello, World!    
</window>

Scrollable Window

A typical use of contentStyle is to make a window scrollable as follows.

<window title="Scroll Example" width="150px" height="100px" contentStyle="overflow:auto" >
This is a long line to spread over several lines, and more content to display.
Finally, the scrollbar becomes visible.
This is another line.
</window>

Version History

Version Date Content
     



Last Update : 2022/07/08

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