Dominic.Xu's 博客 » CSS http://xuplus.com Web 2.0 生活 Wed, 24 Aug 2011 05:26:12 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 《CSS禅意花园》一书中提及的有用链接 http://xuplus.com/article/2007/06/a36.html http://xuplus.com/article/2007/06/a36.html#comments Mon, 25 Jun 2007 05:40:08 +0000 Dominic http://xuplus.com/?p=36 整理《CSS禅意花园》一书中提及一些有用链接，主要是从Note和Tips以及附录中摘要出来。

CSS一些资料参考页面：

CSS设计类站点：

标签： , , ,
]]> http://xuplus.com/article/2007/06/a36.html/feed 0 读《CSS禅意花园》 http://xuplus.com/article/2007/06/a35.html http://xuplus.com/article/2007/06/a35.html#comments Sat, 23 Jun 2007 13:36:00 +0000 Dominic http://xuplus.com/?p=35 终于将这本号称“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

标签： ,
]]> http://xuplus.com/article/2007/06/a35.html/feed 0