CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 如何从css生成内容和计数组件中得到益处

如何从css生成内容和计数组件中得到益处


  用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伪元素。为了区别伪元素,我们可以使用下面的伪标签。

<p>
  <before>Start</before>
    Actual content
  <after>End</after>
</p>	

  我们的样式可能这样:

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: "\00A7";
  padding-right: 0.2em;
}

  查看在线案例


      在双引号之间的转义符号是16进制的unicode值。我们也可以把简单的字符串跟unicode符号结合:

p:before {
  content: "( " "\00A7" " )";
  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.负值是容许的。

  现在我看一个例子,他的结构如下:

<dl>
  <dt>term</dt>
  <dd>description</dd>
  <dt>term</dt>
  <dd>description</dd>
  <dt>term</dt>
  <dd>description</dd>
</dl>	

  我们想给列表中的每一个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树,而不能修改他。

【如何从css生成内容和计数组件中得到益处】相关文章

1. 如何从css生成内容和计数组件中得到益处

2. 如何使用CSS生成一个三角形?

3. Bootstrap3,JQuery倒计时插件和Animate.css生成的倒计时效果

4. CSS生日快乐:CSS之父Håkon Wium Lie访谈录

5. HTML5 中的新数组

6. iOS及Android 4.1版Chrome发布 HTML5得到进一步发展

7. 6款基于Node.JS的开源内容管理和静态网站生成系统

8. 2015前端框架何去何从

9. 游戏业HTML5将成“香饽饽” APP何去何从

10. “神经猫”等HTML5游戏未来将何去何从?

本文来源:https://www.51html5.com/a938.html

点击展开全部

﹝如何从css生成内容和计数组件中得到益处﹞相关内容

「如何从css生成内容和计数组件中得到益处」相关专题

其它栏目

也许您还喜欢