CSS列表样式属性list-style用法详解

开发 前端
平时我们在制作页面中可对属性list-style在list-item对象中常用,这里向大家描述一下CSS列表样式属性list-style的用法,希望对你的学习有所帮助。

本文向大家描述一下CSS列表样式属性list-style的用法,它主要用于在一个声明中设置一个列表的所有属性的简写属性,该属性是一个简写属性,涵盖了所有其他列表样式属性,仅作用于具有display值等于list-item的对象

解析CSS列表样式属性list-style

平时制作页面中可对属性list-style在list-item对象中常用,但用的都不深。一般都设为none重置整个页面就差不多OK,可能很多人包括本人对属性list-style-type更细节方面的属性并不是很了解,更有可能对属性list-style和属性list-style-type概念会比较模糊,现有必要把它提出来重新学习一下,故整理如下。

◆list-style

定义:用于在一个声明中设置一个列表的所有属性的简写属性,该属性是一个简写属性,涵盖了所有其他列表样式属性,仅作用于具有display值等于list-item的对象(如li对象)。

相关:list-style-image  list-style-position  list-style-type

◆list-style-image

说明:设置或检索作为对象的列表项标记的图像。若此属性值为none或指定url地址的图片不能被显示时,list-style-type属性将发生作用。

取值:

none: 默认值。不指定图像

url(url): 使用绝对或相对url地址指定图像

◆list-style-position

说明:设置或检索作为对象的列表项标记如何根据文本排列。假如一个列表项目的左外补丁(margin-left)被设置为0,则列表项目标记不会被显示。左外补丁(margin-left)最小可以被设置为30。仅作用于具有display属性值等于list-item的对象。如li对象。

取值:

outside: 默认值。列表项目标记放置在文本以外,且环绕文本不根据标记对齐

inside: 列表项目标记放置在文本以内,且环绕文本根据标记对齐

◆list-style-type

说明:设置或检索对象的列表项所使用的预设标记。若list-style-image属性值为none或指定url地址的图片不能被显示时,此属性将发生作用。

取值:

disc: CSS1 实心圆

circle: CSS1 空心圆

square: CSS1 实心方块

decimal: CSS1 阿拉伯数字

lower-roman: CSS1 小写罗马数字

upper-roman: CSS1 大写罗马数字

lower-alpha: CSS1 小写英文字母

upper-alpha: CSS1 大写英文字母

none: CSS1 不使用项目符号

armenian: CSS2 传统的亚美尼亚数字

cjk-ideographic: CSS2 浅白的表意数字

georgian: CSS2 传统的乔治数字

lower-greek: CSS2 基本的希腊小写字母

hebrew: CSS2 传统的希伯莱数字

hiragana: CSS2 日文平假名字符

hiragana-iroha: CSS2 日文平假名序号

katakana: CSS2 日文片假名字符

katakana-iroha: CSS2 日文片假名序号

lower-latin: CSS2 小写拉丁字母

upper-latin: CSS2 大写拉丁字母

补充:此CSS2.1提出的.IE6,Firefox1.5+,Opera9+支持此属性,所以以数字方式显示列表也可以用ul来指定,并不一定必需要用ol来写。

【编辑推荐】

  1. CSS布局中应用ul、li实现表格形式
  2. 技术分享 如何实现CSS横向导航
  3. DIV+CSS圆角效果轻松实现
  4. CSS优先级规则详尽解读
  5. DIV CSS解决不规则文字排版问题

 

责任编辑:佚名 来源: tzlink.com
相关推荐

2010-09-03 12:46:28

CSSexpression

2010-08-23 15:33:47

CSSpadding

2010-09-01 13:37:58

CSSclip属性

2010-08-23 08:45:08

CSSpadding内边距

2010-09-16 10:10:50

CSSdisplay

2010-09-07 16:46:59

CSSexpression

2010-09-08 16:22:32

PositionCSS

2010-08-31 10:05:16

CSS Sprites

2010-09-02 15:32:51

CSSfloat

2010-08-30 11:34:32

csspadding

2010-08-25 13:48:51

CSSlist-style-

2010-08-31 08:51:58

marginCSS

2010-08-30 15:06:04

CSSfont-size

2010-08-26 11:01:00

ulliCSS

2010-08-23 09:11:18

padding-bot

2010-08-20 16:29:01

padding-lef

2020-10-22 08:50:04

Cascading S

2010-09-02 12:58:21

display:inlCSS

2010-09-06 10:21:15

CSS 列表

2010-08-25 10:21:49

CSSmargin
点赞
收藏

51CTO技术栈公众号