Lists in HTML and the handling of list styles

This is the 27th day of my participation in the August Genwen Challenge.More challenges in August

Hello everyone, I am a bowl of zhou, not you think of the “bowl of porridge”, is a front-end do not want to be drunk 👨🏻💻, if I write an article lucky can get your favor, very lucky ~

This is the 25th article in the “Learn from the Front End” series on lists in HTML and the Handling of list styles.

This series of articles in the nuggets first, preparation is not easy to reprint please obtain permission

Writing in the front

In this article we are going to look at lists in HTML and style manipulation of lists in CSS, as follows:

What is a list element

When writing documents, lists are often used to present a series of parallel contents. HTML pages also provide list elements to accomplish similar functions, which can be divided into the following 3 lists:

• An ordered list

• Don’t need to list

• Describe the list

The following figure shows the default for ordered and unordered lists:

As shown above, the left side has the effect of an unordered list and the right side has the effect of an ordered list.

An ordered list

HTML uses < OL > elements to represent ordered lists, and by default uses numbers as list numbers. The

The following example code shows the use of ordered lists in HTML:

<ol>
    <li>TuShan</li>
    <li>beishan</li>
    <li>In western regions in the west</li>
</ol>
Copy the code

The code run result is as follows:

< OL > elements default to numbers and can be modified with the Type attribute, which has values of five types, as shown below:

• “A” : indicates a lowercase letter number

• “A” : indicates the uppercase letter number

• “I” : indicates a lower-case Roman numeral number

• “I” : indicates the uppercase Roman numeral number

• “1” : the default value, indicating the number

The value of the type attribute applies to the entire ordered list by default.

In addition to the type attribute, there are two new attributes in HTML5, as shown below:

• Reversed: Boolean values. Set the list in reverse order. For this property, you only need to define the property name, not the property value.

  The following code shows the use of the reversed attribute:

  <ol reversed>
      <li>TuShan</li>
      <li>beishan</li>
      <li>In western regions in the west</li>
  </ol>
  Copy the code

  The code run result is as follows:

  

• Start: Integer value that sets the start of the list sequence number. The default value is 1.

The HTML

• Value: integer value, set the sequence number of the current list items in the ordered list. The following items in the ordered list are sorted in sequence.

• Type: Sets the numeric type of the ordered list. This attribute value overrides the type attribute value of the < OL > element.

Unordered list

The

element in HTML represents unordered lists, and by default disc is used as the list number. The
• element represents the list item, defined in an unordered list.

The following example code shows the use of unordered lists in HTML:

<ul>
    <li>TuShan</li>
    <li>beishan</li>
    <li>In western regions in the west</li>
</ul>
Copy the code

The code run result is as follows:

The

element uses disc as its default number and can be modified through the Type attribute, which has values of three types, as follows:

• Disc: The default value, representing a solid circle

• Circle: indicates a hollow circle

• Square: indicates a solid square

Note that the type attribute of the

element is deprecated and can be modified with CSS, and that the value attribute or type attribute of the
• element is for ordered lists, not unordered lists.

Nested list

List nesting is made by defining another ordered or unordered list as a child list within an ordered or unordered list. There are four cases of list nesting:

• Ordered list Nested Ordered list: Parent and child lists are numbered by default.

• Ordered lists Nested unordered lists: The parent ordered list defaults to a number and the child unordered list defaults to a circle.

• Unordered lists Nested unordered lists: Parent unordered lists default to disc and child unordered lists default to Circle.

• Unordered lists nested ordered lists: The parent unordered list defaults to disc and the child ordered list defaults to number.

Describe the list

HTML provides < DL > elements called description lists, also known as definition lists. This element is a list of term definitions and descriptions, where term definitions use the

The following example code shows the basic usage of a description list:

<dl>
    <dt>TuShan</dt>
        <dd>Red red</dd>
        <dd>susu</dd>
        <dd>Rong rong</dd>
    <dt>In western regions in the west</dt>
        <dd>The Vatican yunfei</dd>
        <dd>LiXueYang</dd>
</dl>
Copy the code

The code run result is as follows:

A list of the style

List styles are primarily styles provided by CSS for list elements in HTML pages. Specifically, this is the list-style property and related property content in the CSS.

This property is a shorthand property that can be broken down into the following three common properties:

• The list – style – the type attribute

• The list – style – the image attributes

• The list – style – position attribute

Bullet style

The list-style type attribute in the CSS is used to set the bullet (number/sequence number) of the list elements. This attribute can be applied to < OL > elements,

elements, and < Li > elements.

The value of the list-style attribute can be divided into two types of values:

• None: indicates that no bullet is displayed.

• Keyword: bulleted keyword that represents a specific meaning.

If the list-style-type attribute is a keyword, there are two types of ordered list and unordered list:

• Ordered list:

  • Decimal: Decimal Arabic number, starting with 1

  • Decimal-leading-zero: decimal Arabic digits, such as 01, 02, 03… .

  • Lower-alpha: lowercase letters

  • Upper-alpha: uppercase English letter

  • Lower-roman: lower-case Roman numeral

  • Upper-roman: uppercase Roman numeral

• Unordered list:

  • Disc: Solid dots

  • Circle: Hollow dot

  • -Penny: A square

The following example code shows the use of the list-style type attribute:

ul {
    list-style-type: square;
}

ol {
    list-style-type: lower-roman;
}
Copy the code

The code run result is as follows:

Bullet image

The list-style-image attribute in the CSS is used to set an image as the bullet of a list element. The value of this attribute can be divided into the following two types of values:

• None: No image as bullet. In this case, the value of the list-style type attribute is used instead.

• The URL () function: sets the path to the imported image.

The following example code shows the use of the list-style image attribute:

ul {
    list-style-image: url('.. /image/img/icon.png');
}
Copy the code

The operation effect of the above sample code is shown below:

Bulleted location

The list-style position property in the CSS is used to set the bullet position of a list element. The value of this property can be divided into the following two types of values:

• Inside: This value indicates that the bullet is inside the text block and that the text is indented.

• Outside: This value indicates that the bullet is to the left of the text block.

The following example code shows the use of the list-style position attribute:

li {
    background-color: lightcoral;
}

.inside {
    list-style-position: inside;
}

.outside {
    list-style-position: outside;
}
Copy the code

The operation effect of the above sample code is shown below: