How to set the style of li element with css-Front-end Q&A-php.cn

How to set the style of li element with css

PHPz

Release： 2023-04-21 13:44:17

Original

2924 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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;
}

Copy after login

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;
}

Copy after login

Line height

Line height can be set using the line-height property.

li {
  line-height: 1.5;
}

Copy after login

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;
}

Copy after login

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; /* 实心圆 */
}

Copy after login

Ordered lists can use the list-style-type attribute to set different number styles.

ol {
  list-style-type: lower-roman; /* 小写罗马数字 */
}

Copy after login

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!