读《CSS禅意花园》

终于将这本号称“Web视觉艺术设计的王者之书”看完,《CSS禅意花园》由人民邮电出版社于2007年6月份出版,先前看过英文版,这次出中文版也就买一本来看看。个人觉得这个书基本上是用来展示CSS禅意花园http://www.csszengarden.com的36件作品,用来说明CSS的强大。对于作为偏向程序的我来说其还达不到所宣称的“无设计知识,亦能运用自如”,或许本来就对CSS有所了解,书中对实际的CSS做法提到不是很多,某种程度上讲,这本书是站在页面设计师的角度来讲述一件通过CSS来控制的HTML文件的设计过程。 整本书通过CSS禅意花园网站上面的作品来传授设计师在页面设计、CSS布局、图像运用、文字排印、特效及设计重构的方法。整本应该更适用于有一定设计基础,想利用CSS标准来制作结构良好、高效的、兼容性更好的页面。 读完该书发现在Web应用上面数据和表现分离的是一种很大的趋势,在传统WinForm程序中数据和表现分离只需要增加UI层即可,而web上面的数据和表现分离还要区分开发人员角色,对于页面设计师来说,页面结构是数据,CSS即是控制数据显示的表现方式,对于应用开发人员(一般就是开发人员)数据是存储于数据库中的实际数据,表现就是通过模板、框架来提供的页面数据。这样导致一个Web应用将分为:页面表现层、页面结构层、页面数据层(一般可以是业务逻辑层)、数据层(数据访问层、数据库)。完美的Web应用更负责。 开卷有益,从读这本书中收益的地方有这么几点:
  • 选用适当的HTML元素。受以前Table布局影响,为了实现显示效果,乱用HTML标记比较严重,其实应当根据文档内容的结构选择HTML元素,而不是根据HTML元素的样式。例如:用p元素包含文字段落,而不是为了换行;用blockquote包含被引用的文字,而不是为了得到缩进等。另外,最好采用符合XHTML 1.0 Strict标准的HTML元素。
  • 避免过度使用div和span。在前一段时间的Web项目中,我就过度使用了div和span。div应该用于增强文档的结构性,可以将div看作一个可以被重用的容器,几个合理位置中的div却可以让文档显得井井有条。
  • 适当使用class和id。前一段时间的Web项目中,我还过度使用了class和id。class、id命名规则:字母或数字(a~z、A~Z、0~9)或下划线(_),实际中中划线(-)也可以使用,class和id名称必须以字母开头(难怪14font的class有时候不能生效),同一个页面不能给多个元素指定相同的id,建议在CSS和HTML中统一class、id的命名大小写。
  • 抛弃安全色的限制。
  • 如果仅仅为了实现table的某种效果,没有必要使用间隔图像或者嵌套表格。用CSS控制边距即可。
  • 属于页面内容的图片放入页面数据,数据布局呈现的图片建议全部放到CSS中。
  • 创建并测试CSS时,首先在最高级、最先进的浏览器中进行,然后再考虑其它浏览器。就实际情况看,首先应该在Mozilla Firefox中测试,再到IE7中测试,再测试IE6。可恶IE浏览器兼容性太差。
    图书购买网址:http://product.dangdang.com/product.aspx?product_id=9293450