写在前面
对于前端来说，CSS Zen Garden这个网站相信大家都是不陌生的，当年我刚接触网页制作（对，那时还不叫前端）的时候，CSS Zen Garden经常会出现在我的视野中，有些年头了，现在前端工程师不知道还会不会看到这个网站。翻译成中文就是“CSS禅意花园”，同一套html结构，仅通过不同的css来改变网站的样子。
2007年出版的一本名叫《CSS禅意花园》的书，主要讲解 http://csszengarden.com/ 这个网站的各种CSS样式方案，共有两百多套样式，源码见： https://github.com/mezzoblue/csszengarden.com。
一起来了解下这本书
由于这本书出版于2007年，所以，部分知识点已经有些过时了。但对了解web技术的发展、用户体验、设计创意等还是很有帮助的。
微盘下载PDF：http://vdisk.weibo.com/s/Ay9xx-k0JL-o
京东购买：http://item.jd.com/11042710.html
下面是我摘录的一些个人感觉不错的知识点。
带有语义的标记
html语义：
选择何种html标签取决于标签本身的语义，而不是其默认显示出的样式。
编写合法的、带有良好结构并拥有语义的html。
创建良好的标记
[*]选择doctype。
[*]指定语言和字符集。
[*]指定标题(便于SEO)。
[*]选用恰当的元素。
[*]避免过度使用div和span。例如，若是h3更能表示内容的含义，那么就不应该使用div，span也不应该替代label的作用。
[*]尽可能少地使用标签。这样做的好处是让文件更小，让浏览器解析文档更快。
[*]适当地使用class和ID。
图像替换
出于灵活性方面考虑，将图片地址直接写入到html中，就不可能只通过替换样式文件让页面来个“大变脸”了。
图像替换还要考虑屏幕阅读器和SEO。
图像替换技术：
- [*]{ padding: 25px 0 0; overflow: hidden; height: 0px !important; }
优点：屏幕阅读器可正常访问；没有多余的。
缺点：并没有解决浏览器禁用图像后空白页面的可访问性问题；实现需要hack。- [*]{ text-indent: -5000px; height: 25px; }
优点：屏幕阅读器可正常访问；没有多余的；简洁优雅的CSS。
缺点：并没有解决浏览器禁用图像后空白页面的可访问性问题；有时在IE5中无法使用。- [*]将文本和span一起放在父元素中，然后使用这个空白的span覆盖住文本，并将背景图像应用到该span之上。
优点：屏幕阅读器可正常访问；解决浏览器禁用图像后空白页面的可访问性问题。
缺点：无法使用透明图像；CSS代码较为冗长。
用户界面设计基本法则：
[*]了解将浏览页面的用户。
[*]在页面和站点中给用户足够的导向。
[*]使用被人们熟知的象征符号。
[*]保证与功能相关的特性在页面中足够显眼。
[*]保证设计元素的一致性。
[*]了解页面中的关键元素。
[*]清楚地表达页面的内容。
布局相关的可用性问题：
[*]重要信息应放在显眼的位置。
[*]永远在title元素中给出页面的简单介绍。
[*]尽可能地保证页面中的导航链接有着一致的表现。
[*]对于中型或大型站点来说，强烈建议提供搜索功能。
[*]用缩进和偏移将栏中内容分开。
清除浮动：
[*]clear属性及clear的含义可以被理解为让某一元素不再跟随在另一元素的后面。
减少图像使用的方法：
- [*]尽可能地使用文本样式代替图像。
- [*]只保留图像中为实现预期效果所必需的部分。
- [*]使用细条图像填充背景。
- [*]尽可能地重复使用图像。
- [*]合理地选用图像或颜色。若CSS中的color或background-color属性也能实现设计效果，则应该毫不犹豫地使用这些属性，而不是背景图像。
文本样式：
- [*]font-variant
- [*]text-transform：字符大小写控制。
- [*]text-decoration
间距样式：
- [*]line-height：行距
- [*]letter-spacing：字符间距
- [*]word-spacing：单词间距
- [*]text-align：文字对齐
万事皆有度
平衡才是关键
如果某个值为0，就不需要再额外给出单位。
background-position属性定义了背景图片在父元素中的相对位置，它可以接受两个百分比、长度或关键子值，分别用来表示两个坐标值中的一个。
如果只设定了一个值，那么它将表示水平位置，而垂直位置将取默认的50%或者居中。
正值：x, y 表示向右平移x，向下平移y。
负值：-x, -y 表示向左平移x，向上平移y。
CSS书写的一些准则
[*]若是不确信的话，那么就去验证。
[*]创建并测试CSS时，首先在最高级、最先进的浏览器中进行，然后再考虑其他浏览器。
[*]若用浮动实现布局，请确保正确地清除了浮动。
[*]为元素应用内边距或边框来避免外边距重叠。
[*]避免同时为元素指定明确的内边距/边框值与宽度/高度值。
[*]避免IE6的“无样式内容瞬间”现象。
[*]不要依靠min-width或min-height属性
[*]尝试减少百分比值。
[*]浏览器计算中的舍入误差有时会让50% + 50%等于100.1%，导致布局被破坏。
[*]这时请尝试略为减少百分比的值，例如将50%改为49%或者49.9%。
[*]IE中没有完整显示出内容？
[*]www.positioniseverything.net/explorer/peekaboo.html
[*]确保要实现的效果确实存在
[*]牢记“LoVe/HAte(爱/恨)”链接规则。
[*]在为链接元素指定伪类时，牢记以下的顺序：link、visited、hover和active。
[*]任何其他的声明顺序都可能会导致问题。
[*]为非零值标明单位
[*]唯一的例外是line-height属性，无需标明单位。
[*]零就零，没有必要分辨是px还是em。
[*]测试不同的字体大小
[*]高级浏览器都允许用户调整字体大小。
[*]在html和css中统一大小写。
[*]测试时使用嵌入样式，发布时再改为外部输入。
[*]用明显的边框辅助调试布局。
[*]指定图片路径时不要使用单引号。
理解问题
理解问题才是修复问题的关键。
比如，如果事先就了解Windows平台上IE，自动为某些浮动元素添加3个像素的额外外边距，那么就不需要猜测并逐一尝试其他方法了。
转载请注明：Rockyxia Web技术博客 » 具有《CSS禅意花园》情节的读书笔记
感谢阅读，如果您发现文章中有表述不准确，欢迎提出来，也欢迎交流相关问题，你可以去这里进行一对一问答交流。