CSS之生成内容(Content)

精选转载

gkvalley 2011-03-04 21:06:45

文章标签 .NET IT C# WEB MVC 文章分类 .Net 后端开发

文本主要展示CSS content及其相关的属性的一些使用技巧:

•:before和:after伪元素
•content属性
•CSS quotes与content属性的结合使用
•计数器

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

1、插入生成内容

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

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

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

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

如图所示：

2、指定内容（content属性）

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

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

    
            1
            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：

    
            01
            a:hover:after {
        
            02
                background-color: #008000;
        
            03
                content: attr(href);
        
            04
                color: #FFF;
        
            05
                font-size: .8em;
        
            06
                line-height: 1.2em;
        
            07
                position: absolute;
        
            08
                top: -1.2em;
        
            09
                left: 0;
        
            10
            }

查看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结构：

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

样式：

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

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

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

    
            1
            <blockquote>
        
            2
                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.
        
            3
            </blockquote>

样式如下：

    
            1
            blockquote { quotes: '\201C' '\201D' '\2018' '\2019'; }
        
            2
            blockquote:before { content: open-quote; }
        
            3
            blockquote:after { content: close-quote; }
        
            4
            blockquote q:before { content: open-quote; }
        
            5
            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结构：

    
            1
            <h1>The secret Life of Salmon</h1>
        
            2
            <h2>Introduction</h2>
        
            3
            <h2>Habitats</h2>
        
            4
            <h3>Ocean</h3>
        
            5
            <h3>Rivers</h3>
        
            6
            <h2>Spawning</h2>
        
            7
            <h3>Fertilization</h3>
        
            8
            <h3>Gestation</h3>
        
            9
            <h3>Hatching</h3>

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

    
            01
            h1 {
        
            02
                counter-increment: chapter;/* 在每个h1的前面添加计数器 */
        
            03
                counter-reset: section subsec;/* 并在每一个h1后面重设h2的计数器 */
        
            04
            }
        
            05
            h1:before {
        
            06
                content: counter(chapter) ". ";
        
            07
            }
        
            08
            h2 {
        
            09
                counter-increment: section;/* 在每个h2的前面添加计数器 */
        
            10
                counter-reset: subsec;/* 并在每一个h2后面重设h3的计数器 */
        
            11
            }
        
            12
            h2:before {
        
            13
                content: counter(chapter) "." counter(section) ". ";
        
            14
            }
        
            15
            h3 {
        
            16
                counter-increment: subsec;/* 在每个h3的前面添加计数器 */
        
            17
            }
        
            18
            h3:before {
        
            19
                content: counter(chapter) "." counter(section) "." counter(subsec) ". ";
        
            20
            }

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

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

    
            01
            h1 {
        
            02
                counter-increment: chapter;/* 在每个h1的前面添加计数器 */
        
            03
                counter-reset: section 0 subsec;/* 并在每一个h1后面重设h2的计数器 */
        
            04
            /* 若“标识符-整数”对没有指定整数，则默认为0（counter-increment属性则为1），且数值可以为负 */
        
            05
            }
        
            06
            h1:before {
        
            07
                content: counter(chapter,upper-alpha) ". ";
        
            08
            /* 没有为计数器指定关键字，默认为decimal计数样式。*/
        
            09
            }
        
            10
            h2 {
        
            11
                counter-increment: section;/* 在每个h2的前面添加计数器 */
        
            12
                counter-reset: subsec;/* 并在每一个h2后面重设h3的计数器 */
        
            13
            }
        
            14
            h2:before {
        
            15
                content: counter(chapter,upper-alpha) "." counter(section) ". ";
        
            16
            }
        
            17
            h3 {
        
            18
                counter-increment: subsec;/* 在每个h3的前面添加计数器 */
        
            19
            }
        
            20
            h3:before {
        
            21
                content: counter(chapter,upper-alpha) "." counter(section) "." counter(subsec,lower-roman) ". ";
        
            22
            }

查看Demo

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

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

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