15.4　使用定制的标识

如果对使用圆圈、方块、圆点以及罗马数字这些标识感到厌倦，也可以使用图像创建自己定制的标识。要使用定制的标识，不必修改HTML（如图15.4.1所示），仅需修改CSS（如图15.4.2和图15.4.3所示）。

  1. ...
  2. <body>
  4. <h1>PageWhacker, version 12.0: Features</h1>
  5. <ul>
  6.      <li>One click page layout</li>
  7.      <li>Spell checker for 327 major languages</li>
  8.      <li>Image retouching plug-in</li>
  9.      <li>Unlimited Undo’s and Redo’s</li>
  10.      <li>Automatic book writing</li>
  11. </ul>
  12. </body>
  13. </html>

图15.4.1　这个列表与任何普通无序列表都是相似的，不过，加上一些CSS （如图15.4.2所示）后，它看起来就不一样了（如图15.4.3所示）

  1. ul {
  2.      /* 取消默认标识 */
  3.      list-style: none;
  5.      /* 为列表项目设置缩进 */
  6.      margin-left: 0;
  7.      padding-left: 15px;
  8. }
  10. li {
  11.      /* 让图像显示在距离顶端2像素的位置 */
  12.      background: url(arrow-right.png) no-repeat 0 2px;
  14.      /* 将文本向右挤压，为箭头腾出空间 */
  15.      padding-left: 25px;
  16. }

图15.4.2　首先，清除默认的标识（这样就看不到符号和箭头了），调整列表项目的缩进大小。然后为每个列表项目指定箭头背景图像，将它的位置设在距离li的顶端几个像素的地方，同时为li增加一些左侧内边距，确保文本不会覆盖箭头。要确保background的url部分中的图像路径是正确的。这里的url应该是图像相对于样式表的位置，而不是相对于HTML的位置（有关信息参见10.9节）

15.4　使用定制的标识 - 图1

图15.4.3　默认的圆点被箭头图像取代了

使用定制的标识

  • 在目标列表或列表项的样式规则中，输入list-style: none;以取消常规的标识。

  • 在目标列表的样式规则中，设置margin-left和/或padding-left属性，指定列表项目缩进的大小。（为了在不同的浏览器上实现相似的效果，通常需要同时设置这两个属性。）同时设置margin-left: 0;和padding-left: 0;就将取消所有的缩进。注意，如果为内容设置了dir="rtl"，那么就应该设置margin-right和padding-right属性。关于在列表中使用dir、lang及从右至左的语言，参见15.1节的提示。

  • 在目标列表的li元素的样式规则中，输入background: url(image.ext) repeat-type horizontal vertical;，其中image.ext是要作为定制标识的图像的路径和文件名，repeat-type是no-repeat、repeat-x和repeat-y中的一种（通常设为no-repeat），horizontal和vertical值表示列表项目中背景图像的位置（如图15.4.2所示）。

输入padding-left: value;，这里的value应不小于背景图像的宽度，以防列表项目的内容覆盖到定制标识的上面。

提示　在url和前括号之间不应有空格（如图15.4.2所示）。包围URL的引号是可选的。

　

提示　注意，相对URL是相对于样式表的，而不是相对于网页的。

　

提示　如果想为列表中的某一个或几个项目应用定制的标识，可以为其添加一个类，再为这个类定义样式规则。根据外观要求，可能需要对这些li的左侧外边距进行调整，而不是对父元素ol或ul的外边距和内边距进行调整。

　

提示　另一种显示定制标识的方法是使用list-style-image属性。例如，li { list-style-image: url(image.png); }。不过，使用这种方法很难达到预期的效果，因为不同浏览器对它的显示效果并不一致。而且，使用图15.4.2所示的方法可以更好地控制图像标识的位置，这也是人们倾向于使用这种方法的原因。list-style-image属性会覆盖list-style-type属性。不过，如果出于某种原因导致图像未能加载，则会使用由list-style-type指定的标识。