CSS rules for customizing the appearance of a list on an html page. list style property (type, image, position)

Description

A universal property that allows you to simultaneously set the style of the marker, its position, as well as the image that will be used as the marker. For detailed information, see the information about each property, and separately.

Syntax

list-style: list-style-type || list-style-position || list-style-image | inherit

Values

Any combination of the three marker style values, separated by a space. The value combinations must be in the order listed, with marker type first, then position and picture. None of the values ​​are required, so unused ones can be omitted.

Inherit Inherits the value of the parent.

HTML5 CSS2.1 IE Cr Op Sa Fx

• Lorem ipsum dolor sit amet
• Consectetuer adipiscing elite
• Sed diem nonummy nibh euismod
• Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Result this example shown in fig. 1.

Rice. 1. Applying the list-style property

Object Model

document.getElementById("elementID ").style.listStyle

Browsers

Internet Explorer up to version 7.0 does not support the inherit value.

Material from the Web Language Reference

Used values

This property is read/write for all objects except currentStyle (read-only). The default value is none. The Cascading Style Sheets (CSS) attribute is inherited.

Remarks

Property listStyleImage applies to all elements that have margins and display:list-item.

When an image is available, it replaces the marker image set in listStyleType .

To display the list marker image, for the property margin must be set to minimum 30pt.

Examples

The following examples illustrate the use of the property listStyleImage and attribute list-style-image to set the list marker image.

The first example uses the selector ul and attribute list-style-image.

The second example uses the property listStyleImage to change marker style when an event occurs onmouseover.

Hello, dear readers of the blog site. Today there will be another article about the properties of cascading style sheets. It will focus on styling with CSS rules.

In general, lists stand apart among block elements. This is due to the fact that they include markers and numbering, which are placed by the browser itself.

List style property - list design on html page

There are three properties in CSS that begin with list-style and are responsible for styling bulleted and numbered lists. Plus, there is a list-style prefabricated rule that allows you to reduce the amount of code.

All of these properties can be used for html elements li, as well as for ul and ol elements. The only difference is that if the rules are written for a specific value of the li list, then it will be applied only for it. And if the same css rules are written for ul or ul containers, then they will be applied to all li elements contained in these containers.

Let's start with an attribute list-style-type, which sets kind of markers or numbering for list items:

list-style-type: disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-greek|lower-alpha|lower-latin|upper-alpha|upper-latin|armenian| georgian|none|inherit

As you can see, the list-style-type property has many available values ​​that can specify both the type of marker and various types of numbering.

• disc - black circle marker (default for bulleted lists).
• circle - a marker in the form of an unfilled circle.
• square - square marker. It can be light or dark, depending on the browser.
• decimal - numbering with Arabic numerals (default value for numbered lists).
• decimal-leading-zero - Arabic numerals from 01 to 99 with a leading zero.
• lower-roman - numbering in small Roman numerals.
• upper-roman - numbering with large Roman numerals.
• lower-greek - numbering in lower Greek letters.
• lower-alpha and lower-latin - numbering in small Latin letters.
• upper-alpha and upper-latin - numbering in capital Latin letters.
• armenian - numbering with traditional Armenian numerals.
• georgian - numbering with traditional Georgian numerals.
• none - marking and numbering will not be carried out at all.

This is how the list items will look like in the browser with different meanings list-style-type:

At using CSS styles does not matter which element (OL or UL) is used to create the list. OL and UL differ only in their default behavior, and with the list-style-type property, you can easily turn one list view into another.

style attribute list-style-image allows you to set as marker list items graphic image. When using the list-style-image attribute, the value of the list-style-type attribute is ignored:

list-style-image: none|<интернет-адрес файла изображения>|inherit

Meaning none removes the image marker and sets it to a regular one, not a graphic one. This is the default behavior.

When specifying the address of the image file, a picture will be inserted in place of the marker. As with using , both absolute and relative addresses can be used as the image address. If the browser fails to load the image, the default marker or numbering will be used, or whatever is specified in the list-style-type property.

An example of a list with an image as a marker:



• the first item in the list;


• the second item on the list;


• third item on the list.



And here's what it looks like:

• the first item in the list;
• the second item on the list;
• third item on the list.

It is clear that when choosing a picture as a marker, it is better to select a small image.

And the last CSS property from the list-style series - list-style-position, which allows you to specify the location of a bullet or number in a list item. There can be two options for the value:


list-style-position: inside|outside

In case of value inside the marker or numbering is placed, as it were, inside the list, and in the case outside outside of li elements. The default value is outside and the marker is moved outside.

List example with different list-style-position values:

• in the first paragraph, everything is by default;
• in the second paragraph list-style-position is set to inside. In this case, note that the second line is placed flush with the marker;
• at this point list-style-position is outside.

Custom CSS list-style rule

The following CSS list-style property is prefabricated for styling lists. It allows you to write all three CSS rules discussed above into one single one. The order of specifying the values ​​​​in it can be any and the parameters that you do not set in list-style will be taken by the browser by default.

Separate values ​​in a list-style prefab with spaces:

list-style: list-style-type list-style-image list-style-position;

A real CSS rule for styling lists might look something like this:

list-style: circle url (//site/images/marker.png) outside;

Thus, the list-style property can significantly reduce the amount of code, because instead of three rules, it is enough to specify only one.

As mentioned above, values ​​can be specified in any order and any number. So, for example, in order to remove markers from menu list Enough to write:

list-style: none;

The same can be done using the list-style-type property:

list-style-type: none;

On this story about the design html lists With Cascading Style Sheets, I'll finish. To learn about others CSS properties you can read articles from the " " section and do not forget to subscribe to blog updates. See you soon!

Material from the Web Language Reference

Used values

style Line, which can define and take on from one to three of the following values:

This property is read/write for all objects. The default value is disc outside none. The Cascading Style Sheets (CSS) attribute is inherited.

Remarks

Property listStyle is a generic composite property. When both values ​​are set for the type and also for the image, then the value for the image takes precedence (the image will be shown rather than one of the standard list markers), except when listStyleImage is set to none or link ( URL) on the image is set incorrectly or out of date.

Property listStyle also applies to all elements that are set to list-item for property display. To set the display of the list marker as bold dots, you must describe the margin property in detail or set the value inside for the listStylePosition property on those elements.

Values ​​in a property listStyle may be described in any order. They need to be separated by a space.

Examples

The following examples illustrate the use of the property listStyle and attribute list style to style the list.

The example uses classes ul And UL compact, as well as the attribute list style to define two unordered lists. For class UL compact to replace the pattern described in ul, you need to set the value none for the list-style-image attribute.

• ...
• ...
• ...
• ...

The second example uses the property listStyle. If the image specified for the list is not available, then the marker will be used. hollow circle(empty circle).

The third example shows that the property listStyle applicable for elements that have a property display takes on the value list-item.

letter-spacing line-height list-style margin max-height max-width min-height min-width outline overflow padding position right text-align text-decoration text-indent text-transform top vertical-align white-space width word-spacing z-index
• HTML Reference HTML Tutorials Website Building Video Courses

With the LIST-STYLE property

Property	Values	Etc*	Hc*
list style	[list-style-image; list-style-position; list-style-type ], inherit	*	+
list-style-type	disk , circle, square, decimal, decimal-leading-zero, lowel-roman, upper-roman, lowel-latin, upper-latin, armenian, georgian, none, inherit	*	+
list-style-position	inside, outside, inherit	*	+
list-style-image	URL, none , inherit	*	+

Property List style is a shortened form of writing properties that set all styles of markers for list items. These properties apply to both numbered and bulleted lists - they need to be considered separately. The abbreviated form of notation may not include any individual property, but the order of their notation must be respected: marker type - its position - path to the image.

Application area*: elements of lists and any others for which the property value display is list-item.


List-style-type

Property sets marker type for each element of the list. Bullet types differ for bulleted and numbered lists.

Values:

disk- dot marker.
circle- circle marker.
square- square marker.
decimal- Arabic numbers: 1, 2, 3 ....
decimal-leading-zero- Arabic numbers, starting from zero: 01, 02, 03 ... 09.
lowel-roman- Roman numerals in lower case.
upper roman- Roman numerals in upper case.
lowel-latin- lowercase Latin letters: a, b, c ....
upper-latin— capital latin letters: A, B, C ….
armenian- Armenian numbering.
georgian- Georgian numbering.
none- cancellation.
inherit

The example uses two different meanings properties List-style-type:

list-style-position

The property specifies the location of the element's marker. Either the marker is inside the element or outside of it.

Values:

inside- the marker is located inside the list element.
outside— the marker is moved outside the text block.
inherit- inheritance from the parent element.

The example clearly shows the difference between the values inside And outside properties list-style-position:

List-style-image

The property specifies the path to the picture that will serve as a marker for the numbered or bulleted list. The location of the marker image can be controlled using the property list-style-position.

Values:

URL— path to the graphic file.
none- cancels the marker image, for example, for the parent element.
inherit- inheritance from the parent element.

Ul (list-style-image: url(papka/find.png); list-style-position:inside;)

In the example, we used a small image as a marker, which clearly demonstrates the capabilities of the property. List-style-image: