css list-style属性笔记

原创 国哥笔记  2019-02-16 11:16  阅读 334 views 次

list-style属性定义及用法

在css中,list-style属性是一个简写属性,使用来在一个声明中设置多个列表属性,可以设置的列表属性:list-style-type(列表项标记的类型), list-style-position(何处放置列表项标记), list-style-image(图像来替换列表项的标记)。

说明
  1. list-style属性涵盖了所有其他列表样式属性,由于它应用到所有display为list-item的元素,所以在普通的HTML和XHTML中只能用于li元素,不过实际上它可以应用到任何元素,并由list-item元素继承;
  2. list-style属性值的顺序:list-style-type、list-style-position、list-style-image;
  3. list-style属性可以不设置其中的某个值,比如 "list-style:circle inside;" 也是允许的,未设置的属性会使用其默认值。

list-style属性语法格式

  1. css语法:list-style:list-style-type list-style-position list-style-image/initial/inherit;
  2. JavaScript语法:object.style.listStyle="decimal inside";

list-style属性值说明

  • list-style-type:设置列表项标记的类型;
  • list-style-position:设置在何处放置列表项标记;
  • list-style-image:使用图像来替换列表项的标记;
  • initial:将这个属性设置为默认值;
  • inherit:从父元素继承list-style属性的值;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css list-style属性笔记</title>
<style type="text/css">
ul {list-style:square url("https://www.ggbiji.com/beian.png");}
</style>
</head>
<body>
<ul>
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
</body>
</html>

运行结果:

css list-style属性笔记

 

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-liststyle.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情