Liu Zhongshu

因为浏览器和CSS都不是中国人发明的，所以呢，缺省的css下中英文字体混排在一起不是很好看，起码我不喜欢

我在css中喜欢的全局字体设置是：

body{
font-family: Verdana,Tahoma,Arial,Geogia,宋体,Sans-serif;
font-size:12px;
}

解释一下，Verdana,Tahoma,Arial都是最常见的Windows下的无修饰字体，Geogia是带修饰的字体，宋体是为了保证中文选择宋体，Sans-serif是无修饰字体的通用名（也就是说并不存在一个这样的字体名字），放在最后是为了保险，万一客户端前面几种字体都没有，就用这个通用字体去匹配一个好了。

我个人相对偏好Verdana一些，所以排在最前面了（其实和Tahoma感觉很像，但Verdana的字间距要大一些，利于阅读）。12px的大小也是比较适合于中文排版，但使用px为单位会导致IE没有办法缩放字体，如果希望客户端可以缩放的话，要改为相对字体单位em，我前面的帖子中也提过的。

这些是在用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修正的文章，不错。

在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来重现那个点。

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的，也就是说，按出身来排的话可以得到这样的优先顺序：

• Important User Style
• Important Author Style
• Author Style
• User Style
• Browser Style

虽然上面这个出身规则排起来很清楚，但实际上经常遇到另一种靠出身解决不了的冲突，即发生在同一个出身内部的冲突，比如Author Style内部可能就有多个样式会冲突，这时需要看权重（Specificity）了，权重的本意是让修饰的最“仔细”的样式优先，所以定下了这么个顺序：

• Inline的样式（直接写在HTML文件中），权重最大
• 以ID来修饰的样式排第二，并且ID个数越多，权重越大
• 以Class来修饰的样式排第三，并且Class个数越多，权重越大
• 以HTML Tag来修饰的权重最小，Tag越多，权重越大

如果加上权重还是不能排出优先，那么最后一招：看先后，后定义的样式覆盖先定义的，到这一步，终于可以保证解决所有的样式冲突了，不过也确实够复杂的。

可以参考的两个网页（不过都不全面）：

• http://www.hwg.org/resources/faqs/cssFAQ.html#cascorder
• http://webdesign.about.com/od/css/f/blcssfaqcascade.htm

要在blog中插入代码，总会比较麻烦，wordpress可以使用<code>和<pre>两个标签，code标签可以格式化为等宽字体，但较长的代码行仍会被自动换行，多余的空格也会被自动删除，下面是使用code的效果：


#include "stdio.h"
void main()
{
printf("hello world,hello world,hello world,hello world,hello world,hello world,hello world,hello world,hello world,hello world,hello world,hello world,");
}


如果用pre，则可以解决自动换行的问题，但随之而来的问题就是当代码行太长的时候，显示就太不美观了，幸好我们可以通过css来修饰pre标签，让代码显示的美观一些，下面是关键的几行css代码：

pre {
width: 100%;
overflow: auto;
}

这样的话，再长的代码也不怕了（会自动加上滚动条），以后在blog中插入代码都需要加入<pre>和</pre>（注意要在wordpress编辑的“非所见既所得”方式下才能直接编辑html），下面是上面同样的代码用pre来格式化的效果（有了缩进和滚动条）：

#include "stdio.h"
void main()
{
    printf("hello world,hello world,hello world,hello world,hello world,hello world,hello world,hello world,hello world,hello world,hello world,hello world,");
}

我试过将pre的css属性（width和overflow）放在code里面（因为我感觉code标签比pre标签更贴切一些），但总是格式出来的效果不对，点解？ 所以现在只能用pre来框住代码。还有一点比较麻烦的是： pre段里如果出现html tag，仍然会被解释，所以插入的代码必须先做html encode，所幸wordpress的后台有visual编辑模式可以自动做这个处理。

印象中，我曾经几次试图找一个顺手的HTML/CSS/JS编辑器，大多没有好的收获，或者不比gedit强多少，这个顽固的印象要改一改了，因为昨天发现了Aptana，一个开源的Web开发IDE。

Aptana基于Eclipse，支持各种Web设计和开发，比如XHTML/CSS以及Javascript， 我简单的用了一下它的编辑器编辑了一个css文件，相当的专业，丰富的代码提示以及浏览器兼容指示估计应该能让生产率提高不少，但我使用的功能很少，这只算一个良好的初步印象。

Aptana的安装很简单（很遗憾，暂时还不能用apt-get），下载那个Aptana Studio的Community版本就可以了，解开就可以直接执行，在我机器上，跑的不错。

一个插曲是，直接安装后的版本（我用的是1.1），居然将 a:hover 这类css修饰当成了错误（放了一个小红叉在代码行前），这应该算一个严重的bug了，虽然官方给出了解决方法（只需要修改一个设置），但还是给人感觉有些不严谨。

asciidoc提供了完整的css供用户自定义，每个用户总有些自己的格式化方面的需求需要通过css来定制，我用了一段时间，对于css有以下几个修改（/usr/share/asciidoc/stylesheets/xhtml11.css）：

× 段落行间距，这是因为如果不定义这个，则在打印时（firefox），行间距过小，但在显示器中浏览时却是正常的，我没有去细究为什么，反正简单修改一下就好了。在段落的定义中增加 line-height: 1.5，现在的定义如下：
p {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

× 我喜欢用literal block（一种段落样式，在ascdoc中用"....."来定义）来引用代码，缺省的literal block字体偏大了（也是打印时，在显示器上没有问题），我增加下面一个css定义：
div.literalblock {
  font-size: small;
}

× 我不喜欢缺省的1px的图像边框，因此我改了下面的语句到0px：
div.imageblock img { border: 0px solid silver; }

所有的改动就是这些，得益于css的强大，都很简单的搞定，有时间是应该仔细看看css了。

关于Web Design的书有一个好处，大多制作相当精良，给人感觉像是Web的克隆（我十分想知道这些书是用什么排版工具排出来的？呵呵）

这本书主要介绍Web的一般设计原则，重点是HTML和CSS，很细致，后面还有一些内容介绍Web图像处理。我草草看了一些，内容写的不错，也有一些有趣的素材（比如各种显示分辨率的统计），并且非常"与时俱进"，值得推荐。但一定要第三版，因为Web的技术发展太快了，很多到现在还在讲解HTML而忽略CSS的书明显过时了。

由于没有涉及Javascript，这本书只能算是设计静态Web的指导书了。

http://snook.ca/archives/php/codeigniter_vs_cakephp/
这个页面很合我的胃口，尤其是blog下面的comment部分，很漂亮且实用，有点象是forum。

这个网站是在dreamhost上的，程序，美工都是作者一人搞定（程序似乎是基于Cakephp），一个比较牛的Web developer。

非常好的一个调查，从35位设计者中得到5个问题的反馈，其中有一个问题是关于design book的推荐，调查结果的前两位就是 <Don't Make Me Think> 和 <CSS Mastery>，虽然两本书我都有，惭愧的是一直没有静心去看。