最近一直在改版网站,虽然大多数的网站都已经实现了div+css布局,但是很多人的网站的css并没有达到css的原意,并没有提高代码重复使用率,出现了很多的垃圾代码。而且进行二次维护很不方便,这样就有失css的原意,而且很多程序员写的代码不利于网页优化,增加了服务器的负荷。因此想给大家写些建议。
首先,和大家谈谈css样式的应用方式,css分为外部样式表和内部样式表。外部样式表分导入和链接两种方式应用;而内部样式表分为页面头部嵌入和行间嵌入两种方式,为了提高css重复利用率,所以不建议使用内部样式表,或者减少使用内部样式表,尤其是行间嵌入样式表,行间嵌入样式表使本来干净的代码变得丑陋,而且不利于阅读,更不利于优化。内部样式表无法达到跨页面重复使用的效果,一来增加了程序人员的工作量,其次让页面浏览者花更多的时间来访问你的网页,或者是让蜘蛛花不必要的时间在你的内部样式表上。对于外部样式表,个人建议使用链接(link)的方法应用到网页中,样式表可以作为独立的文件下载到本地,这样在同一个用户浏览你网站其它页面的时候就不需要重新下载一次样式。这样做的好处是让你的网站更快的展示在用户面前,尤其是对于一些直到下载完成后才开始检索布局的网站非常重要,因为这样不至于让用户看到一个喜剧性的变化效果(凌乱的图片和文字,在下载完成的时候重新排版展现出一个页面)。这样可以快速的让用户看到你网站的构架。
其次,在谈谈id和class的应用,id选择器和class选择器的区别是同一个名称的id选择器在同一个页面中只能使用一次,而同一个名称的class选择器在同一个页面可以无限制的使用。虽然在不严谨的语法中id重复使用依然是可以正确的识别,但是养成一个良好的习惯非常重要。Id一般可以多用在定位布局上,无法重复使用的地方比较好。而class则要考虑使用在能够重复使用的地方。很多程序员有个很不好的习惯,那就是拿到一张效果图就开始切图,而不去考虑整个站点的布局,和代码的重复使用。如果想让网页的代码干净漂亮易于阅读,建议大家先看完整个站点的效果图,在心中对整个站点做一个切图规划,哪里可以使用重复的代码,用class选择器;而哪里的代码是唯一的,使用id选择器。哪些样式可以使用伪类来控制。一个优秀的程序员应该养成一个良好的注释习惯,就是对同一个模块的css的样式做个注释,这样在维护的时候可以更快的直到哪些代码的样式是控制哪个范围的。在命名类名称的时候可以遵循一些css类命名规则,和seo优化规则。比如头部使用head,中间主体使用main已经底部信息使用footer或者copyrights等。个人比较喜欢在类名前加个个人前缀cin_什么的,虽然这是个不大好的习惯。
再次,谈谈css缩写的应用,比如说我们要实现一个上下边距为10px的div的居中,可以写成margin:10px auto;不推荐margin-top:10px;margin-bottom:10px;margin-left:auto;margin-right:auto;如果要实现一个距离上边10px;底边20px;左边10px;右边20px;的div,可以写成margin:10px 20px 20px 10px;(注:css样式的控制是按顺时针的方向进行定位的,这个规则可以应用到padding属性)不推荐margin-top:10px;margin-bottom:20px;margin-right:20px;margin-left:10px;我们可以使用缩写的css属性有以下几种:
Font字体缩写
Margin外边距的缩写
Padding内边距的缩写
Border边框的缩写
List列表的缩写
Background背景缩写
Color的缩写(#ffffff可以缩写成#fff)
最后,给大家一点建议,很多朋友都喜欢将定位样式和控制样式分开来写,其实这是个不好的习惯,对于seo优化来讲将css放入同一个样式表中,可以减少蜘蛛的检索次数以及用户计算机的检索次数,从而更快的展示自己的页面,对于服务器不好的站长来说减少服务器的请求无疑是一个减小服务器压力的不错的方法。
写了这么多,希望给大家带来些启发,让大家更能意识到css的长处以及与table的不同,最后希望大家都能写出更多优秀的css代码。
