Registration of lists: List-Style. CSS rules to configure the appearance of the list on the HTML page. List Style Property (Type, Image, Position) Location Marker List-Style-Position
Description
Sets the address of the image that serves as a list marker. This property is inherited, so the None value is used for individual elements of the list to restore the marker.
Syntax
list-Style-Image: None | URL ("Path to File") | inherit.
Values
None cancels the image as a marker for the parent element. URL relative or absolute path to the graphic file. The value can be indicated in single, dual quotes or without them. Inherit inherits parent value.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. one.
Fig. 1. Application List-Style-Image Properties
Object model
document.getelementByid ("Elementid") .style.listStyleimage
Browsers
In different browsers, the distance between the image and text may vary.
In Internet Explorer to version 7.0, markers are not displayed inclusive if the Float property is added for the list. Also in this browser is not supported inherit.
Description
A universal property that allows you to simultaneously set the marker style, its position, as well as an image that will be used as a marker. For a detailed acquaintance, see information about each property, and separately.
Syntax
list-Style: List-style-Type || List-Style-Position || List-Style-Image | inherit.
Values
Any combination of three values \u200b\u200bof the decisive marker style, they are separated by a space. Combinations of values \u200b\u200bmust follow in the specified order: first is the type of marker, then the position and picture. No value is mandatory, so unused can be omitted.
Inherit inherits parent value.
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. one.
Fig. 1. Application List-Style Properties
Object model
document.getelementByid ("Elementid") .style.listStyle
Browsers
Internet Explorer before version 7.0 does not support the INHERIT value.
Outer sheet of styles Allows you to concentrate information about the formatting of the site in one file. In order to refer to the outer sheet of CSS styles in the body
After header
The href attribute indicates the path to the external sheet file. This line must be prescribed in the text of all web pages, where you need to use an external sheet of styles.
Thus, the changes made to the STYLE.CSS file are immediately displayed on all pages that refer to this file.
Private definition of styles
If you need to apply any style in a particular way, with respect to a separate instance of the descriptor, then you need to use the Style attribute for this. This technique allows you to take advantage of all the advantages provided by styles, avoiding the duties to create sheets of styles. Private use of styles can be used even if the page already contains an internal or reference to an external sheet of styles, because Private style has the highest priority.
Example:
Attribute ID.
If you need to apply the style to a separate element of the web page, you need to use the ID attribute.
To do this, you need the desired tag of the page element to assign an identifier. After that, you can define the properties of this item in the internal or external sheet of styles. The specified formatting features will be installed only for the item marked by the specified identifier.
- ...
- ...
- ...
- ...
In the second example, the property is used listStyle. If the image specified for the list is not available, the marker will be used. hollow Circle. (Empty circle).
In the third example, it is shown that property listStyle Applicable for elements that have a property display Takes up value list-Item..