Page History

...

Servoy

...

supports

...

a

...

subset

...

of

...

the

...

CSS3

...

style

...

properties:

...

:= }

Note

title

	Specifying

colors

When

specifying

color

values,

there

are

four

ways

to

specify

the

color:

-

color

value:

red;

-

hexadecimal

value:

#ff0000;

-

rgb

value:

rgb(255,0,0);

-

rgba

value:

rgba(255,0,0,0.1)

For

possible

values,

see:

[

http://www.w3schools.com/css/css_colornames.asp

]

.

Servoy

does

not

support

CSS

system

colors{note} {table:class=servoy sSummery} {colgroup} {column:width=120px}{column} {column}{column} {column}{column} {column}{column} {colgroup} {tr:style=height: 30px;} {th}Property{th} {th}Values{th} {th}Examples{th} {th}Comment{th} {tr} {tr}{td:colspan=3} h6. text{td}{tr} {tr}{td}color{td}{td}{td}{td}color: green; \\ color: #00ff00; \\ color:

colors

HTML Table

class	servoy sSummery

Colgroup Tag

Column

width	120px

Column

Column

Column

Table Row (tr)

style	height: 30px;

Table Head (th)
Property

Table Head (th)
Values

Table Head (th)
Examples

Table Head (th)
Comment

Table Row (tr)

Table Cell (td)

colspan	3

text

Table Row (tr)

Table Cell (td)
color

Table Cell (td)

Table Cell (td)
color: green; color: #00ff00; color: rgb(0,255,0);

{td}{td}{td}{tr} {tr}{td}

Table Cell (td)

Table Row (tr)

Table Cell (td)
text-align

{td}{td}

Table Cell (td)
left,

right,

center,

justify

{td}{td}

Table Cell (td)
text-align:

left;

{td}{td}horizontal text alignment{td}{tr} {tr}{td}

Table Cell (td)
horizontal text alignment

Table Row (tr)

Table Cell (td)
vertical-align

{td}{td}

Table Cell (td)
baseline,

sub,

super,

top,

text-top,

middle,

bottom,

text-bottom

{td}{td}

Table Cell (td)
vertical-align:

top;

{td}{td}vertical text alignment{td}{tr} {tr}{td:colspan=3} h6. font{td}{tr} {tr}{td}font{td}{td}{td}{td}font: bold 10pt Verdana;{td}{td}Shorthand notation: specifies the entire font styling{td}{tr} {tr}{td}font-family{td}{td}font family names, comma separated{td}{td}font-family: Verdana, Arial, "Century Schoolbook"{td}{td}Add multiple font families in case one is not available. Font family names containing spaces must be enclosed in quotes{td}{tr} {tr}{td}font-style{td}{td}normal, italic, oblique{td}{td} font-style: italic;{td}{td}{td}{tr} {tr}{td}font-variant{td}{td}normal, small-caps{td}{td} font-variant: small-caps;{td}{td}{td}{tr} {tr}{td}font-weight{td}{td}normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900{td}{td} font-weight: bold;{td}{td}{td}{tr} {tr}{td}font-size{td}{td}pt, px, percentage, length, smaller, larger, small, x-small, xx-small, medium, large, x-large, xx-large{td}{td} font-size: 12px;{td}{td}{td}{tr} {tr}{td:colspan=3} h6. background{td}{tr} {tr}{td}background{td}{td}{td}{td}background: #00ff00

Table Cell (td)
vertical text alignment

Table Row (tr)

Table Cell (td)

colspan	3

font

Table Row (tr)

Table Cell (td)
font

Table Cell (td)

Table Cell (td)
font: bold 10pt Verdana;

Table Cell (td)
Shorthand notation: specifies the entire font styling

Table Row (tr)

Table Cell (td)
font-family

Table Cell (td)
font family names, comma separated

Table Cell (td)
font-family: Verdana, Arial, "Century Schoolbook"

Table Cell (td)
Add multiple font families in case one is not available. Font family names containing spaces must be enclosed in quotes

Table Row (tr)

Table Cell (td)
font-style

Table Cell (td)
normal, italic, oblique

Table Cell (td)
font-style: italic;

Table Cell (td)

Table Row (tr)

Table Cell (td)
font-variant

Table Cell (td)
normal, small-caps

Table Cell (td)
font-variant: small-caps;

Table Cell (td)

Table Row (tr)

Table Cell (td)
font-weight

Table Cell (td)
normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900

Table Cell (td)
font-weight: bold;

Table Cell (td)

Table Row (tr)

Table Cell (td)
font-size

Table Cell (td)
pt, px, percentage, length, smaller, larger, small, x-small, xx-small, medium, large, x-large, xx-large

Table Cell (td)
font-size: 12px;

Table Cell (td)

Table Row (tr)

Table Cell (td)

colspan	3

background

Table Row (tr)

Table Cell (td)
background

Table Cell (td)

Table Cell (td)
background: #00ff00 url(media:///myImage.png)

no-repeat

fixed

center;

{td}{td}Shorthand

Table Cell (td)
Shorthand notation:

specifies

the

entire

background

styling

{td}{tr} {tr}{td}

Table Row (tr)

Table Cell (td)
background-color

{

Table Cell (td)

}{td}{td}{td}

Table Cell (td)
background-color:

red;

\\

background-color:

#ff0000;

\\

background-color:

rgb(255,0,0);

{

Table Cell (td)

}{td}{tr}{td}

Table Cell (td)
background-image

{td}{td}Can be an image from url or a linear gradient.{td}{td}

Table Cell (td)
Can be an image from url or a linear gradient.

Table Cell (td)
background-image:

url(media:///myImage.png);

\\

background-image:linear-gradient(top,#fefcea,#f1da36);

{td}{td}{td}{tr} {td}

Table Cell (td)

Table Row (tr)

Table Cell (td)
background-repeat

{td}{td}

Table Cell (td)
repeat,

repeat-x,

repeat-y,

no-repeat

{td}{td}

Table Cell (td)
background-repeat:

no-repeat;

{td}{td}Specifies repeating pattern of background image. Default value is repeat.{td}{tr} {td}background-position{td}{td}{td}{td}

Table Cell (td)
Specifies repeating pattern of background image. Default value is repeat.

Table Cell (td)
background-position

Table Cell (td)

Table Cell (td)
background-position:

left

top;

\\

background-position:

100px

50px;

\\

background-position:

50%;

{td}{td}Specifies background image position relative to its container. First value is horizontal position second one is vertical position. Supported values are using keywords, pixels or percentages. {td}{tr} {td}background-size{td}{td}{td}{td}background-size: 50%; 100% \\ background-size: 100px 50px; \\ background-size: cover;{td}{td}Specifies background image size relative to its container. First value is image height, second one is image width. Supported values are using keywords (cover and contain), pixels or percentages. {td}{tr} {td}background-attachment{td}{td}scroll,fixed{td}{td}background-attachment: fixed;{td}{td}Specifies how background image is attached to container.{td}{tr} {td}opacity{td}{td}Numbers between 0 and 1.{td}{td}opacity: 0.5;{td}{td}Opacity level of an element. Default value is 1.{td}{tr} {tr}{td:colspan=3} h6. border{td}{tr} {tr}{td}border{td}{td}\[border-width\] border-style \[border-color\]{td}{td}border: 1px solid black;{td}{td}Shorthand notation: sets the entire border styling{td}{tr} {tr}{td}border-width{td}{td}px, thin, medium, thick{td}{td}border-width: 1px; \\ border-width: 1px 2px 3px 4px;{td}{td}Sets all border widths \\ top: 1st value \\ right: 2nd value (fallback to first) \\ bottom: 3rd value (fallback to 1st) \\ left: 4th value, fallback to 2nd value, otherwise 1st value){td}{tr} {tr}{td}border-top-width{td}{td}{td}{td}border-top-width: 1px;{td}{td}{td}{tr} {tr}{td}border-right-width{td}{td}{td}{td}border-right-width: 2px;{td}{td}{td}{tr} {tr}{td}border-bottom-width{td}{td}{td}{td}border-bottom-width: 3px;{td}{td}{td}{tr} {tr}{td}border-left-width{td}{td}{td}{td}border-left-width: 4px;{td}{td}{td}{tr} {tr}{td}border-color{td}{td}{td}{td}border-color: red; \\ border-color: red green blue yellow;{td}{td}Sets all border colors: \\ top: 1st value \\ right: 2nd value (fallback to first) \\ bottom: 3rd value (fallback to 1st) \\ left: 4th value, fallback to 2nd value, otherwise 1st value){td}{tr} {tr}{td}border-top-color{td}{td}{td}{td}border-top-color: red;{td}{td}{td}{tr} {tr}{td}border-right-color{td}{td}{td}{td}border-right-color: green;{td}{td}{td}{tr} {tr}{td}border-bottom-color{td}{td}{td}{td}border-bottom-color: blue;{td}{td}{td}{tr} {tr}{td}border-left-color{td}{td}{td}{td}border-left-color: yellow;{td}{td}{td}{tr} {tr}{td}border-style{td}{td}none, solid, double, groove, ridge, inset, outset{td}{td}border-style: solid; \\ border-style: solid double none inset;{td}{td}Sets all border styles: \\ top: 1st value \\ right: 2nd value (fallback to first) \\ bottom: 3rd value (fallback to 1st) \\ left: 4th value, fallback to 2nd value, otherwise 1st value){td}{tr} {tr}{td}border-top-style{td}{td}{td}{td}border-top-style: solid;{td}{td}{td}{tr} {tr}{td}border-right-style{td}{td}{td}{td}border-right-style: double;{td}{td}{td}{tr} {tr}{td}border-bottom-style{td}{td}{td}{td}border-bottom-style: none;{td}{td}{td}{tr} {tr}{td}border-left-style{td}{td}{td}{td}border-left-style: inset;{td}{td}{td}{tr} {tr}{td}border-radius{td}{td}{td}{td}border-radius: 50px; \\ border-radius: 50px 0px 0px 0px / 20px 0px 0px 0px; \\ border-radius: 50px 0px 0px 0px{td}{td}Shorthand definition of border radius. The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. First set defines horizontal radii, second set vertical radii. {td}{tr} {tr}{td}border-top-left-radius{td}{td}{td}{td}border-top-left-radius: 50px 10px;{td}{td}{td}{tr} {tr}{td}border-top-right-radius{td}{td}{td}{td}border-top-right-radius: 50px 10px;{td}{td}{td}{tr} {tr}{td}border-bottom-right-radius{td}{td}{td}{td}border-bottom-right-radius: 50px 10px;{td}{td}{td}{tr} {tr}{td}border-bottom-left-radius{td}{td}{td}{td}border-bottom-left-radius: 50px 10px;{td}{td}{td}{tr} {tr}{td:colspan=3} h6. margin{td}{tr} {tr}{td}margin{td}{td}px, auto{td}{td}margin: 1px; \\ margin: 1px 2px 3px 4px;{td}{td}Sets all margin widths \\ top: 1st value \\ right: 2nd value (fallback to first) \\ bottom: 3rd value (fallback to 1st) \\ left: 4th value, fallback to 2nd value, otherwise 1st value). \\ NOTE: the order for the Servoy margin property in the Designer is top, left, bottom, right.{td}{tr} {tr}{td}margin-top{td}{td}{td}{td}margin-top: 1px;{td}{td}{td}{tr} {tr}{td}margin-right{td}{td}{td}{td}margin-right: 2px;{td}{td}{td}{tr} {tr}{td}margin-bottom{td}{td}{td}{td}margin-bottom: 3px;{td}{td}{td}{tr} {tr}{td}margin-left{td}{td}{td}{td}margin-left: 4px;{td}{td}{td}{tr} {table}

Table Cell (td)
Specifies background image position relative to its container. First value is horizontal position second one is vertical position. Supported values are using keywords, pixels or percentages.

Table Row (tr)

Table Cell (td)
background-size

Table Cell (td)

Table Cell (td)
background-size: 50%; 100% background-size: 100px 50px; background-size: cover;

Table Cell (td)
Specifies background image size relative to its container. First value is image height, second one is image width. Supported values are using keywords (cover and contain), pixels or percentages.

Table Cell (td)
background-attachment

Table Cell (td)
scroll,fixed

Table Cell (td)
background-attachment: fixed;

Table Cell (td)
Specifies how background image is attached to container.

Table Row (tr)

Table Cell (td)
opacity

Table Cell (td)
Numbers between 0 and 1.

Table Cell (td)
opacity: 0.5;

Table Cell (td)
Opacity level of an element. Default value is 1.

Table Row (tr)

Table Cell (td)

colspan	3

border

Table Row (tr)

Table Cell (td)
border

Table Cell (td)
[border-width] border-style [border-color]

Table Cell (td)
border: 1px solid black;

Table Cell (td)
Shorthand notation: sets the entire border styling

Table Row (tr)

Table Cell (td)
border-width

Table Cell (td)
px, thin, medium, thick

Table Cell (td)
border-width: 1px; border-width: 1px 2px 3px 4px;

Table Cell (td)
Sets all border widths top: 1st value right: 2nd value (fallback to first) bottom: 3rd value (fallback to 1st) left: 4th value, fallback to 2nd value, otherwise 1st value)

Table Row (tr)

Table Cell (td)
border-top-width

Table Cell (td)

Table Cell (td)
border-top-width: 1px;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-right-width

Table Cell (td)

Table Cell (td)
border-right-width: 2px;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-bottom-width

Table Cell (td)

Table Cell (td)
border-bottom-width: 3px;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-left-width

Table Cell (td)

Table Cell (td)
border-left-width: 4px;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-color

Table Cell (td)

Table Cell (td)
border-color: red; border-color: red green blue yellow;

Table Cell (td)
Sets all border colors: top: 1st value right: 2nd value (fallback to first) bottom: 3rd value (fallback to 1st) left: 4th value, fallback to 2nd value, otherwise 1st value)

Table Row (tr)

Table Cell (td)
border-top-color

Table Cell (td)

Table Cell (td)
border-top-color: red;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-right-color

Table Cell (td)

Table Cell (td)
border-right-color: green;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-bottom-color

Table Cell (td)

Table Cell (td)
border-bottom-color: blue;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-left-color

Table Cell (td)

Table Cell (td)
border-left-color: yellow;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-style

Table Cell (td)
none, solid, double, groove, ridge, inset, outset

Table Cell (td)
border-style: solid; border-style: solid double none inset;

Table Cell (td)
Sets all border styles: top: 1st value right: 2nd value (fallback to first) bottom: 3rd value (fallback to 1st) left: 4th value, fallback to 2nd value, otherwise 1st value)

Table Row (tr)

Table Cell (td)
border-top-style

Table Cell (td)

Table Cell (td)
border-top-style: solid;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-right-style

Table Cell (td)

Table Cell (td)
border-right-style: double;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-bottom-style

Table Cell (td)

Table Cell (td)
border-bottom-style: none;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-left-style

Table Cell (td)

Table Cell (td)
border-left-style: inset;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-radius

Table Cell (td)

Table Cell (td)
border-radius: 50px; border-radius: 50px 0px 0px 0px / 20px 0px 0px 0px; border-radius: 50px 0px 0px 0px

Table Cell (td)
Shorthand definition of border radius. The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. First set defines horizontal radii, second set vertical radii.

Table Row (tr)

Table Cell (td)
border-top-left-radius

Table Cell (td)

Table Cell (td)
border-top-left-radius: 50px 10px;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-top-right-radius

Table Cell (td)

Table Cell (td)
border-top-right-radius: 50px 10px;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-bottom-right-radius

Table Cell (td)

Table Cell (td)
border-bottom-right-radius: 50px 10px;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-bottom-left-radius

Table Cell (td)

Table Cell (td)
border-bottom-left-radius: 50px 10px;

Table Cell (td)

Table Row (tr)

Table Cell (td)

colspan	3

margin

Table Row (tr)

Table Cell (td)
margin

Table Cell (td)
px, auto

Table Cell (td)
margin: 1px; margin: 1px 2px 3px 4px;

Table Cell (td)
Sets all margin widths top: 1st value right: 2nd value (fallback to first) bottom: 3rd value (fallback to 1st) left: 4th value, fallback to 2nd value, otherwise 1st value). NOTE: the order for the Servoy margin property in the Designer is top, left, bottom, right.

Table Row (tr)

Table Cell (td)
margin-top

Table Cell (td)

Table Cell (td)
margin-top: 1px;

Table Cell (td)

Table Row (tr)

Table Cell (td)
margin-right

Table Cell (td)

Table Cell (td)
margin-right: 2px;

Table Cell (td)

Table Row (tr)

Table Cell (td)
margin-bottom

Table Cell (td)

Table Cell (td)
margin-bottom: 3px;

Table Cell (td)

Table Row (tr)

Table Cell (td)
margin-left

Table Cell (td)

Table Cell (td)
margin-left: 4px;

Table Cell (td)

Child pages

Versions Compared

Old Version 13

New Version 14

Key

text

font

background

border

margin