list-style-type : circle ;
}
ul.b {
list-style-type : square ;
}
ol.c {
list-style-type : upper-roman ;
}
ol.d {
list-style-type : lower-alpha ;
}
Use images to list items
The list-style-image
will use images to list each item in the list.
ul {
list-style-image : url('sqpurple.gif') ;
}
Character placement listed
The list-style-position
determines the location of the listed characters.
'list-style-position:
outside;'means that the character will be outside the list.The beginning of the line of items will align with each other vertically.
'list-style-position:
inside;'means that the character will be in the list.So, it will be part of the text and push the headline text into.
ul.a {
list-style-position : outside ;
}
ul.b {
list-style-position : inside ;
}
An example of a list is by setting the internal or external bullet character
Delete the default setting
The list-style-type: none
is used to delete bulleted characters. Note that the list also has default margin and padding. To remove, insert margin:0
and padding:0
and
ul {
list-style-type : none ;
margin : 0 ;
padding : 0 ;
}
The shortened feature of the list in CSS
The list-style
is used as a shortened feature, giving all the properties of the list in a declaration.
ul {
list-style : square inside url("sqpurple.gif") ;
}
When using the shortened feature, the order of values will be as follows:
list-style-type
(if list-style-image
is specified, the property value will display if for some reason the image cannot be displayed)list-style-position
(specifying the first line of the list will be inside or outside the content)list-style-image
(define image as the first line of the list)If one of the values is lost, the default value (if any) will replace it.
Style the list by color
You can add colors to make the list look more attractive.Anything added to the card good
all affect the entire list but additional features
ol {
background : #ff9999 ;
padding : 20px ;
}
ul {
background : #3399ff ;
padding : 20px ;
}
ol li {
background : #ffe5e5 ;
padding : 5px ;
margin-left : 35px ;
}
ul li {
background : #cce5ff ;
margin : 5px ;
}
Examples of adding colors to lists in CSS
Previous article: Path in CSS
The following article: Table in CSS