Style list with CSS
Lists are a very important part of many web pages.
CSS can use multiple properties to set styles.
list-style-typeUsed to set the predefined tags to be used in the list:
li {
list-style-type: square;
}We have many possible values, you can see herehttps://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-typeAn example of appearance is attached. Some of the most popular aredisc,circle,squarewithnone.
list-style-imageWhen the predefined mark is not suitable, it is used to use a custom image as a mark:
li {
list-style-image: url(list-image.png);
}list-style-positionLet you add tagsoutside(Default) orinsideContent in the content of the list, in the page flow rather than outside the page flow
li {
list-style-position: inside;
}Thislist-styleShorthand attributes allow us to specify all these attributes on the same line:
li {
list-style: url(list-image.png) inside;
}Download mine for freeCSS Manual
More CSS tutorials:
- Flexbox guide
- CSS grid tutorial
- CSS variables (custom attributes)
- Introduction to PostCSS
- CSS guarantees metallicity
- How to center an element using CSS
- CSS system fonts
- How to print HTML with styles
- Getting started with CSS transition
- CSS animation tutorial
- Introduction to CSS
- CSS guide
- How to set up Tailwind with PurgeCSS and PostCSS
- Tail wind cheat sheet
- How to continuously rotate an image using CSS
- Use CSS to make the table responsive
- How to debug CSS by halving
- CSS selector
- CSS cascade
- CSS specificity
- CSS attribute selector
- CSS colors
- CSS Unit
- CSS url()
- CSS typography
- CSS Box model
- CSS position properties
- CSS media queries and responsive design
- CSS function query
- CSS conversion
- How to style a list with CSS
- CSS vendor prefix
- CSS inheritance
- CSS pseudo-classes
- CSS pseudo elements
- Style HTML tables with CSS
- CSS Display property
- CSS calc() function
- CSS border
- Use @import to import CSS files
- CSS error handling
- CSS filter
- CSS Box size
- CSS background
- CSS comments
- CSS fonts
- CSS padding
- CSS float property and clear
- CSS normalization
- CSS z-index property
- How to disable text selection using CSS
- How to use CSS to place items at the bottom of their container
- How to invert colors using CSS
- Responsive front tags in CSS
- Responsive YouTube video embedding
- What is a good CSS breakpoint value for responsive design?
- How to align the center in Flexbox