第十二章 列表和生成元素

第十二章 列表和生成元素

1.列表

列表类型 list-style-type

值：disc circle square decimal decimal-leading-zero upper-alpha

upper-latin lower-alpha lower-latin upper-roman lower-roman

lower-greek upper-greek armenian georgian none

初始值：disc

应用于：display为list-item的元素

继承性：有

说明：

disc 使用实心点作为列表标志

circle 使用一个空心点作为列表标志

square 使用一个方块（实心或空心）作为列表标志

decimal 1 2 3....

decimal-leading-zero 01 02 03....

upper-alpha

upper-latin A B C...

lower-alpha

lower-latin a b c...

upper-roman I II III...

lower-roman i ii iii...

lower-greek 小写希腊字母

armenian 传统亚美尼亚字母

georgian 传统乔治序号

none 不使用任何标志

CSS无法识别有序还是无序列表，所以有序和无序列表都可以使用这些值

list-style-type可以继承，所以嵌套中的列表项如果要使用不同的标志，需要单独声明。

列表项图像 list-style-image

值：<uri> none inherit

初始值：none

应用于：dislay为list-item的元素

继承性：有

计算值：对于uri，为绝对URI；否怎为none

说明：

1.使用时要小心，避免使用过大图片

2.要留“后路”，防止图片加载失败，同时使用list-style-type

3.可以继承，所以嵌套中的列表项如果不希望使用图片，可以设置为none。

列表项标志的位置 list-style-position

值：inside outside inherit

初始值：outside

应用于：display为list-item的元素

继承性：有

列表项标志简写 list-style

值： <list-style-type> <list-style-image> <list-style-position> inherit

初始值：相对于各个属性

应用于：display为list-item的元素

继承性：有

说明：3个值顺序任意，而且可以任意省略，省略值按默认值计算。

列表布局：

1.列表项和列表本身都是块级元素

2.列表项标志在列表项外，也在整个列表外

3.列表项标志“挂”在列表项上，随列表项移动。

4.列表项标志和列表项间的距离没有明确定义，且不能设置。

5.如果列表项标志放置在列表项外，不会影响其他内容的布局，也不会影响列表项本身的布局。

6.为兼容考虑，需要缩进时，强烈建议同时设置margin和padding。

如要使用外边距，设置内边距为0 ul{margin-left:20px; padding-left:0}

2.生成内容

插入内容

方法：使用:before 和:after伪类元素，指定content

content

值：normal <string> <uri> <counter> attr<identifier>

open-quote close-quote no-open-quote no-close-quote inherit

应用于：:before :after 伪类元素

继承性：无

计算值：对于<uri>值，为绝对uri；对于属性引用，则为结果字符串；否则根据指定确定。

说明：

1.CSS2和CSS2.1禁止浮动和定位:before和:after内容

2.如果:before和:after选择器的主体是块级元素，则生成内容的display属性只能设置成none inline block 或marker，其他值处理为block。

3.如果:before和:after选择器的主体是行内元素，则生成内容的display属性只能设置成inline或none，其它值处理为inline。

4.生成元素继承主体元素的样式。

5.插入属性值：如要插入href

a[href]:after{content: " [" att(href) " ]"}