Page History
Wiki Markup |
---|
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: rgb(0,255,0);{td}{td}{td}{tr} {tr}{td}text-align{td}{td}left, right, center, justify{td}{td}text-align: left;{td}{td}horizontal text alignment{td}{tr} {tr}{td}vertical-align{td}{td}baseline, sub, super, top, text-top, middle, bottom, text-bottom{td}{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:background: #00ff00 url(media:///myImage.png) no-repeat fixed center;{td}{td}Shorthand notation: specifies the entire background styling{td}{tr} {tr}{td}background-color{td}{td}{td}{td}background-color: red; \\ background-color: #ff0000; \\ background-color: rgb(255,0,0);{td}{td}{tr}{td}background-image{td}{td}{td}{td}background-image: url(media:///myImage.png);\\background-image:linear-radient(top,#fefcea,#f1da36);{td}{td}{td}{tr} {td}background-repeat{td}{td}{td}{td}background-repeat: no-repeat;{td}{td}Specifies repeating pattern of background image. Supported values are: repeat, repeat-x, repeat-y and no-repeat.{td}{tr} {td}background-position{td}{td}{td}{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}{td}{td}background-attachment: fixed;{td}{td}Specifies how background image is attached to container. Supported values are: scroll and fixed.{td}{tr} {trtd}opacity{td:colspan=3} h6. border{td}{tr} {trtd}{td}borderopacity: 0.5;{td}{td}\[border-width\] border-style \[border-color\]Opacity level of an element. Default value is 1.{td}{tdtr}border: 1px solid black;{tdtr}{td:colspan=3}Shorthand notation: sets the entire border styling h6. border{td}{tr} {tr}{td}border-width{td}{td}px, thin, medium, thick\[border-width\] border-style \[border-color\]{td}{td}border-width: 1px; \\ border-width: 1px 2px 3px 4pxsolid black;{td}{td}SetsShorthand allnotation: bordersets widthsthe \\entire top: 1stborder 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-widthcolor{td}{td}{td}{td}border-top-widthcolor: 1pxred;{td}{td}{td}{tr} {tr}{td}border-right-widthcolor{td}{td}{td}{td}border-right-widthcolor: 2pxgreen;{td}{td}{td}{tr} {tr}{td}border-bottom-widthcolor{td}{td}{td}{td}border-bottom-widthcolor: 3pxblue;{td}{td}{td}{tr} {tr}{td}border-left-widthcolor{td}{td}{td}{td}border-left-widthcolor: 4pxyellow;{td}{td}{td}{tr} {tr}{td}border-colorstyle{td}{td}none, solid, double, groove, ridge, inset, outset{td}{td}border-colorstyle: redsolid; \\ border-colorstyle: redsolid greendouble bluenone yellowinset;{td}{td}Sets all border colorsstyles: \\ 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-colorstyle{td}{td}{td}{td}border-top-colorstyle: redsolid;{td}{td}{td}{tr} {tr}{td}border-right-colorstyle{td}{td}{td}{td}border-right-colorstyle: greendouble;{td}{td}{td}{tr} {tr}{td}border-bottom-colorstyle{td}{td}{td}{td}border-bottom-colorstyle: bluenone;{td}{td}{td}{tr} {tr}{td}border-left-colorstyle{td}{td}{td}{td}border-left-colorstyle: yellowinset;{td}{td}{td}{tr} {tr}{td}border-styleradius{td}{td}none, solid, double, groove, ridge, inset, outset{td}{td}border-style: solid; \\ border-style: solid double none inset;border-radius: 50px;\\border-radius: 50px 0px 0px 0px / 20px 0px 0px 0px;\\\border-radius: 50px 0px 0px 0px{td}{td}SetsShorthand definition allof 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)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-styleradius{td}{td}{td}{td}border-top-styleleft-radius: 50px solid10px;{td}{td}{td}{tr} {tr}{td}border-top-right-styleradius{td}{td}{td}{td}border-top-right-styleradius: 50px double10px;{td}{td}{td}{tr} {tr}{td}border-bottom-styleright-radius{td}{td}{td}{td}border-bottom-right-styleradius: none50px 10px;{td}{td}{td}{tr} {tr}{td}border-bottom-left-styleradius{td}{td}{td}{td}border-bottom-left-styleradius: 50px inset10px;{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} |
Overview
Content Tools
Activity