CSS 简明教程 - 列表样式属性

yufei       6 年, 5 月 前       1069

CSS 中的列表相关的属性可用于设置列表和列表项的样式

CSS 中跟列表和列表项相关的属性有 5 个

属性 说明
list-style-type 用于设置列表标记的类型
list-style-position 指示如何相对于对象的内容绘制列表项标记
list-style-image 属性使用图像来替换列表项的标记
list-style 简写属性,在一个声明中设置所有的列表属性
marker-offset 当列表为一个有序列表时,设置列表标记的偏移量

现在,我们通过一些示例来学些这些列表属性

列表标记类型 ( list-style-type )

list-style-type 属性用于设置列表标记的类型,例如

<!DOCTYPE html>
<html>
   <head>
    <meta charset="utf-8" />
   </head>
   <body>
      <ul style="list-style-type:circle;">
         <li>数学</li>
         <li>社会学</li>
         <li>物理</li>
      </ul>

      <ul style="list-style-type:square;">
         <li>数学</li>
         <li>社会学</li>
         <li>物理</li>
      </ul>

      <ol style="list-style-type:decimal;">
         <li>数学</li>
         <li>社会学</li>
         <li>物理</li>
      </ol>

      <ol style="list-style-type:lower-alpha;">
         <li>数学</li>
         <li>社会学</li>
         <li>物理</li>
      </ol>

      <ol style="list-style-type:lower-roman;">
         <li>数学</li>
         <li>社会学</li>
         <li>物理</li>
      </ol>
   </body>
</html>

注意:某些值仅对 <ul> 列表有效,而有些值则仅对 <ol> 列表有效

列表图片标记 ( list-style-image )

如果你需要使用特殊的标记,例如图像,则可以使用 list-style-image 属性来设置

ul {
    list-style-image: url('sqpurple.gif');
}

但不幸的是,上述示例的结果在所有浏览器中都各不相同,IEOpera 中的图像显示比FirefoxChromeSafari 中的显示要高一些

如果你想要图片标记在所有的浏览器中都在相同的位置,则应该如下矫正代码

ul
{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

ul li
{
    background-image: url(sqpurple.gif);
    background-repeat: no-repeat;
    background-position: 0px 5px;
    padding-left: 14px;
}

对,就是放弃 list-style-image ,转而使用 background-color

列表样式位置 ( list-style-position )

list-style-position 属性指定列表项标记 ( 项目符号点 ) 的位置

  1. list-style-position:outside; 表示项目符号点位于列表项之外,列表项的每一行的开头将垂直对齐

  2. list-style-position:inside; 表示项目符号将位于列表项内,因为它是列表项的一部分,所以它将成为文本的一部分并在开头将文本推开一定的距离

下面是一些示例

ul.a {
    list-style-position: outside;
}

ul.b {
    list-style-position: inside;
}

列表样式属性 ( list-style )

如果将上面三个属性一起设置,对,比如下面这样

ul.a {
    list-style-type:none;
    list-style-image: url('sqpurple.gif');
    list-style-position: inside;
}

写起来是不是很费劲,而且,一般情况下,我们都不会使用 list-style-imagelist-style-position

所以,我们会使用它们的简写属性 list-style

下面是一个例子

li {
    list-style : url(example.gif) square inside;
}

当使用简写属性,这三个属性的书写顺序为

  1. list-style-type 用于设置列表标记的类型
  2. list-style-position 指示如何相对于对象的内容绘制列表项标记
  3. list-style-image 属性使用图像来替换列表项的标记

如果任何一个属性缺失,则会使用该属性的默认属性

列表标记偏移属性 ( marker-offset )

marker-offset 的属性可以用来指定标记与标记相关的文本之间的距离

该属性的值应该是一个长度,如下例所示

<!DOCTYPE html>
<html>
   <head>
   <meta charset="utf-8" />
   <style>
   ul {
       list-style: inside square; marker-offset:2em;
   }
   ol {
       list-style: outside upper-alpha; marker-offset:2cm;
   }
   </style>
   </head>

   <body>
      <ul>
         <li>数学</li>
         <li>社会学</li>
         <li>物理</li>
      </ul>

      <ol>
         <li>数学</li>
         <li>社会学</li>
         <li>物理学</li>
      </ol>
   </body>

</html>

该属性很好用,不幸的是,它不会 IE 6Netscape 7 所支持

目前尚无回复
简单教程 = 简单教程,简单编程
简单教程 是一个关于技术和学习的地方
现在注册
已注册用户请 登入
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.