首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

列表类型 | list-style

list-styleCSS属性是设置定义如何显示列表中的单个值的简写:list-style-typelist-style-image,和list-style-position

代码语言:javascript
复制
/* type */
list-style: square;

/* image */
list-style: url(?developer/section/1072137/&);

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url(?developer/section/1072137/&) outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: unset;

初始值

as each of the properties of the shorthand: list-style-type: disc list-style-position: outside list-style-image: none

应用于

list items

是否继承

yes

适用媒体

visual

计算值

as each of the properties of the shorthand: list-style-image: none or the image with its URI made absolute list-style-position: as specified list-style-type: as specified

Animation type

discrete

规范顺序

order of appearance in the formal grammar of the values

  • list-style-type*disc
  • list-style-position*outside
  • list-style-image*none
代码语言:txt
复制
Applies to list items   [Inherited](inheritance) yes   Media visual   [Computed value](computed_value) as each of the properties of the shorthand:
  • list-style-image*none或将具有其URI的图像变为绝对的。
  • list-style-position*具体规定
  • list-style-type*具体规定
代码语言:txt
复制
Animation type discrete   Canonical order order of appearance in the formal grammar of the values  

注意:该属性应用于列表项目,即元素display: list-item;默认情况下,这包括<li>元素。由于此属性是继承的,因此可以在父元素上设置(通常<ol><ul>),以使相同的列表样式适用于所有内部项目。

句法

list-style属性按任意顺序指定为一个,两个或三个关键字。如果list-style-typelist-style-image都设置,则list-style-type用作后备,如果图像不可用。

价值

list-style-typelist-style-typelist-style-imagelist-style-imagelist-style-position请参阅list-style-position.none否使用列表样式。

形式语法

代码语言:javascript
复制
<'list-style-type'> || <'list-style-position'> || <'list-style-image'>

实例

HTML

代码语言:javascript
复制
List 1
<ul class="one">
  <li>List Item1</li>
  <li>List Item2</li>
  <li>List Item3</li>
</ul>
List 2
<ul class="two">
  <li>List Item A</li>
  <li>List Item B</li>
  <li>List Item C</li>
</ul>

CSS

代码语言:javascript
复制
.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}

结果

规格

Specification

Status

Comment

CSS Lists and Counters Module Level 3The definition of 'list-style' in that specification.

Working Draft

No change.

CSS Level 2 (Revision 1)The definition of 'list-style' in that specification.

Recommendation

Initial definition.

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

1.0

(Yes)

1.0 (1.7 or earlier)

4.0

7.0

1.0

Feature

Android

Edge

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Basic support

1.0

(Yes)

1.0 (1)

6.0

6.0

1.0

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com