CSS学习之六：生成内容

文本主要展示CSS content及其相关的属性的一些使用技巧:
•:before和:after伪元素
•content属性
•CSS quotes与content属性的结合使用
•计数器

它们的基本介绍请参考：CSS content, counter-increment 和 counter-reset介绍及用法

1、插入生成内容

      使用:before 和:after伪元素结合content属性，就可以在页面内任何一个元素前或后插入内容，比如下面这个声明，可以在具有href属性的链接的前面加上字符串“(link)”：

a[href]:before { content: "(link)"; }

生成内容的样式继承与之关联元素的样式，除非给它添加额外的样式，比如要使插入的字符串颜色是灰色的，样式这么写即可：

a[href]:before { content: "(link)"; color: gray; }

如图所示：插入生成内容

2、指定内容（content属性）

CSS content 属性可以包括这些值：attr(alt) | counter(name) | counter(name , list-style-type) | counters(name , string) | counters(name , string , list-style-type) | no-close-quote | no-open-quote | close-quote | open-quote | string | url(url)

作用是用来和 :after 及 :before 伪元素一起使用，在对象前或后显示内容。

要注意的是串值会原样输出，比如下面的规则：

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

会生成如下的效果：

字符串原样输出

content属性的串值要包括任何非ASCII字符集或实体，在CSS和XHTML中声明该字符，并/或为该字符使用ISO编码(如：”\00a3″)。，详细请参考：http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

插入属性值：

使用attr值可以插入alt文本、class或id值以及任何属性，比如以下的规则可以实现插入超链接的链接地址而不使用js：

a:hover:after { 
	background-color: #008000;
	content: attr(href);
	color: #FFF;
	font-size: .8em;
	line-height: 1.2em;
	position: absolute;
	top: -1.2em;
	left: 0;
}

查看Demo

3、生成引号

CSS quotes属性值包括：[<string> <string>] |none|inherit
string：用引号括起的嵌套标记定义。两个为一组。第一个 string 定义前标记（例："<"），第二个 string 定义后标记（例：">"）。组之间用空格格开。嵌套标记的应用深度按定义顺序内推；

none：content 属性的 open-quote 和 close-quote 值将不会生成任何嵌套标记；

inherit：取决于具体的用户代理。

使用content属性的open-quotes值和close-quotes值以及quotes属性，使得生成引号的管理成为可能。一般是在content属性中定义引号，然后用quotes属性控制引号的“开”与“关”，如有以下HTML结构：

<div class="text">
	<dl>
		<dt>中国四大名著</dt>
		<dd>三国演义</dd><address>罗贯中</address><br />
		<dd>水浒传</dd><address>施耐庵</address><br />
		<dd>西游记</dd><address>吴承恩</address><br />
		<dd>红楼梦</dd><address>曹雪芹</address><br />
	</dl>
</div>

样式：

.text dd, .text address { quotes: "\300A" "\300B"; display: inline; }
.text dd:before { content: open-quote; }
.text dd:after { content: close-quote; }
dd + address:before { content: "（"; display: inline; }
dd + address:after { content: "）"; display: inline; }

会在名著前后添加书名号，在左前前后添加括号。

不过多层嵌套时各浏览器解析有很大的差别，比如有下面的结构：

<blockquote>
	In the begining,there was nothing.And God said:<q>Let there be ligth!</q>And there was still nothing,but you could see it.
</blockquote>

样式如下：

blockquote { quotes: '\201C' '\201D' '\2018' '\2019'; }
blockquote:before { content: open-quote; }
blockquote:after { content: close-quote; }
blockquote q:before { content: open-quote; }
blockquote q:after { content: close-quote; }

在safari 5 显示不正常，blockquote前后无引号，q前后出现双引号。

查看Demo

 4、计数器

CSS的counter-reset和counter-increment属性值包括：[<string> <string>] |none|inherit

counter-reset设置计数器的起点；counter-increment能将其递增一定的量。

假设有如下HTML结构：

<h1>The secret Life of Salmon</h1>
<h2>Introduction</h2>
<h2>Habitats</h2>
<h3>Ocean</h3>
<h3>Rivers</h3>
<h2>Spawning</h2>
<h3>Fertilization</h3>
<h3>Gestation</h3>
<h3>Hatching</h3>

对它使用计数器在标题前面添加所需要的列表项：

h1 {
	counter-increment: chapter;/* 在每个h1的前面添加计数器 */
	counter-reset: section subsec;/* 并在每一个h1后面重设h2的计数器 */
}
h1:before {
	content: counter(chapter) ". ";
}
h2 {
	counter-increment: section;/* 在每个h2的前面添加计数器 */
	counter-reset: subsec;/* 并在每一个h2后面重设h3的计数器 */
}
h2:before {
	content: counter(chapter) "." counter(section) ". "; 
}
h3 {
	counter-increment: subsec;/* 在每个h3的前面添加计数器 */
}
h3:before {
	content: counter(chapter) "." counter(section) "." counter(subsec) ". ";
}

可以产生类似目录的结构，查看Demo

另外，可以改变计数器的默认值，采用大小写字母和数字混合的方式显示列表项：

h1 {
	counter-increment: chapter;/* 在每个h1的前面添加计数器 */
	counter-reset: section 0 subsec;/* 并在每一个h1后面重设h2的计数器 */
/* 若“标识符-整数”对没有指定整数，则默认为0（counter-increment属性则为1），且数值可以为负 */
}
h1:before {
	content: counter(chapter,upper-alpha) ". ";
/* 没有为计数器指定关键字，默认为decimal计数样式。*/
}
h2 {
	counter-increment: section;/* 在每个h2的前面添加计数器 */
	counter-reset: subsec;/* 并在每一个h2后面重设h3的计数器 */
}
h2:before {
	content: counter(chapter,upper-alpha) "." counter(section) ". "; 
}
h3 {
	counter-increment: subsec;/* 在每个h3的前面添加计数器 */
}
h3:before {
	content: counter(chapter,upper-alpha) "." counter(section) "." counter(subsec,lower-roman) ". ";
}

查看Demo

对于嵌套比较复杂的HTML结构，如果使用计数器，可以使用content的counters值实现，如下面表示目录的有序列表：

代码 
<ol style="counter-reset: ordered -1;/* 使有序列表项从1开始 */">
    <li><a href="#" title="前言">前言</a></li>
    <li>第1章
        <ol>
            <li><a href="#" title="第1.1节">第1.1节</a></li>
            <li><a href="#" title="第1.2节">第1.2节</a>
                <ol>
                    <li><a href="#" title="第1.2.1节">第1.2.1节</a></li>
                    <li><a href="#" title="第1.2.2节">第1.2.2节</a></li>
                    <li><a href="#" title="第1.2.3节">第1.2.3节</a></li>
                </ol>
            </li>
            <li><a href="#" title="第1.3节">第1.3节</a></li>
        </ol>
    </li>
    <li>第2章
        <ol>
            <li><a href="#" title="第2.1节">第2.1节</a></li>
            <li><a href="#" title="第2.2节">第2.2节</a></li>
            <li><a href="#" title="第2.3节">第2.3节</a></li>
        </ol>
    </li>
    <li>第3章
        <ol>
            <li><a href="#" title="第3.1节">第3.1节</a></li>
            <li><a href="#" title="第3.2节">第3.2节</a></li>
            <li><a href="#" title="第3.3节">第3.3节</a></li>
        </ol>
    </li>
</ol>

只需添加如下的样式即可实现可自动增加的列表项：

ol { counter-reset: ordered; margin-left: 2em; list-style-type: none; }
ol li:before {
	counter-increment: ordered;
	content: counters(ordered,".") " - ";
/* content: counters(ordered,".",lower-alpha) " - ";列表项会使用小写字母 */
}

查看Demo

想了解更多CSS content的运用，请移步：CSS content内容生成技术以及应用，这些高手们讲的很精辟。

（全文完）

posted @ 2010-08-28 17:30  chemdemo  阅读(2012)  评论(3)  编辑  收藏  举报