首页 > 开发 > CSS > 正文

CSS中的content属性使用教程

2024-07-11 08:25:39
字体:
来源:转载
供稿:网友

Content属性应该算是使用最常用的一个css属性之一吧,比如我们创建一个聊天气泡、超链接的立体翻转特效、添加图标。都要使用到content属性,当然这个属性要结合:before和:after伪类使用。下面详细介绍它的用法。


字符串
可以添加任意的字符串,用括号包围。另外可以使用UTF-8特殊字符(哪些特殊字符可用查看这里),以/开头。如下
這是一個在元素前面或後面插入內容的方法(搭配 selector:before和selector:after)
HTML:

XML/HTML Code复制内容到剪贴板
  1. <a class="yahoo" href="http://www.yahoo.com.tw">Yahoo</a>   <a class="google" href="http://www.google.com">Google</a>  

CSS:

CSS Code复制内容到剪贴板
  1. .google:after {        /* 前後加入~~字串 與網址串接*/  
  2.     content:"~~" attr(href)  "~~"   }  

运行结果就很直观了。content属性的值除了使用文本值外,还可以使用标签的一些属性值,方法是attr(),参见如下代码:

CSS Code复制内容到剪贴板
  1. a.content:after {       content: attr(href);   
  2. }  
XML/HTML Code复制内容到剪贴板
  1. <a class="content" href="http://www.zhangxinxu.com/">此标签的href值是:</a>  

结果如下截图(截自Firefox3.6):
2016512114431092.png (385×97)

URI
使用url()可以载入外部资源,主要是一些图标和图片,如果资源不可以显示有的浏览器会忽略它,有的会显示替代文本。
       
代码:

CSS Code复制内容到剪贴板
  1. p:before{           content:url(http://yeebing.u.qiniudn.com/wp-content/themes/expound/images/favicon.ico);      
  2.     }    

不过导入的图片是不能改变宽高的,必须预先设定好。笔者一般使用background载入图片,然后使用background-size调整尺寸。如下图,前者使用content载入图片,无法改变图片宽高,后者是是使用background载入图片的效果。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表