CSS content应用
一、简介
content属性早在
CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容。此特性目前已被大部分的浏览器支持:(Firefox
1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+)。另外,目前Opera 9.5+ 和
Safari 4已经支持所有元素的content属性,而不仅仅是:before和:after伪元素。
在CSS 3 Generated Content工作草案中,content属性添加了更多的特征,例如:插入以及移除文档内容的能力,以创建脚注,结语,及段落注释。但是目前还没有浏览器支持content的扩展功能。
本文将展示content内容生成的基本使用,以及一些您可以应用的特别的技术。
二、还有一点小小的提醒
- 仅在CSS可用的现代浏览器下起作用。
- 不可通过DOM使用,它只是纯粹的表象。在特殊情况下,从一个访问的角度来看,当前屏幕阅读不支持生成的内容。
三、最基本的 – 生成内容
content使用如下:
h2:before {
content: "我是额外文字!";
}
此段样式的作用是在每个h2标签的前面添加文字“我是额外文字”。
您可以狠狠地点击这里:content最基本使用Demo
content属性的值除了使用文本值外,还可以使用标签的一些属性值,方法是attr(),参见如下代码:
a.content:after {
content: attr(href);
} <a class="content" href="http://www.zhangxinxu.com/">此标签的href值是:</a>
结果如下截图(截自Firefox3.6):
对应a标签内的文字值的最后添加了此标签的href属性的值。
您可以狠狠地点击这里:标签属性值生成content内容Demo
注意:当使用attr()获取标签属性名的时候,千万不要添加引号!
您还可以使用计数器产生动态数字或运用url(/path/to/file)路径插入图片。要想获得更多信息,请继续看下面的应用实例。
四、使用计数器创建号码内容
如果您想插入一系列递增的值,比如说“美女1,美女2,美女3,美女4……”,您就可以使用计数器在每个列表项的前面插入递增的序号值。CSS代码如下:
ol {
list-style-type:none;
counter-reset:sectioncounter;
} ol li:before {
content:"美女" counter(sectioncounter) ": ";
counter-increment:sectioncounter;
}
HTML代码如下:
<ol>
<li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" width="128" height="96" /></li>
<li><img src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" width="128" height="96" /></li>
</ol>
结果如下图(Firefox3.6下截图):
您可以狠狠地点击这里:content产生递增序号demo
说明:
1. ol标签应用counter-reset属性,li标签应用counter-increment属性,值均为sectioncounter,再配合content属性,以及counter计数器就可以实现递增的效果了。
2. 如果您指定了元素display:none,则content下的计数器不会产生递增值。
3. 当然,如果浏览器不支持此方法,那么就不会有数字出现,您使用firebug或是之类的工具查看真实的HTML时不会看到产生的数值,不要有疑惑,content属性动态生成的内容是纯粹的装饰而已,虚假的表象。
4. 如果您对CSS计数器感兴趣,想深入了解,可以参见David Storey一篇优秀的文章:Automatic numbering with CSS Counters。
五、为多语言内容插入正确的引号
不同的语言使用不同的引号字符。比如英文的引号就是""
,而中文引号就是“”
。使用content可以使得不同的语言使用对应的一些字符。例如,我们需要对下面的些文字添加其对应语言的引号,该怎么办呢?
<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>
我们不妨试试下面的代码:
/* 为不同语言指定引号的表现 */
:lang(en) > q {quotes:'"' '"';}
:lang(no) > q {quotes:"«" "»";}
:lang(ch) > q {quotes:"“" "”";} /* 在q标签的前后插入引号 */
q:before {content:open-quote;}
q:after {content:close-quote;}
结果如下图所示:
您可以狠狠地点击这里:content生成对应语言字符demo
此技术可以应用于各类元素,而不仅仅是q标签,另外,Safari 3以及IE7(以及以下)是不支持此技术的。
六、用图片替换文字
关于图片替换技术,您可以参见这里:several image replacement techniques,里面提供了几种方法。而这里展示的则是另外不同的用图片替换方法,使用的是content。
您可以参见下面的代码:
div.logo {
content:url(logo.png);
}
这种图片替换技术的优点在于文字内容确实被替换了。因此,您没有必要设定高宽为图片的显示创造空间,或是使用text-indent或是padding隐藏最初的文字。
然而,就目前而言,还是有不少需要注意的:
1. 你不能对图片进行重复或平铺,或是使用image sprite。
2. 目前仅在Opera 9.5+ 和 Safari 4+浏览器下起作用,因为这些浏览器支持所有元素的content方法,而不仅仅局限于:after或是:before。
替换的图片无法应用alt属性,所以一些特殊的使用屏幕阅读器的用户可能无法理解您替换的图片的含义。
七、显示相对应的链接图标
指的是针对不同的链接类型,在链接的后面显示对应链接类型的图标,例如,链接的对象是一个图片,则显示图片的小图标,如果链接对象是视频,则显示视频小图标,如果链接就是个URL网页链接,则显示链接的小图标。您可以参见下面的代码:
p a[href $=".pdf"]:after {
content:url(../image/icon_pdf.png);
}
p a[rel = "external"]:after {
content:url(../image/icon_link.png);
}
<p>您可以查看此PDF文件:<a href="/sample.pdf">web站点的性能优化.pdf</a>,或是在线查看,<a href="http://www.zhangxinxu.com/wordpress/" rel="external">点击这里</a>。</p>
结果如下图所示:
您可以狠狠地点击这里:CSS content显示链接图标demo
八、使用属性值作为content内容
使用属性值当作content内容指的是将标签的title,src,href,alt等值当作内容显示在标签的内部,这是很强大的一个功能。由于此技术目前远未到普及的程度,所以这里简单介绍一下,您可以参见下面的两小段样式代码:
a:after {
content: "(" attr(href) ")";
}
abbr:after {
content: "(" attr(title) ")";
}
这里理解和使用都不难,关键就是CSS3 的attr()方法。
前瞻:强大的CSS3 attr()方法。
CSS3 Values and Units草案扩展了attr()表达式的范围,除了返回字符串,还可以返回诸如CSS colors, CSS integer, length, angle, time, frequency以及其他一些单元。
通过使用自定义的data属性,可以实现一些非常强大的效果,诸如简单图表图形的渲染,动画效果的实现。例如我们可以设置根据元素的
attribute值设定background-color的颜色值,这在显示在线调色板上会大放异彩;我们还可以根据attribute值指定元素的大
小,就像定义图表每个条形的长度一样。总之,attr()的潜力惊人。
转载来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
原文地址:http://www.zhangxinxu.com/wordpress/?p=739
CSS content应用的更多相关文章
- CSS content内容生成技术以及应用
content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部分的浏览器支持:(Firefox 1.5+, Safari 3.5+, IE ...
- [译]CSS content
原文地址:http://css-tricks.com/css-content/ CSS中有一个属性content,只能和伪元素:before和:after一起使用,他们的写法像伪类选择器(前面有冒号) ...
- CSS content内容生成技术以及应用(转)
一.哗啦哗啦的简介 zxx://这里“哗啦哗啦”的作用是为了渲染一种氛围.content属性早在 CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部 ...
- CSS Content 属性
content 属性,用在after,before伪元素上,用于在选中的元素前后插入内容. 插入的内容多种多样, 纯文字 h1::after{ content:"h1后插入内容" ...
- CSS content换行技术实现字符animation loading效果
一.之前我的字符loading实现 关于字符打点动画实现,我之前使用过box-shadow模拟,还有border+background模拟,还有使用text-shadow实现,以及今年自认为是最好的实 ...
- ISO in CSS content
Name Numeric Description Hex ISO in CSS content Octal no-break space %A0 p:before { content: ...
- #学习记录#——CSS content 属性
CSS content 属性常结合:before 和:after 这两个伪类一起使用,给指定的元素添加内容来丰富页面. 1. 添加文本内容 html: <h1>给末尾添加内容. </ ...
- css content之counter-reset、content-increment
万万没想到,写了快三年前端,有不会用的css,居然还有完全没听过.见过的css属性,而且还是CSS2的内容! 关于counter-reset.content-increment两个属性的详解可以参看张 ...
- css content 的 attr 用法 (实现悬浮提示)
content 的attr 实现 鼠标悬浮 显示 悬浮提示, content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容. 方法/步骤 1 <div> < ...
随机推荐
- id取模分表
场景 1 假设按用户id分2个库 每个库分10张表. 分表策略 1.用户id%2 确定库 用户id%3确定表. 2.(用户id%(2*10))/ 10 取整确定库,(用户id%(2*10)%10确 ...
- Pthreads 《并行程序设计导论》的补充代码
▶ 关于单链表的访问,插入结点和删除结点操作,并且将其推广到多线程中去. ● 代码,通用的随机数生成 // my_rand.h #ifndef _MY_RAND_H_ #define _MY_RAND ...
- jdk1.6 eclipse kepler 中安装jda
原因这是个比较老的版本的jad 参考:https://www.cnblogs.com/zhikou/p/8098137.html 1.在eclipse的help—>Install New Sof ...
- mybatis 1 - 获取自增ID
1.环境: mybatis : 3.2.3 spring-mybatis: 1.2.1 mysql:5.5.29 实体: public class sys_user { private int us ...
- linux shell脚本编程笔记(三): 三种引号的区别
双引号.单引号.反引号的区别 测试用例: OPDATE=`date -d '-1 day' +%Y%m%d` ) do FILEDATE=`date -d "-$i day" +% ...
- 90. Subsets II (Back-Track, DP)
Given a collection of integers that might contain duplicates, nums, return all possible subsets. Not ...
- jekins测试环境自动化
最近搭建测试环境自动化,之前都是用机器猫.机器猫的流程大概是这样,开发打包上传到svn,给测试一个svn地址,测试到机器猫上传文件,然后再运行启动. 为了减去开发打包这个环节,所以专用jenkins. ...
- C#中释放数据库连接资源
1.确保释放数据库连接资源的两种方式如下: a.使用try...catch...finally语句块,在finally块中关闭连接: b.使用using语句块,无论如何退出,都会自动关闭连接: ...
- 通过http流发送post请求
一般都是用curl扩展来完成,看了手册的通过stream的方式更加简单. 请求脚本stream.php $url = 'http://localhost/stream_api.php'; $body ...
- 转载:Candy? 在线性时间内求出素数与欧拉函数
转载自:http://www.cnblogs.com/candy99/p/6200660.html 2818: Gcd Time Limit: 10 Sec Memory Limit: 256 MB ...