首页 >

CSS:list-style列表样式的用法详解

web前端|css教程CSS:list-style列表样式的用法详解
list-style,css,样式表
web前端-css教程
解析CSS列表样式属性list-style
易语言在线客服源码,vscode比较文本,ubuntu 1710,tomcat下载选择,向sqlite写入压缩数据,wp无插件分享,移动端用什么前端框架比较,爬虫兼职好接单吗南京,php传智播客 百度云,seo基础工具平台,大气企业网站源码,网页如何实现产品筛选,免费H5模板中心lzw
平时制作页面中可对属性list-style在list-item对象中常用,但用的都不深。一般都设为none重置整个页面就差不多OK,可能很多人包括本人对属性list-style-type更细节方面的属性并不是很了解,更有可能对属性list-style和属性list-style-type概念会比较模糊,现有必要把它提出来重新学习一下,故整理如下。
lucene项目源码,ubuntu上sumo教程,水滴筹数据爬虫,php转正,seo帽子排名lzw
义和用法
网站留言板系统源码,支持ubuntu的驱动,好用免费的爬虫,php ajax无效,漯河seo公司lzw
list-style 简写属性在一个声明中设置所有的列表属性。

说明
该属性是一个简写属性,涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素,所以在普通的 HTML 和 XHTML 中只能用于 li 元素,不过实际上它可以应用到任何元素,并由 list-item 元素继承。

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

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

◆list-style

定义:用于在一个声明中设置一个列表的所有属性的简写属性,该属性是一个简写属性,涵盖了所有其他列表样式属性,仅作用于具有display值等于list-item的对象(如li对象)。

相关:list-style-imagelist-style-positionlist-style-type

◆list-style-image

说明:设置或检索作为对象的列表项标记的图像。若此属性值为none或指定url地址的图片不能被显示时,list-style-type属性将发生作用。

取值:

none: 默认值。不指定图像

url(url): 使用绝对或相对url地址指定图像

把图像设置为列表中的项目标记:

ul  {  list-style-image:url("/i/arrow.jpg");  list-style-type:square;  }

ul {list-style-image: url('/i/eg_arrow.jpg')}
  • 咖啡
  • 可口可乐

◆list-style-position

说明:设置或检索作为对象的列表项标记如何根据文本排列。假如一个列表项目的左外补丁(margin-left)被设置为0,则列表项目标记不会被显示。左外补丁(margin-left)最小可以被设置为30。仅作用于具有display属性值等于list-item的对象。如li对象。

取值:

outside: 默认值。列表项目标记放置在文本以外,且环绕文本不根据标记对齐

inside: 列表项目标记放置在文本以内,且环绕文本根据标记对齐

实例
规定列表中列表项目标记的位置:

ul  {  list-style-position:inside;  }

实例

ul.inside {list-style-position: inside}ul.outside {list-style-position: outside}

该列表的 list-style-position 的值是 "inside":

  • Earl Grey Tea - 一种黑颜色的茶
  • Jasmine Tea - 一种神奇的“全功能”茶
  • Honeybush Tea - 一种令人愉快的果味茶

该列表的 list-style-position 的值是 "outside":

  • Earl Grey Tea - 一种黑颜色的茶
  • Jasmine Tea - 一种神奇的“全功能”茶
  • Honeybush Tea - 一种令人愉快的果味茶

浏览器支持

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

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

◆list-style-type

说明:设置或检索对象的列表项所使用的预设标记。若list-style-image属性值为none或指定url地址的图片不能被显示时,此属性将发生作用。

实例
本例改变列表的类型:

function changeList()  {  document.getElementById("ul1").style.listStyle="decimal inside";  }
  • Coffee
  • Tea
  • Water
  • Soda

CSS:list-style列表样式的用法详解
  • css中list-style是什么意思
  • css中list-style是什么意思 | css中list-style是什么意思 ...

    CSS:list-style列表样式的用法详解
  • list-style是什么意思?list-style样式属性详解
  • list-style是什么意思?list-style样式属性详解 | list-style是什么意思?list-style样式属性详解 ...

    CSS:list-style列表样式的用法详解
  • css中list-style:none为什么不起作用?
  • css中list-style:none为什么不起作用? | css中list-style:none为什么不起作用? ...