列表与生成内容
1. 列表
1.1 列表类型
list-style-type
广泛支持的类型:
disc默认, circle, square, disclosure-open, disclosure-closed, decimal, decimal-leading-zero, arabic-indic, armenian, upperarmenian, lower-armenian, bengali, cambodian, khmer, cjkdecimal, devanagari, gujarati, gurmukhi, georgian, hebrew, kannada, lao, malayalam, mongolian, myanmar, oriya, persian, lower-roman, upper-roman, tamil, telugu, thai, tibetan, loweralpha, lower-latin, upper-alpha, upper-latin, cjk-earthlybranch, cjk-heavenly-stem, lower-greek, hiragana, hiraganairoha, katakana, katakana-iroha, japanese-informal, japaneseformal, korean-hangul-formal, korean-hanja-informal, koreanhanja-formal, simp-chinese-informal, simp-chinese-formal, trad-chinese-informal, trad-chinese-formal, ethiopic-numeric, <string>, none, inherit
- 用户代理会把它无法识别的值处理为decimal
- 此属性只能应用于display的值为list-item的元素
- 如果想完全禁止显示标识,只能使用值none,none会导致用户代理在原本放标识的位置不显示内容,但不会中断有序列表中的计数。
1.1.1 字符串标记
list-style-type: "String_Marking";
1.1.2 图像标记
list-style-image: url("images/girl.jpg");
1.2 列表标志位置
属性值 | 描述 |
---|---|
inside | 列表项目标记放置在文本以内,且环绕文本根据标记对齐。 |
outside | 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。 |
list-style-position: inside;
1.3 简写列表样式
list-style: <list-style-type> ‖ <list-style-image> ‖ <list-style-position>
list-style: url("images/girl.jpg") square inside;
2. 生成内容
2.1 插入生成内容
content 属性与:before
及 :after
伪元素配合使用,来插入生成内容。如要在超链接前面增加前缀文本[link]
标志:
a[href]:before {content: "[link]";}
另外有2个限制:
- 若before或after选择器的主体是块级元素,则display属性只接受值None、inline、block、和marker 其他值处理为block。
- 若before或after选择器的主体是行内元素,属性display只能接受none和inline。其他值都处理为inline.
- 生成内容由与之关联的元素继承值(只应用于可继承的属性)。如:关联主体是绿色,生成内容也是绿色
2.2 指定内容
指定的串值会原样显示,即使其中包含某种标记也例外。可以使用十六进制Unicode值进行转义。
content: normal | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
h2::before {
content: "<em>¶</em> ";
content: "\00ab";
}
2.3 插入属性值
取一个元素的属性值,使之作为文档显示的一部分。如将每个链接的href
属性值直接放到链接的后面:
a[href]:after {content: attr(href);}
/*复杂的规则*/
body::before {
content: "Text: " attr(text) " | Link: " attr(link) " | Visited: " attr(vlink) " | Active: " attr(alink);}
2.4 生成引号
quotes: [<string> <string>]+ | none | inherit
除了关键字 none
和 inherit
之外,惟一的有效值是一个或多个字符串“对”。对的第一个字符串定义开引号符号,第二个字符串定义闭引号符号。因此,在下列两项声明中,只有第一项是有效的:
quotes: '"' "'"; /* valid */
quotes: '"'; /* NOT VALID */
任意多个嵌套层次
<style type="text/css">
quotation: display: block;}
quote {quotes: '\201C' '\201D' '\2018' '\2019';}
quote::before, q::before{content: open-quote;}
quote::after, q::after {content: close-quote;}
</style>
<quotation>
<quote>
In the beginning, there was nothing. And God said:
<q>Let there be light!</q> And there was still nothing, but you could see
it.</quote
>
</quotation>
3. 计数器
3.1 重置和递增
计数器的基础包括两个方面,一是能设置计数器的起点,二是能将其递增一定的量。
**counter-reset
**属性处理设置计数器的起点,可以指定为以下之一:
<custom-ident> [<integer>]
: custom-ident表示要递增的计数器的名称。 integer表示每次出现元素时将计数器重置为的值。如果不指定,则默认为0
。none
: 该关键字表示不执行计数器重置。它可用于重置隐藏在不太具体的规则中定义的计数器。
**counter-increment
**属性用于将CSS Counters的值增加给定值。
<custom-ident> [<integer>]
: **custom-ident
**递增的计数器的名称。该标识符由不区分大小写的字母a到z,数字0到9,下划线(_)和/或短划线( - )的组合组成。第一个非破折号字符必须是一个字母(即,在它的开头没有数字,即使前面有破折号。)此外,在标识符的开头禁止使用两个破折号。在任何案例组合中都不能是none,unset,initial或inherit。integer表示计数器的值。如果没有给出,默认为1。none
: 不得增加计数器。用作默认值,或取消更具体规则的增量。
<head>
<style type="text/css">
h2 {
counter-increment:chapter-count;
font-size:1em;
}
h2:before {content:"Chapter " counter(chapter-count) ": "}
#example-element {
counter-reset: chapter-count 0;
}
</style>
</head>
<body id="chapters" class="transition-all">
<h1>Alice's Adventures in Wonderland</h1>
<h2>Down the Rabbit-Hole</h2>
<h2 id="example-element">The Pool of Tears</h2>
<h2>A Caucus-Race and a Long Tale</h2>
<h2>The Rabbit Sends in a Little Bill</h2>
</body>