三个你不知道的CSS技巧
各种浏览器之间的竞争的白热化意味着越来越多的人现在开始使用那些支持最新、最先进的W3C Web标准的设备,以一种更具交互性的方式来访问互联网。这意味着我们终于能够利用更强大更灵活的CSS来创造更简洁,更好维护的浏览器前端代码。现在让我们来看一看一些也许你还不知道的让人兴奋的CSS功能。
在CSS中用attr()显示HTML属性值
attr()功能早在CSS 2.1标准中就已经出现,但现在才开始普遍流行。它提供了一个巧妙的方法在CSS中使用HTML标签上的属性,在很多情况下都能帮你省去了以往需要Javascript处理的过程。
要想使用这个功能,你需要用到三种元素:一个:before 或 :after CSS伪类样式, .content属性,和一个带有你想使用的HTML属性名称的attr()表达式。例如,想去显示<h3>标题上的data-prefix 属性的值,你可以写成这样:
h3:before {
content: attr(data-prefix) " ";
}
<h3 data-prefix="Custom prefix">This is a heading</h3>
显然,这个例子并没有展示它有多大用处,只是展示了它的基本用法。让我们来试一个更有用的例子,attr()的一个极好的应用就是当用户打印页面时将页面链接显示出来。为了实现这个,你可以这样写:
@media print {
a:after {
content: " (link to " attr(href) ") ";
}
}
<a href="http://example.com">Visit our home page</a>
一旦你知道了这个技巧,你就会吃惊于很多时候它能给你的工作带来的方便!
提示:在新版的CSS3标准中,attr()功能被扩展,可以用在各种CSS标记中。
使用counter()在列表中自动添加序号
另外一个在CSS 2.1在就已经支持的功能是counter(),使用它,你能方便的在页面标题,区块和其它各种连续出现的页面内容上添加序号。有了它,你就不必限制于只能使用<ol>来实现这个效果,你可以更灵活的在页面上使用自定义数字序列。
关键就是它真的很简单:在:before伪类里的content属性加入counter():
body {
counter-reset: heading;
}
h4:before {
counter-increment: heading;
content: "Heading #" counter(heading) ".";
}
如果你想知道更多关于这个counter归零和自增方法的知识,请参考关于这个主题的Mozilla Developer Network页面。里面有个极好的如何使用嵌套counter的例子。
使用calc()做算术
最后,但不是最不重要的,让我们来说说calc()功能。这个函数能让你执行简单的算术计算,例如计算元素的长宽,免去了你写不易维护的Javascript代码。这个函数支持所有简单的基本算术运算,包括加减乘除。
比方说,你想创建一个元素,使它的宽度占满它的父元素,但还要留出一部分像素宽做其它用处:
.parent {
width: 100%;
border: solid black 1px;
position: relative;
}
.child {
position: absolute;
left: 100px;
width: calc(90% - 100px);
background-color: #ff8;
text-align: center;
}
漂亮吧,不是吗?更详细的介绍请参考W3C CSS calc 规范。
我们可以越来越清楚的发现,CSS已经成熟到在某些方法可以替代javascript,极大的简化了web开发人员的工作。如果你还不开始利用这些功能,那只能说是在犯傻。
三个你不知道的CSS技巧的更多相关文章
- 经验分享:多屏复杂动画CSS技巧三则
当下CSS3应用已经相当广泛,其中重要成员之一就是CSS3动画.并且,随着CSS动画的逐渐深入与普及,更复杂与细腻的动画场景也如雨后春笋般破土而出.例如上个月做的「企业QQ-新年祝福」活动: 感谢sh ...
- 多屏复杂动画CSS技巧三则(转载)
本文转载自: 经验分享:多屏复杂动画CSS技巧三则
- 网页设计师必备的10个CSS技巧
CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页.使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情.在CSS的深海世界里有很多有意思的东西,你只需要找到最适合你的就 ...
- 最全的CSS浏览器兼容问题【CSS技巧 】
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...
- 10个网页设计师必备的CSS技巧(转)
英文原文:10 Essential CSS Rules for Web Designers CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页.使用CSS技巧来巧妙地处理CS ...
- CSS 技巧总结
CSS 技巧和经验列表 1. 如何清除图片下方出现的几像素的空白 方法一: img{display:block;} 方法二: img{vertical-align:top;} 除了top值,还可以设置 ...
- CSS技巧----DIV+CSS规范命名大全集合
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...
- (转载) Android Studio你不知道的调试技巧
Android Studio你不知道的调试技巧 标签: android studio 2015-12-29 16:05 2514人阅读 评论(0) 收藏 举报 分类: android(74) ...
- CSS技巧分享:如何用css制作横排二级下拉菜单
原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...
随机推荐
- 使用mdadm创建磁盘RAID10整列,RAID5出现故障,自动替换硬盘
首先需了解mdadm的参数使用 . 第一步: 先在虚拟机中添加四块硬板 第二步:使用mdadm命令创建RAID10名称为"/dev/md0" -C代表创建操作,v 显示创建过程,- ...
- BeTa阶段Day4
一.提供当天站立式会议照片一张 二.每个人的工作 1.讨论项目每个成员的昨天进展 刘阳航:优化障碍物生成. 林庭亦:调整难度设置. 郑子熙:改进UI,美化界面. 陈文俊:优化代码结构. 2.讨论项目每 ...
- ES6 学习1
https://www.jianshu.com/p/287e0bb867ae 1,let表示变量.const表示常量.let和const都是块级作用域.一个在函数内部,一个在代码块内部: const ...
- 关于MyEclipse,JDK使用的几点收获
[1]MyEclipse如何修改JDK编译版本信息 首先打开MyEclipse——>windows——>preference(也就是 窗口——>首选项:可以在搜索框中输入JDK,查找 ...
- command symbol & mac & emoji
command symbol & mac & emoji how to input command symbol in mac ? https://apple.stackexchang ...
- Windows Server 2008 R2 安装WinDbg以及符号路径设置
1.下载WinDbg安装包(Debuggers And Tools-x64_en-us v6.12.0002.633 AMD64.msi),双击安装 2.从网站http://msdn.microsof ...
- Sametime SDK
1,Sametime Server A.Sametime includes many server applications, which collectively provide the capab ...
- P4417 [COCI2006-2007#2] STOL
题目描述 米尔科买了一套别墅,他想要邀请尽量多的人和他一起庆祝.他需要一张大的木质矩形桌子来让他和他的嘉宾坐下.每张桌子可容纳的人数等于它的周长(四边长度的总和).米尔科想要买一张即可在他的公寓里放下 ...
- Stone Game, Why are you always there? HDU - 2999(sg定理)
题意:给你n个数的集合,表示你每次取石子只能为集合里的数,然后给你一排石子,编号为1~n,每次你可以取相邻位置的连续石子(数量只能为集合里的数),注意石子的位置时不变的,比如把2拿走了,1和3还是不相 ...
- [BZOJ1559]密码 AC自动机+状压
问题 K: [JSOI2009]密码 时间限制: 1 Sec 内存限制: 64 MB 题目描述 众所周知,密码在信息领域起到了不可估量的作用.对于普通的登陆口令,唯一的破解 方法就是暴力破解一逐个尝 ...