Examples of stylish styling of ul li CSS lists. Styling line numbers (digits) in ordered lists ol Tags are used to style numbered lists

Meaning and application

A numbered (ordered) list is for items that follow in a specific order. A numbered list starts with a tag

(short for English ordered list - ordered list). Each list item starts with a tag
1. (list item).

   Browser support

   Attribute			Opera		IExplorer	Edge
   start, type	Yes	Yes	Yes	Yes	Yes	Yes
   reversed	Yes	Yes	Yes	Yes	Not	Not

   Attributes

   Attribute	Value	Description
   compact	compact	Not supported in HTML5. Indicates that the list should be smaller than the normal size (line-height: 80%). Use CSS instead of this attribute.
   	reversed	Indicates that the order in a numbered (ordered) list should be descending. The attribute is not supported by Internet Explorer and Edge browsers.
   start	number	Determines the starting value of an ordered (ordered) list. Values \u200b\u200bmust be integers, negative values \u200b\u200bare allowed. When used with letters (type \u003d "A" and type \u003d "a"), the number specified in the attribute value is the ordinal number of the letter in the alphabet. For example, start \u003d "4" will match the letter "D" and the list will start with it. When using the value start \u003d "27", the counter is reset to zero, and the list becomes two-digit ("27" \u003d "AA", "28" \u003d "AB", "29" \u003d "AC" ...).
   type	1 (default) A (large) a (lowercase) I (Roman large) i (roman small)	Determines the type of bullet used in building a numbered (ordered) list.

   Usage example

   1. First point Second point
   2. Third point

   It will look like this on the page:

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

   If you want the list to start from a specific number (not from 1), then you must specify the start attribute for the tag

   .

   For example:

   Another interesting attribute is type, which allows you to specify alphabetic numbering ("A" - large, "a" - lowercase), or numbering from Roman numerals ("I" - in uppercase, "i" - in lowercase).

   Consider an example that shows all possible values \u200b\u200bfor the type attribute (other than the default):

   >
   1. First point Second point
   2. Third point
   >
   1. First point Second point
   2. Third point
   >
   1. First point Second point
   2. Third point
   >
   1. First point Second point
   2. Third point

   I draw your attention to the fact that it is allowed to form numbered (ordered) lists nested in other numbered lists (inside a list item

   3. ):
      1. First point
         1. First point Second point
         2. Third point
         Second point
         3. Third point

         It will look like this on the page.

         Let's continue our conversation about the beginnings of html. In this article, I want to talk about how to create paragraphs, lists and headings in text. And also about single tags
         and

         ---

         .

         I strongly advise you to read the first lesson in this series, as well as an introductory article on getting started learning html for those who are not yet familiar with them.

         We will now continue our study of tags. I will assume that the reader is already familiar with the material of the above articles.

         As always, the work plan:

         1. Paragraphs
         2. Line breaks
            
         3. Lists, and list items
         4. Headings
         5. Horizontal rulers

            ---

         Paragraphs

         The text is almost always made up of paragraphs. A paragraph is an element of text that carries a complete idea.

         In html, a paragraph, as can be judged from the title, is designated. The letter "p" is taken from the word "paragraph", which just means "paragraph".

         Let's consider an example:

         The text of the first paragraph. It contains thought. But then the thought ended.
         

         
         

         Another thought has already begun and we are writing it in another paragraph.
         

         As you can see, the application of paragraphs is very simple and does not require any special comments. If we look at this code in a browser, we will see two lines with one blank line between them. In Russian texts, it is customary to separate a paragraph not by an empty line, but by shifting the first line to the right. But on the Internet just such formatting is often used, therefore it is often left in Russian-language texts as well. However, if this behavior does not suit you, you can change it using CSS.

         Line breaks
         

         Sometimes you need to translate a line without ending the thought, without closing the paragraph. That is, just go to a new line. There is a single tag for this
         ... Here is an example of its application:

         The wind walks merrily
         
         And the boat urges
         
         He runs to himself in the waves
         With the sails raised.
         

         This fragment of a poem by A.S. Pushkin helped us to illustrate the action of the tag
         ... I deliberately placed the last two lines of this quatrain in one line of code to show that lines are wrapped on a new line not because we placed line breaks, but because we placed tags
         ... This tag is very simple and does not need detailed explanations, so this is where we will finish discussing it.

         Lists,

         and list items

         Sometimes you need to list something in the text. Three tags are used for this purpose: ul, ol, li. All these tags are container tags, but the tag is always contained in one of the containers or, and does not make sense outside of them. The ul container is used when we don't care about the order of the listed items, and we don't want to focus on the order in which they go. The ol tag, on the other hand, emphasizes the sequence of items by automatically numbering each line. Let's consider an example:

         
         
         • Bulka
         
         
         • Pie
         
         
         • Loaf
         
         
         • Pie
         
         

         On the browser screen, this code will look like this:

         • Bulka
         • Pie
         • Loaf
         • Pie

         If we just replace the ul tag with the ol tag, we get a numbered list:

         
         
         1. Bulka
         
         
         2. Pie
         
         
         3. Loaf
         
         
         4. Pie
         
         

         It now looks like this:

         1. Bulka
         2. Pie
         3. Loaf
         4. Pie

         Nobody forbids nesting one list into another, forming nested lists with sublists:

         
         Instruments:
         
         • Saw
         
         
         • Screwdriver
           
           
           
           1. Straight
           
           
           2. Cross
           
           
           
           
         
         
         • Drill
         
         

         You need to experiment a little with these lists to get used to using them. There is another type of lists, but it is rarely used, so I will not talk about it now. Maybe in another article.

         Of course, like everything else, the appearance of these elements can be changed beyond recognition with CSS.

         Headings

         Of course, paragraphs help in structuring documents. But in order to break up a large text into smaller logical parts, you can caption each of them. Each part can contain more subparts, with their own lower-level headings, and so on. To set the title, use the tags , where "x" is a number from 1 to 6. The higher the number, the lower the heading. That is, the top-level heading will be called h1, and the bottom-most heading will be h6. By default, the text in these headings is displayed in large, indented font. This text is displayed on the whole line, that is, hx tags are block-based. The h1 tag has the largest font, and the h6 tag has the smallest. As a rule, there is one, maximum two, top-level h1 tags on a page. As the level decreases, the number of tags increases. But rarely will a webmaster be able to break up text in such a way that he needs headings of 5 or 6 levels. Even level 4 is rarely used.

         Talk less, work more!

         Lists can be numbered and unnumbered.

         Numbered lists are output by code:

         List with numbers
         1. paragraph 1
         2. point 2
         3. point 3

         Unnumbered lists are output by the code:

         List with check marks or other symbols
         • paragraph 1
         • paragraph 1
         • paragraph 1

         Each item on any list is enclosed in an li tag. All list items are wrapped in one common ul or ol tag. The styles of these tags are written in the stylesheet.

         For each tag, specific visual styles are assigned. They indicate indents from the text.

         For a numbered list, numbering styles are prescribed for each item.

         Standard Arabic numerals are described by the decimal value.

         list-style-type: decimal; /*Arabic numerals*/

         For a bulleted list, you specify the character style - squares or circles.

         list-style-type: circle; / * circles * /
         list-style-type: square; / * squares * /

         Each menu item can be assigned an image.

         list-style-image: url (‘path to image’);

         Usually, in templates, a numbered list is formatted with simple numbers, and not numbered - with black squares and circles. It's boring and inexpressive. Let's fix this.
         

         Where are the list styles in the Twenty Eleven template?

         Open the stylesheet style.css. Find the section called / * Text elements * /

         The standard code looks like this:

         How do I arrange a numbered list?

         Numbered list using background

         Look at this nice numbered list design.

         Like? Let's do it again.

         Find styles for the ol tag. Add new properties to it.

         Ol (padding: 0px 0 0 20px; margin: 0.5em 0 1.571em 1.9em; color: # 2E2E2E; list-style-type: none; font: 15px / 17px Verdana, Arial, Helvetica, sans-serif; z-index : 2; counter-reset: point;) ol li (margin-bottom: 4px; line-height: 1.6; color: # 2E2E2E; position: relative;) ol li: before (margin-bottom: 4px; counter-increment: point 1; line-height: 1.6; height: 24px; margin-left: -36px; left: 0px; width: 24px; margin-top: 1px; background: # BDC3C7; content: counter (point); text-align: center; position: absolute; font-weight: bold;)

         In order for you to understand where what you need to change for your design, let's take this code down the shelves.

         list-style-type: none; - disables output of standard digits
         counter-reset: point; - sets a variable for the numbering counter
         position: relative; - places numbering near the points themselves

         before is a pseudo-element for the ol li tag. Has the following styles:
         content: counter (point); - displays the value of a variable
         counter-increment: point 1; - increases counter by 1
         position: absolute;
         background: # BDC3C7; - background for numbers (background can be set with color or a beautiful icon
         margin - margins
         padding - padding
         color - element text color
         background - background
         text-align - text alignment
         font-weight - weight (weight) of the font

         In your styles, you can set any colors, alignments, font sizes and indents.

         Numbered list with a unique image for each item

         One site for women has some very attractive numbered lists.

         How is this implemented? Let's take a look at the following code:

         / * first number * / ol li: first-child (list-style-image: url (path to image with number 1);) / * second number * / ol li: nth-child (2n) (list-style- image: url (path to image with number 2);) / * third number * / ol li: nth-child (3n) (list-style-image: url (path to image with number 3);) / * fourth number * / ol li: nth-child (4n) (list-style-image: url (path to the image with the number 4);) / * Next, we write in the same way only for the following item numbers * /

         In the code of such a numbered list, you need to list all the item numbers and assign a unique icon to each of them.

         If in lists in articles you use up to 20 numbered items, then you need to register the nth-child (An) pseudo-class 20 times. So that the last in the styles is the nth-child (20n) pseudo-class.

         Find the lines in the stylesheet that describe the appearance of the numbered list (ol li tags).

         Add the first-child pseudo-class to it. Copy and paste it once, then change this property to nth-child (An) and copy as many numbers as you want your icon to have. Add item numbers.

         For each number, add a list-style-image property with its own unique icon.

         If the icons on the site are located far from the points or overlap them, then you need to edit the alignment and indents of the digital icons or the text of the points.
         

         How to arrange a bulleted (unnumbered) list?

         Bulleted list ul li with alternating icons

         I really liked this bulleted list.

         Ul (padding: 11px 0 5px 0;) ul li (padding-left: 32px; margin-bottom: 10px; font: normal 15px Verdana, sans-serif; color: # 2E2E2E; line-height: 1.6; border-bottom: 1px dashed #ccc; padding-bottom: 10px;) ul li: before (content: ""; position: absolute; width: 27px; height: 24px; margin-left: -35px; margin-top: -2px; background: url ("images / sprite.jpg") 0px 2px no-repeat; list-style-type: circle;) ul li: nth-child (2n): before (content: ""; position: absolute; width: 27px; height: 43px; margin-left: -35px; margin-top: -2px; background: url ("images / sprite.jpg") 0px -17px no-repeat; list-style-type: circle;)

         Instead of the standard list-style-type style, you can assign the "path to icon" property - list-style-image: url. But then you need to register the outer left margin from the edges of the site - without it, the icons will not be displayed, they will go beyond the content area.

         For the experiment, you can assign indents:

         Ul li (list-style-image: url (images / radio.png); margin-left: 30px;)

         The alternation of icons can be set with the nth-child (An) property. The above example uses the before pseudo-element.

         The code contains one pseudo-class nth-child (2n). Its value is 2. It turns out that each even item has a different icon. If instead of 2n you write 2n + 1, then the other icon will fall on odd points.

         You can set an underscore for each item in the list. In the example shown, items are underlined with a dotted line.

         Also, each item can be assigned frames, background, icons. Just don't be too smart. Our task is not to defeat everyone with a fancy design, but to improve the quality of content perception.
         

         How to display multiple lists with different design on a page?

         Sometimes you need to place several lists with different styles.

         If you assign common styles, then the same appearance will be assigned to all lists. Different lists can be displayed if you assign a separate id to the ol or ul tag and register it in the html article editing mode. Well, in the stylesheet for this id, you need to register separate styles.

         For example, here's one nice layout for the content:

         In HTML, you write the list like this:

         Content
         1. paragraph 1
         2. point 2
         3. point 3

         In CSS, you would write styles like this:

         Ol # sod (padding: 0px 20px 10px 51px; margin: 0.5em 0 0em 1em; color: # 2E2E2E; list-style-type: none; background: # f1f4f5; border-left: # BDC3C7 4px solid; display: inline- block;) ol # sod li () ol # sod li: before (font-weight: normal! important)

         The new style differs from the main ol tag: background, display style, line to the left of the content.

         Using several lists of different design in the text, you will make the presentation of information even more interesting. When listing any items, you can set some icons, and when listing actions, others. Here, the design is limited only by your imagination.

         These methods are also applicable in the design of menu items, categories and any other elements of the site.
         

         How do I create anchor links in a content list?

         How to write them in HTML code? One piece of code frames the anchor of the link, and another piece of code is placed next to the place where we need to be dropped when we click on the link.

         Content
         1. Heading 1
         2. Heading 2
         3. Heading 3

         And in the text of the article you need to write like this:

         Heading 1 ... Heading 2 ... Heading 3 ...

         Maybe more experienced webmasters will correct me in something. I just recommend what I have tried in practice myself.

         If you still have any questions, I will be glad to see them in the comments.

         Ageeva Veronika.

         Perhaps you will also be interested in:

         If you decide to change the default lists ul and li, then this topic will interest you. Since here you will find out several original solutions. Which will certainly help you to change the standard view to a unique one, where the CSS style goes, for the design of the lists. The plus is that we will use only one class in everything, which will radically change the look. In addition to these parameters, you can specify at which number the list should start, here you can do everything yourself. The initial default for numbered lists is on the first or letter A.

         Based on the basics, we will now take a closer look at the elements used to provide structure and meaning to various parts of the design. If anyone doesn't know, ul and li are much better options than plain text, because when the text is wrapped, especially on mobile, it is perfectly padded and does not wrap around the marker.

         Lists are considered to be a great way to present information on pages because they are easy to read and look good. Many people seem to think that bullet points are small images, but in reality they are all created through fairly simple HTML code. You can nest different types of lists inside each other if you like, just remember to close them correctly. You can play with the text you want in all of these list commands.

         You also need to know that lists initially contain several elements:

         1 ... Disordered information.
         2 ... Ordered information.
         3 ... Definitions.

         Getting started with the installation:

         1. Option:

         
         
         • List item
         
         
         • Unique list
         
         
         • Original Lists
         
         
         • ZORNET.RU - For Webmaster
         
         
         • Another list
         
         
         
         CSS

         Ksangelopan (
         margin: 19px 0 0;
         padding: 0;
         list-style: none;
         counter-reset: li;
         }
         .ksangelopan li (
         border: 2px solid # 3575ad;
         background: # d7dee4;
         position: relative;
         margin-bottom: 17px;
         padding: 15px 9px;
         }
         .ksangelopan li: hover (
         z-index: 1;
         }
         .ksangelopan li: before (
         border: 2px solid # 2270b3;
         position: absolute;
         top: -14px;
         padding: 3px 9px;
         font-size: 11px;
         font-weight: bold;
         color: # 246eaf;
         background: # f2f4f7;
         counter-increment: li;
         content: counter (li);
         -webkit-transition-duration: 0.4s;
         transition-duration: 0.4s;
         }
         .ksangelopan li: hover: before (
         background: # 2672b3;
         color: # f7f9fb;
         -webkit-transform: translate (-11px, 0);
         -ms-transform: translate (-11px, 0);
         -o-transform: translate (-11px, 0);
         transform: translate (-11px, 0);
         }
         .ksangelopan li: after (
         content: "";
         position: absolute;
         transition-duration: 0.3s;
         -webkit-transition-property: width;
         transition-property: width;
         z-index: -1;
         background: #FFF;
         height: 100%;
         left: 0;
         top: 0;
         width: 0;
         }
         .ksangelopan li: hover: after (
         width: 100%;
         }

         
         This is the whole installation.

         2 Second option:

         

         
         
         • List item
         
         
         • Unique list
         
         
         • Original Lists
         
         
         • ZORNET.RU - For Webmaster
         
         
         • Another list
         
         
         
         CSS

         Beleduzlopamges (
         margin-bottom: 8px;
         padding: 0;
         list-style: none;
         counter-reset: li;
         }
         .beleduzlopamges li (
         position: relative;
         border: 2px solid # 195588;
         background: # eff3f7;
         padding: 15px 19px 15px 27px;
         margin: 12px 0 12px 40px;
         -webkit-transition-duration: 0.3s;
         transition-duration: 0.3s;
         }
         .beleduzlopamges li: hover (
         background: #FFF;
         }
         .beleduzlopamges li: before (
         line-height: 32px;
         position: absolute;
         top: 4px;
         left: -39px;
         width: 39px;
         text-align: center;
         font-size: 16px;
         font-weight: bold;
         color: # f9f5f5;
         background: # 275b88;
         counter-increment: li;
         content: counter (li);
         transition-duration: 0.2s;
         }
         .beleduzlopamges li: hover: before (
         width: 46px;
         }
         .beleduzlopamges li: after (
         position: absolute;
         left: 0;
         top: 4px;
         content: "";
         height: 0;
         width: 0;
         border: 16px solid transparent;
         border-left-color: # 275b88;
         -webkit-transition-duration: 0.2s;
         transition-duration: 0.2s;
         }
         .beleduzlopamges li: hover: after (
         margin-left: 6px;
         }

         
         The center scale can be independently set to match the main style of the site.

         3 Third option:

         

         
         
         • Scripts for uCoz
         
         
         • Templates for uCoz
         
         
         • Website design
         
         
         • Styles for the site
         
         
         • CSS styling
         
         
         
         CSS

         Nizualisanelag (
         padding: 0;
         list-style: none;
         counter-reset: li;
         }
         .nizualisanelag li (
         position: relative;
         padding: 9px 17px 17px 25px;
         margin-left: 39px;
         transition-duration: 0.2s;
         cursor: pointer;
         font-weight: bold;
         color: # 343638;
         }
         .nizualisanelag li: before (
         border: 3px solid transparent;
         line-height: 35px;
         position: absolute;
         top: 0;
         left: -29px;
         width: 41px;
         text-align: center;
         font-size: 14px;
         font-weight: bold;
         color: # 619dce;
         counter-increment: li;
         content: counter (li);
         transition-duration: 0.3s;
         
         box-sizing: border-box;
         }
         .nizualisanelag li: hover: before (
         color: # 337AB7;
         }
         .nizualisanelag li: after (
         position: absolute;
         top: 0;
         left: -29px;
         width: 41px;
         height: 41px;
         border: 5px solid # 468bd0;
         border-radius: 50%;
         content: "";
         opacity: 0.5;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
         }
         .nizualisanelag li: hover: after (
         animation: 500ms ease-in-out 0s bounceIn;
         opacity: 1;
         }

         @keyframes bounceIn (
         0% {
         opacity: 0;
         transform: scale3d (.3, .3, .3);
         }
         20% {
         transform: scale3d (1.3, 1.3, 1.3);
         }
         40% {
         transform: scale3d (.9, .9, .9);
         }
         60% {
         opacity: 1;
         transform: scale3d (1.03, 1.03, 1.03);
         }
         80% {
         transform: scale3d (.97, .97, .97);
         }
         to (
         opacity: 1;
         transform: scale3d (1, 1, 1);
         }
         }

         
         Comes with beautiful animation.

         4 Fourth option:

         

         
         
         • The first element for the site
         
         
         • Second element for the site
         
         
         • Third element for the site
         
         
         • The fourth element for the site
         
         
         • The fifth element for the site
         
         
         
         CSS

         Padding: 0;
         list-style: none;
         }
         .kudezamuden li (
         padding: 6px;
         }
         .kudezamuden li: before (
         padding-right: 11px;
         font-weight: bold;
         color: # 4979a0;
         content: "\\ 2606";
         transition-duration: 0.4s;
         }
         .kudezamuden li: hover: before (
         color: # 235e90;
         content: "\\ 2605";
         }

         
         Similar to previous versions, only the icon itself has been changed.

         In general, this is a small selection of lists, it will give the webmaster a beautiful list on the portal, where he himself can arrange it more, as he wants to see it.

         If you need to put items in a numbered list instead of a bulleted list, then ordered HTML will be used here. This list is created using the ol tag. The numbering starts from one and increases by one for each subsequent ordered list item with an li tag.

         Element

         (from the English "unordered list" - "unordered list") creates an unordered (unordered) list. Typically the element
         it is used to create such lists, where changing the order of the items in this list does not significantly change the meaning of the list.

         Tag

         refers to block elements, so it will take up all the width available to it, and the size of the height will depend on the amount of content.

         Items for numbered lists are defined using the tag

         • , which, in addition to text, can include other HTML elements (lists, images, headings, paragraphs, etc.). By default, bulleted lists are displayed on a web page as a list starting with a small black circle. Browsers add a small margin to the left when displaying list items.

           Note:If to

           the CSS property is applied, then the elements
           • inherit these properties.

             Advice:To change the marker type, use the list-style-type CSS property or the list-style-image property to replace markers with images. To create numbered lists use the tag

             .

             Syntax

             ...
             • ...
             ...

             End tag

             Required.

             Attributes

             compact Deprecated in HTML5 Reduces indents and line spacing. type HTML5 Sets the look of the list marker.

             Available for this item global attributes and events.

             Default styling

             Most browsers will render the element

             with the following default CSS values:

             Ul (display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px;)

             Differences between HTML 4.01 and HTML5

             The compact and type attributes are not supported in HTML5.

             Usage example:

             Unordered HTML list:

             Example HTML:

             Try it yourself
             • Coffee
             • Tea
             • Cocoa

             Specifications

             Specification	Status
             WHATWG HTML Living Standard (WHATWG)	Living standard
             HTML 4.01 (W3C)	Recommendation
             HTML5 (W3C)	Recommendation
             HTML 5.1 (W3C)	Recommendation

             Browser support

             Try it yourself - Examples

             How to make the list start with a number other than 1.