在网页设计中，有序列表是一个非常常见的元素，它们的作用在于以一个明确的顺序来呈现某些信息。然而，大多数情况下，只使用默认的有序列表样式可能会显得非常乏味。为了让你的网页更加个性化，你可以运用CSS中的list-style来打造一个独特的有序列表。

一、list-style的相关属性

要使用list-style来掌握有序列表的样式，你首先需要了解相关属性。以下是list-style的3个相关属性：

1. list-style-type:这个属性用来设置列表标记的类型。如果没有指定这个属性，则默认为十进制数字(1,2,3,4,....)。其他的可选项包括罗马数字、英文单词等。具体的值可以在这里查看:https://www.w3schools.com/cssref/pr_list-style-type.asp

2. list-style-position:这个属性用来确定列表标记的位置。默认情况下，列表标记在文字之外，但你也可以使用inside来使列表标记出现在文字内部。

3. list-style-image:这个属性用来设置列表标记的图片。

二、设置自定义样式

1. 更改列表标记的形状

默认情况下，CSS会将有序列表标记设置为十进制数字。但现在，我们可以使用list-style-type属性来改变它的形状。以下是一些可选项的示例：

ul {

list-style-type: square; /* 正方形 */

}

ul {

list-style-type: disc; /* 圆形 */

}

ul {

list-style-type: lower-alpha; /* 小写字母 */

}

ul {

list-style-type: upper-roman; /* 大写罗马数字 */

}

2. 更改列表标记的位置

在默认情况下，有序列表标记会出现在文字的左侧，但如果你想调整标记的位置，可以使用list-style-position属性。以下是示例：

ul {

list-style-position: inside; /* 列表标记出现在文字内部 */

}

ul {

list-style-position: outside; /* 列表标记出现在文字外面 */

}

3. 更改列表标记的图片

CSS中，你也可以使用图片来代替列表标记。要这样做，你可以使用list-style-image属性，并设置到一个图片的url。下面是示例：

ul {

list-style-image: url("imagename.gif"); /* 使用图片代替列表标记 */

}

但要注意的是，如果浏览器无法加载图片，则依旧会出现默认的列表标记。

三、使用不同类型的方案

如果你希望提供多种不同类型的列表标记，你可以在同一份CSS文件中使用不同的类来定义不同的方案。以下是一个示例：

/* 定义一个类名为 square */

.square {

list-style-type: square;

}

/* 定义一个类名为 circle */

.circle {

list-style-type: circle;

}

/* 定义一个类名为 roman */

.roman {

list-style-type: upper-roman;

}

你也可以在HTML文件中单独写style标签来定义样式。以下是一个示例：

现在，我们已经了解了使用list-style属性的一些基本措施。通过发挥我们的想象力，我们可以创建出许多不同类型的列表标记。列表项应该显示你的网页上的信息，并且可以作为提醒或组织方式。因此，使列表标记变得更加个性化可以使你的网页更有趣，并且更易于阅读和理解。