CSS基础教程:CSS的伪元素Pseudo Elements

2016-02-19 13:38 7 1 收藏

想要天天向上,就要懂得享受学习。图老师为大家推荐CSS基础教程:CSS的伪元素Pseudo Elements,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

【 tulaoshi.com - Web开发 】

伪元素吸附在选择上和pseudo classes伪类很像,像这样selector:pseudoelement{property: value;}。有四种方式。

First letters and First lines 首字母和首行

  first-letter伪元素作用到元素的第一个字母,first-line作用到元素的顶行。你可以,例如为段落创建一个drop caps和首行加粗。

p:first-letter {
    font-size: 3em;
    float: left;
}

p:first-line {
    font-weight: bold;
}
Before and after 前后

  before和after用来联系content属性不使用HTML确定一个元素的内容位置。
  content属性值可以是:open-quote,close-quote,no-open-quote,no-close-quote,在引号标记里关闭任何字符串或使用url(imagename)图片。

blockquote:before {
    content: open-quote;
}
blockquote:after {
    content: close-quote;
}
li:before {
    content: "POW: "
}
p:before {
    content: url(images/jam.jpg)
}
  听起来不错吧,可惜大部分用户不能体会到before或after的效果,因为IE不支持。

来源:http://www.tulaoshi.com/n/20160219/1604861.html

延伸阅读
标签: Web开发
Grouping 分组 当许多选择器有同样属性时,可以使用逗号组合它们。 例子: h2 {     color: red; } .thisOtherClass {     color: red; } .yetAnotherClass {     color: red; } 上面的可以写成这样: h2, .thisOtherCl...
标签: Web开发
  本教程假设您没有任何样式表语言的基础,甚至,您可以完全不知道是什么东东,但是,我们同样假设您已经掌握了基本的语法。比如,您肯定知道是表明页面的头部,是表示页面的一个段落。     、正式开始学习之前的几句啰嗦话: l        不是什么高深的东东,它的编写...
标签: Web开发
margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边。 例子h2: h2 {     font-size: 1.5em;     background-color: #ccc;     margin: 1em;     padding: 3em; } 元素四边可以设置的属性:mar...
标签: Web开发
写这篇文章的起因来自与毅博客的《美化段落文本 2》,在这篇文章的最后振之谈到了关于:first-letter这样的伪类元素的特点: 有一次我试图让div id="acticle"p/p/div中的P也能实现首字下沉,可是结果却失败了,得出的结论是:我们并不能隔着一层标签去控制子对象中的第一个字符。 由于这句存在误解的可能性(我就误解了他的意...
标签: Web开发
HTML代码如下: link type="text/css" rel="stylesheet" href="css/style.css" media="screen" / media=指定这个CSS用于何种设备。具体参数如下: screen (缺省值),提交到计算机屏幕; print, 输出到打印机; projection,提交到投影机; aural,扬声器; braille,提交到凸字触觉感知设...

经验教程

618

收藏

92
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部