Home >Web Front-end >Front-end Q&A >How to set the style of li element with css
CSS is one of the most commonly used style languages in web design. For writing website code, it is very important to be proficient in CSS.
In web design, we often use lists to present information, and the ul and li elements are tags used to create unordered lists and ordered lists. When creating a list, style setting is also very important. Let us learn how to set the style of the li element.
CSS style formats are mainly divided into three types, namely inline styles, internal styles and external styles.
Inline style is to add CSS styles in the style attribute of the HTML tag. For example:
<ul> <li style="color: red;">列表项1</li> <li style="color: blue;">列表项2</li> <li style="color: green;">列表项3</li> </ul>
Although code like this can directly set the style of the li element, it is rarely used in actual development and is not conducive to code maintenance and style reuse.
The internal style is to add the <style>
tag in the <head>
tag at the head of the HTML file, and then add Add style code to it. For example:
<head> <style> li { color: red; } </style> </head> <body> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> </body>
This method can be used within the same page. When other pages require the same style, the same code needs to be written again.
External styles are written in a separate CSS file and referenced into the HTML file. For example:
<head> <link rel="stylesheet" href="style.css"> </head> <body> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> </body>
This method is the most commonly used and has the characteristics of concise code, easy maintenance, and unified style.
We can perform various layout and style settings on the li element, such as font, font size, color, line height, background color, border, etc. Let’s go into details below introduce.
Font and font size are common style settings, which can be set through the font-family
and font-size
properties.
li { font-family: Arial, sans-serif; font-size: 16px; }
The color can be set using the color
attribute or the background-color
attribute to set the background color.
li { color: red; background-color: #ccc; }
Line height can be set using the line-height
property.
li { line-height: 1.5; }
The border can be set using the border
attribute, which includes the width, style and color of the border, or can be used alone border-width
, border-style
and border-color
properties to set.
li { border: 1px solid black; }
The styles of ordered lists and unordered lists can also be set separately. For example, an unordered list can use the list-style-type
attribute to set specific markup styles.
ul { list-style-type: disc; /* 实心圆 */ }
Ordered lists can use the list-style-type
attribute to set different number styles.
ol { list-style-type: lower-roman; /* 小写罗马数字 */ }
Through the introduction of this article, we have learned how to use CSS to set the style of li elements, including font, font size, color, line height, background color, border and list style, etc. , and also explains the three ways of setting CSS styles: inline styles, internal styles, and external styles.
Creating a unique style can make your website more attractive and personalized, but you also need to pay attention to the consistency and compatibility of the style. In actual development, we need to use CSS styles reasonably according to the needs of the page and the requirements of the designer.
The above is the detailed content of How to set the style of li element with css. For more information, please follow other related articles on the PHP Chinese website!