Description
Sets the address of an image that serves as a list marker. This property is inherited, so for individual list items the value none is used to restore the marker.
Syntax
list-style-image: none | url("path to file") | inherit
Values
none Disables the image as a marker for the parent element. url Relative or absolute path to graphic file. The value can be specified in single, double, or without quotes. inherit Inherits the value of the parent.HTML5 CSS2.1 IE Cr Op Sa Fx
- Lorem ipsum dolor sit amet
- Consectetuer adipiscing elit
- 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.
The result of this example is shown in Fig. 1.
Rice. 1. Using the list-style-image property
Object Model
document.getElementById("elementID ").style.listStyleImage
Browsers
IN different browsers The distance between the image and the text may vary.
IN Internet Explorer up to version 7.0 inclusive, markers are not displayed if the list has been added float property. Also, this browser does not support the inherit value.
Hello, dear readers of the blog site. Today there will be another article about the properties of cascading style sheets. It will focus on design using CSS rules.
In general, lists stand apart among block elements. This is due to the fact that they include bullets and numbering that are placed by the browser itself.
List style property - design of a list on an html page
In the CSS language, there are three properties starting with list-style, which are responsible for the design of bulleted and numbered lists. Plus there is also a prefabricated list-style rule that allows you to reduce the amount of code.
All these properties can be used for both html elements li, and for elements ul and ol. The only difference is that if the rules are written for a specific value of the li list, then it will only be applied to 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 the attribute list-style-type, which sets type 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, which can specify both the type of marker and different types of numbering.
- disc - a marker in the form of a black circle (default value for bulleted lists).
- circle - marker in the form of an unfilled circle.
- square - marker in the form of a square. It can be light or dark, depending on the browser.
- decimal - numbering with Arabic numerals (default value for numbered lists).
- decimal-leading-zero - numbering in Arabic numerals from 01 to 99 with a leading zero.
- lower-roman - numbering in small Roman numerals.
- upper-roman - numbering in large Roman numerals.
- lower-greek - numbering in small Greek letters.
- lower-alpha and lower-latin - numbering in small Latin letters.
- upper-alpha and upper-latin - numbering in capital Latin letters.
- armenian - numbering using traditional Armenian numerals.
- georgian - numbering using traditional Georgian numerals.
- none - marking and numbering will not be carried out at all.
This is what list items will look like in the browser with different list-style-type values:
At using CSS styles, it does not matter which element (OL or UL) is used to create the list. OL and UL differ only in default behavior and with the list-style-type property you can easily turn one kind of list 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 normal, not graphic. This is the default behavior.
When you specify the address of the image file, the picture will be inserted in place of the marker. As with using , you can use both absolute and relative addresses as the image address. If the browser is unable to load the image, the default marker or numbering will be used or what is specified in the property in list-style-type.
Example of a list with a picture as a marker:
- first list item;
- second list item;
- third item on the list.
And here's what it looks like:
- first list item;
- second list item;
- 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 is list-style-position which allows you to specify the location of a bullet or numbering in a list item. There can be two options for the value:
list-style-position: inside|outside
In case of value inside a marker or numbering is placed as if inside a list, and in the case outside outside of li elements. The default value is outside and the marker is moved outside.
Example list 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 equal to outside.
Prefabricated CSS list-style rule
The following CSS list-style property is a prefab 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 specify in the list-style will be taken by the browser by default.
The values in the list-style compilation rule should be separated by 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 allows you to significantly reduce the amount of code, because instead of three rules, it is enough to set only one.
As mentioned above, values can be specified in any order and in any quantity. So, for example, in order to remove markers from menu list it is enough to write:
list-style: none;
The same can be done using the list-style-type property:
list-style-type: none;
This is where I will finish the story about designing html lists using cascading style sheets. To find out about others CSS properties you can read articles from the “” section and don’t forget to subscribe to blog updates. See you again!
| Browser | Internet Explorer | Netscape | Opera | Safari | Mozilla | Firefox | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Version | 5.5 | 6.0 | 7.0 | 6.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 1.0 | 1.7 | 1.0 | 2.0 |
| Supported | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
brief information
Description
An attribute that allows you to simultaneously specify the style of the marker, its position, and the image that will be used as the marker. For more details on the arguments, see the list-style-type , list-style-position , and list-style-image properties of each parameter separately.
Syntax
list-style: list-style-type || list-style-position || list-style-image
Arguments
Any combination of three values that define the marker style, in any order. The values are separated by a space. Neither argument is required, so unused values can be omitted.
- Lorem ipsum dolor sit amet
- Consectetuer adipiscing elit
- 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.
The result of this example is shown in Fig. 1.
Rice. 1. Using the list-style parameter
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-indexLIST-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— a shortened form of writing properties that define all marker styles for list elements. These properties apply to both numbered and bulleted lists - they need to be considered separately. The short form of the notation may not include any individual property, but the order in which they are written must be respected: marker type - its position - image path.
Application area*: list elements 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-romance- Roman numbering in lower case.
upper-novel- Roman numbering 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 property values 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 a 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 an element in a 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 a parent element.
Ul (list-style-image: url(papka/find.png); list-style-position:inside;)
In the example, we used a small picture as a marker, which clearly demonstrates the capabilities of the property List-style-image:
A universal property that allows you to simultaneously set the marker style, its position, and the image that will be used as a list marker.
brief information
Designations
| Description | Example | |
|---|---|---|
| <тип> | Indicates the type of the value. | <размер> |
| A && B | The values must be output in the order specified. | <размер> && <цвет> |
| A | B | Indicates that you need to select only one value from the proposed ones (A or B). | normal | small-caps |
| A || B | Each value can be used independently or together with others in any order. | width || count |
| Groups values. | [ crop || cross ] | |
| * | Repeat zero or more times. | [,<время>]* |
| + | Repeat one or more times. | <число>+ |
| ? | The specified type, word, or group is optional. | inset? |
| (A, B) | Repeat at least A, but no more than B times. | <радиус>{1,4} |
| # | Repeat one or more times separated by commas. | <время># |
Values
Any combination of three values that determine the style of markers, they are separated by a space. The value combinations must follow in the given order: first comes the marker type, then the position and the image. None of the values are required, so unused ones can be omitted.
Example
- Multivariate polynomial
- Normal absolutely convergent series
- Integral of a function
- Collinear extremum of a function
The result of this example is shown in Fig. 1.
Rice. 1. Applying the list-style property
Object Model
An object.style.listStyle
Specification
Each specification goes through several stages of approval.
- Recommendation - The specification has been approved by the W3C and is recommended as a standard.
- Candidate Recommendation ( Possible recommendation) - the group responsible for the standard is satisfied that it meets its goals, but requires help from the development community to implement the standard.
- Proposed Recommendation Suggested Recommendation) - at this stage the document is submitted to the W3C Advisory Council for final approval.
- Working Draft - A more mature version of a draft that has been discussed and amended for community review.
- Editor's draft ( Editorial draft) - a draft version of the standard after changes were made by the project editors.
- Draft ( Draft specification) - the first draft version of the standard.
Browsers
Browsers
The following notations are used in the browser table.