标签CSS下的文章

Jerry Bendy 发布于 06月10, 2013

爱上朴实的CSS细节

未来的CSS太让人兴奋了:一方面,是全新的页面布局方式;另一方面,是酷炫的滤镜、颜色等视觉效果。这些CSS,受开发者追捧,被杂志和博客文章铺天盖地地介绍。如果说这些特性是CSS华丽的一面,那我们来看看它朴实的一面:很不起眼的东西,如选择器、单位、函数(方法)。我经常说这是繁琐的东西,但我意思是它们能干漂亮的活,这就是我要分享的。怎么说呢,让我们看看这些效果最好的朴实的CSS细节——这些细节远远没有那些酷炫的CSS效果那么引人注目。它们有些已经存在一段时间了,但值得我们更好地认识,而有些则刚刚面世。虽然不起眼,但是它们可以提高我们的工作效率——以谦虚的姿态。相对单位聪明又有前瞻头脑的开发者们已经使用相对单位了——如...

阅读全文 »

Jerry Bendy 发布于 04月28, 2013

CSS3打造不断旋转的CD封面

最初看到这个效果是在一个音乐站,http://jing.fm,这个网站的界面做得非常不错,音乐也很有风格。当我第一次进入这个网站时最感兴趣的还是中间那个不断旋转的光盘封面,就想知道它是如何运作的,以及如何能把它也放在我的网站首页上面以增加效果,具体的效果可以去jing.fm看下,用新浪微博账号即可登录。 我提取的效果仅仅包含了使其旋转的部分代码,并没有包括中间的暂停按钮。 演示中用的图片及CSS代码全部从jing.fm提取,我只是对它做了一些简化。再者由于本人刚接触网页不太久,很多东西还不能得到深刻的认识,目前就先分享一些简单的内容。 会CSS的人从源码都能看懂它的工作方式,我只解释一些我自己学习过程中有疑惑...

阅读全文 »

Jerry Bendy 发布于 04月03, 2013

编写高效的CSS(二)

继上节讨论了一些常用的提高CSS效率技巧之外,本文将参考MozillaUI中介绍的CSS优化规则深入讨论CSS的优化原理.本文第一部分说明CSS的书写规则,第二部分分析应该使用哪些规则才能使页面渲染效率更高.一.CSS的4种书写规则首先声明,我在本文中定义一个术语叫–主选择符.其定义是在一个选择符中最右边的那部分.(浏览器匹配选择符的时候是从最右边开始的,而不是从他的祖先选择符开始的.)举例说明:aimg,div>p,h1+[title]{}divpa{}这里主选择符就是指img,p,[title],a.1.ID系列选择符就是包含ID的选择符例如:button#backButton{}/*ThisisanI...

阅读全文 »

Jerry Bendy 发布于 04月02, 2013

编写高效的CSS提高CSS渲染效率的一些技巧

最近忙着找工作,面试的时候有这样一道题目:列举至少10条CSS影响页面渲染效率的写法.虽然写了将近一年的CSS了,但这个问题还真没详细总结过,当时回答的不完整,回来后赶紧查找相关资料.经过查阅资料以及跟朋友们的交流,大致总结出以下几点:1.尽量避免使用IE滤镜滤镜是IE私有属性,而非W3C标准,因此只在IE下有效,其他标准浏览器都不支持,滤镜会明显降低页面的渲染效率,既耗资源兼容性又差,所以要尽量避免使用2.尽量少使用*号选择符例:*{…},#id*{…}*在CSS中作为通配符选择所有的元素建议尽量避免使用*选择符.原因有2:使用*会遍历全部的标签所以会降低渲染效率*号作为通配符会对所有的样式进行重新定义3.不宜...

阅读全文 »