Examples of stylish design of ul li lists CSS. How to place list items horizontally? The ol tag specifies

Hello, dear readers of the blog site. Today, as part of this section, I want to talk about various Html lists that can be created based on UL, OL, LI and DL tags specially designed for this. The UL and LI pairs create bulleted lists, the OL and LI pairs create numbered lists, and the DL, DT and DD elements create so-called definition listings. We will also briefly consider the principles of creating nested structures.

I would like to remind you that we have already managed to talk about the basics of modern, as well as tabular layout (). In addition, we touched on the basics, and learned through.

Bullet lists based on UL and LI tags

The UL tag is used to create bulleted lists, and the OL tag is used to create numbered lists. These tags are pairwise and block tags, just like the LI element.

Between the opening and closing tags are individual list items, which in turn are enclosed in an opening and closing LI element. The browser adds one-line indents at the top and bottom of HTML lists, similar to the indentation created by a paragraph tag.

Let's look at, for example, a bulleted option that might look like this:

  • First line
  • Second
  • Last element

Only LI elements can be inside the opening and closing UL tags, and within these elements (clauses) themselves you can insert any content (text, pictures, headings, paragraphs, links and even other lists).

Those. The UL serves only to provide a bulleted (not ordered) listing, and everything you will see on web page within it, is implemented using the contents of LI elements.

For UL, you can change the type of marker by writing in it different meanings for the "Type" attribute. If “Type” (controlling the appearance of markers) for the UL element is not specified, then the default appearance of the marker will be displayed (disc - a circle filled in the color of the text):

    1. — filled circle (default);
      • - unfilled circle;
        • - square

In the above examples, we specified the “Type” attribute in the UL element using this type markers for all items. But the “Type” attribute can also be specified for each individual LI tag, setting its own marker type for this item.

Example bulleted list With various types marker for each item:

  1. Marker in the form of a filled disk
  2. Marker in the form of an unpainted disk
  3. Square

Numbered lists in Html based on the OL tag

To create a numbered listing, OL tags are used, within which LI elements will again be located. OL and LI, as I already mentioned, are block-based (that is, they tend to take up all the space available to them in width) and nothing except LI elements can be placed inside OL.

It turns out that OL and UL are service tags that are needed only to indicate to the browser what type of list we are creating (bulleted or numbered). In the case of a numbered item, to the left of each item we will see not a marker, but a number and a dot behind it:

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

As I mentioned just above, the UL, OL and LI elements have the ability to use the TYPE attribute. It allows you to configure the type of marker or specify what numbers or letters will be used to number listing items. For a numbered list, the parameters of this attribute can take the following values:

    1. — numbering will be performed in regular Arabic numerals (the same option will be used by default, in the absence of the “Type” attribute);
      1. — capital letters as numbering;
        1. - lowercase letters;
          1. - capital Roman numerals;
            1. - lowercase Roman numerals;

            An example of a numbered list with different types of numbering for each item:

            1. numbered with large Roman numerals
            2. Numbering in small Latin letters
            3. Numbering with small Roman numerals

            When creating numbered lists, it is also possible to start numbering not from one, but from the number specified in the START attribute. For example:

            1. The first element whose number is specified in the OL tag with the start="23" attribute
            2. The next item, with a number one higher
            3. Another one more

            For OL, you can also start a new numbering from any value, starting from any item, by writing the VALUE attribute with the required number in the opening LI of this item. For example:

            1. First point with number one
            2. This element will receive the number specified in the value="32" attribute
            3. Item with a large number

            Designing the appearance of lists in CSS (style sheets)

            But usually now appearance markers are specified not through the TYPE attribute, but , for which the corresponding properties are specified.

            Here I'll just give an example of different bullets for unnumbered lists, the appearance of which is set through separate file with cascading style sheets.

            • First point
            • Second
            • Last

            But we’ll talk about that in subsequent articles. This is how the appearance of the UL markers on this blog is set. Pictures are used as markers: for regular items of an unnumbered list - , for nested items of an unnumbered list - .

            Special and nested lists in HTML code

            The third and final type is called “definition lists” and they are specified using three tags - DL, DT and DD. DL tells the browser that what follows is a list of definitions.

            Typically this type is used (or was intended to be used) for writing dictionary entries consisting of terms (enclosed in DT tags) and their descriptions (enclosed in DD tags).

            First term
            Description
            Second term
            Its description

            If you look at the example above, you'll notice that the DD element (the description of the term) is offset (by 40 pixels) relative to the DT element (the term itself).

            In general, DL, DT and DD are block tags, and only content with inline tags can be inserted inside a DT element (it turns out that block elements of headings and paragraphs cannot be used inside DT). And inside DD tags you can insert any elements, both inline and block.

            Nested list in Html it is created by analogy with a simple one, but inside the main list, some of the items are once again enclosed in the opening and closing tag UL or OL.

            Please note that the closing LI of the item in which the nested item will be created is placed only after the entire code of the nested list (this is very important for its correct display on the web page). The nested list might look something like this:

            1. The first paragraph of the main numbered
            2. Second point
              • First element of nested bulleted
              • Second
              • Third and last bullet point
            3. Third element numbered

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

            You might be interested

            How to insert a link and a picture (photo) into HTML - IMG and A tags Select, Option, Textarea, Label, Fieldset, Legend - tags HTML forms dropdown lists and text field
            Html forms for the site - tags Form, Input and Select, Option, Textarea, Label and others for creating web form elements
            How colors are set in Html and CSS code, selection of RGB shades in tables, Yandex output and other programs
            Embed and object - HTML tag and for displaying media content (video, flash, audio) on web pages
            Heading tags and attributes H1-H6, horizontal line Hr, line break Br and paragraph break P according to the Html 4.01 standard
            Tables in Html - Table, Tr and Td tags, as well as Colspan, Cellpadding, Cellspacing and Rowspan for creating them
            What is hypertext language HTML markup and how to view a list of all tags in the W3C validator
            Font (Face, Size and Color), Blockquote and Pre tags - legacy text formatting in pure HTML(without using CSS)
            Iframe and Frame - what are they and how best to use frames in Html
            Img - Html tag for inserting a picture (Src), aligning and wrapping text around it (align), as well as setting the background (background)

            The only difference is that this tag is strictly made for numbering lists. The name of the tag comes from the English abbreviation "Ordered List" - a numbered list.

            Tag Syntax

              1. Element #1
              2. Element #2
              3. Element #3
              4. ...

              Where the type="value" attribute can take the following values

              • A - sets markers in the form of capital Latin letters (A, B, C..);
              • a - sets markers in the form of lowercase Latin letters (a, b, c..);
              • I - sets markers in the form of large Roman numerals (I, II, III, IV..);
              • i - sets markers in the form of small Roman numerals (i, ii, iii, iv..);
              • 1 (default) - sets markers in the form of Arabic numerals (1, 2, 3..);

              The start="value" attribute specifies the initial value (start value) of the report.

              The reversed attribute specifies reverse counting (if necessary).

              Tag

                requires the mandatory use of a closing tag

              To form list elements, a paired tag is used

            1. . Between the opening and closing tags are individual words, phrases, paragraphs, images, pieces of code, and much more that are the content of the bulleted list.

              Note

              Inside the list you can change the account to your own. There is a special attribute value="" on the tag for this purpose.

            2. , which is assigned some numeric value. For example

              1. Element #1
              2. Element #2
              3. Element #3

              Examples with numbered lists in html (
                )

              Example 1. HTML numbered list in Latin letters

              Example with capital letters

              1. Element #1
              2. Element #2
              3. Element #3
              1. Element #1
              2. Element #2
              3. Element #3

              Example with lowercase letters

              1. Element #10
              2. Element #11
              3. Element #12

              This is what it looks like on the page:

              1. Element #1
              2. Element #2
              3. Element #3

              Example 2. HTML numbered list in Roman letters

              Example with capital letters

              1. Element #1
              2. Element #2
              3. Element #3

              This is what it looks like on the page:

              1. Element #1
              2. Element #2
              3. Element #3

              Example with lowercase letters

              1. Element #1
              2. Element #2
              3. Element #3

              This is what it looks like on the page:

              1. Element #1
              2. Element #2
              3. Element #3

              Example 3. Numbered list html different start position

              An example that shows the capabilities of the start attribute, which allows you to set the starting value of the counter.

              1. Element #1
              2. Element #2
              3. Element #3

              This is what it looks like on the page:

              1. Element #1
              2. Element #2
              3. Element #3

              Example 4. Changing the count in html numbered lists

              Below is an example with the ability to change counter values ​​using the value attribute when displaying new elements in tags

            3. .

              1. Element #1
              2. Element #2
              3. Element #3
              4. Element #4

              This is what it looks like on the page:

              1. Element #1
              2. Element #2
              3. Element #3
              4. Element #4

              Example 5. Reverse numbered list in html

              Below is an example of a reverse numbered list (counting in reverse order).

              1. Element #1
              2. Element #2
              3. Element #3
              4. Element #4

              This is what it looks like on the page:

              1. Element #1
              2. Element #2
              3. Element #3
              4. Element #4

              If you have ever tried to change CSS styles of line numbers (digits) in ordered lists

                , then you probably encountered problems. It is impossible to reach the styles of these elements using CSS selectors. But quite often interface design involves changing its color, background, size, etc.

                Here is the simplest example of an unstyled list:

                html

                1. Plant a tree
                2. Build a house
                3. Raise a son

                Let's look at several ways to solve the above problem.

                Traditionally a clumsy way.

                The traditional way to solve this problem is to hide the line numbers that are automatically assigned by the browser. In this case, the list-style: none; property is used. .

                css

                li( list-style: none; ) .num( color: white; background: #2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px)

                html

                1. 1 Plant a tree
                2. 2 Build a house
                3. 3 Raise a son

                Agree, it looks redundant and inflexible. We hide automatically placed sequence numbers and replace them with manually specified values, clutter the layout, etc.

                Let's see how we can achieve the same result without clogging up the layout and using the pseudo-element::before and the CSS properties content , counter-increment , counter-reset .

                A beautiful and correct way.

                First we will provide the code and demo, and then we will figure out what's what.

                css

                ol( counter-reset: myCounter; ) li( list-style: none; ) li:before ( counter-increment: myCounter; content:counter(myCounter); color: white; background: #2980B9; display: inline-block; text-align: margin: 5px 10px; line-height: 40px;

                html

                1. Plant a tree
                2. Build a house
                3. Raise a son

                As you can see, the html code remains clean and beautiful. In this case, all styling of the list elements is transferred to css.

                Let's look point by point:

                • li::before– creates a pseudo-element inside the list, which takes the place of the first child.
                • counter-reset:myCounter;– resets the myCounter css counter inside each
                    .
                  1. counter-increment: myCounter;– increments the css counter myCounter for each pseudo-element::before .
                  2. content:counter(myCounter);– prints the current value of the myCounter counter inside the::before pseudo-element.

                More details about css counters can be found in

                HTML lists used to group related pieces of information. There are three types of lists:

                bulleted list —

                  - each element of the list
                • marked with a marker,
                  numbered list —
                    - each element of the list
                  1. marked with a number
                    list of definitions- - consists of term pairs
                    —
                    definition.

                    Each list is a container within which list elements or term-definition pairs are located. List elements behave like block elements, stacked underneath each other and occupying the entire width of the container block. Each list element has additional block, located on the side, which does not participate in the layout.

                    Creating HTML Lists

                    1. Bulleted list

                    Bulleted list is an unordered list (from English Unordered List). Created using a paired tag

                    . The marker of a list element is a label, for example, a filled circle.

                    Browsers by default add the following formatting to the list block:

                    Each list element is created using a paired tag

                  2. (from English List Item).
                    available .
                  • Microsoft
                  • Google
                  • Apple
                  Rice. 1. Bulleted list

                  2. Numbered list

                  Numbered list is created using a paired tag. Each list item is also created using the element

                • . The browser numbers the elements in order automatically, and if you delete one or more elements of such a list, the remaining numbers will be automatically recalculated.

                  The list block also has default browser styles:

                • The value attribute is available, which allows you to change the default number for the selected list item. For example, if for the first item in the list you set
                • , then the remaining numbering will be recalculated relative to the new value.

                  For tag

                    The following attributes are available:

                    Table 1. Tag attributes
                    Attribute Description, accepted value
                    reversed The reversed attribute causes the list to be displayed in reverse order (for example, 9, 8, 7...).
                    start The start attribute specifies the initial value from which the numbering will begin, for example, a construction
                      the first item will be assigned the serial number “10”. You can also specify the numbering type at the same time, for example,
                        .
                    type The type attribute specifies the type of marker to use in the list (letters or numbers). Accepted values:
                    1 — default value, decimal numbering.
                    A — list numbering in alphabetical order, capital letters (A, B, C, D).
                    a — list numbering in alphabetical order, lowercase letters (a, b, c, d).
                    I - numbering in Roman capital numerals (I, II, III, IV).
                    i — numbering in Roman lowercase numerals (i, ii, iii, iv).
                    1. Microsoft
                    2. Google
                    3. Apple
                    Rice. 2. Numbered list

                    3. List of definitions

                    Lists of definitions are created using a tag

                    . To add a term, use a tag
                    , and to insert a definition - the tag
                    .

                    The definition list block has the following default browser styles:

                    For tags

                    ,
                    And
                    available .

                    Director:
                    Peter Tochilin
                    Cast:
                    Andrey Gaidulyan
                    Alexey Gavrilov
                    Vitaly Gogunsky
                    Maria Kozhevnikova

                    Rice. 3. List of definitions

                    4. Nested list

                    Often, the capabilities of simple lists are not enough; for example, when creating a table of contents, there is no way to do without nested items. The markup for the nested list would be as follows:

                    • Point 1.
                    • Point 2.
                      • Subclause 2.1.
                      • Subclause 2.2.
                        • Subclause 2.2.1.
                        • Subclause 2.2.2.
                      • Subclause 2.3.
                    • Point 3.

                    Rice. 4. Nested list

                    5. Multi-level numbered list

                    A multi-level list is used to display list items at different levels with different indentations. The markup for a multi-level numbered list would be as follows:

                    1. paragraph
                    2. paragraph
                      1. paragraph
                      2. paragraph
                      3. paragraph
                        1. paragraph
                        2. paragraph
                        3. paragraph
                      4. paragraph
                    3. paragraph
                    4. paragraph

                    This default markup will create a new numbering for each nested list, starting with one. To create nested numbering, you need to use the following properties:
                    counter-reset resets one or more counters by specifying the reset value;
                    counter-increment specifies the increment value of the counter, i.e. in what increments each subsequent item will be numbered;
                    content - generated content, in this case it is responsible for displaying the number before each list item.

                    Ol ( /* remove the standard numbering */ list-style: none; /* Identify the counter and give it the name li. The counter value is not specified - by default it is 0 */ counter-reset: li; ) li:before ( /* We define the element that will be numbered - li. The before pseudo-element indicates that the content inserted using the content property will be placed before the list items. The value of the counter increment is set here (default is 1 */ counter-increment: li /). * The content property displays the number of the list item. counters() means that the generated text represents the values ​​of all counters with that name. A period in quotes adds a separating period between numbers, and a period with a space is added before the content of each list item */ content: counters(li,".") "." )
                    Rice. 5. Multi-level numbered list



2024 wisemotors.ru. How does this work. Iron. Mining. Cryptocurrency.