在HTML中，<ul>标签用于创建一个无序列表，如果你想要修改这个无序列表的样式，可以使用CSS(级联样式表)来实现，下面我们将详细介绍如何修改<ul>标签的样式。
内联样式
1、在<li>标签内使用style属性直接设置样式：
<!DOCTYPE html>
<html>
<head>
<style>
ul li {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li style="color: red; font-weight: bold;">列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>
</html>
2、在<li>标签外层使用style属性设置样式：
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: square;
}
</style>
</head>
<body>
<ul style="list-style-type: circle;">
<li style="color: red; font-weight: bold;">列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>
</html>
内部样式表(Internal Style Sheet)
1、将样式定义在一个单独的.css文件中，然后在HTML文件中引用该文件：
创建一个名为styles.css的文件，内容如下：
/* styles.css */
ul li {
color: red;
font-weight: bold;
}
在HTML文件中引用该文件：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> </body> </html>
2、在HTML文件中使用<style>标签定义样式：
<!DOCTYPE html>
<html>
<head>
<style>
ul li {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>
</html>
外部样式表(External Style Sheet)
1、将样式定义在一个单独的.css文件中，然后在HTML文件中通过<link>标签引用该文件，这种方法需要将CSS文件放在与HTML文件相同的目录下或者在服务器上提供CSS文件的访问路径。
创建一个名为styles.css的文件，内容如下：
“`css /* styles.css */ */
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/211200.html
微信扫一扫 