css设置悬浮列表样式_如何使用CSS设置列表样式

css设置悬浮列表样式

HTML列表回顾 (HTML Lists Recap)

There are two main types of lists in HTML — Ordered and Unordered.

HTML中的列表主要有两种类型： Ordered和Unordered 。

In Ordered lists (<ol></ol>), the order of the list items is important. The items may appear in order by number, roman numeral, alpha numeral, or another type of marker. The default marker for ordered lists is a number (or decimal):

在有序列表( <ol></ol> )中，列表项的顺序很重要。 这些项目可以按数字，罗马数字，字母数字或其他类型的标记顺序显示。 有序列表的默认标记是数字(或decimal )：

In Unordered lists (<ul></ul>), the order of the list items does not matter. The items appear in bullet format. The default marker for unordered lists is a round bullet point or disc.

在无序列表( <ul></ul> )中，列表项的顺序无关紧要。 这些项目以项目符号格式显示。 无序列表的默认标记是圆形的项目符号点或disc 。

Each list item within an ordered or unordered list is created with the <li></li> tag.

使用<li></li>标签创建有序列表或无序列表中的每个列表项。

列表特定样式 (List-Specific Styles)

There are three common properties specific to styling lists: list-style-type, list-style-position, and list-style-image. There is also a shorthand property which includes all three.

有三种特定于样式列表的常用属性： list-style-type ， list-style-position和list-style-image 。 还有一个速记属性，其中包括所有三个。

list-style-type (list-style-type)

The markers (or bullet points) that appear in ordered and unordered lists can be styled in a variety of ways. The CSS property for styling the marker type is list-style-type. The default list-style-type value for an ordered list is decimal, whereas the default for an unordered list is disc.

可以通过多种方式设置出现在有序和无序列表中的标记(或项目符号)。 用于设置标记类型样式CSS属性是list-style-type 。 有序列表的默认list-style-type值是decimal ，而无序列表的默认列表类型是disc 。

Ordered list example:

有序列表示例：

/* css */
ol {
  list-style-type: upper-roman;
}

Unordered list example:

无序列表示例：

/* css */
ul {
  list-style-type: square;
}

No marker example:

没有标记示例：

/* css */
ul {
  list-style-type: none;
}

Accepted values for the list-style-type property include:

list-style-type属性的可接受值包括：

Unordered:

无序：

• disc (default)

  光盘( 默认 )

• circle
  圈
• square
  广场

Ordered:

订购：

• decimal (default)

  十进制( 默认 )

• decimal-leading-zero
  十进制前导零
• lower-roman
  下罗马
• upper-roman
  上罗马
• lower-greek
  低希腊语
• lower-latin
  下拉丁
• upper-latin
  上拉丁
• armenian
  亚美尼亚人
• georgian
  乔治亚风格
• lower-alpha
  下阿尔法
• upper-alpha
  高位字母

Other:

其他：

• none
  没有

Note: all the property values listed above can be used for styling both ordered and unordered lists (ex: an ordered list with square list markers).

注意：上面列出的所有属性值都可以用于设置有序列表和无序列表的样式(例如：带有square列表标记的有序列表)。

list-style-position (list-style-position)

list-style-position controls whether the list marker appears inside or outside of each list item element (<li></li>). The property accepts two values, outside (default) or inside.

list-style-position控制列表标记是出现在每个列表项元素( <li></li> )内部还是外部。 该属性接受两个值， outside (默认值)或inside 。

Position the marker outside of the list item element, and all text lines and sub-lines of each list item will align vertically:

将标记放置在列表项元素outside ，每个列表项的所有文本行和子行将垂直对齐：

/* css */
ul {
  list-style-position: outside; /* default */
}

Position the marker inside, and the first text line of each list item will be indented to make room for the marker. Any sub-lines of the same list item will align with the marker rather than the first text line:

将标记inside ，每个列表项的第一行文本都会缩进以为标记inside出空间。 同一列表项的所有子行都将与标记对齐，而不是与第一行文本对齐：

/* css */
ul {
  list-style-position: inside;
}

list-style-image (list-style-image)

The list-style-image property accepts an image url in place of the list marker. The default value for this property is none.

list-style-image属性接受图像URL代替列表标记。 此属性的默认值为none 。

/* css */
ul {
  list-style-image: url(https://url-to-image);
}

list-style速记 (list-style Shorthand)

list-style is a shorthand property for the three style properties listed above. The order of values list-style accepts is list-style-type, list-style-position, and list-style-image. If any value is omitted, the default value for that property will be used.

list-style是上面列出的三个样式属性的简写属性。 list-style接受的值的顺序为list-style-type ， list-style-position和list-style-image 。 如果省略任何值，则将使用该属性的默认值。

Example:

例：

/* css */
ul {
  list-style: circle inside none;
}

更多列表特定的样式 (More List-Specific Styling)

Ordered list tags also accept attributes that control the flow, count, or specific marker values of its list items. These include the start, reversed, and value attributes. See the MDN resources listed below for further details.

有序列表标记还接受控制其列表项的流，计数或特定标记值的属性。 这些属性包括start ， reversed和value属性。 有关更多详细信息，请参见下面列出的MDN资源。

一般样式 (General Styling)

List content can be styled just like other p or div elements. color, font-family, margin, padding, or border are just a few examples of properties that can be added to either the ul, ol, or li elements.

列表内容的样式可以像其他p或div元素一样。 color ， font-family ， margin ， padding或border只是可以添加到ul ， ol或li元素的属性的几个示例。

Note that any styles added to the ul or ol element will affect the entire list. Styles added directly to the li elements will affect the individual list items. In the example below, the border and background-color properties are styled differently between the list and list item elements:

请注意，添加到ul或ol元素的任何样式都会影响整个列表。 直接添加到li元素的样式将影响各个列表项。 在下面的示例中，border和background-color属性在list和list item元素之间的样式不同：

/* css */
ul {
  list-style-type: circle;
  border: 2px solid blue;
  background-color: lightblue;
}
li {
  margin: 5px;
  background-color: lightyellow;
}

清单间距 (List Spacing)

You may notice extra spacing in front of the list items when list-style-type is set to none. Setting padding to 0 (or whatever spacing is preferred) on the list element will override this default padding.

当list-style-type设置为none时，您可能会注意到列表项前面有多余的空格。 在list元素上将padding设置为0 (或任何首选的间距)将覆盖此默认padding。

/* css */
ul {
  list-style: none;
  padding: 0;
}
li {
  padding: 5px 10px;
  background-color: #EEEEEE;
  border: 1px solid #DDDDDD;
}

资料来源： (Sources:)

The links below were referenced in compiling information found in this article. Please visit them for further details about this topic.

本文提供的编译信息中引用了以下链接。 请访问他们以获取有关此主题的更多详细信息。

更多信息： (More Information:)

MDN - Styling Lists

MDN-样式列表

W3Schools - CSS Lists

W3Schools-CSS列表

CSS Tricks - list-style

CSS技巧-列表样式

翻译自: https://www.freecodecamp.org/news/how-to-style-lists-with-css/

css设置悬浮列表样式