《HTML5与CSS3基础教程(第8版)》 第15章读书笔记
-
2020/04/03
-
有序列表包含3个可选属性: (p302)
start
:有序列表开始的序号(不管使用什么类型的序号,开始序号的值最好用数字)。type
:有序列表的序号类型,包括A, a, I, i, 1
默认是1。reversed
:指示是降序排序的列表。
-
不要根据希望添加在内容旁边的标记样式来决定使用的列表类型(这些是可以通过CSS进行修改的),应该考虑列表的含义(列表会随着其中项目顺序的改变而改变吗)。 (p303)
-
list-style-type
:(p304 - 305)无论有序列表还是无序列表,都可以选择出现在列表项目左侧的标记的类型。
disc
:圆点(默认)circle
:圆圈square
:方块decimal
:数字(1, 2, 3…)upper-alpha
:大写字母lower-alpha
:小写字母upper-roman
:大写罗马数字lower-roman
:小写罗马数字none
:清除样式
也可以使用
background
来自定义标记(p306 - 308) -
列表左边的缩进: (p308)
大多数浏览器是通过
padding-left
来设置默认缩进的,但是IE8之前的IE是使用margin-left
来设置的。所以一般使用margin-left:0
来reset列表,然后通过padding-left
来统一修改缩进。如果语言默认(如希伯来语)或内容方向指定为从右到左,列表就会通过右侧外边距来缩进。(p304)
-
li
的value属性: 可以通过有序列表的在li
上面指定value
属性来决定项目的顺序,后面的项目会根据该项目的顺序来重新编号。(value
属性会覆盖start
属性的值)(p208 - 309) -
list-style-position
:控制标记的位置。继承 (p309 - 310)outside
:默认值,标记在内容外侧inside
:标记在内容中(取消悬挂缩进)。
-
可以使用
list-style
来同时使用list-style-type, list-style-position, list-style-image
: 顺序是任意的,可以指定一个或多个。(p310) -
嵌套列表:(p311 - 314)
- 有序列表: 无论嵌套的层级是哪一级,默认都是使用阿拉伯数字。
- 无序列表: 第一级使用圆点,第二级使用空心圆圈,三级及以后使用方块。
-
描述列表: (p314 - 317)
-
dl是描述列表,在H5之前被称为定义列表。
-
使用
dt
命名名称,dd
设置值:dt
默认向左对齐,dd
默认缩进。 -
dt
和dd
的对应关系: 可以是1:1, 1:n, n:1, n:m
。
-