The official home of the Python Programming Language: CSS Lists

CSS Lists

Lists are very helpful in conveying a set of either numbered or bulleted points. This tutorial teaches you how to control list type, position, style etc. using CSS

There are following five CSS properties which can be used to control lists:

The list-style-type Allows you to control the shape or appearance of the marker.

The list-style-position Specifies whether a long point that wraps to a second line should align with the first line or start underneath the start of the marker.

The list-style-image Specifies an image for the marker rather than a bullet point or number.

The list-style Serves as shorthand for the preceding properties.

The marker-offset Specifies the distance between a marker and the text in the list.

Now we will see how to use these properties with examples.

The list-style-type Property:

The list-style-type property allows you to control the shape or style of bullet point (also known as a marker) in the case of unordered lists, and the style of numbering characters in ordered lists.

Here are the values which can be used for an unordered list:

Value

Description

none

disc (default)

A filled-in circle

circle

An empty circle

square

A filled-in square

Here are the values which can be used for an ordered list:

Value

Description

Example

decimal

Number

1,2,3,4,5

decimal-leading-zero

0 before the number

01, 02, 03, 04, 05

lower-alpha

Lowercase alphanumeric characters

a, b, c, d, e

upper-alpha

Uppercase alphanumeric characters

A, B, C, D, E

lower-roman

Lowercase Roman numerals

i, ii, iii, iv, v

upper-roman

Uppercase Roman numerals

I, II, III, IV, V

lower-greek

The marker is lower-greek

alpha, beta, gamma

lower-latin

The marker is lower-latin

a, b, c, d, e

upper-latin

The marker is upper-latin

A, B, C, D, E

hebrew

The marker is traditional Hebrew numbering

armenian

The marker is traditional Armenian numbering

georgian

The marker is traditional Georgian numbering

cjk-ideographic

The marker is plain ideographic numbers

hiragana

The marker is hiragana

a, i, u, e, o, ka, ki

katakana

The marker is katakana

A, I, U, E, O, KA, KI

hiragana-iroha

The marker is hiragana-iroha

i, ro, ha,ni, ho, he, to

katakana-iroha

The marker is katakana-iroha

I, RO, HA, NI, HO, HE, TO

Here is the example:

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ul>

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ul>

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ol>

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ol>

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ol>

This will produce following result:

Maths

Social Science

Physics

Maths

Social Science

Physics

Maths

Social Science

Physics

Maths

Social Science

Physics

Maths

Social Science

Physics

The list-style-position Property:

The list-style-position property indicates whether the marker should appear inside or outside of the box containing the bullet points. It can have one the two values:

Value

Description

none

inside

If the text goes onto a second line, the text will wrap underneath the marker. It will also appear indented to where the text would have started if the list had a value of outside.

outside

If the text goes onto a second line, the text will be aligned with the start of the first line (to the right of the bullet).

Here is the example:

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ul>

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ul>

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ol>

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ol>

This will produce following result:

Maths

Social Science

Physics

Maths

Social Science

Physics

Maths

Social Science

Physics

Maths

Social Science

Physics

The list-style-image Property:

The list-style-image allows you to specify an image so that you can use your own bullet style. The syntax is as follows, similar to the background-image property with the letters urlstarting the value of the property followed by the URL in brackets. If it does not find given image then default bullets are used.

Here is the example:

<ul>

<li style="list-style-image:url(/images/bullet.gif);">Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ul>

<ol>

<li style="list-style-image:url(/images/bullet.gif);">Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ol>

This will produce following result:

Maths

Social Science

Physics

Maths

Social Science

Physics

The list-style Property:

The list-style allows you to specify all the list properties into a single expression. These properties can appear in any order.

Here is the example:

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ul>

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ol>

This will produce following result:

Maths

Social Science

Physics

Maths

Social Science

Physics

The marker-offset Property:

The marker-offset property allows you to specify the distance between the marker and the text relating to that marker. Its value should be a length as shown in the following example:

Unfortunately, however, this property is not supported in IE 6 or Netscape 7.

Here is the example:

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ul>

<li>Maths</li>

<li>Social Science</li>

<li>Physics</li>

</ol>

This will produce following result:

Maths

Social Science

Physics

Maths

Social Science

Physics

The official home of the Python Programming Language

CSS Lists

ليست هناك تعليقات:

إرسال تعليق