两年前的这个时候，是每周都会去画室的（和一个同事做伴），现在似乎我们两个都失去了兴趣，乘长假，拿起铅笔，画上一张，虽然方法都还记得，笔已经生疏了，我们的理想（上大街给人画像）看来还是遥不可及 : )
update（2008-05-07）：我一直在收集一些关于素描的blog，可惜我发现的很少（确切的说，到目前为止我只发现了一个，但是漫画的比较多），我猜想虽然很多人会经常的画，但能够同时经常更新自己blog的就不多了，再加上一点现实的技术问题：就是如何将纸件转到blog上的图片，就使得我想看的这种类型的blog更少了。
换了Wordpress的模板，这个模板的php文件结构基本上是从Default继承来的，而CSS部分是重写的。相信以后做模板会快很多，这个足足花了我两个星期的时间，而且估计还有一些bug 
CSS很简短，主要的工作有：
使用RSS的，要点一下标题跳转才能看到的。。。
update(2008-04-27): 更新了部分字体部分的CSS，现在在IE和Firefox下似乎要一致一些了。
这些是在用CSS时积攒下来的一些常见的CSS在不同浏览器下的差异及解决方法，积少成多，下面所提到IE，不做特指，均是指IE6及以下版本，因为我还没有用过IE7 : )
float left margin
这个首当其冲了，属于最常见的一个问题之一。IE（直到IE6都还有）在解释float left的box时，如果有margin-left，会将其放大一倍，比如 margin-left: 10px 在IE下则为20px，由于float left在用CSS布局时是如此常用，因此这个问题也变得广为人知，解决方法是，加上 display:inline 属性就可以了，为什么能解决，我没去理它，反正加上这个之后，IE解决了这个问题，又对其它浏览器没有影响，所以还算方便，比如下面的这个box：
#content_single {
float: left;
width: 650px;
display:inline; /*IE fix */
margin-left: 150px;
}
字体单位：em和px
这是另一个著名的差异：修饰font-size的单位。一般理解px是像素，作为字体大小单位非常合适，可惜IE似乎将px作为“不可变单位”来理解了，在浏览器端改变字体大小时，如果IE遇到用px来修饰的字体，它不允许在浏览器端做字体的放大和缩小(反正直到IE7都不行)，也就是客户端即使字体很小（有可能是因为其分辨率较高，或视力不佳），也无法通过IE来放大字体，这是一个易用性的损失。
虽然Firefox是支持px字体的缩放，但为了保证浏览器兼容性，很多网页选择了em作为字体单位，这是一个相对单位，IE和Firefox都可以支持这种字体的缩放。
box宽度超出
在使用float布局时，多个float left的box会依次从左到右排下去，直到宽度超出父容器的宽度， 这时会往下排，以保证父容器的宽度符合设计。可是如果在float box之后紧接着跟一个正常定位的box，这时不兼容的问题就来了，如果这个新的box宽度超出父容器，IE和Firefox的处理就有所不同了。
由于CSS规范定义是说，float的box和非float的box是独立定位，因此在x和y方向上非float的box和前面的float的box应该是重叠的，只是由于宽度超出，所以x方向会出现滚动条，firefox是这样做的。但IE的理解不是这样，在出现这种宽度超出情况时，它会把这个非float的box挪到前面float box下面，可是实际上宽度还是超出，还是有滚动条，所以有些难以理解，也和规范不符。
这个问题，在做一些页面侧边栏（sidebar）的布局时可能会遇到，没有看到好的解决方法，我的不算方法的方法是仔细计算每个box的宽度，确保他们不要超出父容器宽度。
负margin
在CSS规范上margin取值是可以为负数的，比如一个-100px的margin-left，则表示box可以在原位置基础上左移100像素，这通常用于将一个子box移出父box的矩形范围时使用，但IE不允许这种子box越出父box的边界，所以会将这类box裁减掉。这给我们在CSS设计时带来了阻碍，简单的规避方法就是不要使用负margin，这显然会损失一些灵活性。
update（2008-06-18）：这里有一篇专门讲CSS Bug修正的文章，不错。
Photoshop自带了阴影效果，不过在现实中，象Photoshop那种标准的阴影是由一些有厚度的物体才能产生，对于一些很薄的物体，比如 - 纸张，使用这种阴影似乎不太合适，实际上对于纸这样的材质，现实中可以看到有两个常见的现象：翘角和卷边（翘角尤其常见）。如果在计算机上将这些效果表现出来，那么材质就更具真实性了，但两种效果用Photoshop做起来都不那么简单。
翘角
当纸放在桌子上是，经常可以看到这个翘角的现象，就是有一个或几个边角会翘起，并留下阴影，这个阴影很有些特点，它在翘角处最大，然后沿着两个相邻的边阴影会逐渐消失，因此不能用Photoshop的阴影直接做，但做起来也并不复杂，下面是步骤：
卷边
卷边就是翘角翘过了，卷起来了，呵呵。 这个要更难做一些了。因为这里必须要处理卷起部分的亮度变化了，阴影部分可能也要手动绘制，具体步骤不列了，本来想附图，一张一张截太麻烦了，flickr又不好用，省了吧。。。
在CSS中，一个最基本的概念是盒子模型（box model），每个页面上的元素都可以看成一个矩形的盒子，通过这些矩形的盒子，CSS可以精确的控制页面的布局（Layout）。
盒子的内容
每个box是由几个可选的的部分组成的，从外到内依次是 margin、border、padding、content，而在CSS中我们为元素所指定的宽度和高度（width和height）只是针对content的，也就是说，如果定义了一个元素的宽度和高度，但实际上元素在页面上占据的空间要大于定义的值，所以这也是margin和padding的字面所表达的意思，它们是为了留空的。当然margin、border、padding都是可选的，如果它们都不选，那么这个元素在页面上占据的空间就只有它的内容（content）了。
如果没有定义border，那么看起来似乎margin和padding的区别似乎就不大了，因为它们都是定义了元素content之外的留空，两个都完成同样的效果，但细节上还是有一些差别的，所以需要根据特定的场合（需求）来选择使用margin还是padding，下面就是这些区别。
Margin的合并
Margin有一个很有趣的特性，在垂直方向，两个盒子相连的margin会自动合并，也就是上面一个盒子的margin-bottom和下一个盒子的margin-top会合并，合并后的margin为两个原始margin中较大的一个，
之所以有这个的设计，可能是源自文字段落的天然特性， 两段文字的margin如果不合并，就会导致段落间距过大，不美观。这个合并特性给使用margin来做精确定位带来了一些不可预知性 ，我刚开始用margin时总是被弄糊涂，不过水平方向的margin是没有这个合并的，还有padding也是不会合并的（无论水平还是垂直），这是margin和padding的一个很大的区别。
背景色
对于一个元素，我们可以设置其背景色（一般是background-color）， 显然在其box中，content部分肯定是会应用这个背景色的，而实际上padding部分也会应用这个背景色（这可以理解为padding是在border里面的），而margin部分就不会应用这个background-color，实际上它是透明的，会把其父元素的background透上来（这个也可以理解，可以把margin定义的留空看成是元素外的，所以要透明）。这是margin和padding的又一个较大的区别。
浏览器的问题
这样看来box模型还是挺容易理解的，Firefox基本上严格遵循了这个模型，但现实是不完美的，IE的多个版本对标准的box模型未加“遵守”，采用了自己的box实现，不知道是理解上的问题，还是实现上的bug，IE有几处和上面的标准box模型不一致的地方 ，这给大量的Web设计人员带来了痛苦，需要专门针对每个不一致的地方提出“怪异”的解决方法，《CSS Mastery》一书竟然花了两章的篇幅专门描述各种hacks和bugs（大部分献给了IE）。
列表
大多数CSS喜欢在前面加上一句 * { padding:0; margin:0; }，这是为了取消缺省的所有元素的padding和margin，这样便于后面的精确的定位，也便于将来的浏览器兼容（因为不同的浏览器可能对于不同元素的缺省padding和margin不同），但是这样的0 padding和margin一个常见的副作用是将列表前的符号（那个点）也给取消了，所以通常还再在CSS里手动设置ul的padding-left来重现那个点。
使用Wordpress的用户大都都更换过主题（Theme），甚至很多人选择Wordpress就是因为其丰富的主题资源，也有一部分用户可能希望自己制作主题（包括我），感觉这才能更好的体现blog的个性。在我漫长的学习制作Wordpress主题的过程中，记录下我的一些收获，希望也可以给Wordpress后来者以帮助。
预备知识
大体上，制作一款Wordpress主题需要如下的知识，并不是很高深。
工具
为了自己制作Wordpress Theme，需要适当的工具，下面是我使用的工具，由于我使用Ubuntu Linux，因此下面的工具有些不适合于Windows平台：
Theme教程
有了预备知识和好用的工具，基本上就可以开工了，当然从头开始摸索还是很麻烦的，网上有很多很好的Wordpress Theme制作教程，我看到的很好的一篇是： WordPress theme Guide，虽然是针对Wordpress 1.5，但和目前的Wordpress2.3差别很小，仍然非常有参考价值（这个博主是在中国的老外，还写了多关于中国的帖子，有些意思）。
只需看完这个教程的四个部分，基本上就对Wordpress Theme的基本结构和制作方法有了清楚的概念，然后就是挽起袖子，拿起工具，发挥你的创造力吧。
update(2008-04-11)：在做完Theme之后，一定要分别在Firefox和IE中都测过再发布，否则就可能会。。。（我清楚记得我的第一个Theme在Firefox下测试完后，到了IE下变成了什么鬼模样，呵呵）
update(2008-04-15)：可以在安装好的Wordpress下安装一个Theme test drive插件，这样就可以在更改admin的主题时不影响普通用户的主题，在测试完整之后再切换到新的主题。
这是那一时期的最后一幅了，我记的非常清楚，这张素描花了我3个星期（10个小时）的时间才完成，主要是那颗白菜对我来说太难了（质感很难表达）。自此之后，因为我自己的原因，学画生涯就告一段落了，再也没有动过铅笔，很怀念那段时间。
这几幅和前面的几幅都是06年夏天在一个画室里学画时的练习，每周一个半天，半天一幅素描，当时的感觉非常好，每个礼拜都能感觉到进步，可惜没有能坚持下来（为什么呢？）。
CSS本身的语法（Style Sheet）相当简单，但前面那个“C"（层叠）却不简单，考虑这个问题：如果一个在CSS中有多个地方对同一个对象修饰，并发生冲突，哪一个起作用？这个问题几乎是所有使用CSS的网页都会遇到的，也是CSS所强调的C的原因。
《CSS Mastery》 这本书给这个问题做了准确的回答，CSS是依据Style Sheet的出身（在哪里定义的？）和权重（定义的有多详细？）这两个东西来解决冲突的。
出身分为几种：Author Style是指Web本身所包含的样式，User Style则是浏览网页的用户在本地定义的样式，Browser Style则是浏览器本身携带的一些样式，通常情况他们的优先级很明显，Autho Style > User Style > Browser Style，但这里有个复杂的情况是，User Style和Author Style都可以在定义的时候加上 ！important 这个修饰，加上这个也容易理解，就是比一般样式要重要，自然要优先考虑，但奇怪的是：在CSS规范中，加Important 的User Style是要高于加Important的Author Style的，也就是说，按出身来排的话可以得到这样的优先顺序：
虽然上面这个出身规则排起来很清楚，但实际上经常遇到另一种靠出身解决不了的冲突，即发生在同一个出身内部的冲突，比如Author Style内部可能就有多个样式会冲突，这时需要看权重（Specificity）了，权重的本意是让修饰的最“仔细”的样式优先，所以定下了这么个顺序：
如果加上权重还是不能排出优先，那么最后一招：看先后，后定义的样式覆盖先定义的，到这一步，终于可以保证解决所有的样式冲突了，不过也确实够复杂的。
可以参考的两个网页（不过都不全面）：
这些是两年前画的，每一幅都花去整整半天的时间（4个小时），我的纸稿保存的很差，很多已经有些看不清楚了，所以把它们都数字化了，也顺便让blog里多一些图片，少一些干巴巴的文字：
