How to set list style attributes in CSS (just read this article)

How to set list style attributes in CSS (just read this article)

List style properties

  • There are 2 types of lists in HTML , unordered lists and ordered lists. Unordered lists are more commonly used in work. An unordered list is a combination of ul tag and the li tag. So what is an ordered list? The combination of the ol tag and the li tag is called an ordered list. The basic knowledge of the list is briefly explained. This chapter mainly explains how to set the style of the list. If there are friends who don’t know what a list is, I suggest you go to the W3school official website to learn.
  • There are four commonly used list style attributes: list-style-type , list-style-position , list-style-image , and list-style . Here we will simply explain the commonly used attribute names of the list. The specific use or introduction of each attribute value will be described in detail below. Friends who love learning don’t need to worry.

list-style-type attribute

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

Property Value describe
none Remove the bullet point from the beginning of the list.
disc Sets the list front bullet to a solid circle.
circle Sets the list header bullet to a hollow circle.
square Sets the bullet point at the beginning of the list to a solid square.

The attribute value is none.

  • Let's move on to list-style-type attribute value of none . The practice content is as follows: Use class attribute value of .box to remove the bullet point in front of the list.
  • Before we practice setting list-style-type attribute value to none , let’s take a look at what the bullet in front of the list is so that beginners can have an intuitive impression.

Code Blocks

<!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>List list-style-type attribute value is none practice</title>
</head>
  
<body>
    <ul>
        <li>Success is not about defeating others, but about changing yourself. </li>
        <li>Success is not about defeating others, but about changing yourself. </li>
        <li>Success is not about defeating others, but about changing yourself. </li>
    </ul>
</body>
</html>

Result Plot

Now that you know what a bullet point is, let’s start by setting list-style-type attribute value none .

Code Blocks

<!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>List list-style-type attribute value is none practice</title>
    <style>
        .box{
            list-style-type: none;
        }
    </style>
</head>
  
<body>
    <ul class="box">
        <li>Success is not about defeating others, but about changing yourself. </li>
        <li>Success is not about defeating others, but about changing yourself. </li>
        <li>Success is not about defeating others, but about changing yourself. </li>
    </ul>
</body>
</html>

Result Plot

Since you can see this, it means you have mastered it. list-style-type attribute value of the list is none . Congratulations.

The attribute value is disc usage

Here we explain that list-style-type attribute value of the list is disc . The default value of list-style-type attribute of the list is disc . If you are a careful gardener, you have already discovered it. There are ready-made examples above, so I will not introduce them in detail here. This attribute value is disc and will be skipped.

Usage of the attribute value circle

Let's enter the list's list-style-type attribute value as circle practice, the practice content is as follows: set the bullet point at the beginning of the list to a hollow circle.

Code Blocks

<!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>List's list-style-type attribute value is circle practice</title>
    <style>
        .box{
            list-style-type: circle;
        }
    </style>
</head>
  
<body>
    <ul class="box">
        <li>Success is not about defeating others, but about changing yourself. </li>
        <li>Success is not about defeating others, but about changing yourself. </li>
        <li>Success is not about defeating others, but about changing yourself. </li>
    </ul>
</body>
</html>

Result Plot

The attribute value is square.

Let's enter list-style-type attribute value of square practice, such as setting the bullet point at the beginning of the list to a solid square.

Code Blocks

<!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>The list-style-type attribute value of the list is square practice</title>
    <style>
        .box{
            list-style-type: square;
        }
    </style>
</head>
  
<body>
    <ul class="box">
        <li>Success is not about defeating others, but about changing yourself. </li>
        <li>Success is not about defeating others, but about changing yourself. </li>
        <li>Success is not about defeating others, but about changing yourself. </li>
    </ul>
</body>
</html>

Result Plot

list-style-position property

list-style-position attribute is used to set the position of the bullet in front of the list. list-style-position attribute has two attribute values, outside and inside . For specific descriptions, see the attribute value description table below.

list-style-position property value description table

Property Value describe
outside Sets the list front bullet point to the outside.
inside Set the list front bullet inside.

The attribute value is outside.

  • Before practicing list-style-position property value of outside , let's take a look at the default position of the bullet point in front of the list. In order to give beginners an intuitive impression, the author sets some styles for the ul tag and li tag in the HTML page.
  • ul tag style is as follows: width width is set to 300px pixels, height height is 150px pixels, border is ( 1px pixels, displayed as a solid line, the border color is blue), style.
  • The li tag in the ul tag sets the style as follows: width width is set to 280px pixels, height is 30px pixels, line-height height is 30px pixels, border is ( 1px pixels, displayed as a solid line, the border color is red), and the style.
  • If you don’t have the knowledge about border , you don’t have to worry about writing articles about border in the future if you love to learn. If you want to learn about border , you can go to the W3school official website to study.

Code Blocks

<!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>Usage of attribute value is outside</title>
    <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 about defeating others, but about changing yourself. </li>
        <li>Success is not about defeating others, but about changing yourself. </li>
        <li>Success is not about defeating others, but about changing yourself. </li>
    </ul>
   
</body>
</html>

Result Plot

Now you should clearly see that the bullet point in front of the list is positioned between ul tag and li tag by default. Now that we know the default position of the bullet point in front of the list, let's practice list-style-position attribute value to outside . Practice content: Set the bullet point in front of the list in HTML page to outside.

Code Blocks

<!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>Usage of attribute value is outside</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: outside;
        }
 
    </style>
</head>
  
<body>
    <ul>
        <li>Success is not about defeating others, but about changing yourself. </li>
        <li>Success is not about defeating others, but about changing yourself. </li>
        <li>Success is not about defeating others, but about changing yourself. </li>
    </ul>
   
</body>
</html>

Result Plot

Note: Why did the running result not change after setting list-style-position property value to outside ? Because the bullet point in front of the list is outside by default, and the position outside the bullet point in front of the list is between ul tag and li tag.

The attribute value is inside.

  1. By introducing list-style-position property value as outside , everyone already knows the position outside the bullet point in front of the list. Next, we will set the bullet point in front of the list to inside.
  2. Let's enter list-style-position property value to inside practice and set the position of the bullet point at the beginning of the list to inside.

Code Blocks

<!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 about defeating others, but about changing yourself. </li>
        <li>Success is not about defeating others, but about changing yourself. </li>
        <li>Success is not about defeating others, but about changing yourself. </li>
    </ul>
   
</body>
</html>

Result Plot

Note: list-style-position attribute value is inside , which sets the position of the bullet point in front of the list to the li tag, which is the inside position.

list-style-image Property

The function of list-style-image attribute is to set the bullet point in front of the list to a picture.

list-style-image property description table

Attribute Value Name describe
url Sets the path to the image of the bullet at the beginning of the list

Let's get into the practice of list-style-image attribute. The practice content is to replace the bullet point at the beginning of the list with an image.

Code Blocks

<!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 list-style-image attribute</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-image: url(./img/001.png);
        }
 
    </style>
</head>
  
<body>
    <ul>
        <li>Success is not about defeating others, but about changing yourself. </li>
        <li>Success is not about defeating others, but about changing yourself. </li>
        <li>Success is not about defeating others, but about changing yourself. </li>
    </ul>
   
</body>
</html>

Result Plot

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

list-style attribute

list-style attribute is a shorthand attribute of ( list-style-type attribute, list-style-position attribute, list-style-image attribute), which integrates the functions of ( list-style-type attribute, list-style-position attribute, list-style-image attribute).

Let's get into list-style attribute practice. Now that you have seen this, I believe you have already mastered the content of this chapter.

Code Blocks

<!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 list-style attribute</title>
    <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 about defeating others, but about changing yourself. </li>
        <li>Success is not about defeating others, but about changing yourself. </li>
        <li>Success is not about defeating others, but about changing yourself. </li>
    </ul>
   
</body>
</html>

Result Plot

Note: list-style attribute value can be 1 , 2 , or 3 There is no requirement for the order. If you don’t understand, you can try an example. To learn, you need to try more and don’t be lazy.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  How to rename the table in MySQL and what to pay attention to

>>:  Inspiring Design Examples of Glossy and Shiny Website Design

Recommend

About uniApp editor WeChat sliding problem

The uniapp applet will have a similar drop-down p...

Introduction to the use of select optgroup tag in html

Occasionally, I need to group select contents. In ...

Example of using UserMap in IMG

usemap is an attribute of the <img> tag, use...

Implementation of MYSQL (telephone number, ID card) data desensitization

1. Data desensitization explanation In daily deve...

Simple implementation of handheld barrage function + text shaking special effects code based on JS

There was a shaking barrage on TikTok a while ago...

Analyze the problem of pulling down the Oracle 11g image configuration in Docker

1. Pull the image docker pull registry.cn-hangzho...

How to monitor Windows performance on Zabbix

Background Information I've been rereading so...

Detailed explanation of identifying files with the same content on Linux

Preface Sometimes file copies amount to a huge wa...

Detailed process of configuring NIS in Centos7

Table of contents principle Network environment p...

Detailed steps to install the specified version of docker (1.12.6) using rpm

1. Reasons If the system is Centos7.3, the Docker...

Detailed explanation of prototypes and prototype chains in JavaScript

Table of contents Prototype chain diagram Essenti...

React Router 5.1.0 uses useHistory to implement page jump navigation

Table of contents 1. Use the withRouter component...

How to add abort function to promise in JS

Table of contents Overview Promise Race Method Re...

Detailed explanation of TIMESTAMPDIFF case in MySQL

1. Syntax TIMESTAMPDIFF(unit,begin,end); Returns ...

Steps for IDEA to integrate Docker to achieve remote deployment

1. Enable remote access to the docker server Log ...