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

Comparative Analysis of IN and Exists in MySQL Statements

Background Recently, when writing SQL statements,...

Introduction to 10 Hooks in React

Table of contents What is ReactHook? React curren...

MySQL parameter related concepts and query change methods

Preface: In some previous articles, we often see ...

A brief analysis of the difference between FIND_IN_SET() and IN in MySQL

I used the Mysql FIND_IN_SET function in a projec...

Master the CSS property display:flow-root declaration in one article

byzhangxinxu from https://www.zhangxinxu.com/word...

Docker container operation instructions summary and detailed explanation

1. Create and run a container docker run -it --rm...

Three examples of nodejs methods to obtain form data

Preface Nodejs is a server-side language. During ...

How to use DCL to manage users and control permissions in MySQL

DCL (Data Control Language): Data control languag...

MySQL 8.0.13 installation and configuration method graphic tutorial under Windows 64 bit

This article shares the installation and configur...

Front-end state management (Part 1)

Table of contents 1. What is front-end state mana...

js to implement verification code interference (dynamic)

This article example shares the specific code of ...

Will mysql's in invalidate the index?

Will mysql's IN invalidate the index? Won'...

A detailed introduction to deploying RabbitMQ environment with docker

Prerequisites: Docker is already installed 1. Fin...

Vue uses mixins to optimize components

Table of contents Mixins implementation Hook func...

Detailed explanation of query examples within subqueries in MySql

Where is my hometown when I look northwest? How m...