|
[tr][td]
用css生成内容是在css2规范中首次提出的。几年来，这个特性只有少数的web开发者使用，原因就是浏览器对于他们的兼容性不好。随着2009年IE8的发布，生成内容被再次提出，而且很多有趣的实现也首次采用生成内容的方式。在这篇文章里面，我们将讨论如何使用生成内容。 生成内容是什么? 在技术角度来说，生成内容是简单的通过css在dom树上创建一个抽象的结构。因此，在实践中，生成内容只存在于网络文档布局中。 利用js访问生成的内容，可以通过获取content属性的文本值。 var test = document.querySelector('#test');
var result = getComputedStyle(test, ':before').content;
var output = document.querySelector('#output');
output.innerHTML = result; 查看在线案例 插入生成内容 在实际元素内容前后插入内容，使用:before 和:after伪元素。为了区别伪元素，我们可以使用下面的伪标签。 Start Actual content End 我们的样式可能这样： p:before { content: "Start";
}
p:after { content: "End";
} 查看在线案例 记住，如果你用css3的规范验证css文件，那么:before 和 :after伪元素应该写成::before 和 ::after。否则，css验证器会报错。 正如你所见，插入的这两个字符串都是content的属性。这个属性接受如下值： [*] none, normal：伪内容不生成; [*] ：表示一个包含在引号中的文本字符串; [*] url()：这个方法可以让我们插入一个外部资源(通常是一个图片)，也可以使用background-image; [*] counter()：counters()这些方法插入计数器(详见下文); [*] attr(attribute)：这个方法让我们可以插入给定元素的属性值; [*] open-quote, close-quote, no-open-quote, no-close-quote：这些值可以自动产生引号标记 记住，产生元素会占据页面的一定空间，而且他们的存在会影响浏览器对父元素的尺寸计算值。 插入字符串 在前面的例子中，我们在现有元素的内容前后插入两个简单的字符串。生成内容也可以让我们通过转义符号插入更复杂的内容: p:before { content: "0A7"; padding-right: 0.2em;
} 查看在线案例 在双引号之间的转义符号是16进制的unicode值。我们也可以把简单的字符串跟unicode符号结合： p:before { content: "( " "0A7" " )"; padding-right: 0.2em;
} 查看在线案例 请注意，所有的文本内容都需要用content的属性插入，空格和tabs也可以通过键盘插入到页面中。 使用web字体插入icon Web字体可以通过生成内容来插入图标。依赖于web字体库，你可以插入简单的字符或是unicode序列: @import url(http://weloveiconfonts.com/api/?family=brandico);
p:before { content: "f303"; padding-right: 0.3em; font-family: 'brandico', sans-serif; font-size: 22px;
} 查看在线案例 在这里例子中，我们插入了twitter的icon。我们的代码可能如下这样写： .icon-twitter:before { content: "f303"; padding-right: 0.3em; font-family: 'brandico', sans-serif; font-size: 22px;
}插入图片 我们可以通过url()方法插入图片： a:before { content: url(link.png); padding-right: 0.2em;
} 查看在线案例 正如你所见，这个方法跟background-image属性有相同的效果。 插入属性值 通过attr()方法可以插入元素的属性值: a[href]:after { content: "( " attr(href) " )"; padding-left: 0.2em; color: #000; font: small "Courier New", Courier, monospace;
} 查看在线案例 我们只是插入了一个href属性值，是一个简单的字符串。 插入计数器 自动增长的数值是由css的两个属性控制的，他们是counter-reset 和counter-increment。计数器由这些属性定义，然后用counter() 和 counters()方法获取内容属性。 counter-reset计数器重置属性可以包含一个或多个计数器的名字(例如“标识符”)，后面可以跟一个可选的整数参数。通过counter-increment属性设置增长的整数值，可以作用在任何元素。他的默认值是0.负值是容许的。 counter-increment计数器增量属性是类似的，他们基本的不同是这个增加一个计数器，其默认增量是1.负值是容许的。 现在我看一个例子，他的结构如下： term description term description term description 我们想给列表中的每一个dt添加一个正数编号，css中这样写： dl { counter-reset: term;
}
dt:before { counter-increment: term; content: counter(term);
} 查看在线案例 第一个规则设置定义列表的计数器。这个叫‘范围’。计数器的名字(或标识符)是term。不管为我们的计数器选择的名字是什么，必须与计数器增量属性值一致(当然，这个名字应该是有意义的)。 第二个规则，我们用伪元素:before给dt元素添加，因为我们想要在现有元素内容前正好插入计数器。让我们再仔细看看第二条规则中的第二个声明。counter()方法接受我们的标识符(term)作为他的参数，content属性产生计数器。 数值和元素内容之间没有空间。如果我们想要添加空间的，即在数字后面留一个空间，我们可以用content属性插入如下字符串： dt:before { content: counter(term) ". ";
} 查看在线案例 注意，引号之间的字符串。这个空间插入就像我们在键盘上键入他们一样。事实上，content属性可以看做是javascript中的document.write()方法，除了他不能添加真实的文档内容。简单的说，content属性仅仅是创建一个抽象的dom树，而不能修改他。<span style="line-height: 1.8em;">[/td][/tr] |
|
