Design of lists: List-style. CSS rules for customizing the appearance of a list on an html page. List style property (type, image, position) Examples of beautiful list design

Hello, dear readers of the blog site. Today there will be another article in the piggy bank. It will focus on design using the rules of cascading style sheets. Everything is very simple here, but nevertheless, I decided to devote a separate post to this topic.

A little earlier we already managed to find out how, how and how you can work with. Well, a little earlier we looked in detail at all kinds and their various combinations to indicate exactly that Html code element for which certain styling properties will need to be applied.

List style - design of lists in Html code

So, in the style markup language there are three separate rules starting with list-style, which serve to configure appearance lists (numbered or bulleted) in the code of web documents. In addition, there is a prefabricated CSS list-style rule, which allows you to slightly reduce the amount of code. But first things first.

What we will now consider can be used both for Html LI elements and for Ul and Ol elements (bullet and numbered lists, respectively). What will be the difference between using list-style for these tags?

Actually, you can find out whether a property is inherited or not on the validator’s website (read about it at the link provided) in the section dedicated to the specification of cascading style sheets. In the “Inherited” column, “Yes” will appear opposite the inherited rules:

Let's start with list-style-type, which allows you to set the type of marking for individual elements List HTML. The following values ​​are valid for this rule:

1. None - no marking will be carried out at all (list-style-type:none; applied to this item and therefore it does not have a marker)
2. Disc is a filled circle (list-style-type:disc; is used for this line)
3. Circle - circle as a marker
4. Square - a square as a marker
5. Decimal - Arabic numerals (list-style-type:decimal;)
6. lower-alpha - lowercase
7. upper-alpha - uppercase Latin letters
8. lower-roman — lowercase Roman numerals
9. upper-roman - Roman numerals in upper case

What do you think were used to create the list just above, Ul or Ol? Tricky question. It turns out that this is no longer important, although in this particular case I used Ol, but by changing it to Ul, the appearance will remain the same, because it is set for each element with its own CSS value list style type rules.

In fact, Ul and Ol differ only in their default behavior (Ul marks, and Ol numbers). But if you want, you can easily turn one list style into another using list-style-type. The font used for marking numbers or letters is exactly the same as the one you defined for the content of the LI tags. For example, by changing the font color for the list we will change and marker color:

1. Changed the text color (list-style-type:lower-roman;color:red) and changed the marker color

Let's move on with the following CSS property − list-style-position. Using it, you can set the position (placement) of the area with the marker. There are only two possible values ​​for it:

Those. Essentially, in list-style-position we indicate where the area with markers should be placed - outside the LI element (outside) or inside it (inside). By default, the area with the marker is taken out of bounds, i.e. the value outside is used.

Let's see this with an example. In the first element of the list, I will specifically write list-style-position:inside and we will see what happens:

1. Everything is default here
2. This is what placing a marker area with inside will look like. Please note that the second line in this element and the marker are located on the same level
3. Everything is default here

List-style-image and prefab Css rule

Next we have List-style-image - allows you to specify an image that will be used as a marker. This rule is set to None by default (i.e. no image is used as a marker), but you can write the Url() functionality by specifying the path to the image, which will subsequently act as a marker in this list:

It might look like this:

List-style-image: url(https://site/images/list_star.png);

1. Everything is default here
2. This is what using a picture as a marker might look like. It is clear that you can choose a more suitable image for this purpose.
3. For example, like here.

As you remember, in the article about I said that pictures belong to inline elements (actually, for the browser this is the same letter, but sometimes very large).

Here the picture takes the place of the marker (letters or numbers). In this case, the height of the line with the list element will be increased if you insert a large picture as a marker (as happened in the second element of the example given just above).

In the functionality for list style image, you can specify both images. If the image does not load, the default marker or numbering will be used, or what is specified in the list-style-type for this list element.

To write all three CSS rules described above into one single one, you can use List-style, which is a prefabricated one for designing lists. The order in which the values ​​are specified does not matter. Those values ​​that you do not specify in the List-style will be explicitly interpreted by the browser with default values.

Where can I see the default values? Yes, it’s all there - in the W3C validator CSS specification in the “Initial value” column opposite the properties you are interested in:

The values ​​for individual properties in the List-style prefab rule are separated by spaces. The location, as already mentioned, is not important:

In practice it might look like this:

List-style:inside upper-roman url(https://site/images/list_star.png);

You can use values ​​in any order and in any number (starting from one). By the way, menus are most often created on websites using lists, and the List-style property is used to to remove markers from menu lists, which are completely unnecessary there:

List-style-type:none;

List-style:none;

Good luck to you! See you soon on the pages of the blog site

You might be interested

Display (block, none, inline) in CSS - set the display type of Html elements on the web page How to set up rotation background color rows of tables, lists and other Html elements on the site using the nth-child pseudo-class
Float and clear in CSS - block layout tools
Positioning using Z-index and CSS Cursor rule to change the mouse cursor
Position (absolute, relative and fixed) - ways to position Html elements in CSS (rules left, right, top and bottom)
What is CSS for, how to connect cascading style sheets to HTML document and the basic syntax of this language
CSS text-decoration properties, vertical-align, text-align, text-indent for formatting text in Html
Font (Weight, Family, Size, Style) and Line Height rules for styling fonts in CSS
Background in CSS (color, position, image, repeat, attachment) - everything for setting the background color or background image of Html elements
CSS - what is it, how do cascading style sheets connect to HTML code using Style and Link
Priorities in Css and their increase due to Important, combination and grouping of selectors, user and author styles

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

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.

brief information

Syntax

list-style-image: none | url(<адрес>)

Material from the Directory of Web Languages

Values ​​used

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

Notes

Property listStyleImage applies to all elements for which margin And display:list-item.

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

To show a list marker image for a property margin must be set to minimum 30 pt.

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 the marker style when an event occurs onmouseover.