《CSS世界》读书笔记（九）

<!-- 《CSS世界》张鑫旭著 -->

content内容生成技术

1. content 辅助元素生成

清除浮动：

.clear:after {
    content: '';
    display: table;  /*  也可以是‘block’ */
    clear: both;
}

辅助实现“两端对齐”以及“垂直居中/上边缘/下边缘对齐”：（示例地址 http://demo.cssworld.cn/4/1-7.php）

2. content 字符内容生成

比较常用的是配合@font-face规则实现图标字体效果，还有就是可以插入Unicode字符

配合CSS3 animation实现字符动画效果：“正在加载中...”中的三个点动起来，示例见  http://demo.cssworld.cn/4/1-9.php

3. content 图片生成

content图片生成指的是直接用url功能符显示图片，例如：

div:before {
    content: url(1.jpg);
}

在实际项目中，content图片生成用的并不多，主要是因为图片的尺寸不好控制，我们设置宽高无法改变图片的固有尺寸。所以更多的是使用background-image模拟

4.了解 content 开启闭合符号生成

content支持的属性值中有一对不常用的 open-quote 和 close-quote 关键字，顾名思义，就是“开启的引号”和“闭合的引号”，使用纯正的中文解释就是“上引号”和“下引号”。

并且，open-quote 和 close-quote 不只是引号这么简单。

CSS 世界中有一个名为 quotes的属性，可以指定 open-quote 和 close-quote 字符具体是什么。例如：

<p class="ch"><q>这本书很赞！</q></p>
<p class="en"><q>This book is very good!</q></p>
<p class="no"><q>denne bog er fantastisk!</q></p>
/* 为不同语言指定引号的表现 */
:lang(ch) > q { quotes: '“' '”'; }
:lang(en) > q { quotes: '"' '"'; }
:lang(no) > q { quotes: '《' '》' }

/* 在q标签的前后插入引号 */
q:before { content: open-quote; }
q:after { content: close-quote; }

虽然 open-quote 和 close-quote 给人感觉很厉害，但此技术具有完全可替代性，最后变得很鸡肋，了解即可；

5. content attr 属性值内容生成

此功能比较常用，例如：

img:after {
    content: attr(alt);
}

6.深入理解 content 计数器

计数器效果可以说是 content 部分的重中之重，因为此功能非常强大、实用，且不具有替代性，甚至可以实现 JavaScript 都不好实现的效果。

counter-reset 和 counter-increment  以及  counter() / counters()

（1）属性 counter-reset。计数器-重置，主要作用是给计算器起个名字。如果可能，顺便告诉下从哪个数字开始计数。默认是0.

.xxx { counter-reset: wangxiaoer 2; }

 counter-reset 也可以多个计数器同时命名。

.xxx { counter-reset: wangxiaoer 2 wangxiaosan 3; }

（2）属性 counter-increment 。计数器递增值为 counter-reset 的1个或多个关键字，后面可以跟数字，表示每次计数的变化值。如果省略，则默认为1.

（3）方法  counter() / counters()。

/* name就是 counter-reset 的名称 */
counter(name)

counters()可以说是嵌套计算的代名词。我们平时的序号不可能只是1、2、3、4……还会诸如1.1、1.2、1.3等的子序号。这时候就需要用到counters()

示例见 http://demo.cssworld.cn/4/1-18.php

要说明的比较重要的一点是：显示content计数值的DOM元素在文档流中的位置一定要在 counter-increment 元素的后面，否则没有计算效果。

7. content 内容生成的混合特性

意思是各种content内容生成语法是可以混合在一起使用的，例如：

a:after {
    content: "(" attr(href) ")";
}
q:before { 
    content: open-quote url(1.jpg);
}