Styling lists: List-style. CSS rules for customizing the appearance of the list on the html page. Property list style (type, image, position) Composite CSS list-style rule
Description
Sets the address of an image that serves as a bullet point for the list. This property is inherited, so for individual elements the list to restore the token is none.
Syntax
list-style-image: none | url ("path to file") | inherit
The values
none Cancels 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 quotes or without them. inherit Inherits the value from 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.
Result this example shown in fig. 1.
Figure: 1. Applying the list-style-image property
Object Model
document.getElementById ("elementID") .style.listStyleImage
Browsers
AT different browsers the distance between the image and the text may vary.
AT Internet Explorer up to version 7.0 inclusive markers are not displayed if added to the list float property ... Also, the inherit value is not supported in this browser.
A universal property that allows you to simultaneously set the style of the marker, its position, and the image that will be used as a list marker.
brief information
Designations
| Description | Example | |
|---|---|---|
| <тип> | Indicates the type of value. | <размер> |
| A && B | The values \u200b\u200bmust be displayed in the order shown. | <размер> && <цвет> |
| A | B | Indicates that only one of the suggested values \u200b\u200bshould be selected (A or B). | normal | small-caps |
| A || B | Each value can be used alone or in conjunction 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. | <время># |
The values
Any combination of three values \u200b\u200bthat define the style of markers, they are separated by a space. Combinations of values \u200b\u200bmust follow in the specified order: first comes the marker type, then the position and the picture. None of the values \u200b\u200bare required, so unused values \u200b\u200bcan be omitted.
Example
- Multidimensional polynomial
- Normal absolutely convergent series
- Integral of function
- Collinear extremum of a function
The result of this example is shown in Fig. 1.
Figure: 1. Applying the list-style property
Object Model
An object.style.listStyle
Specification
Each specification goes through several stages of approval.
- Recommendation - This specification is endorsed by the W3C and recommended as a standard.
- Candidate Recommendation ( Possible recommendation) - the group responsible for the standard is satisfied that it is in line with its objectives, but the help of the developer community is required to implement the standard.
- Proposed Recommendation ( Suggested recommendation) - At this point, the document is submitted to the W3C Advisory Council for final approval.
- Working Draft - A more mature version of the draft, after discussion and revision for community review.
- Editor "s draft ( Editorial draft) - a draft version of the standard after editing by the project editors.
- Draft ( Draft specification) is the first draft of the standard.
Browsers
Browsers
The following conventions are used in the browser table.
| 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 set the style of the marker, its position, and the image that will be used as a marker. For a more detailed discussion of arguments, see the properties of each parameter list-style-type, list-style-position, and list-style-image separately.
Syntax
list-style: list-style-type || list-style-position || list-style-image
Arguments
Any combination of three marker style values, in no particular order. The values \u200b\u200bare separated by a space. None of the arguments are required, so unused values \u200b\u200bcan 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.
Figure: 1. Using the list-style parameter
From The Web Language Reference
Used values
sStyle Line, which can define and take from one to three of the following values:This property is read / written for all objects. The default is disc outside none... The Cascading Style Sheets (CSS) attribute is inherited.
Remarks
Property listStyle is a generic composite property. When both values \u200b\u200bare set for the type as well as the image, then the value for the image takes precedence (the image will be displayed, not one of the standard list bullets), unless listStyleImage is set to none or link ( Url) on the image is not installed correctly or is 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 in the form of bold dots, you must definitely describe the margin property in detail or set a value inside for the listStylePosition property on these items.
Values \u200b\u200bin property listStyle can be described in any order. Separate them with a space.
Examples of
The following examples illustrate the use of the property listStyle and attribute list-style to style the list.
The example uses the classes ul and UL.compactand also the attribute list-style to specify two unordered lists. For class UL.compact to replace the drawing described in ul, you need to set the value none for attribute list-style-image.
- ...
- ...
- ...
- ...
The second example uses the property listStyle... If the image specified for the list is not available, the marker will be used hollow circle (empty circle).
- HTML Reference HTML Tutorials Website Creation Video Tutorials
The third example shows that the property listStyle applicable for elements with property display takes on the meaning 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-indexLIST-STYLE property
| Property | The values | Etc* | Нc * |
|---|---|---|---|
| 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 - an abbreviated form of writing properties that define all marker styles for list items. These properties apply to both numbered and bulleted lists and must be considered separately. The abbreviated form of notation may not include any separate property, but the order of their writing must be observed: marker type - its position - path to the image.
Application area*: list items and any others for which the property value Display is an list-item.
List-style-type
Property sets marker type for each list item. Bullet types differ for bulleted and numbered lists.
Values:
disk - point 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 numeration in lower case.
upper-roman - Roman numeration 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 determines the location of the element marker. Either the marker is inside the element or outside of it.
Values:
inside - the marker is located inside the list item.
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 sets the path to the picture, which will serve as a marker for the numbered or bulleted list... The position of the marker picture can be controlled using the property List-style-position.
Values:
Url - the path to the graphic file.
none - cancels the marker picture, 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 picture as a marker, which clearly demonstrates the capabilities of the property List-style-image:
