Home > Article > Web Front-end > How to set the style of li element with css
How to set the style of li element with css
- PHPzOriginal
- 2023-04-21 11:26:082899browse
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 format
CSS style formats are mainly divided into three types, namely inline styles, internal styles and external styles.
Inline style
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.
Internal style
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
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.
Set the style of the li element
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
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;
}
Color
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
Line height can be set using the line-height property.
li {
line-height: 1.5;
}
Border
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;
}
List style
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; /* 小写罗马数字 */
}
Summary
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!