|
|
Line 1: |
Line 1: |
| Work in progress.
| | [[/Sandbox]] |
| | |
| ----
| |
| ----
| |
| ----
| |
| ----
| |
| BEGIN CSS PAGE
| |
| ----
| |
| ----
| |
| ----
| |
| ----
| |
| 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.
| |
| | |
| ==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:'''||
| |
| <source lang="css">
| |
| font: bold italic 12pt Arial, Helvetica, sans-serif;
| |
| </source>
| |
| |}
| |
|
| |
| ----
| |
| ===font-family===
| |
| {|
| |
| |'''Value:'''||''family-name'', ''generic-name''
| |
| |-
| |
| |'''Initial:'''|| system default
| |
| |-
| |
| |'''Applies To:'''|| all elements
| |
| |-
| |
| |'''Inherited:'''|| yes
| |
| |-
| |
| |'''Relative Size:'''|| N/A
| |
| |-
| |
| |'''Example:'''||
| |
| <source lang="css">
| |
| font-family: Arial, Helvetica, sans-serif;
| |
| </source>
| |
| |}
| |
|
| |
| ----
| |
| ===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:'''||
| |
| <source lang="css">
| |
| font-size: 12pt;
| |
| </source>
| |
| |}
| |
|
| |
| ----
| |
| | |
| ===font-style===
| |
| {|
| |
| |'''Value:'''||normal, italic, oblique
| |
| |-
| |
| |'''Initial:'''|| normal
| |
| |-
| |
| |'''Applies To:'''|| all elements
| |
| |-
| |
| |'''Inherited:'''|| yes
| |
| |-
| |
| |'''Relative Size:'''|| N/A
| |
| |-
| |
| |'''Example:'''||
| |
| <source lang="css">
| |
| font-style: italic;
| |
| </source>
| |
| |}
| |
|
| |
| ----
| |
| ===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:'''||
| |
| <source lang="css">
| |
| font-weight: bold;
| |
| </source>
| |
| |}
| |
|
| |
| | |
| ==Color and Background Properties==
| |
| ===color===
| |
| {|
| |
| |'''Value:'''||''color name'', ''color code''
| |
| |-
| |
| |'''Initial:'''|| element specific
| |
| |-
| |
| |'''Applies To:'''|| all elements
| |
| |-
| |
| |'''Inherited:'''|| yes
| |
| |-
| |
| |'''Relative Size:'''|| N/A
| |
| |-
| |
| |'''Example:'''||
| |
| <source lang="css">
| |
| color: #FF0000;
| |
| </source>
| |
| |}
| |
|
| |
| ----
| |
| ===background===
| |
| {|
| |
| |'''Value:'''||background-color, background-image, background-repeat, background-position
| |
| |-
| |
| |'''Initial:'''|| none
| |
| |-
| |
| |'''Applies To:'''|| all elements
| |
| |-
| |
| |'''Inherited:'''|| no
| |
| |-
| |
| |'''Relative Size:'''|| no
| |
| |-
| |
| |'''Example:'''||
| |
| <source lang="css">
| |
| background: #0000FF url(image.jpg) no-repeat right top;
| |
| </source>
| |
| |}
| |
|
| |
| ----
| |
| ===background-color===
| |
| {|
| |
| |'''Value:'''||''color name'', ''color code''
| |
| |-
| |
| |'''Initial:'''|| transparent
| |
| |-
| |
| |'''Applies To:'''|| all elements
| |
| |-
| |
| |'''Inherited:'''|| no
| |
| |-
| |
| |'''Relative Size:'''|| N/A
| |
| |-
| |
| |'''Example:'''||
| |
| <source lang="css">
| |
| background-color: #0000FF;
| |
| </source>
| |
| |}
| |
|
| |
| ----
| |
| ===background-image===
| |
| {|
| |
| |'''Value:'''||none, ''url''
| |
| |-
| |
| |'''Initial:'''|| none
| |
| |-
| |
| |'''Applies To:'''|| all elements
| |
| |-
| |
| |'''Inherited:'''|| no
| |
| |-
| |
| |'''Relative Size:'''|| N/A
| |
| |-
| |
| |'''Example:'''||
| |
| <source lang="css">
| |
| background-image: url(image.jpg);
| |
| </source>
| |
| |}
| |
|
| |
| ----
| |
| ===background-repeat===
| |
| {|
| |
| |'''Value:'''||repeat, repeat-x, repeat-y, no-repeat
| |
| |-
| |
| |'''Initial:'''|| repeat
| |
| |-
| |
| |'''Applies To:'''|| all elements
| |
| |-
| |
| |'''Inherited:'''|| no
| |
| |-
| |
| |'''Relative Size:'''|| N/A
| |
| |-
| |
| |'''Example:'''||
| |
| <source lang="css">
| |
| background-repeat: no-repeat;
| |
| </source>
| |
| |}
| |
|
| |
| ----
| |
| ===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:'''||
| |
| <source lang="css">
| |
| background-position: bottom right;
| |
| </source>
| |
| |}
| |
|
| |
| | |
| ==Text Properties==
| |
| ===text-align===
| |
| {|
| |
| |'''Value:'''||left, right, center
| |
| |-
| |
| |'''Initial:'''|| element specific
| |
| |-
| |
| |'''Applies To:'''|| block-level elements
| |
| |-
| |
| |'''Inherited:'''|| yes
| |
| |-
| |
| |'''Relative Size:'''|| N/A
| |
| |-
| |
| |'''Example:'''||
| |
| <source lang="css">
| |
| text-align: right;
| |
| </source>
| |
| |}
| |
|
| |
| ----
| |
| ===text-decoration===
| |
| {|
| |
| |'''Value:'''||none, underline, line-through
| |
| |-
| |
| |'''Initial:'''|| none
| |
| |-
| |
| |'''Applies To:'''|| all elements
| |
| |-
| |
| |'''Inherited:'''|| no
| |
| |-
| |
| |'''Relative Size:'''|| no
| |
| |-
| |
| |'''Example:'''||
| |
| <source lang="css">
| |
| text-decoration: line-through;
| |
| </source>
| |
| |}
| |
|
| |
| ----
| |
| ===vertical-align===
| |
| {|
| |
| |'''Value:'''||baseline, sub, super
| |
| |-
| |
| |'''Initial:'''|| baseline
| |
| |-
| |
| |'''Applies To:'''|| inline elements
| |
| |-
| |
| |'''Inherited:'''|| no
| |
| |-
| |
| |'''Relative Size:'''|| no
| |
| |-
| |
| |'''Example:'''||
| |
| <source lang="css">
| |
| vertical-align: super;
| |
| </source>
| |
| |}
| |
|
| |
| | |
| ==Box Properties==
| |
| ===border-style===
| |
| {|
| |
| |'''Value:'''||none, inset, outset
| |
| |-
| |
| |'''Initial:'''|| none
| |
| |-
| |
| |'''Applies To:'''|| all elements
| |
| |-
| |
| |'''Inherited:'''|| no
| |
| |-
| |
| |'''Relative Size:'''|| N/A
| |
| |-
| |
| |'''Example:'''||
| |
| <source lang="css">
| |
| border-style: inset;
| |
| </source>
| |
| |}
| |
|
| |
| ----
| |
| ===margin===
| |
| {|
| |
| |'''Value:'''||''length'', auto
| |
| |-
| |
| |'''Initial:'''|| none
| |
| |-
| |
| |'''Applies To:'''|| all elements
| |
| |-
| |
| |'''Inherited:'''|| no
| |
| |-
| |
| |'''Relative Size:'''|| no
| |
| |-
| |
| |'''Example:'''||
| |
| <source lang="css">
| |
| margin: 10px;
| |
| </source>
| |
| |}
| |
|
| |
| ----
| |
| ===margin-top===
| |
| {|
| |
| |'''Value:'''||''length'', auto
| |
| |-
| |
| |'''Initial:'''|| 0
| |
| |-
| |
| |'''Applies To:'''|| all elements
| |
| |-
| |
| |'''Inherited:'''|| no
| |
| |-
| |
| |'''Relative Size:'''|| no
| |
| |-
| |
| |'''Example:'''||
| |
| <source lang="css">
| |
| margin-top: 10px;
| |
| </source>
| |
| |}
| |
|
| |
| ----
| |
| ===margin-right===
| |
| {|
| |
| |'''Value:'''||''length'', auto
| |
| |-
| |
| |'''Initial:'''|| 0
| |
| |-
| |
| |'''Applies To:'''|| all elements
| |
| |-
| |
| |'''Inherited:'''|| no
| |
| |-
| |
| |'''Relative Size:'''|| no
| |
| |-
| |
| |'''Example:'''||
| |
| <source lang="css">
| |
| margin-right: 10px;
| |
| </source>
| |
| |}
| |
|
| |
| ----
| |
| ===margin-bottom===
| |
| {|
| |
| |'''Value:'''||''length'', auto
| |
| |-
| |
| |'''Initial:'''|| 0
| |
| |-
| |
| |'''Applies To:'''|| all elements
| |
| |-
| |
| |'''Inherited:'''|| no
| |
| |-
| |
| |'''Relative Size:'''|| no
| |
| |-
| |
| |'''Example:'''||
| |
| <source lang="css">
| |
| margin-bottom: 10px;
| |
| </source>
| |
| |}
| |
|
| |
| ----
| |
| ===margin-left===
| |
| {|
| |
| |'''Value:'''||''length'', auto
| |
| |-
| |
| |'''Initial:'''|| 0
| |
| |-
| |
| |'''Applies To:'''|| all elements
| |
| |-
| |
| |'''Inherited:'''|| no
| |
| |-
| |
| |'''Relative Size:'''|| no
| |
| |-
| |
| |'''Example:'''||
| |
| <source lang="css">
| |
| margin-left: 10px;
| |
| </source>
| |
| |}
| |
|
| |
| ----
| |
| ===padding===
| |
| {|
| |
| |'''Value:'''||''length''
| |
| |-
| |
| |'''Initial:'''|| 0
| |
| |-
| |
| |'''Applies To:'''|| all elements
| |
| |-
| |
| |'''Inherited:'''|| no
| |
| |-
| |
| |'''Relative Size:'''|| no
| |
| |-
| |
| |'''Example:'''||
| |
| <source lang="css">
| |
| padding: 10px;
| |
| </source>
| |
| |}
| |
|
| |
| ----
| |
| ===padding-top===
| |
| {|
| |
| |'''Value:'''||''length''
| |
| |-
| |
| |'''Initial:'''|| 0
| |
| |-
| |
| |'''Applies To:'''|| all elements
| |
| |-
| |
| |'''Inherited:'''|| no
| |
| |-
| |
| |'''Relative Size:'''|| no
| |
| |-
| |
| |'''Example:'''||
| |
| <source lang="css">
| |
| padding-top: 10px;
| |
| </source>
| |
| |}
| |
|
| |
| ----
| |
| ===padding-right===
| |
| {|
| |
| |'''Value:'''||''length''
| |
| |-
| |
| |'''Initial:'''|| 0
| |
| |-
| |
| |'''Applies To:'''|| all elements
| |
| |-
| |
| |'''Inherited:'''|| no
| |
| |-
| |
| |'''Relative Size:'''|| no
| |
| |-
| |
| |'''Example:'''||
| |
| <source lang="css">
| |
| padding-right: 10px;
| |
| </source>
| |
| |}
| |
|
| |
| ----
| |
| ===padding-bottom===
| |
| {|
| |
| |'''Value:'''||''length''
| |
| |-
| |
| |'''Initial:'''|| 0
| |
| |-
| |
| |'''Applies To:'''|| all elements
| |
| |-
| |
| |'''Inherited:'''|| no
| |
| |-
| |
| |'''Relative Size:'''|| no
| |
| |-
| |
| |'''Example:'''||
| |
| <source lang="css">
| |
| padding-bottom: 10px;
| |
| </source>
| |
| |}
| |
|
| |
| ----
| |
| ===padding-left===
| |
| {|
| |
| |'''Value:'''||''length''
| |
| |-
| |
| |'''Initial:'''|| 0
| |
| |-
| |
| |'''Applies To:'''|| all elements
| |
| |-
| |
| |'''Inherited:'''|| no
| |
| |-
| |
| |'''Relative Size:'''|| no
| |
| |-
| |
| |'''Example:'''||
| |
| <source lang="css">
| |
| padding-left: 10px;
| |
| </source>
| |
| |}
| |
|
| |
| | |
| ==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:'''||
| |
| <source lang="css">
| |
| list-style-type: square;
| |
| </source>
| |
| |}
| |
|
| |
| ----
| |
| ===list-style-position===
| |
| {|
| |
| |'''Value:'''||inside, outside
| |
| |-
| |
| |'''Initial:'''|| outside
| |
| |-
| |
| |'''Applies To:'''|| list-item elements
| |
| |-
| |
| |'''Inherited:'''|| yes
| |
| |-
| |
| |'''Relative Size:'''|| N/A
| |
| |-
| |
| |'''Example:'''||
| |
| <source lang="css">
| |
| list-style-position: inside;
| |
| </source>
| |
| |}
| |