How to set list style properties in CSS

Time:2020-10-8

List style properties

  • InHTMLThere are2In work, unordered list is more commonly used, and unordered list isulLabels andliTag combination is called unordered list, so what is sequential list? namelyolLabels andliThe tag combination is called a sequential list. The basic knowledge of the list is briefly explained. This chapter mainly describes how to set a style for the list. If there are garden friends who don’t understand what a list is, I suggest that you go to the official website of w3school to learn.
  • There are four common attributes of list style, such as:list-style-typelist-style-positionlist-style-imagelist-styleHere is a brief description of the commonly used attribute names in the list. The specific use or the introduction of each attribute value will be explained in detail below. Those who love learning need not worry.

List style type attribute

  • The list style type attribute is used to set the type of the bullet in front of the list.
  • List style type attribute value description table.

 

   

Property value describe
none Remove the bullet before the list.
disc Sets the bullet in front of the list to a solid circle.
circle Sets the bullet in front of the list to a hollow circle.
square Sets the bullet in front of the list to a small filled square.

The attribute value is none

  • Let’s go to the listlist-style-typeProperty value isnonePractice, practice content, such as: useclassProperty value is.boxRemove the bullet before the list.
  • We are practicing thelist-style-typeProperty value isnoneLet’s take a look at the bullet in front of the list to give beginners an intuitive impression.

Code block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    The value of the list style type attribute of < title > list is none practice < / Title >
</head>
  
<body>
    <ul>
        <li>Success is not to defeat others, but to change yourself. </li>
        <li>Success is not to defeat others, but to change yourself. </li>
        <li>Success is not to defeat others, but to change yourself. </li>
    </ul>
</body>
</html>

Result chart

Now that the studious garden friends know what the bullet in front of the list is, we will enter the listlist-style-typeProperty value isnonePractice.

Code block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    The value of the list style type attribute of < title > list is none practice < / Title >
    <style>
        .box{
            list-style-type: none;
        }
    </style>
</head>
  
<body>
    <ul class="box">
        <li>Success is not to defeat others, but to change yourself. </li>
        <li>Success is not to defeat others, but to change yourself. </li>
        <li>Success is not to defeat others, but to change yourself. </li>
    </ul>
</body>
</html>

Result chart

Now that you can see it, it shows that the garden friends have mastered itlist-style-typeProperty value isnoneUse, Congratulations, congratulations.

The attribute value is disc usage

The following list oflist-style-typeProperty value isdisc, list oflist-style-typeThe default property value isdiscIf you have already found out that there are ready-made columns above, it is not enough to introduce them here. The value of this property isdiscI’ll skip it.

The attribute value is circle usage

Let’s go to the listlist-style-typeProperty value iscirclePractice: set the bullet in front of the list to a hollow circle.

Code block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    The value of the list style type attribute of < title > list is circle practice < / Title >
    <style>
        .box{
            list-style-type: circle;
        }
    </style>
</head>
  
<body>
    <ul class="box">
        <li>Success is not to defeat others, but to change yourself. </li>
        <li>Success is not to defeat others, but to change yourself. </li>
        <li>Success is not to defeat others, but to change yourself. </li>
    </ul>
</body>
</html>

Result chart

The attribute value is square usage

Let’s go to the listlist-style-typeProperty value issquarePractice: set the bullet in front of the list to a solid box.

Code block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    The value of the list style type attribute of < title > list is square practice < / Title >
    <style>
        .box{
            list-style-type: square;
        }
    </style>
</head>
  
<body>
    <ul class="box">
        <li>Success is not to defeat others, but to change yourself. </li>
        <li>Success is not to defeat others, but to change yourself. </li>
        <li>Success is not to defeat others, but to change yourself. </li>
    </ul>
</body>
</html>

Result chart

List style position property

list-style-positionAttribute function: set the position of the bullet in front of the list,list-style-positionProperty has two property values, which areoutsideinsideFor details, see the following table of attribute values.

List style position property value description table

 

   

Property value describe
outside Set the front bullet of the list outside.
inside Set the preceding bullet in the list.

The attribute value is outside usage

  • In practicelist-style-positionProperty value isoutsideBefore, let’s look at the default position of the bullet in the front of the list. In order to give beginners an intuitive impression, the author willHTMLOn the pageullabelliThe label sets some styles.
  •  ulLabel styles such as:widthWidth set to300pxPixelsheightThe height is150pxPixelsborderThe border is(1pxPixel, display is solid line, border color is blue), style.
  • ulIn the labelliLabel setting styles are as follows:widthWidth set to280pxPixelsheightThe height is30pxpixelline-heightRow height is30pxPixelsborderThe border is(1pxPixel, display is solid line, border color is red), style.
  • If you don’t knowborderKnowledge of the border, love to learn garden friends do not have to worry about writing laterborderBorders of the article, if you want to knowborderYou can go to the official website of w3school for learning.

Code block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    < title > attribute value is outside usage
    <style>
        ul {
            width: 300px;
            height: 150px;
            border: 1px solid #00F;
        }
         ul li {
          
            width: 280px;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
        }
 
    </style>
</head>
  
<body>
    <ul>
        <li>Success is not to defeat others, but to change yourself. </li>
        <li>Success is not to defeat others, but to change yourself. </li>
        <li>Success is not to defeat others, but to change yourself. </li>
    </ul>
   
</body>
</html>

Result chart

Now you should clearly see that the symbols of the items in front of the list are in theulLabels andliNow that we know the default position of the bullet in front of the list, let’s do itlist-style-positionProperty value isoutsidePractice, practice content: willHTMLThe bullet in front of the list in the page is set to outside.

Code block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    < title > attribute value is outside usage
    <style>
        ul {
            width: 300px;
            height: 150px;
            border: 1px solid #00F;
        }
         ul li {
          
            width: 280px;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
            list-style-position: outside;
        }
 
    </style>
</head>
  
<body>
    <ul>
        <li>Success is not to defeat others, but to change yourself. </li>
        <li>Success is not to defeat others, but to change yourself. </li>
        <li>Success is not to defeat others, but to change yourself. </li>
    </ul>
   
</body>
</html>

Result chart

Note: why is the list setlist-style-positionProperty value isoutsideThe running result has not changed, because the bullet in front of the list is outside by default, and the position outside the bullet in front of the list isulLabels andliPosition between labels.

The attribute value is inside usage

  1. Through the introductionlist-style-positionProperty value isoutsideNow that you know the location of the bullet outside the list, let’s set the bullet in the front of the list.
  2. Let’s go inlist-style-positionProperty value isinsidePractice, set the position of the bullet in the front of the list.

Code block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    < title > attribute value is inside usage < / Title >
    <style>
        ul {
            width: 300px;
            height: 150px;
            border: 1px solid #00F;
        }
         ul li {
          
            width: 280px;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
            list-style-position: inside;
        }
 
    </style>
</head>
  
<body>
    <ul>
        <li>Success is not to defeat others, but to change yourself. </li>
        <li>Success is not to defeat others, but to change yourself. </li>
        <li>Success is not to defeat others, but to change yourself. </li>
    </ul>
   
</body>
</html>

Result chart

be careful:list-style-positionProperty value isinsideThe function is to set the position of the bullet in front of the list toliIn the label, that’s where it’s inside.

List style image property

list-style-imageAttribute function: set the bullet in front of the list to a picture.

 List style image attribute description table

 

   

Property value name describe
url Sets the path to the picture with the bullet in front of the list

Let’s go inlist-style-imageProperties of the practice content will be the list before the bullet replaced by a picture.

Code block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    < title > using the list style image attribute mode
    <style>
        ul {
            width: 300px;
            height: 150px;
            border: 1px solid #00F;
        }
         ul li {
          
            width: 280px;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
            list-style-image: url(./img/001.png);
        }
 
    </style>
</head>
  
<body>
    <ul>
        <li>Success is not to defeat others, but to change yourself. </li>
        <li>Success is not to defeat others, but to change yourself. </li>
        <li>Success is not to defeat others, but to change yourself. </li>
    </ul>
   
</body>
</html>

Result chart

Note: the image path must be written in theurl(./img/001.png);In brackets, otherwise it will not be rendered. The image path can be relative path or absolute path.

List style property

list-styleProperty is(list-style-typePropertieslist-style-positionPropertieslist-style-imageAttribute), which integrates the(list-style-typePropertieslist-style-positionPropertieslist-style-imageProperty).

Let’s go inlist-styleAttribute practice, since you see here, you must have mastered the content of this chapter.

Code block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    < title > use the list style attribute mode < / Title > to
    <style>
        ul {
            width: 300px;
            height: 150px;
            border: 1px solid #00F;
        }
         ul li {
          
            width: 290px;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
            list-style: none inside  url(./img/001.png) ;
        }
 
    </style>
</head>
  
<body>
    <ul>
        <li>Success is not to defeat others, but to change yourself. </li>
        <li>Success is not to defeat others, but to change yourself. </li>
        <li>Success is not to defeat others, but to change yourself. </li>
    </ul>
   
</body>
</html>

Result chart

be careful:list-styleProperty values can also be1Or2individual3There are no requirements for the order. If you don’t understand, you can make an example to see. You should try more and don’t be lazy.

The above is the whole content of this article, I hope to help you in your study, and I hope you can support developeppaer more.