列表和生成的内容

[xiongshj]

列表和生成的内容

这是学习《CSS 权威指南》第 15 章的笔记。

列表

调整列表样式最简单的（也是支持最广泛的）方式是改变记号类型。

list-style-type 属性

若想改变列表项目所用的记号类型，使用 list-style-type 属性。

这个属性的初始值是 disc，适用于 display 属性的值为 list-item 的元素，继承性：是。

列表样式类型示例

如果不想显示记号，应该使用的值是 none。none 的作用是禁止在本该显示记号的位置上出现任何内容，不过却不阻断有序列表的计数。

ol li {
  list-style-type: decimal;
}

li.off {
  list-style-type: none;
}

<ol>
  <li>Item the first</li>
  <li class="off">Item the second</li>
  <li>Item the third</li>
  <li class="off">Item the fourth</li>
  <li>Item the fifth</li>
</ol>

上面代码的效果演示

list-style-type 的值是继承的，因此如果希望嵌套的列表使用不同的记号，要分别定义。

CSS 还允许指定字符串值为列表的记号。这样，只要能从键盘上打出来的字符都能用作记号。例如：

.list01 {
  list-style-type: "%";
  list-style-type: "Hi! ";
}

目前只有 Firefox 族浏览器支持字符串记号。

list-style-image 属性

若想使用图像设定记号，可以使用 list-style-image 属性实现。

这个属性的初始值是 none，适用于 display 属性的值为 list-item 的元素，继承性：是。

ul li {
  list-style-image: url("ohio.gif");
}

一般来说，最好提供一个后备记号类型，以防图像无法加载。具体方法是，为列表再声明一个 list-style-type 属性。

ul li {
  list-style-image: url("ohio.png");
  list-style-type: square;
}

使用 list-style-image 时还可以把值设为默认的 none。这是个好习惯，因为 list-style-image 是继承的，因此嵌套列表也将使用指定的图像作为记号，除非明确设定不这么做：

ul {
  list-style-image: url("ohio.gif");
  list-style-type: square;
}

ul ul {
  list-style-image: none;
}

list-style-image 的值可以是任何图像值，包括渐变图像（不过很少浏览器支持使用渐变图像值作为列表记号）。

list-style-position 属性

使用 CSS 还可以影响列表项目的一个外观：在列表项目内容的外部还是内部显示记号。记号的位置使用 list-style-position 属性设定。

这个属性的可选值有三个，包括：inside、outside 和 inherit，初始值是 outside。这个属性适用于 display 属性的值为 list-item 的元素，继承性：是。

li.first {
  list-style-position: inside;
}

li.second {
  list-style-position: outside;
}

list-style 属性

list-style 属性是 list-style-type、list-style-image 和 list-style-position 三个属性的合并简写形式。

list-style 的值可以按任何顺序列出，而且任何一个值都可以省略。只要有一个值，其余的值都将使用默认值。

li.norm {
  list-style: url("img42.gif");
  list-style: url("imag42.gif") disc outside; /* 作用相同 */
}

生成的内容

插入生成的内容

生成的内容使用 ::before 和 ::after 伪元素插入文档。这两个伪元素把 content 属性指定的内容插入元素的内容之前或之后。

生成的内容与元素的内容之间没有空格。

生成的内容位于元素框的内部。从 CSS 2.1 开始，除了列表记号，无法把生成的内容放在元素框的外部。

CSS2 和 CSS 2.1 明确禁止浮动或定位 ::before 和 ::after。此外，还有下述限制：

（1）如果 ::before 或 ::after 选择符的目标是块级元素，那么 display 属性的值只能为 none、inline、block 或 marker。其他值都当作 block。

（2）如果 ::before 或 ::after 选择符的目标是行内元素，那么 display 属性的值只能为 none 或 inline。其他值都当作 inline。

生成的内容比较特别的一点是，它会从依附的元素上继承属性值。

当然，只有能被继承的属性才会继承。

h1 {
  border-top: 3px solid black;
  padding-top: 0.25em;
}

h1::before {
  content: "New Section";
  display: block;
  color: gray;
  border-bottom: 1px dotted black;
  margin-bottom: 0.5em;
}

由于生成的内容放在 h1 的元素框内部，因此生成的文本将出现在元素的上边框下方。此外，生成的文本也在内边距内测，如图所示。元素的内容将向下移动 0.5em，因为给生成的内容（设为了块级）设定了下外边距。

指定内容

生成的内容使用 content 属性指定，这个属性适用于 ::before 和 ::after 伪元素。

（1）字符串显示为字面量，即使其中包含某种标记也是如此。因此，下述规则将把字符串原封不动地插入文档：如图所示

h2::before {
  content: "<em>&para;</em> ";
  color: gray;
}

这意味着，如果想在生成的内容中换行，不能使用 <br>。正确的做法是使用字符串 \A，这是 CSS 表示换行符的方式。相反，如果一个较长的字符串值分为多行编写，要使用 \ 字符转义换行符。

（2）插入属性值

任何属性的值都可以作为生成的内容插入文档。

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

（3）生成引号

引号是一种特殊形式的生成的内容。引号使用 quotes 属性和 open-quote 等值生成。

quotes 属性除了关键字 none 和 inherit 之外，唯一有效的值是一对或多对字符串。字符串对中的第一个字符串定义开始引号，第二个字符串定义结束引号。

open-quote 和 close-quote 两个值的作用是在恰当的位置插入正确的引号。插入的引号来自 quotes 属性的值。

<quotation>
  <quote>I hate quotations.</quote>
  <quotee>Ralph Waldo Emerson</quotee>
</quotation>

quotation {
  display: block;
}

quote {
  quotes: '"' '"';
}

quote::before {
  content: open-quote;
}

quote::after {
  content: close-quote;
}

quotee::before {
  content: " (";
}

quotee::after {
  contnet: ")";
}

上面代码的效果演示

此外，还有 no-close-quote 和 no-open-quote 两个关键字。

（4）计数器

创建计数器的基本过程就是先设置计数器的起点，然后增加一定的量。前者使用 counter-reset 属性设置，后者使用 counter-increment 属性设置。

通过重置创建 chapter 计数器：

h1 {
  counter-reset: chapter;
}

默认情况下，计数器重置为零。如果想重置为其他数，在标识符后声明：

h1#ch4 {
  counter-reset: Chapter 4;
}

使用多个标识符和整数对还可以一次性重置多个标识符。如果缺少整数，默认为零：

h1 {
  counter-reset: Chapter 4 section -1 subsec figure 1;
}

使用 counter-increment 属性指明通过哪个元素递增计数器。

与 counter-reset 一样，counter-increment 的值为标识符和整数对，而且整数部分可以是 0、负数或正数。两个属性的不同之处是，在 counter-increment 中省略的整数部分默认为 1，而不是 0。

ol {
  counter-reset: ordered; /* 默认为 0 */
  counter-increment: ordered; /* 默认为 1 */
}

为了真正显示计数器，需要使用 content 属性及与计数器有关的值。

list[type="ordered"] {
  counter-reset: ordered; /* 默认为 0 */
}

list[type="ordered"] item {
  display: block;
}

list[type="ordered"] item::before {
  counter-increment: ordered;
  content: counter(ordered) ". ";
  margin: 0.25em 0;
}

计数器在元素上重置。

增量可以在元素上设置，也可以在伪元素上设置。

在 counter() 中还可以为每个计数器定义不同的格式。方法是，在计数器的标识符后面添加一个 list-style-type 关键字，之间以逗号隔开。

注意，display 属性的值为 none 的元素不递增计数器。相比之下，visibility 属性的值为 hidden 的元素依然递增计数器。

嵌套计数器：counters()。

跳过了 @counter-style 相关内容的学习，因为浏览器对此欠缺支持。

小结

加油！