注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

无线时代辐射无穷

抓紧生宝宝,小心辐射

 
 
 

日志

 
 

网站CSS分离规则或方法  

2011-06-02 20:23:35|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
首先关于CSS文件,网站制作一般只使用一个文件,这无关于网站的大小,网站越大,某种意义上这种做法的优势与潜力就会体现的越明显。这种单CSS文件的做法适合于web2.0的网站。让网站单CSS谁都会,关键是为何可以使用单CSS文件,这个CSS文件不会很大吗,如果一个网站有400个页面,那么这个CSS文件岂不要数百K。非也,在网站页面风格一致,在web系统结构良好的情况下,CSS文件可以控制的非常小,而且高性能,同时页面扩展性也非常好。


  1、整体概述


  页面布局与文章内容显示需要,我将整体架构做成了一张图片。


  2、关于CSS reset


  CSS reset(css重置)基本上是不需要的,至少可以说80%的的CSS reset都是没有必要的,反而增加了页面CSS 的overwrite,不是一概鄙弃CSS reset,有些常用标签也是会简单重置一下的,而且会避免overwrite(样式重写),以保证样式最精简,渲染最高效。


  3、关于CSS通用样式库


  在“CSS样式分离之再分离”一文中曾提到过CSS通用样式库。所谓CSS通用样式库就是可以在任何网站使用的CSS样式库。


  4、网站CSS样式库


  这里的样式是根据当前实际的项目内容指定的。例如,文字链接颜色是什么,文字链接经过的样式是什么;一些常用的背景色样式,常用的边框样式等,以及一些高宽等。按照我的经验,网站CSS样式库又可以架构为以下几部分:


  ①网站常见颜色,尤其是链接色②网站常见背景色③网站常见边框色,这里类似于CSS 通用库中的margin属性,需拆分。④网站遗留的单margin属性,以供之后类似布局或需要的地方使用。⑤网站遗留的单padding属性,是单属性,且不可从通用元素中抽取单独的padding值,否则是给自己挖火坑。⑥网站遗留的width属性,在流体布局思想下,宽度是有限的,是珍贵的,需好好利用。⑦网站常用的一些height属性。


  5、网站通用小图标样式集


  小图标的样式合并是普遍处理的较好的,由于其规律可循,所以经常在CSS文件较上的位置看到有关小图标的CSS合并样式,这在SNS网站中很是常见。一般合并样式部分样式为{background:url(xx.png) no-repeat;},分离部分的样式是{background-position:x, y;},就实现而言,我觉得没有多少说头,只是命名有些自己的见解。


  6、网站通用样式


  这里的“网站通用样式”可以说与“网站通用样式库”最为对立的两部分。网站通用样式专指“独立元素”的通用样式,所谓“独立元素”指的是网站通用的导航,菜单,按钮,选项卡,文本框装饰,图片装饰,圆角处理等等。网站通用样式的代码量在整个CSS文件中所占据的比重是相当大的,如果您的CSS文件中发现CSS通用样式只占整个CSS文件的一小部分,尤其网站项目较大时,那就需要引起警惕,可能最后的结果就是CSS文件超负荷,最后反而一团糟。


  7、网站公共结构样式


  所谓“网站的结构样式”主要指的是最外框div的样式,一般限制网站的宽度(960~990不等),还有就是网站的分栏布局样式,这里的样式仅仅针对主体结构,还包括网站的头部的一些公用结构,底部的样式结构等。强烈建议公共结构仅仅定宽定高,设置浮动属性,切不可在结构样式上添加margin或是padding属性,这会使网站的公共结构的重用性大大降低!


  8、单页面的精细结构


  对于中型大型网站,网站制作可能要花3~4天甚至更多的时间分析页面设计图,处理CSS Sprite,架构网站的CSS,这段时间不写任何页面,就是处理网站唯一的CSS文件。所谓“磨刀不误砍柴功”,站在整站的角度上去思考CSS是非常重要的,这可以让你避免迷路,有助于写出精简高效的样式代码。

  评论这张
 
阅读(776)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017