css list-style属性

2018年05月01日 07:54 | 1267次浏览 作者原创 版权保护

在 CSS 中常见的列表 (list) 属性有以下几种:

list-style-type

list-style-position

list-style-image

list-style

每一个属性在以下会有详细地介绍:


list-style-type

list-style-type 属性是用来设定在清单中,每一条之前的记号要用什麽。最常见的 list-style-type 设定值为:

none (没有)

disc (全黑圆圈)

circle (空心圆圈)

square (正方形)


也可以使用有序字符集。常见的是:

upper-latin (大写拉丁文)

lower-latin (小写拉丁文)

upper-roman (大写罗马文)

lower-roman (小写罗马文)

upper-alpha (大写希腊文 )

lower-alpha (小写希腊文 )

以下列举几个例子:

例 1: 

<ul style='list-style-type:upper-roman;'> 
  <li>项目 1</li> 
  <li>项目 2</li> 
</ul>

結果:

  • 項目 1

  • 項目 2

例 2:

<ul style='list-style-type:square;'> 
  <li>正方形项目 1</li> 
  <li>正方形项目 2</li> 
</ul>

結果:

  • 正方形項目 1

  • 正方形項目 2


list-style-position

list-style-position 属性让我们可以决定记号是否应该被视为是文字的一部份,并且由此而决定记号的位置。这个属性可能的设定值为 "inside" 及 "outside"。预定值为 "outside"。

以下是两个例子,由其中我们可以看出来 inside 及 outside 的不同:

例 3:

<ul style='list-style-position:inside;'> 
  <li>第一个项目<br>第一项目的第二行 
  <li>第二个项目 
</ul>

結果:

  • 第一個項目
    第一項目的第二行

  • 第二個項目

例 4:

<ul style='list-style-position:outside;'> 
  <li>第一个项目<br>第一项目的第二行 
  <li>第二个项目 
</ul>

結果:

  • 第一個項目
    第一項目的第二行

  • 第二個項目


list-style-image

list-style-image 属性是用来将某个图案设定为记号。这个属性的用法为,

list-style-image:url([image_url]);

举例来说,若 CSS 样式为:

ul { 
  list-style-image:url("circle.gif"); 
}

那以下的 HTML 码,

<ul> 
  <li>第一项利用自我设定的记号。 
  <li>第二项利用自我设定的记号。 
</ul>

就会显现为,

第一项利用自我设定的记号。

第一项利用自我设定的记号。


list-style

以上提到的这三个 (list-style-style、list-style-position、及 list-style-image) 属性可以被简化为一个 list-style 属性。这种做法称为捷径 (shortcut)。在这裡,属性的顺序并不重要。


举例来说,以下的 CSS 样式,

ul { 
  list-style: url("circle.gif") none inside; 
}

套用在以下的 HTML 码中,

<ul> 
  <li>第一项以捷径方式列出的清单。 
  <li>第二项以捷径方式列出的清单。 
</ul>

就会显现出

第一项以捷径方式列出的清单。

第二项以捷径方式列出的清单。 



小说《我是全球混乱的源头》
此文章本站原创,地址 https://www.vxzsk.com/876.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程


上一篇:如何克服学习焦虑 下一篇:weui Footer页脚
^