`
zhangyaochun
  • 浏览: 2632975 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

css之list-style属性

阅读更多

 

CSS list-style 属性

 

 

定义和用法

list-style 简写属性在一个声明中设置所有的列表属性。

可以按顺序设置如下属性:

 

  • list-style-type
  • list-style-position
  • list-style-image

1.CSS list-style-type 属性

                ------------设置列表项标记的类型

 

默认值: 继承性: 版本: JavaScript 语法:
disc
yes
CSS1

object.style.listStyleType="square


浏览器支持

所有浏览器都支持 list-style-type 属性。

 

CSS2 的值:

 

值 描述
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字
hiragana 标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)
katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)
hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
katakana-iroha 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)

 

2.CSS list-style-position 属性

 

 

默认值: 继承性: 版本: JavaScript 语法:
outside
yes
CSS1
object.style.listStylePosition="inside"

 

 

浏览器支持

所有浏览器都支持 list-style-position 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

 

可能的值

 

值 描述
inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
inherit 规定应该从父元素继承 list-style-position 属性的值。

3.CSS list-style-image 属性

 

 

定义和用法

list-style-image 属性使用图像来替换列表项的标记。

 

浏览器支持

所有浏览器都支持 list-style-image 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"

可能的值

值 描述
URL 图像的路径。
none 默认。无图形被显示。
inherit 规定应该从父元素继承 list-style-image 属性的值。

 

分享到:
评论

相关推荐

    2.2.37 CSS列表属性(二)列表项目图像:list-style-image.docx

    "CSS 列表属性:list-style-image 和 list-style-position" CSS 列表属性是 CSS 中的一种样式属性,用于控制列表的样式和布局。本文主要介绍了 list-style-image 和 list-style-position 两个属性的用法和应用。 ...

    2.2.38 CSS列表属性(三)列表项目符号位置:list-style-position.docx

    CSS 列表属性 - list-style-position 属性详解 在 CSS 中,列表属性 play 一个非常重要的角色,因为它们可以帮助我们更好地控制列表的样式。今天,我们将要探讨的就是 list-style-position 属性,该属性可以控制...

    2.2.36 CSS列表属性(一)列表项目符号:list-style-type.docx

    CSS列表属性是控制列表样式的重要属性之一, lista-style-type是其中一个关键属性,用于控制无序和有序列表的项目符号。在本篇文章中,我们将详细介绍list-style-type属性的用法和取值。 list-style-type属性的作用...

    CSS list-style-type属性使用方法

    其中,`list-style-type`属性是一个非常实用的工具,它允许开发者自定义列表(如无序列表`<ul>`和有序列表`<ol>`)中项目符号的样式。本篇文章将深入探讨`list-style-type`属性的使用方法及其各种可能的值。 `list-...

    CSS list-style属性控制li标签样式示例代码

    CSS中的`list-style`属性是一个复合属性,用于一次性设置列表项(`li`标签)的三个子属性:`list-style-type`、`list-style-position`和`list-style-image`。这个属性可以帮助我们自定义列表的展示方式,使其更加...

    CSS list-style熟悉解释

    list-style属性可以设置列表的样式,包括列表符号、列表位置和列表图像。 list-style属性可以取四种值:none、disc、circle和square。none表示不显示列表符号,disc表示实心圆点,circle表示空心圆点,square表示...

    CSS: list-style 和 inline使用方法详解

    在CSS中,`list-style`和`inline`是两个重要的属性,它们分别用于定义列表的样式和元素的显示方式。本文将深入解析这两个属性的使用方法及其相关知识点。 `list-style`属性是一个简写属性,用于一次性设置列表的...

    CSS list-style修改列表属性控制li标签样式

    list_style属性用于修改列表的属性 格式如下: list_style:列表项标记类型 列表项标记的位置 列表项标记; 也可以单独设置列表项标记: list-style-type用于设置列表项类型: 默认值为disc为实心圆, 常用值:...

    CSS中的ul与li样式详解.docx

    CSS 中的 ul 与 li 样式详解 ...CSS 中的 ul 和 li 元素的样式可以通过 list-style-type、list-style-image、list-style-position 和 list-style 属性来控制。不同的属性值可以实现不同的样式效果。

    CSS和JavaScript标签style属性对照表

    ### CSS与JavaScript中style属性对照表详解 #### 引言 在前端开发中,CSS(层叠样式表)和JavaScript是构建动态、交互式网页的关键技术。为了更好地控制页面元素的样式,开发者经常需要通过JavaScript来操作DOM...

    CSS 有序或者无序列表的前面的标记 list-style-type 属性的实现

    style type="text/css"> ul.none{list-style-type:none} ul.circle {list-style-type:circle} ul.square {list-style-type:square} ol.upper-roman {list-style-type:upper-roman} ol.lower-alpha {list-style-...

    CSS3样式表- 列表与表格属性.pptx

    1. **list-style**:这是一个简写属性,用于一次性设置列表的所有相关属性,包括`list-style-type`、`list-style-image`和`list-style-position`。例如,你可以通过`list-style: none;`去除列表前的默认符号。 2. *...

    页面样式调试必备-style属性

    例如,`list-style`属性用于设置列表项的样式,`position`属性可以设置元素的定位方式(静态、相对、绝对或固定),而`text-align`则用于调整文本的对齐方式。 理解并掌握这些`style`属性,可以帮助开发者更有效地...

    JavaScript CSS Style属性对照表

    ### JavaScript CSS Style属性对照表详解 #### 一、引言 在前端开发中,通过JavaScript动态修改CSS属性是一种常见的操作手法。例如,在用户交互时改变元素的样式来增强用户体验。本文将详细介绍如何利用JavaScript...

    CSS教程 非常好用

    **9.4 CSS list-style属性** - 综合设置列表相关的属性。 ```css ul { list-style: square inside url('bullet.gif'); } ``` #### 十、CSS鼠标样式 **10.1 CSS cursor属性** - 设置光标样式。 ```css p:...

Global site tag (gtag.js) - Google Analytics