How to set CSS list-style property, see the article enough to use

Original: CSS how to set the list-style property, see the article enough to use

List-style property #

In the HTMLmiddle there are 2kinds of lists, unordered lists and ordered lists, unordered lists in the work of the more commonly used, is the unordered list ultags and lilabels are combined into an unordered list called, what is an ordered list it? Is the oltag and lilabel called combined into an ordered list, a list of the basics on simple note, this chapter is mainly explained how to set the style to the list, if the list is not know what I recommended to the garden Friends W3school official website learning.
List-style common attributes There are four such: list-style-type, , list-style-position, list-style-image, list-stylehere is a list of simple instructions common attribute names only, describes the specific use or each attribute value, will be specifically described below, a love of learning park Friends do not Oh worried.

list-style-type property #

list-style-typeRole attributes: type list is set up in front of a bullet.
list-style-typeProperty Value Description Table.

Property Value	description
none	The list in front of the bullet removed.
disc	The preceding list bullet set as filled circles.
circle	The preceding list bullet set to open circle.
square	The preceding list bullet to solid small squares.

Attribute value of none use #

Let us enter the list of list-style-typeattributes is noneto practice, practice content such as: the use of classproperty value .boxlist in front of the bullet removed.
In practice, we list the list-style-typeproperty value nonebefore the previous bulleted list to see what is to let beginners have a visual impression.
Block

 
 
  
  Copy
  
 
 
<!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-style-type属性值为none实践</title>
</head>
  
<body>
    <ul>
        <li>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
    </ul>
</body>
</html>

Results Figure

Now love of learning park faithful know what is in front of the bulleted list, and then we enter the list of list-style-typeproperty value nonepractice slightly.
Block

 
 
  
  Copy
  
 
 
<!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-style-type属性值为none实践</title>
    <style>
        .box{
            list-style-type: none;
        }
    </style>
</head>
  
<body>
    <ul class="box">
        <li>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
    </ul>
</body>
</html>

Results Figure

Since the description here to see the park has mastered Friends, a list of list-style-typeattribute values noneused Congratulations Congratulations.

Disc usage attribute value #

In the case described here a list of list-style-typeproperty value disc, the list of list-style-typeproperty values is the default disc, if a careful garden friends have discovered, there are ready-made Liezi here is not too much introduced above, this property is discskipped Kazakhstan .

Use attribute value circle #

Let us enter the list of list-style-typeattributes is circleto practice, practice content such as: the list in front of the bullet is set to open circle.
Block

 
 
  
  
  Copy
  
 
 
<!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-style-type属性值为circle实践</title>
    <style>
        .box{
            list-style-type: circle;
        }
    </style>
</head>
  
<body>
    <ul class="box">
        <li>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
    </ul>
</body>
</html>

Results Figure

Use square attribute value #

Let us enter the list of list-style-typeattributes is squareto practice, practice content such as: bulleted list earlier set solid square.
Block

 
 
  
  
  Copy
  
 
 
<!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-style-type属性值为square实践</title>
    <style>
        .box{
            list-style-type: square;
        }
    </style>
</head>
  
<body>
    <ul class="box">
        <li>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
    </ul>
</body>
</html>

Results Figure

list-style-position property #

list-style-positionRole attribute: setting list bullet front position, list-style-positionproperty has two attribute values, respectively outside, , insidesee the following detailed description attribute value specification table.

list-style-position attribute specification table #

Property Value	description
outside	The list set out in front of the bullet.
inside	The list is set in front of the bullet in it.

Attribute value outside use #

In practice, list-style-positionthe property value outsidebefore, we take a look at the default position in front of the bulleted list in which the author in order to allow beginners to have a visual impression, the author HTMLpage ultag lilabel set some style.
ulThe label style :: widthwidth is set to 300pxa pixel, heighta height of 150pxa pixel, borderthe border of ( 1pxthe pixel, the display is a solid line, the border color is blue) pattern.
ulTag lilabel as set style: widthwidth is set to 280pxa pixel, heighta height of 30pxa pixel line-heightrow height of 30pxa pixel, borderthe border of ( 1pxthe pixel, the display is a solid line, the border color is red), style.
If you have not mastered Park Friends of borderknowledge borders, a love of learning to write without fear of Friends of the Park after borderthe border articles, if want to know the borderpark borders the Friends of knowledge can go W3school official website for learning.
Block

 
 
  
  Copy
  
 
 
<!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>属性值为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>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
    </ul>
   
</body>
</html>

Results Figure

Now it should be very clear to see the sign in front of a list of items in the default ullabel and libetween the label position, and now we know the default location in front of the bulleted list, that we list-style-positionattribute value is outsidepractice, practice content: The HTMLpage the previous list bullet to the outside.
Block

 
 
  
  
  Copy
  
 
 
<!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>属性值为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>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
    </ul>
   
</body>
</html>

Results Figure

注意：为什么给列表设置了list-style-position属性值为outside，运行结果没有发生任何变化呢，因为列表前面的项目符号默认就在外面的位置，列表前面的项目符号外面的位置就是ul标签和li标签之间的位置。

属性值为inside使用方式#

通过介绍list-style-position属性值为outside，大家已经知道了列表前面项目符号外边的位置了，接下来我们将列表前面项目符号设置在里面咯。
让我们进入list-style-position属性值为inside实践，将列表前面项目符号位置设置在里面。
代码块

 
 
  
  Copy
  
 
 
<!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>属性值为inside使用方式</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>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
    </ul>
   
</body>
</html>

结果图

注意：list-style-position属性值为inside作用就是将列表前面项目符号位置设置在li标签中，这就是里面的位置。

list-style-image属性#

list-style-image属性作用：将列表前面项目符号设置为一张图片。

list-style-image属性说明表#

属性值名称	描述
url	设置列表前面项目符号的图片的路径

让我们进入list-style-image属性的实践，实践内容将列表前面项目符号更换一张图片。
代码块

 
 
  
  Copy
  
 
 
<!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-style-image属性方式</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>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
    </ul>
   
</body>
</html>

结果图

注意：图片路径一定要写在url(./img/001.png);括号当中，不然不会被渲染的，图片路径可以是相对路径也可以绝对路径。

list-style属性#

list-style属性是（list-style-type属性、list-style-position属性、list-style-image属性）的一个简写属性，它集成了（list-style-type属性、list-style-position属性、list-style-image属性）的功能。
让我们进入 list-style属性实践，既然看到了这里想必园友都已经掌握了本章的内容了。
代码块

 
 
  
  Copy
  
 
 
<!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-style属性方式</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>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
    </ul>
   
</body>
</html>

结果图

注意：list-style属性值可以也1个或2个3个，顺序没有要求，若有不明白的园友可以做个实例看看就明白了，学习就要多尝试不要偷懒呦。

How to set CSS list-style property, see the article enough to use

List-style property #

list-style-type property #

Attribute value of none use #

Disc usage attribute value #

Use attribute value circle #

Use square attribute value #

list-style-position property #

list-style-position attribute specification table #

Attribute value outside use #

属性值为inside使用方式#

list-style-image属性#

list-style-image属性说明表#

list-style属性#

Guess you like