CSS3 内容属性content学习

1.定义和用法

  css2中已经定义了content属性，此属性与:before选择器和:after选择器配合使用，将生成的内容放在一个元素内容的前面或后面。

2.基本语法

    normal ： 默认值。

    string ： 查入文本的内容，一般是一个字符串。

    attr() ： 插入元素的属性值，语法：attr(attribute)。

    url() ： 插入一个外部资源文件，可以是图像，音频，视频文件或浏览器所支持的其他任何资源。

    counter() ： 计数器，用于插入排序标识,counter()不仅可以追加数字编号，还可以追加字母编号或罗马数字编号，语法：content:couter(计数器名，编号种类)

其他属性

none    设置Content，如果指定成Nothing。 

open-quote  设置Content是开口引号

close-quote 设置Content是闭合引号

no-open-quote   如果指定，移除内容的开始引号

no-close-quote  如果指定，移除内容的闭合引号

inherit 指定的content属性的值，应该从父元素继承

3.基本用法

a.生成内容

    与:before或:after选择器配合使用，在标签的前后添加内容

    比如添加string:

h2:before {
   content: "我是标签前部添加的文字！";
} 

  <h2>我是标签中原有文字</h2>

添加标签属性的文本内容：

a.content:after {
   content: attr(href);
}

<a class="content" href="http://www.sunxingxing.com/">此标签的href值是：</a>

b.为标签添加嵌套符号

        h2:before{ /*插入嵌套符号*/
            content: open-quote;
        }
         h2:after{
            content: close-quote;
        }
         h2{
            quotes: "<<"">>"
        }

<h2>这是一本书名</h2>

也可以应用于给不同语言的句子添加不同的符号。

例

html:

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

css:

/* 为不同语言指定引号的表现 */
:lang(en) > q {quotes:'"' '"';}
:lang(no) > q {quotes:"«" "»";}
:lang(ch) > q {quotes:"“" "”";}

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

c.添加图片

 div.content1:after{
            content: url(./1.jpg);
        }

直接在.content1内容的后面添加了url为../1.jpg 的图片

d. counter()的使用

    

        h3:before{  
            content: "第"counter(number)"行";
        }
       h3{
            counter-increment: number;
        }

    通过定义的计数器来实现给h2标签前部加序号

    也可以定义计数器语言（阿拉伯或者小写罗马字母等）

 h3:before{  /*插入小写罗马的项目编码*/
            content:counter(number2,lower-roman);
        }

  h3{
            counter-increment: number2;
        }