CSS LIST-STYLE-IMAGE

Written by jon on 8:51 AM
This property indicates a graphic to be used for the list markers in the list structure. This should override the default appearance of list-markers in the current HTML list structure. If a ‘list-style-image’ is given a value of ‘none’ or the URL can not be loaded, the ‘list-style-type’ will be used in its place. The ‘list-style-type’ should always be specified in the event the URL pointed to in ‘list-style-image’ can not be loaded

Example
ul { list-style-image: url( http://www.example.com/pic.gif ) }

<ul><li style=”list-style-image: url(http://www.example.com/pic.gif)”>content</li></ul&gt;

Possible Values
Value Description
inherit Explicitly sets the value of this property to that of the parent
none No list-marker will be displayed for the list item
[url] This value indicates the URL source for the list-marker graphic. It can be either an absolute or relative URL. If the graphic can not be loaded, whatever ‘list-style-type' property is set will be used

CSS LIST-STYLE-POSITION

Written by jon on 8:49 AM
This property determines how the list-marker is rendered in relation to the content of the list item

Example
ul { list-style-position: inside }

<ul><li style=”list-style-position: inside”>content</li></ul>

Possible Values
Value Description
inherit Explicitly sets the value of this property to that of the parent
outside This specifies that all list item content will be rendered indented from the list-marker
inside This renders wrapped content at a similar indentation level to the list-marker

CSS LIST-STYLE-TYPE

Written by jon on 8:48 AM
This property is used when the author wishes to change the default appearance of list-markers in HTML list structures. If a ‘list-style-image’ property is also given and it has a value of ‘none’ or the URL can not be loaded, the ‘list-style-type’ property value will be used in its place. This property should always be specified in the event the URL pointed to in ‘list-style-image’ can not be loaded. If a value for this property is not understood, the value ‘decimal’ should be used

Example
ul { list-style-type: square }<ul><li style=”list-style-type: disc”>some text</li></ul>
Possible Values
Value Description
inherit Explicitly sets the value of this property to that of the parent
none No list-marker will be displayed for each list item
disc circle square This specifies standard symbols to use as non-ordered list markers. For each successive list-item, the symbol will remain the same.

- ‘disc': Solid bullet

- ‘circle': Hollow bullet.

- 'square': Solid square.

decimal This specifies a standard set of symbols to use as ordered list markers. The values increment with each successive list item using a numeric sequence, eg: decimal integers - 1, 2, 3, 4, 5,…
decimal-leading-zero This specifies a standard set of symbols to use as ordered list markers. The values increment with each successive list item using a numeric sequence, eg: decimal integers padded by initial zeros - 01, 02, 03, 04, 05,…
lower-roman upper-roman This specifies a standard set of symbols to use as ordered list markers. The values increment with each successive list item using an alpha-numeric sequence, eg:

lower-roman - i, ii, iii, iv, v,…

upper-roman - I, II, III, IV, V,…

lower-alpha upper-alpha This specifies a standard set of symbol systems to use as ordered list markers. The values increment with each successive list item using an alphabetic sequence, eg:

lower-alpha - a, b, c, d, e,…

upper-alpha - A, B, C, D, E,…

lower-greek lower-latin upper-latin This specifies a standard set of symbol systems to use as ordered list markers. The values increment with each successive list item using an alphabetic sequence, eg:

lower-greek - [alpha], [beta], [gamma], [delta],…

lower-latin - lower case latin letters

upper-latin - upper case latin letters

armenian georgian hebrew This specifies a standard set of symbol systems to use as ordered list markers. The values increment with each successive list item using an alphabetic sequence, eg:

armenian - traditional Armenian numbering

georgian - traditional Georgian numbering

hebrew - traditional Hebrew numbering

cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha This specifies a standard set of symbol systems to use as ordered list markers. The values increment with each successive list item using an alphabetic sequence, eg:

cjk-ideographic - ‘plain ideographic numbers'

hiragana - Japanese phonetic Hiragana ordering: a, i, u, e, o, ka, ki,…

katakana - Japanese phonetic Katakana ordering: a, i, u, e, o, ka, ki,…

hiragana-iroha - Japanese phonetic Hiragana ordering: i, ro, ha, ni, ho, he, to,…

katakana-iroha - Japanese phonetic Katakana ordering: i, ro, ha, ni, ho, he, to,…

CSS LIST-STYLE

Written by jon on 8:42 AM
This shorthand property is used when the author wishes to change the default display characteristics of list-markers in HTML list structures. An author can specify location of the marker, a graphic to be used and/or a standard set of symbols. Keywords may come in any order, but using multiple keywords that control the same behavior is not allowed. If a [list-style-image] is specified for the list marker, it will be used in place of any [list-style-type] also specified. Nevertheless, a [list-style-type] should always be specified in the event the [list-style-image] can not be loaded. A value of ‘none’ for the ‘list-style’ property should set both ‘list-style-type’ and ‘list-style-image’ to ‘none.’
Example
ul { list-style: square inside url( http://www.foo.com/bullet.gif ) }

<ul><li style=”list-style: square inside url(>content</li></ul>

Possible Values
Value Description
inherit Explicitly sets the value of this property to that of the parent
[list-style-type] See the property page for ‘list-style-type' for more details on syntax and allowed values
[list-style-position] See the property page for ‘list-style-position' for more details on syntax and allowed values
[list-style-image] See the property page for ‘list-style-image' for allowed values



CSS MARKER-OFFSET

Written by jon on 10:34 AM
In :before or :after pseudo-elements, the ‘display’ property can be set to “marker” to allow content to be paired with other content (usually iteratively, such as with the ‘list-style-type’ property behavior. An element’s content creates a “principal” rendering box. The “marker” for the “principal” box should be formatted in a single-line outside the “principal” box. The “marker” box should allow the border and padding properties, but not margins.
The ‘marker-offset’ property gives a horizontal distance between the marker box and the “principal” rendering box, measured between the adjacent neighboring edges of the two boxes

Example
li:before { display: marker; marker-offset: 5px }

<ul><li style=”marker-offset: 5px”>this is some text</li></ul>

Possible Values
ValueDescriptions
inherit Explicitly sets the value of this property to that of the parent
auto The browser determines the distance between the near edges of the marker box and the content box
[length] A specified length value is used to determines the distance between the near edges of the marker box and the content box

RECENT COMMENTS

SUBSCRIBE TO CSS3 EXAMPLES

 Subscribe to css3 Examples via RSS
Or, subscribe via email:
Find CSS3 Examples Entries :