css权威指南学习笔记--列表与生成内容

Posted 2020-06-16

列表属性

1.list-style-type:css2多于css2.1

2.list-style-image:有继承，子级列表会继承该图像

3.list-style-position:inside|outside|inherit   inside:列表符号在内容开始的地方，outside：列表符号单独列在列表内容的外面。

 将前面三个属性合并：list-style ，有继承性,三个属性没有顺序要求，只有提供了一个值，其他值可以被忽略 例如：li {list-style:url(ji.gif) square inside}

 

 

列表标志位置

    标志相对于内容绝对定位，css2用display:marker和marker-offset属性来调整标志的相对于内容的距离，css2.1觉笨拙，淘汰，css3草案定义使用maker伪元素来控制（简洁新方法）例：li：：marker{margin-right:20px;}  浏览器现在并没有实现。

 

 

生成内容

 1、插入生成内容：  伪元素：before 和：after ；content 属性值为插入的内容。生成内容放在元素框的内部。css2及css2.1明确地禁止浮动或定位：before和：after内容，且禁止使用列表样式属性和表属性。另外有2个限制：1.若这两个选择器的主体是块级元素，则display属性只接受值None、inline、block、和marker 其他值处理为block。2、若这个两个选择器的主体是行内元素，属性display只能接受none和inline。其他值处理为inline.

2、生成内容由与之关联的元素继承值（只应用于可继承的属性）。如：关联主体是绿色，生成内容也是绿色

 

指定内容

content 值：normal | [<string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no - open - quote | no-close-quote ] + | inherit