《CSS禅意花园》学习笔记

整本书围绕着一个叫做“CSS禅意花园”的网站展开，其实N久之前我在一份外国的关于CSS的在线教程上看到了这个网站的链接，可惜进去之后发现内容和CSS并没有关系，所以也就没有在注意。直到我拜读了蓝色经典推荐的这本《CSS禅意花园》之后，我才意识到这个花园的强大之处。

网站的初衷是鼓励大家从TABLE布局模式换到CSS布局模式，这个网站只有一份严谨的XHTML文档，但是有成百上千个各式各样的CSS样式文件，当你发现这份简单的XHTML文档通过换样式表能够呈现出各式各样另人惊奇、瞠目结舌的效果之后，你才会意识到这个网站的强大之处，意识到CSS布局的强大之处。

任何人看完这本书都能从某一点或者某几个方面获取到自己所不了解或不熟悉的知识。全书通过一个个世界顶尖WEB设计师的作品，分别阐述了“设计”、“正文布局”、“图像”、“文字排印”、“特效”、“重构”这六大方面的设计要点。它虽然包含一些CSS应用的技巧，但是这些内容不多，并且很可能你之前都已经了解了。然而更多的是一种设计理念的内容，为什么要这样设计？这样设计能够传达出作者怎样的一种思想？怎样将这些想法通过CSS来实现？

————————————————————————-

我从这本书上学到的大概有以下几点：

1、使用@import语句引入外部样式表，可能会在IE6中出现“无样式内容瞬间”现象，可以通过使用link链接样式表，或者在页面上添加script元素来避免这个问题。HTML文档中几乎可以不用考虑用@import导入样式表的方法，因为这种方法是为了兼容Netscape Navigator 4，而这种浏览器几乎绝迹。

2、应用到body元素上的id叫做“CSS签名”，通过它的作用我们可以覆盖页面中部分甚至所有CSS样式。如，body[id=css-zen-garden] a:link {color: #f90;}，通过这样的方法可以使支持CSS属性选择器的浏览器呈现完全不同的更经典的效果。

3、如果只是通过改变颜色来标注链接的话，你要考虑到那些色盲用户怎么办？所以做好的方法还是遵循给链接加下划线的用户习惯。链接规则的顺序可以通过“LoVe/HAte（爱/恨）”方法来记忆，依次为：link、visited、hover和active。

4、只在必要的时候才使用img标签，通常情况下使用背景图片的方法更方便于CSS布局。

5、为元素应用内边距或边框来避免外边距重叠现象。

6、居中的方法有四种：自动外边距实现居中、text-align实现居中、组合使用自动外边距和文本对齐、负外边距解决方案。（个人认为第一种和第四种最好，P86）

7、绝对定位与相对定位的区别在于：绝对定位的元素独立于文档流，而相对定位的元素原来所在地方依然占据一定的文档空间。

8、使用负text-indent属性值的方法，将文本推到屏幕的左边缘之外，从而使屏幕阅读器可正常访问，同时不影响图片浏览，但当图像禁用后用户依然无法看到内容。（本书提供了其他更有效的解决方法，但我认为不够优雅，P125）

9、从低品质到高品质的压缩方法能更容易的在图像文件大小和品质上找到一个平衡点。

10、font-style属性：inherit:使本段文字的字体姿态和父元素的一致；italic:一种在常规字体基础上做过特殊设计的变体，一般带有手写风格；oblique:常规字体有浏览器做倾斜处理后的版本。和italics不同的是，oblique字体并不出自另外设计的变体，而仅仅是常规字体应用倾斜效果的结果。

11、通用字体族：serif字体都有明显的装饰钩，所以在字母笔画的结尾处大都能看到细小的衬钩，如Times New Roman,Georgia和Garamond；sans-serif相对于serif，它没有装饰钩，如Arial,Helvetica,Futura和Lucida Sans Unicode；monospace字体的每个字母都有相同的宽度，与”i”与”m”宽度是相同的，该类字体一般用于显示程序代码，如Courier(Courier New),Monaco和Andale Mono；fantasy完全是装饰用字体，该类字体数量N多，多用于标题，如Impact和Papyrus。选择CSS字体组合的时候，最好选择具有相同x-height（小写字母去除高出部分和低出部分后的高度，通常就是小写的x字母的高度）的字体，他们具有较好的相似性。

12、line-height的值不需要单位，1.2=1.2em。

13、使用!important来声明不允许被覆盖的规则，如h3{color:red !important;}，但由于IE不支持它，所以现在更多的是作为CSS HACK来使用。

14、通过GIF棋盘图案方法可以模拟50％半透明效果（P208）。

15、用CSS创建动态下拉菜单的方法（P213），当然能实现这种效果的只有支持所有元素:hover伪类的浏览器（IE不支持），CSS3则能实现更复杂的效果。

16、使用Offset滤镜可以解决背景图片重复时衔接不够良好的问题。

17、尝试减少百分比值。浏览器计算的舍入误差有时会让50％+50％等于100.1％，导致布局被破坏。这时请尝试略为减少百分比的值，例如将50％改为49.9％。

18、用明显的边框辅助调试布局。div{border:solid 1px #f00;}之类的全局规则可以帮助检查出很多细微的布局差错。为某个特定的元素加上边框也便于找到一些难以发觉的元素重叠或多余空白问题。

19、指定图片路径时不要使用单引号。设置背景图片时的引号并不是必须的，如果使用了单引号那么苹果机上的IE将无法正确加载。所以要么用双引号，要么就不用任何引号。

20、如果代码中使用了传统的锚点（如<a name=”anchor”>），将发现:hover和:active伪类的样式也会应用于其上。我们可以使用独一无二的id（如<id=”anchor”>），或是一种鲜为人知的奇怪语法:link:hover和:link:active来避免这种情况。

21、Position Is Everything上有很多布局问题、浏览器缺陷的解决方法：http://www.positioniseverything.net/

————————————————————————

如果你在WEB设计过程中对平面设计方向更感兴趣，这本书无疑是个很好的选择，但如果只是想看一些CSS技巧，而且是技术含量要求比较高的，这本书上没有多少。你看到的更多的是作者对IE浏览器的永不知疲倦的牢骚，这也是我认为这本书唯一的一点瑕疵。

如果我们做WEB设计的整天都在对IE浏览器支持CSS的缺陷大发牢骚绝对不是一件明智的选择，毕竟我们的用户中大部分人都在使用IE。我们可以选择自己更喜欢的“更高级的浏览器”，但是更重要的是要考虑到大多数用户的需求。尤其是在中国，IE无疑占了绝对的领导地位。现在IE7基本已经修复了IE6中所有的CSS BUG，甚至还支持了PNG透明度。我相信若干年后，浏览器必定能够更加的统一和规范，而我们现在所津津乐道的一些CSS HACK技巧无疑将会被历史遗弃。

而真正永恒的便是这本书教会我们的，对设计的一种热爱与思考。