home > A computer > List styling: List-style. CSS rules for customizing the appearance of a list on an html page

List styling: List-style. CSS rules for customizing the appearance of a list on an html page

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 list marker.

short information

Notation

	Description	Example
<тип>	Specifies the type of the value.	<размер>
A&&B	The values must be output in the specified order.	<размер> && <цвет>
A \| B	Indicates that only one of the suggested values (A or B) should be selected.	normal \| small-caps
A \|\| B	Each value can be used on its own or in combination 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 the three values that define the style of markers, separated by a space. The combinations of values 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.

Example

list style

Multivariate polynomial
Normal absolutely convergent series
Function integral
Collinear extremum of a function

The result of this example is shown in Fig. one.

Rice. 1. Applying the list-style property

Object Model

An object.style.listStyle

Specification

Each specification goes through several stages of approval.

Recommendation (Recommendation) - the specification is approved by the W3C and recommended as a standard.
Candidate Recommendation ( Possible recommendation) - the group responsible for the standard is satisfied that it meets its goals, but the support of the development community is required to implement the standard.
Proposed Recommendation ( Suggested recommendation) - at this stage, the document is submitted to the W3C Advisory Board for final approval.
Working Draft - A more mature draft after discussion and amendments for community review.
Editor's draft ( Editorial draft) is a draft version of the standard after changes have been made by the project editors.
draft ( Specification draft) is the first draft version of the standard.

Browsers

The following notation is used in the browser table.

Hello, dear readers of the blog site. Today there will be another article in the piggy bank. It will focus on the 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 learn how, how and how you can work with. Well, a little earlier, we examined in detail all possible and their various combinations to specify exactly the Html code element for which certain styling properties will need to be applied.

List style - list design in Html code

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

What we are going to consider with you now can be used both for Html LI elements and for Ul and Ol elements (bulleted and numbered lists, respectively). What would be the difference in applying list-style to these tags?

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

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

None - there will be no marking at all (list-style-type:none; applied to this item and therefore it does not have a marker)
Disc - a filled circle (list-style-type: disc was just applied to this line;)
Circle - a circle as a marker
Square - a square as a marker
Decimal - Arabic numerals (list-style-type:decimal;)
lower-alpha - in lower case
upper-alpha - Latin letters in upper case
lower-roman - Roman numerals in lower case
upper-roman - Roman numerals in upper case

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

In fact, Ul and Ol differ only in the default behavior (Ul marks, and Ol numbers). But if you want, you can easily turn one kind of list into another with list-style-type. The font used for labeling 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:

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

Let's move on to the following CSS property − list-style-position. With it, you can set the position (placement) of the area with the marker. It has only two possible values:

Those. in fact, in the list-style-position we indicate where we want to place the area with markers - 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 comes of it:

Everything is default here.
This is how the placement of the marker area with inside will look like. Note that the second line in this element and the marker are on the same level.
Everything is default here.

List-style-image and prefabricated CSS rule

Next in line is 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, specifying the path to the image in it, which will later act as a marker in this list:

It might look like this:

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

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

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

Here is the picture and takes the place of the marker (letters or numbers). At the same time, 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 above).

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

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

Where can I see the default values? Yes, everything is in the same place - in the CSS specification of the W3C validator in the "Initial value" column opposite the properties you are interested in:

Values for individual properties in a List-style prefab are separated by spaces. Locations, as already mentioned, are not important:

In practice, this might look like this:

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

You can use values in any order and any number (starting from one). By the way, with the help of lists, menus are most often formed on websites, 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 blog pages site

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:

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 what list items would look like in the browser with different list-style-type values:

When using CSS styles, it doesn't 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!

In this chapter, we will study the style attributes that define paragraph options. Paragraphs in the broadest sense of the word - which include both headings and lists, and address tags, and great quotes. In general, block-level elements, discussed in Chapter 2 and intended for structuring text.

Finally, we'll look at two very specific style attributes that allow us to set the display of a Web page element (ie, block or inline) and make the element invisible. These style attributes are used infrequently and only in conjunction with certain behaviors (see Part III).

Text output options

We'll start with the style attributes that control text output in block elements structuring the text. There are very few of them. And all of them are applicable only to block elements.

The text-align style attribute specifies the horizontal alignment of the text:

text-align: left|right|center|justify|inherit

The values available here are left (left-aligned; normal web browser behavior), right (right-aligned), center (centered), and justify (full-aligned).

Examples:

P (text-align: justify)
H1 ( text-align: center )

The text-indent style attribute sets the indentation for the "red line":

text indent:<отступ "красной строки">

Absolute and relative (relative to the width of the paragraph) indent values are allowed here. By default, the indentation of the "red line" is zero. Note that the text-indent style attribute does not support an inherit value.

Example:

P (text-indent: 5mm)

Now the paragraphs will have a "red line".

Lists stand out among block elements. Basically, because, firstly, they contain other block elements (separate paragraphs), and secondly, they include markers and numbering, which are placed by the Web browser itself. Here we will talk about markers and numbering, or rather, about style attributes intended to set their parameters.

The list-style-type style attribute specifies the type of bullets or numbering for list items:

As you can see, this style attribute has a lot of available values. They denote both different types of markers, and different ways numbering.

Disc marker in the form of a black circle (usual behavior for bulleted lists).

Circle - a marker in the form of a light circle.

Square - a marker in the form of a square. It can be light or dark, depending on the web browser.

Decimal - numbering with Arabic numerals (usual behavior 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 in 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 - No marker or numbering (usual behavior for non-lists).

ON A NOTE

We've only looked at the list-style-type attribute values provided by CSS 3. However, CSS 2 provided a few more values that are still supported by Web browsers. You can find them at https://developer.mozilla.org/en/CSS/list-style-type.

The list-style-type style attribute can be set to both lists, and for individual list items. In the latter case, a list is created in which the items have different bullets or numbering. Sometimes this can come in handy.

Here is the definition bulleted list with a square marker:

UL ( list-style-type: square )

And in Listing 9.1, we set the same marker for one of the items in the bulleted list.

The list-style-image style attribute allows you to set any graphic image as a list item marker (create a graphic marker). In this case, the value of the list-style-type style attribute, if any, is ignored:

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

The Internet address of the graphic marker file is specified in the same format as the Internet address of the background image file (see Chapter 8):

UL ( list-style-image: url(/markers/dot.gif) )

A value of none removes the graphic marker and returns a simple, non-graphic marker. This is normal behavior.

The list-style-image style attribute can also be set both for the lists themselves and for individual list items.

The list-style-position style attribute allows you to specify the location of a bullet or number in a list item:

list-style-position: inside|outside|inherit

There are two available values:

Inside - the marker or numbering is, as it were, inside the list item, they are part of it;

Outside - the marker or numbering is outside the point list(this is normal behavior).

It is not clear why this style attribute is needed, because lists, in which the marker or numbering is taken out of the paragraphs, are better readable. Well, since it's in the CSS standard, then so be it...

Example:

OL ( list-style-position: inside )

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

short information

Description

An attribute that allows you to simultaneously set the style of the marker, its position, as well as the image that will be used as a marker. For a more detailed discussion of 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 the three marker style values, in any order. The values are separated by a space. Neither argument is required, so unused values can be omitted.

list style

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 neither fig. one.