- <style type="text/css" >
- #container{ .. }
- #sidebar{ .. }
- </style>
或
- <li style="font-family:Arial, helvetica, sans-serif; color:#666; " >
而是应用<link>导入外部样式表:
12. 避免应用CSS表达式(Expression)
CSS表达式是动态设置CSS属性的强大年夜(但危险)办法。Internet Explorer大年夜第5个版本开端支撑CSS表达式。下面的例子中,应用CSS表达式可以实现隔一个小时切换一次背景色彩:
- background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
如上所示,expression中应用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结不雅来设置。
表达式的问题就在于它的寂?娴率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、甚至移动鼠标时都邑要从新计算一次。给CSS表达式增长一个计数器可以跟踪表达式的寂?娴率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。
如不雅必须应用CSS表达式,必定要记住它们要计算成千上万次并且可能会对你页面的机能产生影响。所以,在非不得已,请避免应用CSS表达式。
13. 代码紧缩
当你决定把网站项目安排到收集上,那你就要推敲对CSS进行紧缩,出去注释和空格,以使得网页加载得更快。紧缩您的代码,可以采取一些对象
应用它可精简CSS代码,削减文件大年夜小,以获得更高的加载速度。
14. 总结
在本文中,我力争更详尽的总结书写更高效的CSS代码的原则,但鉴于本人见识和精力有限,我照样欲望这些原则能赞助您更好的书写和治理您的CSS代码,不知您又是若何书写CSS的,是否也有一些想要分享的技能?给我留言吧感谢~
- <link rel="stylesheet" type="text/css" href=http://developer.51cto.com/art/201710/"css/styles.css" />
【编辑推荐】
- vue.js与其他前端框架的比较
- 前端必须要懂的浏览器缓存机制
- 国内最火的 HTML、CSS、JavaScript 开源项目 Top 榜,你知若干?
- 你所不知道的CSS滤镜技能与细节
- 若何应用Flexbox和CSS Grid,实现高效构造
推荐阅读
CSS 浮动属性一向是网站上分列元素的重要办法之一,然则当实现复杂构造时,这种办法不老是那么幻想。荣幸的是,在现代网页设计时代,应用 Flexbox 和 CSS Grid 来对齐元素,变得相对轻易>>>详细阅读
本文标题:编写出色CSS代码的13个建议
地址:http://www.17bianji.com/lsqh/37767.html
1/2 1