第十二章 列表和生成元素

第十二章 列表和生成元素

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) " ]"}