HTML5与CSS3基础教程-第15章 列表

《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。