css 是网页设计中最常用的样式语言之一，对于编写网站代码，熟练掌握 css 是非常重要的。
在网页设计中，我们经常会使用列表来呈现信息，而 ul 和 li 元素就是用来创建无序列表和有序列表的标签。在创建列表时，样式的设置同样也非常重要，下面就让我们来学习一下如何设置 li 元素的样式。
CSS 格式
CSS 的样式格式主要分为三种，分别是行内样式、内部样式和外部样式。
行内样式
行内样式就是在 HTML 标签的 style 属性中添加 CSS 样式。例如：
<ul> <li style="color: red;">列表项1</li> <li style="color: blue;">列表项2</li> <li style="color: green;">列表项3</li> </ul>
这样的代码虽然可以直接设置 li 元素的样式，但是在实际开发中使用较少，不利于代码维护和样式的复用。
立即学习“前端免费学习笔记（深入）”；
内部样式
内部样式是在 HTML 文件头部的 标签中添加 <style></style> 标签，然后在其中添加样式代码。例如：
<head>
<style>
li {
color: red;
}
</style>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>这种方式可以在同一页内使用，其他页面需要相同的样式时还需要重复写一遍相同的代码。
外部样式
外部样式是在一个独立的 CSS 文件中编写并引用到 HTML 文件中。例如：
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>这种方式是最常用的，具有代码简洁、易维护、样式统一等特点。
大小仅1兆左右 ，足够轻便的商城系统； 易部署，上传空间即可用，安全，稳定； 容易操作，登陆后台就可设置装饰网站； 并且使用异步技术处理网站数据，表现更具美感。 前台呈现页面，兼容主流浏览器，DIV+CSS页面设计； 如果您有一定的网页设计基础，还可以进行简易的样式修改，二次开发， 发布新样式，调整网站结构，只需修改css目录中的css.css文件即可。 商城网站完全独立，网站源码随时可供您下载
设置 li 元素的样式
我们可以对 li 元素进行各种排版和样式设置，例如字体、字号、颜色、行高、背景色、边框等，下面我们来具体介绍一下。
字体和字号
字体和字号是常用的样式设置，可以通过 font-family 和 font-size 属性来设置。
li {
font-family: Arial, sans-serif;
font-size: 16px;
}颜色
颜色的设置可以使用 color 属性，也可以使用 background-color 属性来设置背景色。
li {
color: red;
background-color: #ccc;
}行高
行高可以使用 line-height 属性来设置。
li {
line-height: 1.5;
}边框
边框可以使用 border 属性来设置，该属性包含了边框的宽度、样式和颜色，也可以单独使用 border-width、border-style 和 border-color 属性来设置。
li {
border: 1px solid black;
}列表样式
有序列表和无序列表的样式也可以单独设置。例如，无序列表可以使用 list-style-type 属性来设置特定的标记样式。
ul {
list-style-type: disc; /* 实心圆 */
}有序列表可以使用 list-style-type 属性来设置不同的数字样式。
ol {
list-style-type: lower-roman; /* 小写罗马数字 */
}总结
通过本文的介绍，我们了解了如何使用 CSS 来设置 li 元素的样式，包括字体、字号、颜色、行高、背景色、边框和列表样式等，同时也讲解了 CSS 样式设置的三种方式：行内样式、内部样式和外部样式。
创造独特的样式，可以让你的网站更有吸引力和个性化，但也需要注意样式的一致性和兼容性。在实际开发中，我们需要根据页面的需要和设计师的要求，合理地使用 CSS 样式。
