一、哗啦哗啦的简介zxx://这里“哗啦哗啦”的作用是为了渲染一种氛围。 在CSS 3 Generated Content工作草案 (http://www./TR/css3-content/)中，content属性添加了更多的特征，例如：插入以及移除文档内容的能力，以创建脚注，结语，及段落注释。但是目前还没有浏览器支持content的扩展功能。 本文将展示content内容生成的基本使用，以及一些您可以应用的特别的技术。 二、还有一点小小的提醒在进入正题之前，我要做一回啰嗦的老女人，讲点可有可无无伤大雅的提醒。
三、最基本的 – 生成内容content使用如下： h2:before {
content: "我是额外文字！";
}
此段样式的作用是在每个h2标签的前面添加文字“我是额外文字”。 content属性的值除了使用文本值外，还可以使用标签的一些属性值，方法是attr()，参见如下代码： a.content:after {
content: attr(href);
}
<a class="content" href="http://www./">此标签的href值是：</a>
结果如下截图（截自Firefox3.6）：  对应a标签内的文字值的最后添加了此标签的href属性的值。 注意：当使用attr()获取标签属性名的时候，千万不要添加引号! 您还可以使用计数器产生动态数字或运用url(/path/to/file)路径插入图片。要想获得更多信息，请继续看下面的应用实例。 四、使用计数器创建号码内容如果您想插入一系列递增的值，比如说“美女1，美女2，美女3，美女4……”，您就可以使用计数器在每个列表项的前面插入递增的序号值。CSS代码如下： ol {
list-style-type:none;
counter-reset:sectioncounter;
}
ol li:before {
content:"美女" counter(sectioncounter) "： ";
counter-increment:sectioncounter;
}
HTML代码如下： <ol>
<li><img src="http://image./image/study/s/s128/mm1.jpg"
width="128" height="96" /></li>
<li><img src="http://image./image/study/s/s128/mm3.jpg"
width="128" height="96" /></li>
</ol>结果如下图（Firefox3.6下截图）：  您可以狠狠地点击这里：content产生递增序号demo 说明： 五、为多语言内容插入正确的引号不同的语言使用不同的引号字符。比如英文的引号就是 <p lang="en"><q>It’s only work if somebody makes you do it.</q></p> <p lang="no"><q>Hvis du forteller meg nok en vits, s? skal jeg sl? deg til jorden.</q></p> <p lang="ch"><q>欢迎来到上海，欢迎参观世博会！</q></p> 我们不妨试试下面的代码： /* 为不同语言指定引号的表现 */
:lang(en) > q {quotes:'"' '"';}
:lang(no) > q {quotes:"?" "?";}
:lang(ch) > q {quotes:"“" "”";}
/* 在q标签的前后插入引号 */
q:before {content:open-quote;}
q:after {content:close-quote;}结果如下图所示：  您可以狠狠地点击这里：content生成对应语言字符demo 此技术可以应用于各类元素，而不仅仅是q标签，另外，Safari 3以及IE7（以及以下）是不支持此技术的。 六、用图片替换文字关于图片替换技术，您可以参见这里：several image replacement techniques (http://www./tests/revised-image-replacement/)，里面提供了几种方法。而这里展示的则是另外不同的用图片替换方法，使用的是content。 您可以参见下面的代码： div.logo {
content:url(logo.png);
}这种图片替换技术的优点在于文字内容确实被替换了。因此，您没有必要设定高宽为图片的显示创造空间，或是使用text-indent或是padding隐藏最初的文字。 然而，就目前而言，还是有不少需要注意的： 七、显示相对应的链接图标指的是针对不同的链接类型，在链接的后面显示对应链接类型的图标，例如，链接的对象是一个图片，则显示图片的小图标，如果链接对象是视频，则显示视频小图标，如果链接就是个URL网页链接，则显示链接的小图标。您可以参见下面的代码： CSS代码：
p a[href $=".pdf"]:after {
content:url(../image/icon_pdf.png);
}
p a[rel = "external"]:after {
content:url(../image/icon_link.png);
}HTML代码：
<p>您可以查看此PDF文件：<a href="/sample.pdf">web站点的性能优化.pdf</a>，或是在线查看， <a href="http://www./wordpress/" rel="external">点击这里</a>。</p> 结果如下图所示：  您可以狠狠地点击这里：CSS content显示链接图标demo 八、使用属性值作为content内容使用属性值当作content内容指的是将标签的title,src,href,alt等值当作内容显示在标签的内部，这是很强大的一个功能。由于此技术目前远未到普及的程度，所以这里简单介绍一下，您可以参见下面的两小段样式代码： a:after {
content: "(" attr(href) ")";
}abbr:after {
content: "(" attr(title) ")";
}这里理解和使用都不难，关键就是CSS3 的attr()方法。 前瞻：强大的CSS3 attr()方法。 通过使用自定义的data属性，可以实现一些非常强大的效果，诸如简单图表图形的渲染，动画效果的实现。例如我们可以设置根据元素的attribute值设定background-color的颜色值，这在显示在线调色板上会大放异彩；我们还可以根据attribute值指定元素的大小，就像定义图表每个条形的长度一样。总之，attr()的潜力惊人。 九、最后一点唠叨相信本文对您理解content属性会有不少的帮助。只是在中国，在IE6依旧盛行的中国，由于IE6/7对content的不支持，限制了这一强大功能的流行，但我相信，在未来几年内，会迎来它的春天的。随着对CSS3的逐步深入的了解，会发现，CSS3的潜力与强大真是超乎想象。我可以预见再未来几年，会有类似于寒武纪爆发的CSS新技术涌现出来，那时，可真是前端开始走向兴盛的时代。 |
|
|
