CSS list styles

CSS list style

CSS list

CSS list properties function as follows:

Set different list items to be marked as ordered lists

Set different list items marked as unordered list

Set list items marked as images

List

In HTML, there are Two types of lists:

Unordered list - list items are marked with special graphics (such as small black dots, small boxes, etc.)

Ordered list - list items are marked with numbers or The letters

Using CSS, the list can be further styled and images can be used as list item markers.

1. List symbols

List symbols refer to the symbols displayed in front of each list item.

The basic format is as follows:

list-style-type: parameter

Parameter value range:

·disc: round

·circle: hollow circle

·square: square

·decimal: decimal number

·lower-roman: lowercase Roman numeral

·upper- roman: uppercase Roman numerals

·lower-alpha: lowercase Greek letters

·upper-alpha: uppercase Greek letters

·none: no symbol display

disc in the parameter is the default option.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">  
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>无序列表实例:</p>
<ul class="a">
  <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ul>
<ul class="b">
 <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
 <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ol>
<ol class="d">
  <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ol>
</body>
</html>

2. Graphic symbols

Graphic symbols mean that the bullets in the original list can be replaced by graphics.

The basic format is as follows:

list-style-image: URL

URL is the address of the graphic file used to replace the bullet, and you can use a relative address or an absolute address.

3． List position

List position describes where the list is displayed.

The basic format is as follows:

list-style-position: parameter

Parameter value range:

·inside: displayed inside the BOX model

·outside: Display outside the BOX model

A new concept appears here: the BOX model. BOX refers to a container that contains objects to which style rules are applied. The detailed introduction will be given later.

Images as list item markers

To specify an image as a list item marker, use the list style image attribute:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">  
<style>
ul 
{
list-style-image:url('../style/images/sqpurple.gif');
}
</style>
</head>
<body>
<ul>
  <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ul>
</body>
</html>

The above example works at all Display in browsers is not the same, IE and Opera display image tags a little higher than Firefox, Chrome and Safari.

If you want to place the same image logo in all browsers, you should use a browser compatibility solution. The process is as follows

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">  
<style>
ul
{
    list-style-type:none;
    padding:0px;
    margin:0px;
}
ul li
{
    background-image:url(../style/images/sqpurple.gif);
    background-repeat:no-repeat;
    background-position:0px 5px; 
    padding-left:14px;
}
</style>
</head>
<body>
<ul>
  <li>北京</li>
  <li>上海</li>
  <li>南京</li>
</ul>
</body>
</html>

Example explanation:

ul:

Set the list style type to no delete list item mark

Set padding and margin 0px (browser compatibility)

All li in ul:

Set images URL, and set it to be displayed only once (no duplication)

Position the image you need (0px left and 5px top and bottom)

Use the padding-left attribute to place the text in the list

List - abbreviated attribute

All list attributes can be specified in a single attribute. This is called an abbreviation attribute.

If using abbreviations the order of property values is:

list-style-type

list-style-position (see CSS property table below for instructions)

list-style-image

If one of the above values is missing and the rest are still in the specified order, it doesn't matter.

All CSS list properties

Properties Description

list-style Set all the attributes used for lists in a statement

This list-style-image set the image as a list item logo.

list-style-position Set the position of the list item mark in the list.

Series-Syle-Type Set the type of list item logo.

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ol.c {list-style-type:upper-roman;} ol.d {list-style-type:lower-alpha;} </style> </head> <body> <p>无序列表实例:</p> <ul class="a"> <li>北京</li> <li>上海</li> <li>南京</li> </ul> <ul class="b"> <li>北京</li> <li>上海</li> <li>南京</li> </ul> <p>有序列表实例:</p> <ol class="c"> <li>北京</li> <li>上海</li> <li>南京</li> </ol> <ol class="d"> <li>北京</li> <li>上海</li> <li>南京</li> </ol> </body> </html>

submit Reset Code

Automatic operation

CSS list styles

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]