Supported CSS Styles: Difference between revisions

From RPTools Wiki
Jump to navigation Jump to search
VisualWikitext
mNo edit summary
m (Replaced all instances of image.jpg with a random asset URI to alleviate any confusion on how images are referenced in CSS within MapTool.)
Line 126: Line 126:
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<source lang="css">
background: #0000FF url(image.jpg) no-repeat right top;
background: #0000FF url(asset://de05e42d2eb43fe53a542db116da8083) no-repeat right top;
</source>
</source>
|}
|}
Line 162: Line 162:
|'''Example:'''||
|'''Example:'''||
<source lang="css">
<source lang="css">
background-image: url(image.jpg);
background-image: url(asset://de05e42d2eb43fe53a542db116da8083);
</source>
</source>
|}
|}

Revision as of 03:25, 12 January 2011

ADVANCED
THIS IS AN ADVANCED ARTICLE

MapTool supports a subset of the CSS level 1 specification. These styles can be used in-line, and also as external styles within dialogs and frames. This is not meant to be an exhaustive reference, nor an introduction to CSS, this page is only a collection of which properties are supported and to what extent. If you are looking for an introduction to CSS, visit W3Schools CSS Tutorial

Font Properties

font

Value: font-style, font-weight, font-size, font-family
Initial: none
Applies To: all elements
Inherited: yes
Relative Size: only font-size
Example: 
font: bold italic 12pt Arial, Helvetica, sans-serif;

font-family

Value: family-name, generic-name
Initial: system default
Applies To: all elements
Inherited: yes
Relative Size: N/A
Example: 
font-family: Arial, Helvetica, sans-serif;

font-size

Value: absolute-size, relative-size, length, percentage
Initial: medium
Applies To: all elements
Inherited: yes
Relative Size: relative to parent element's font-size
Example: 
font-size: 12pt;

font-style

Value: normal, italic, oblique
Initial: normal
Applies To: all elements
Inherited: yes
Relative Size: N/A
Example: 
font-style: italic;

font-weight

Value: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
Initial: normal
Applies To: all elements
Inherited: yes
Relative Size: N/A
Example: 
font-weight: bold;

Color and Background Properties

color

Value: color name, color code
Initial: element specific
Applies To: all elements
Inherited: yes
Relative Size: N/A
Example: 
color: #FF0000;

background

Value: background-color, background-image, background-repeat, background-position
Initial: none
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
background: #0000FF url(asset://de05e42d2eb43fe53a542db116da8083) no-repeat right top;

background-color

Value: color name, color code
Initial: transparent
Applies To: all elements
Inherited: no
Relative Size: N/A
Example: 
background-color: #0000FF;

background-image

Value: none, url
Initial: none
Applies To: all elements
Inherited: no
Relative Size: N/A
Example: 
background-image: url(asset://de05e42d2eb43fe53a542db116da8083);

background-repeat

Value: repeat, repeat-x, repeat-y, no-repeat
Initial: repeat
Applies To: all elements
Inherited: no
Relative Size: N/A
Example: 
background-repeat: no-repeat;

background-position

Value: top, center, bottom, left, center, right
Initial: top left
Applies To: block-level and replaced elements
Inherited: no
Relative Size: no
Example: 
background-position: bottom right;

Text Properties

text-align

Value: left, right, center
Initial: element specific
Applies To: block-level elements
Inherited: yes
Relative Size: N/A
Example: 
text-align: right;

text-decoration

Value: none, underline, line-through
Initial: none
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
text-decoration: line-through;

vertical-align

Value: baseline, sub, super
Initial: baseline
Applies To: inline elements
Inherited: no
Relative Size: no
Example: 
vertical-align: super;

Box Properties

border-style

Value: none, inset, outset
Initial: none
Applies To: all elements
Inherited: no
Relative Size: N/A
Example: 
border-style: inset;

margin

Value: length, auto
Initial: none
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
margin: 10px;

margin-top

Value: length, auto
Initial: 0
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
margin-top: 10px;

margin-right

Value: length, auto
Initial: 0
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
margin-right: 10px;

margin-bottom

Value: length, auto
Initial: 0
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
margin-bottom: 10px;

margin-left

Value: length, auto
Initial: 0
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
margin-left: 10px;

padding

Value: length
Initial: 0
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
padding: 10px;

padding-top

Value: length
Initial: 0
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
padding-top: 10px;

padding-right

Value: length
Initial: 0
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
padding-right: 10px;

padding-bottom

Value: length
Initial: 0
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
padding-bottom: 10px;

padding-left

Value: length
Initial: 0
Applies To: all elements
Inherited: no
Relative Size: no
Example: 
padding-left: 10px;

Classification Properties

list-style-type

Value: none, disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha
Initial: disc
Applies To: list-item elements
Inherited: yes
Relative Size: N/A
Example: 
list-style-type: square;

list-style-position

Value: inside, outside
Initial: outside
Applies To: list-item elements
Inherited: yes
Relative Size: N/A
Example: 
list-style-position: inside;
Retrieved from "https://wiki.rptools.info/index.php?title=Supported_CSS_Styles&oldid=5127"