(Web2.0)XHTML+CSS 设计注意事項
作者:骆驼 日期:2006-12-02 06:31
1、除选择DOCTYPE之外的语句必须使用小写英文字母书写。其中包括 Macromedia Dreamweaver 生成的鼠标动作，如 OnMouseOver 也必须修改成 onmouseover。
2、XHTML语法规要求所有的标识都必须有开始和结束。例如<body>和</body>、<p>和</p>等，对于不成对的标识，要求在标识最后加一个空格，然后跟一个"/"。例如<br>写成<br />、<img>写成<img />，加空格的原因是避免代码连在一起浏览器不识别。
3、所有的XML标记都必须合理嵌套。如：<p><b></p></b> 必须修改为：<p><b></b></p> ，就是说，一层一层的嵌套必须是严格对称。
4、所有的属性必须用引号""括起来。如： <height=80> 必须修改为：<height="80"> 。特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如：<alt="say'hello'">。
5、把所有<和&特殊符号用编码表示。如：任何小于号（<），不是标签的一部分，都必须被编码为& l t ; ，任何大于号（>），不是标签的一部分，都必须被编码为 & g t ; ，任何与号（&），不是实体的一部分的，都必须被编码为& a m p ; 。（以上代码字母间无空格）
6、给所有属性赋一个值。如： <td nowrap> <input type="checkbox" name="shirt" value="medium" checked> 必须修改为：<td nowrap="nowrap"> <input type="checkbox" name= "shirt" value="medium" checked="checked">。
7、不要在注释内容中使用“--”。如：<!--这里是注释-----------这里是注释--> 可以用等号或者空格替换内部的虚线 <!--这里是注释============这里是注释-->。
怎样转换成 XHTML
作者:骆驼 日期:2006-11-23 06:55
To convert a Web site from HTML to XHTML, you should be familiar with the XHTML syntax rules of the previous chapters. The following steps were executed (in the order listed below):
要将一个HTML网站转换成XHTML，你应该熟悉前几章节所提到的XHTML语法。然后依照下面的步骤来做：
A DOCTYPE Definition Was Added
添加DOCTYPE定义
The following DOCTYPE declaration was added as the first line of every page:
在每个页的首行添加如下DOCTYPE声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Note that we used the transitional DTD. We could have chosen the strict DTD, but found it a little too "strict", and a little too hard to conform to.
注意我们使用的是过渡型的DTD。我们可以选择严密型的 DTD，但它的要求有点过于严格，想完全地去遵循它有些困难。
10个你未必知道的CSS技巧
作者:骆驼 日期:2006-10-23 07:23
一般用CSS设定字体属性是这样做的：
font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;
但也可以把它们全部写到一行上去：
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。
CSS权威指南和HTML与XHTML权威指南
作者:骆驼 日期:2006-10-19 07:29
《CSS权威指南》是O'Reilly公司出版的Web制作权威指南系列中的一本。该系列还包括《HTML与XHTML权威指南》、《JavaScript权威指南》和《Dynamic HTML: The Definitive Guide》。
CSS有望在Web上大显身手。它在Internet Explorer 5.0和Opera 3.6中得到了很好的实现，而且CSS1将在Netscape的Mozilla浏览器上得到完全的实现。种种迹象表明，CSS将很快成为Web创作者有用、可靠而强大的工具。
CSS是W3C认可的用于丰富Web页视觉表现力的方法。本书提供了对CSS1和CSS定位的完整的描述，同时也给出了CSS2的概述。本书对CSS的每个属性都做了详细的探究，同时讨论了各个属性之间如何协调，以及怎样避免一些常见错误。
本书的特点在于，它是第一本将CSS与当前浏览器支持结合起来描述的读物，而不仅仅是讲述CSS理论上应该如何工作，因此它为Web创作者和编辑人员高效使用CSS提供了全面的指南。
常用CSS缩写语法总结
作者:骆驼 日期:2006-08-23 07:27
颜色
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369;
盒尺寸
通常有下面四种书写方法:
property:value1; 表示所有边都是一个值value1；
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;
边框(border)
边框的属性如下：
border-width:1px;
border-style:solid;
border-color:#000;
可以缩写为一句：border:1px solid #000;
语法是border:width style color;
IE与Firefox下对CSS解析的区别及解决方案
作者:骆驼 日期:2006-07-18 14:06
1、IE与Firefox下对CSS解析的区别,这是我在使用中的一些经验，拿出来和大家分享，希望大家继续
对高度的解析
IE：将根据内容的高度变化，包括未定义高度的图片内容，即使定义了高度，当内容超过高度时，将使用实际高度
Firefox：没有定义高度时，如果内容中包括了图片内容，MF的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。
结论：大家在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，最好不用使用边框样式，否则样式肯定会出现混乱！
img对象alt和title的解析
alt：当照片不存在或者load错误时的提示；
title：照片的tip说明。
在IE中如果没有定义title，alt也可以作为img的tip使用，但是在MF中，两者完全按照标准中的定义使用
结论：大家在定义img对象时，最后将alt和title对象都写全，保证在各种浏览器中都能正常使用
其他的细节差别
当你在写css的时候，特别是用float: left（或right）排列一窜图片时，会发现在firefox里面正常而IE里面有问题。无论你用margin:0,还是border: 0来约束，都无济于事。
其实这里还有另外一个问题，就是IE对于空格的处理，firefox是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写，中间不要有回车或者空格。不然也许会有问题，比如3px的偏差，而且这个原因很难发现。
非常不走运的是我又碰到了这样的问题，多个img标签连着，然后定义的float: left，希望这些图片可以连起来。但是结果在firefox里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。
后来的解决方法是在img外面套li，并且对li定义margin: 0，这样就解决了IE和firefox的显示偏差。IE对于一些模型的解释会产生很多错误问题，只有多多尝试才能发现原因。
2、嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案
用CSS的!important解决IE和Firefox的布局差别
作者:骆驼 日期:2006-07-11 08:28
在设计《网页设计师》页面的时候，有一个问题一直困扰着我，主菜单在IE和其他(Mozilla、Opera等)浏览器里显示的效果偏差2px。截图如下：
IE中的效果
Mozilla Firefox中的效果
这是因为IE对盒之间距离的解释的bug造成的(参考onestab的" 浮动模型的问题 ")。我一直没有解决这个问题，直到我翻译 " 表格对决CSS--一场生死之战 "时，作者的一个技巧提示帮我找到了解决的方法：用!important。
!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权(参见：W3.org的解释)。语法格式{ sRule!important }，即写在定义的最后面，例如：
box{color:red !important;}- 1
