Bulleted lists. I want to change the marker to a different symbol. How to do it? An example of nicely styling a bulleted list in css

The following CSS rules are provided for the lists that are created using HTML tools here.

list-style-type

Specifies bullet or numbering for lists instead of the type attribute in HTML code. Property values ​​for bulleted lists can be:

  • disk- circle, set by default.
  • circle- a circle.
  • square- square.

For numbered lists, the property is usually assigned values:

  • decimal- Arabic numerals, the value is set by default.
  • lower-roman- small Roman numerals.
  • upper-roman- capital Roman numerals.
  • lower-alpha- lowercase Latin letters.
  • upper-alpha- uppercase Latin letters.

Also, for any list type, the list-style-type property can be set to none, which will remove the marker altogether.

Other values ​​are available for numbered lists, for example, cjk-ideographic sets ideographic numbering, Armenian- traditional Armenian, and decimal-leading-zero will set the numbering in Roman numerals, but with a leading zero: 01, 02, 03 ... 09, but in practice these and similar values ​​are used extremely rarely.

The example below displays three lists: numbered with traditional Armenian numbering, marked with a circle, and numbered, in which elements are ideographically numbered.

CSS lists

  1. First point
  2. Second point
  3. Third point
  • First point
  • Second point
  • Third point
  1. First point
  2. Second point
  3. Third point

Result.

The color of the markers matches the color of the text in the list specified by the property color.

list-style-image

Allows you to set your own image as a list marker. For example, if the folder with the page containing the list contains the file marker.png, which you want to use, then the design code will be as follows:

Ul (list-style-image: url ("marker.png");)

list-style-position

Determines the position of the marker: either it is moved outside the border of the list item ( list-style-position: outside), or the text wraps around it ( list-style-position: inside).

The example below shows the difference between these values. In the first case, the marker is inside the list, in the second case, it is moved outside of it.

list-style-position

  • Just look at the difference between inside and outside.
  • In the case of inside, the marker directly fits into the list, without going beyond its limits and without interfering with the layout. The text flows around it, the marker seems to be inside.
  • The outside value moves the marker out of the list.

As a result, the following page is created:

list-style

Allows you to shorten your code by writing all three listed properties on one line. The rules are written with a space:

Ul (list-style: square inside;)

Consider an example of a page with three lists. The first is numbered with numbers in the format 01, 02, the second is marked with a custom drawing (file marker.png in the folder with the page), the marker of the third list is disabled.

The HTML code is shown below.

list-style

  1. First point
  2. Second point
  3. Third point
  • First point
  • Second point
  • Third point
  1. First point
  2. Second point
  3. Third point

The browser will display the next page.

I remember how in July 1999 I educated people in mail lists about the delights of style layout. Since then, little has changed.

However, something has changed. Changed my view of CSS and (X) HTML, which acts as a framework for styles. For example, I found that most of the pages contain a navigation bar. Most often it is formatted as a simple text string with links separated by tags.

or

Structurally, they are lists of links, and therefore should be formatted as such.

The reason we don't style them as lists is because we don't really want to see a bullet in front of every link in the menu. Earlier, I talked about some techniques for page layout using CSS. In one of those tricks, we learned how to display lists in a string, rather than vertically.

In this article, I'll show you how you can tame these clumsy and clumsy lists with CSS. Stop wandering around your web pages. Now is your time to tell him how to behave.

Cooking the arena

I chose simple, unnumbered lists for training. All the CSS rules mentioned here can be applied to numbered lists with the same result. All examples (except where otherwise noted) use the following list:

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5 let's make this item a little longer so that it goes to the next line

Each list is simply placed inside a separate element

, and the behavior of the list is defined with this DIV. The basic rule that applies to all DIVs is:

Without any additional styling rules, the list in the base DIV would look like this:

Positioning

Sometimes the default indentation in the list may be too large for your design. But changing only the margin or padding property for an element