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

Common shell script commands and related knowledge under Linux

Table of contents 1. Some points to remember 1. V...

Detailed explanation of Truncate usage in MySQL

Preface: When we want to clear a table, we often ...

Detailed explanation of uniapp's global variable implementation

Preface This article summarizes some implementati...

How to represent various MOUSE shapes

<a href="http://" style="cursor...

Difference between MySQL update set and and

Table of contents Problem Description Cause Analy...

Some common advanced SQL statements in MySQL

MySQL Advanced SQL Statements use kgc; create tab...

How to solve the problem "Unknown column 'password" when resetting MySQL root password

When I turned on my MAC at night, I found that th...

Analyze the usage and principles of Vue's provide and inject

First, let's talk about why we use provide/in...

Solution to the "No such file or directory" prompt when executing executable files in Linux

Recently, when I was using the Linux operating sy...

Vue implements fuzzy query-Mysql database data

Table of contents 1. Demand 2. Implementation 3. ...

How to select all child elements and add styles to them in CSS

method: Take less in the actual project as an exa...

Detailed explanation of how Angular handles unexpected exception errors

Written in front No matter how well the code is w...

CSS3 uses var() and calc() functions to achieve animation effects

Preview knowledge points. Animation Frames Backgr...

Solution to the garbled problem of web pages when the encoding is set to utf-8

Recently, when I was writing web pages with PHP, I...

Detailed explanation of the actual process of master-slave synchronization of MySQL database

Table of contents Installation Environment Descri...