CSS 设置列表格式
在word中,列表也是使用频率非常高的元素。在CSS中,列表和列表项都是块级元素。也就是说,一个列表会形成一个块框,其中的每个列表项也会形成一个独立的块框。所以,盒模型中块框的所有属性,都适用于列表和列表项。
除此之外,列表还有 3 个特有的属性 list-style-type、list-style-position和list-style-image,分别用来定义列表项目符号的样式、项目符号的位置、项目符号的图片。
列表可以相互嵌套,并且一种类型的列表,可以与任何类型的列表相互嵌套。列表的表项也可以与任何HTML元素(如段落、图片、链接等)交叉定义。
在word中,常常可以看到列表与段落、图片、表格等交叉的情况。其实,列表跟其他元素交叉的情形更常见,纯粹的列表反而少见。如:
<p>列表的list-style-type、list-style-position…项目符号所使用的图片。</p>
<ul>
<li>list-style-type属性</li>
<ol>
<p>list-style-type属性用来设置列表项目符号,取值有:</p>
<li>disc 默认值,实心圆</li>
<li>decimal 数字1、2、3、4、5</li>
<li>lower-alpha 小写英文字母a、b、c、d、e</li>
<li>lower-roman 小写罗马数字ⅰ、ⅱ、ⅲ、ⅳ、ⅴ</li>
</ol>
<li>list-style-position属性</li>
<li>list-style-image属性</li>
<ul>
上述代码中,在 ul 中嵌套了 ol,在 ol 中,段落元素 p 也与列表项 li 元素交叉定义。这只是一个非常简单的实例,通过该实例,来演示如何为列表应用样式。
由于不同的浏览器下,列表的默认样式可能不同。所以,为了在所有浏览器中表现一致,首先要清除列表的默认样式,如外边距、内边距、列表项目符号等。
ul,ol {
margin: 0;
padding: 0;
}
默认情况下,列表的 list-style-position属性值为 outside,项目符号不占据容器的空间。在列表元素的 margin 或 padding 为 0 时,项目符号在容器的外面,项目符号将无法与段落文本对齐。所以,根据需要,可以把list-style-position属性设置为inside。
另外,中文有一个书写习惯,就是段落首行缩进两个字符。要使列表和段落对齐,列表项同样也要首行缩进两个字符。
ul li, ol li {
text-indent: 2em;
list-style-position: inside;
}
由于默认的列表项目符号过于简单,并且选择范围很小,根本不能满足大多数用户的需求。对此,CSS提供了图片替换技术,可以选用符合页面风格的图片,来取代默认的列表项符号。
取代默认的列表项符号时,HTML代码无需任何修改,只需使用 list-style-image属性定义图片的URL即可。这也是CSS优越性的体现。这里,对无序列表,使用 square.png 作为项目符号,而有序列表使用默认的数字项目符号。
ul {
list-style-image: url(img/square.png);
}
ol {
list-style-type: decimal;
}
上述代码看似没有问题,并在Chrome下运行正常,但在IE的所有版本和Opera下,内层的 ol 依然使用 square.png 作为项目符号。究其原因,是因为 list-style-image属性具有继承性,内层列表继承了外层列表的list-style-image属性所导致。
所以,如果要用图片取代默认的列表项目符号,在清除列表的默认样式时,还要把 list-style属性设置为 none。
ol {
list-style-type: decimal;
list-style-image: none;
}
经过上述处理之后,我们定义的列表,就跟word中的列表相差无几了,并在所有浏览器下表现一致。运行结果如图 11‑13 所示:
图11-13 列表样式
虽然使用 list-style-image 很容易达到目的,但是由于列表的格式化,主要由浏览器,而不是由设计人员完成的,所以无法精确控制图片的位置。从上图可以看出,图片和文本很难正确对齐。并且,在不同的浏览器下,图片和文字之间的距离也不尽相同。
然而,并非只有 list-style-image属性才能实现使用图片替换项目符号的功能。前面介绍过,CSS把页面上的任何元素都看作一个盒子,盒模型的大多数公共属性,其实都适用于列表,包括背景属性。所以,这时候背景就可以派上用场,可以使用背景来替代 list-style-image,再通过 background-position属性,来精确控制项目符号的位置。
要使用背景作为项目符号,首先要重置 list-style-type属性,把它置为 none。否则,项目符号和背景将会同时出现。
ul {
list-style-type: none;
}
然后,为列表的 li 元素定义一个背景图像,并设置为不平铺。为了防止 li 中的文本覆盖背景图像,需要为 li 设置适当的左外边距,为图片腾出空间。再通过 background-position属性来精确控制背景图像的位置,保证背景图像和文本正确对齐。
ul li {
margin-left: 2em;
background-position: 0 6px;
background-repeat: no-repeat;
background-image: url(img/square.png);
}
通过调整图片的位置,项目符号和文本可以正确对齐,并且在所有浏览器下的表现一致,比直接使用 list-style-image属性的效果明显要好多了(限于篇幅,就不截图了),这就是使用背景图像的好处。
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
CSS 设置列表格式相关推荐
- CSS设置列表的符号
CSS设置列表的符号 通常的列表采用<ul>或者<ol>标记,然后,结合<li>标记罗列各个项目. 项目表单实例,代码如下: <span style=&quo ...
- html根据菜单角色配置菜单代码,CSS设置列表样式和创建导航菜单实现代码
一.设置列表的符号 list-style-type: 属性://设置列表样式 list-style-type: none; //清楚样式 属性有很多可以自己去试:circle,disc,decimal ...
- php文章列表样式,css列表样式有哪些?css设置列表样式的方法
关于列表的css样式有哪些以及如何设置css列表样式?接下来的这篇文章将为大家介绍关于css列表样式的内容. 1.css有序列表(ol)和css无序列表(ul) list.html 列表样式 水果 苹 ...
- CSS 设置表格格式
在word中,表格是一项很常用的功能,并且表格的样式变化多端,用户可以根据需要选择自己喜欢的样式.那么,各式各样的表格到底是怎么实现的呢? 本节,通过一个简单的表格,来揭开word表格的神秘面纱.表格 ...
- CSS 设置超链接格式
超链接是万维网的基础,是它让整个Web成为一个整体,并获得生命.可以毫不夸张地说,整个Internet就是由超链接连接而成的.word也不例外,它也需要通过超链接实现各章节之间的互联,甚至链接到本文档 ...
- css列表格式属性,css list-style-type属性笔记
list-style-type属性定义及用法 在css中,list-style-type属性是使用来设置列表项标记的类型,在有序列表和无序列表中经常都会使用该属性. 目前,所有主流浏览器都支持list ...
- Primeng中一些组件的格式调整以及css设置
个人觉得primeng提供了很多比较好看的组件,包括输入框input.表格table.按钮button.交互框dialog等等,样式要比angular material好看一些,也比较好上手,官网提供 ...
- CSS:列表样式(设置列表项的标志图案/位置)
通过CSS 列表属性可以放置.改变列表项标志,或者将图像作为列表项标志. 代码整理自w3school:http://www.w3school.com.cn 效果图: 示例代码: <!DOCTYP ...
- html怎么改无序图标,css怎么设置无序列表?css的列表样式总结
css怎么样设置无序列表的样式你知道吗?这里有无序列表的详细应用,去掉这些图标之类的,还介绍了去掉小圆点给添加的图片的介绍,大家可以自己试试看.现在就让我们一起来看看这篇文章吧 首先我们先来看看无序列 ...
最新文章
- php 实验室管理系统,生物信息实验室管理系统-Metalims安装
- emmap erlang_erlang的map基本使用
- php curl viewstate,php curl – 发布asp.net viewstate值
- vs.net 2003 错误:无法生成项目输出组“内容文件来自stuschool(活动)”
- 无监督学习 k-means_无监督学习-第1部分
- MySQL8.0 - 新特性 - 安全及权限相关改进
- 【编译制导指令】#pragma pack - 字节数基准对齐
- CSDN上下标输入方法
- Checkstyle的配置集
- 原生js--放大镜效果
- Adapter 模式
- abp框架 mysql_ABP框架使用Mysql数据库
- pmp错题集2(强化二)
- 起底知网:大发学术财?学术富士康?定位偏差的知识工程?
- 机器学习中如何处理非数值型的特征
- 数据中台应用原型下载-深圳市政府数据开放平台低保真原型设计-Axure9
- 考研英语长难句(刘晓燕)笔记 第六课 唱着歌去考研——英语的特殊结构
- B. Dictionary
- 合振动的初相位推导_大学物理合振动的振动方程怎么求??求A的取值方法及初相位的取值方法 务必详细一些 书上看不懂...
- 数据结构 - 图的遍历
热门文章
- 时间选择插件Foundation datepicker
- Am335x lcd驱动分析
- R载入需要的程辑包:rJava Error
- 重载与覆盖(java)
- 《企业安全软件能否免费?》 ——百位中国CIO对免费企业级信息安全软件的态度调查报告...
- 【java】在jsp的js和css里面使用EL表达式取值|style里面用$取值
- @Service @Autowired
- 矿井水质在线监测系统
- 什么?你竟然还没有用这几个chrome插件? 1
- vector 使用 c++11 Lambda 表达式 排序