Servoy supports a subset of the CSS3 style properties in Smart and Web Client:
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
| Property | Values | Examples | Comment |
|---|---|---|---|
text |
|||
| color | color: green; color: #00ff00; color: rgb(0,255,0); |
||
| text-align | left, right, center, justify | text-align: left; | horizontal text alignment |
| vertical-align | baseline, sub, super, top, text-top, middle, bottom, text-bottom | vertical-align: top; | vertical text alignment |
font |
|||
| font | font: bold 10pt Verdana; | Shorthand notation: specifies the entire font styling | |
| font-family | font family names, comma separated | font-family: Verdana, Arial, "Century Schoolbook" | Add multiple font families in case one is not available. Font family names containing spaces must be enclosed in quotes |
| font-style | normal, italic, oblique | font-style: italic; | |
| font-variant | normal, small-caps | font-variant: small-caps; | |
| font-weight | normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 | font-weight: bold; | |
| font-size | pt, px, percentage, length, smaller, larger, small, x-small, xx-small, medium, large, x-large, xx-large | font-size: 12px; | |
background |
|||
| background | background: #00ff00 url(media:///myImage.png) no-repeat fixed center; | Shorthand notation: specifies the entire background styling | |
| background-color | background-color: red; background-color: #ff0000; background-color: rgb(255,0,0); |
||
| background-image | Can be an image from url or a linear gradient. | background-image: url(media:///myImage.png); background-image:linear-gradient(top,#fefcea,#f1da36); |
|
| background-repeat | repeat, repeat-x, repeat-y, no-repeat | background-repeat: no-repeat; | Specifies repeating pattern of background image. Default value is repeat. |
| background-position | background-position: left top; background-position: 100px 50px; background-position: 50%; |
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. | |
| background-size | background-size: 50%; 100% background-size: 100px 50px; background-size: cover; |
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. | |
| background-attachment | scroll,fixed | background-attachment: fixed; | Specifies how background image is attached to container. |
| opacity | Numbers between 0 and 1. | opacity: 0.5; | Opacity level of an element. Default value is 1. |
border |
|||
| border | [border-width] border-style [border-color] | border: 1px solid black; | Shorthand notation: sets the entire border styling |
| border-width | px, thin, medium, thick | border-width: 1px; border-width: 1px 2px 3px 4px; |
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) |
| border-top-width | border-top-width: 1px; | ||
| border-right-width | border-right-width: 2px; | ||
| border-bottom-width | border-bottom-width: 3px; | ||
| border-left-width | border-left-width: 4px; | ||
| border-color | border-color: red; border-color: red green blue yellow; |
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) |
|
| border-top-color | border-top-color: red; | ||
| border-right-color | border-right-color: green; | ||
| border-bottom-color | border-bottom-color: blue; | ||
| border-left-color | border-left-color: yellow; | ||
| border-style | none, solid, double, groove, ridge, inset, outset | border-style: solid; border-style: solid double none inset; |
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) |
| border-top-style | border-top-style: solid; | ||
| border-right-style | border-right-style: double; | ||
| border-bottom-style | border-bottom-style: none; | ||
| border-left-style | border-left-style: inset; | ||
| border-radius | border-radius: 50px; border-radius: 50px 0px 0px 0px / 20px 0px 0px 0px; border-radius: 50px 0px 0px 0px |
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. | |
| border-top-left-radius | border-top-left-radius: 50px 10px; | ||
| border-top-right-radius | border-top-right-radius: 50px 10px; | ||
| border-bottom-right-radius | border-bottom-right-radius: 50px 10px; | ||
| border-bottom-left-radius | border-bottom-left-radius: 50px 10px; | ||
margin |
|||
| margin | px, auto | margin: 1px; margin: 1px 2px 3px 4px; |
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. |
| margin-top | margin-top: 1px; | ||
| margin-right | margin-right: 2px; | ||
| margin-bottom | margin-bottom: 3px; | ||
| margin-left | margin-left: 4px; | ||
Overview
Content Tools
Activity