<![CDATA[CSS Web Design 我爱CSS]]> http://www.52css.com/ zh-cn PBlog2 v2.4 CSS Web Design 我爱CSS http://www.52css.com/images/logos.gif http://www.52css.com/ CSS Web Design 我爱CSS http://www.52css.com/default.asp?id=1174 <![CDATA[详解CSS网页布局中默认字体样式]]> MrJin@52css.com(52css) Mon,23 Aug 2010 22:57:36 +0800 http://www.52css.com/default.asp?id=1174 　　拿字体来说，各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如IE8的中文版在Windows XP下显示网页时默认字体是宋体，而英文版肯定不会如此。所以我们需要统一设置默认的字体样式，以便实现一致的显示效果来保证设计的一致性和提高开发效率。

样式优先级
　　通常用户看到的页面的样式会受到三层控制:
　　第一层是浏览器的默认样式 
　　第二层是网页定义样式 
　　第三层是用户自定义样式 
　　和CSS一样，后面的优先级 高于前面的，也就是说网页定义样式可以覆盖浏览器的默认样式，而用户自定义样式优先级最高。不过，当有 !important 时，网页样式可以覆盖用户自定义样式。用户!important > 网页!important > 用户 > 网页 > 浏览器默认。

字体：arial
　　我们页面的绝大部分内容字符都是中文，毫无疑问目前为止在网页上最常用也是最通用的显示中文的字体是宋体，但是宋体在显示英文、数字和英文符号时过于糟糕，比如©字符，所以我们一般期望通过CSS来实现用更好的字体样式来显示它们，然后用宋体来显示中文和中文符号。之所以选择arial是因为：
　　Windows和Mac都预装了这款字体，应该是使用最广泛的网页字体了。它的潜在对手tahoma和helvetica就没有这么幸运了。 
　　视觉设计的专业人士可能会认为在Windows中使用tahoma、在Mac中使用helvetica更好，比如淘宝的默认字体样式是font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
　　这是一个很不错的选择，但是你也会发现Google、YAHOO、Youtube、Bing甚至MSN的新版都使用arial作为第一默认字体。所以从美观和可读性上来讲arial应该是完全可以接受的。 
　　一般情况下设置font-family都会在最后设置通用字体族以保证其安全性，比如Google的设置为font-family:arial,sans-serif;，但是至少在非中文版的Win7下当编码是GBK时，IE8会因sans-serif来渲染宋体，导致字体出现变形，这就是为什么淘宝需要在sans-serif前加上宋体而Google无需这样做的原因。 
　　因为中文字体的选择非常有限，所以目前所有的主流浏览器都设置使用宋体来显示中文。Baidu的首页和搜索结果页使用font-family:arial;可以从侧面说明这样做的安全性。可能有人注意到Firefox中国版默认显示的中文字体是微软雅黑，这是因为谋智网络擅自修改了用户自定义样式，不允许网页的样式覆盖浏览器设置的样式。也是由于类似的情况，我们要弹性设计网页非常重要。 
　　使用英文字体作为第一默认字体会导致的问题之一就是中英文以及符号混排时的对齐问题、通过设置行高和hasLayout能解决绝大部分情况，但是都不会很完美，如果把字体改成“宋体”能彻底的解决问题。很明显，这个问题只出现在IE上。所以，如果你的网站很少使用英文、数字和英文符号，那么直接设置{font-family:\5b8b\4f53;}也是很合理的选择。

大小：12px
　　12px是宋体能显示的极限，虽然微软雅黑能显示更小的字体，但目前的应用环境尚未成熟。由于宋体基本上是目前显示中文唯一的通用Web字体，所以12px成为最常用的字体大小。我们当然可以依据产品的需要来修改这个默认值。 
　　不用考虑基于字体大小（em）的设计。 
　　在Chrome3.0之后的中文版中，字体大小最小值是12px，比如你设置最小字体为10px，最后也变成12px。 

行高：1.5倍
　　这是一个经验值，不同的产品对这个值要求可能不同，但我们一般会设置最常用的为默认值。比如YUI的font中是font:13px/1.231 arial,helvetica,clean,sans-serif;即字体大小默认值是13px，行高是13*1.231=16.003px，默认的行高是默认字体的1.231倍。对于中文来说，常用的字体大小12px、14px、16px、18px等偶数大小，在IE6和IE7设置其行高也为偶数能解决一些特殊情况下的字体对其问题。 
在IE6和IE7中，行高值必须大于字体的2px才能保证字体的完整显示或当其作为链接时能有效显示下划线。 
设置line-height时，注意不要使用单位（包括%在内），因为子节点会继承经过运算后的line-height值，所以当使用单位后浏览器会把line-height计算成第一次定义的绝对值，而不会随着字体大小的变化而变化，而无单位的数值表示是所在容器的font-size的倍数，所以设置为无单位的数值是最佳选择。 
　　深入CSS 行高非常有利于理解line-height，值得一读。 

性能和效率
　　大部分平台都有arial，减少浏览器的查找时间。 
　　代码最少，书写方便。arial基本上是名字最短的字体了，可以节约CSS的大小。 
　　所有的字母都小写，目前Google就是这样做的，好处是既可以编写更快也能提升Gzip压缩的效率。 
　　中文最好用unicode表示，比如使用宋体是{font-family:\5b8b\4f53;}，使用微软雅黑是{font-family:\5fae\8f6f\96c5\9ed1;}，这样的好处是避免编码问题，同时能得到所有的主流浏览器的支持。 
使用正确的字体种类写法，避免使用引号，这样可以缩小CSS的大小。中文字体可以按上一条方式来编写。 
未来
　　通过对中英文及符号混排的测试， 我发现微软雅黑其实表现相当不错，包括英文数字和英文字符以及在IE6和IE7的显示效果上，但唯一的遗憾是在XP下如果安装了微软雅黑字体的用户没有打 开“使用屏幕字体的边缘平滑”选项的话，在firefox、Safari和Opera、特别是IE6下会非常模糊难以辨认。针对这个问题目前并没有很好的 解决方案，所以只有等到IE6使用比率非常小的时候才可能正式的使用它。或许需要到2014年，XP死掉的时候。 
　　虽然很早就有了@font-face，但是浏览器的支持、网速和商业问题，导致它很少被应用。最近关于字体的好消息是Firefox3.6将支持Web Open Font Forma。关于Web字体未来的相关信息可以看Web 字体的未来、关于 Web 字体：现状与未来和再谈 Web 字体的现状与未来。
　　]]> http://www.52css.com/default.asp?id=1173 <![CDATA[CSS执行顺序与优先权的问题]]> MrJin@52css.com(52css) Thu,12 Aug 2010 20:26:49 +0800 http://www.52css.com/default.asp?id=1173 　　首先就是CSS规则的specificity(特殊性)，CSS2.1有一套关于specificity的计算方式，用一个四位的数字串(CSS2是三位)来表示，最终specificity越高的规则越特殊，在优先级判定时也就越有优势。关于specificity的具体计算在各种情况下的数字加成有如下一般规则：
　　每个ID选择符(#someid)，加 0,1,0,0。 
　　每个class选择符(.someclass)、每个属性选择符(形如[attr=”"]等)、每个伪类(形如:hover等)加0,0,1,0 
　　每个元素或伪元素(:firstchild)等，加0,0,0,1 
　　其他选择符包括全局选择符*，加0,0,0,0。相当于没加，不过这也是一种specificity，后面会解释。 
　　按这些规则将数字串逐位相加，就得到最终计算得的specificity，然后在比较取舍时按照从左到右的顺序逐位比较。

　　举一些例子吧：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
h1 {color: red;}  
/* 只有一个普通元素加成，结果是 0,0,0,1 */
body h1 {color: green;}  
/* 两个普通元素加成，结果是 0,0,0,2 */ ——后者胜出        
h2.grape {color: purple;} 
/* 一个普通元素、一个class选择符加成，结果是 0,0,1,1*/ 
h2 {color: silver;}  
/*一个普通元素，结果是 0,0,0,1 */ ——前者胜出        
html > body table tr[id=”totals”] td ul > li {color: maroon;}  
/* 7个普通元素、一个属性选择符、两个其他选择符，结果是0,0,1,7 */ 
li#answer {color: navy;}  
/* 一个ID选择符，一个普通选择符，结果是0,1,0,1 */ ——后者胜出  
除了specificity还有一些其他规则


　　文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如<div style=”color: red”>blah</div>的样式，而外部定义指经由<link>或<style>标签定义的规则。 
　　有!important声明的规则高于一切。 
　　如果!important声明冲突，则比较优先权。 
　　如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。 
　　由继承而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选择符*定义的规则)。 
关于经由@import载入的外部样式，由于@import必须出现在所有其他规则定义之前(如不是，则浏览器应该忽略之)，所以按照后来居上原则，一般优先权冲突时是占下风的。
　　这里需要提一下IE，IE是可以识别位置错误的@import的，但无论@import在什么地方，它都认为是位于所有其他规则定义之前的，这可能会引发一些误会。 
　　所以优先权问题虽然看起来简单，但其背后还是有蛮复杂的机制的，需要多多留意。
　　]]> http://www.52css.com/default.asp?id=1172 <![CDATA[通过优化CSS代码 减小对系统资源的占用]]> MrJin@52css.com(52css) Wed,28 Jul 2010 22:51:23 +0800 http://www.52css.com/default.asp?id=1172
　　一、尽量不要使用*通配符。
　　这是以前我自己一直忽视的问题，觉得使用通配符很方便，但没考虑的这是很占用系统资源的，因为这通配符就是将CSS中的所有标签都初始化了，不过用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。在52CSS.com中，也对此知识点有所说明。所以尽量不要贪图方便而使用通配符，应该有选择的初始化标签的样式。

　　二、尽量不要使用过小的图片做背景平铺。
　　原因是，假如用1px * 1px的图片平铺出一个 300px * 300px的区域，就需要300 * 300 = 60000 次，是非常占用资源的。

　　三、无边框。
　　很多人经常会这样些的：border:0;其实这只是定义了边框的宽度为0，但边框样式、颜色等还是会被浏览器解析的，所以也是占用了不少的资源，尤其是有些没注意上文提到的第一问题，将所有的标签初始化都定义了border:0; 推荐的写法是：border:none;

　　这是我自己在外贸建站过程中整理出来的几个比较容易犯错的地方，也欢迎大家一起来52CSS.com讨论！
　　]]> http://www.52css.com/default.asp?id=1171 <![CDATA[CSS3 （Smashing Magazine） 设计比赛 获奖作品]]> MrJin@52css.com(52css) Tue,13 Jul 2010 22:24:36 +0800 http://www.52css.com/default.asp?id=1171 CSS3 设计赛，最终有 5 位设计师获奖，获奖作品体现了 CSS3 技巧的原创性与独特性，同时展示了 CSS3 的强大的功能，这些作品基于纯 CSS3 技术，并不借助 JavaScript 或其它技术。

第一名: CSS3 图表
CSS3 Charts [ 预览 | 下载 ]

该设计试验了 CSS3 在图表方面的应用，不借助任何 JavaScript 和图片。用到了 CSS3 强大的选择器功能：nth-child 和 :target，同时用到了过渡，渐变等技术，由来自美国的 Sean Oh 设计。

Css3-charts-full 1 in CSS3 Design Contest Results

Css3-charts-full 2 in CSS3 Design Contest Results
第二名: CSS3 魔方
CSS3 Rubiks Cube [ 预览 | 下载 ]

使用魔方实现导航，虽然在具体应用中体验未必好，但作为一种创意，可以用在作品展示类站点。用到了 CSS3 的过渡和渐变技巧。由来自意大利的 Francesco Benanti 与 Maicol Zenatti 联合设计。

Rubik in CSS3 Design Contest Results
第三名: CSS3 3D
CSS3D [ 预览 | 下载 ]

如果你有 3D 眼镜，可以看看这个 3D 效果，支持任意现代浏览器，甚至 iPhone，由来自荷兰的 simurai 设计。

Css3d-full in CSS3 Design Contest Results
第四名: CSS3 机器人
CSS3 Monsters Blob [ 预览 | 下载 ]

使用纯 CSS3 设计的机器人，随着鼠标的移动，机器人的眼镜也在转动，由来自法国的 Sebastien Plaignaud 设计。

Css3-monsters-blob-full in CSS3 Design Contest Results
第五名: CSS3: 时间的裂缝
CSS3 A Rift in Time [ 预览 | 下载 ]

CSS3 支持旋转，我们可以借以试验反传统的倾斜导航，由来自美国的 Maxwell Burton 设计。

Css3-a-rift-in-time-full in CSS3 Design Contest Results

本文国际来源：Smashing Magazine

]]> http://www.52css.com/default.asp?id=1170 <![CDATA[DivCSS网页布局中几个漂亮的Button按钮]]> MrJin@52css.com(52css) Thu,01 Jul 2010 11:52:30 +0800 http://www.52css.com/default.asp?id=1170
.btn {
 BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid
}
.btn1_mouseout {
 BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn1_mouseover {
 BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
.btn3_mouseout {
 BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mouseover {
 BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mousedown
{
 BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFE400 1px solid
}
.btn3_mouseup {
 BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn_2k3 {
 BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid
}
</style>
<body>

<button class=btn title="好看的按钮">好看的按钮</button><P></p>
<button
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
 onmouseout="this.className='btn1_mouseout'"
 title="好看的按钮">好看的按钮</button>  &nbsp;
<button
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
 onmouseout="this.className='btn1_mouseout'" DISABLED>好看的按钮</button>
<P>
<button class=btn2 title="好看的按钮">好看的按钮</button>
<P>
<button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"
 onmouseout="this.className='btn3_mouseout'"
 onmousedown="this.className='btn3_mousedown'"
  onmouseup="this.className='btn3_mouseup'"
  title="好看的按钮">好看的按钮</button>
<P>
<button class=btn_2k3 title="好看的按钮">好看的</button>
]]> http://www.52css.com/default.asp?id=1169 <![CDATA[DivCSS实例教程：表单Select样式美化经典案例]]> MrJin@52css.com(52css) Mon,24 May 2010 22:20:33 +0800 http://www.52css.com/default.asp?id=1169 　　效果如下图所示：


　　结构分析如下图：



DivCSS实例教程：表单Select样式美化经典案例 演示地址

DivCSS实例教程：表单Select样式美化经典案例 下载地址
　　]]> http://www.52css.com/default.asp?id=1168 <![CDATA[推荐3个所谓的“顶级”CSS技巧！ ]]> MrJin@52css.com(52css) Fri,07 May 2010 23:27:17 +0800 http://www.52css.com/default.asp?id=1168
一、在一行内声明CSS

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
　　h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;} 
　　h2 { 
　　font-size:18px; 
　　border:1px solid blue; 
　　color:#000; 
　　background-color:#FFF; 
　　} 

　　第二种看起来的确格式化，但是不会在阅读上有任何帮助。写在一行内可以让你更快的找到需要的部分。
　　以前我也是写成类似第二种方式，但是逐渐发现就像文章说的一样，没多大用。一行看起来又爽快又省地方还能让文件更小。

二、分块书写代码

　　这样书写代码可以让CSS更页面化，在出现问题时候可以最短时间内找到问题所在。就像下面这样：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
　　#content {float:left;} 
　　#content p { … } 
　　#sidebar {float:left;} 
　　#sidebar p { … } 
　　#footer {clear:both;} 
　　#sidebar p { … } 

三、浏览器兼容问题

　　只支持最新的浏览器。也就是说要放弃IE5和IE5.5。这样一来就能省下很多时间。对于IE6来说不用使用盒模型Hack。如果只针对流行浏览器的话，只需要很少的Hack就能实现同样的效果。
　　我注意了一下网易新版主页的CSS，其中竟然一个!important或者Hack都没有，可是在FF和IE里面显示效果都很好。在52CSS.com的出版的书《变幻之美 DivCSS网页布局揭秘 - 案例实战篇》中，hack应用也非常非常少。合理的使用CSS可以避免Hack。当然，调试的时间会多一些。
　　包含浮动元素所有在容器内的内容都应该被设计为和容器保持一致。如果过大的话就会滑动到错误位置。使用负值margin调整到容器外同样会导致滑动。
　　理解Overflow如果页面中有两个浮动元素，在左容器内输出过多内容的话就会导致右侧容器跑到下面。这也就是说你的margin、宽度或者padding设置混乱了，不过在FF里面体现不出来。使用overflow:hidden或者overflow:scroll可以避免IE允许内容冲出容器。
　　更多的CSS技巧，欢迎您关注52CSS.com的内容。感谢您的支持。]]> http://www.52css.com/default.asp?id=1109 <![CDATA[欢迎购买：变幻之美 DivCSS网页布局揭秘（全彩印）]]> MrJin@52css.com(52css) Wed,28 Apr 2010 16:39:50 +0800 http://www.52css.com/default.asp?id=1109 　　
　　52CSS站长，编著的新书
　　《变幻之美 DivCSS网页布局揭秘 - 案例实战篇》（全彩印）
　　已经出版发行啦。欢迎大家购买阅读。共同学习！

　　◎ 当当网 dangdang.com ￥33.80  
　　◎ 卓越网 amazon.cn ￥33.80  
　　◎ 互动网 china-pub.com ￥33.75 
　　◎ 人民邮电出版社 ￥36.1 

　　详细请看，本书专题页：http://www.52css.com/book/ 或 http://52css.com/book/


]]> http://www.52css.com/default.asp?id=1167 <![CDATA[DivCSS网页布局中CSS无效的十个常见原因]]> MrJin@52css.com(52css) Thu,22 Apr 2010 23:36:48 +0800 http://www.52css.com/default.asp?id=1167
　　1、不要担心验证程序的警告：如果验证程序说发现12处错误以及83处警告，不要理它，继续进行下一步。 
　　2、一次更正一个错误：按顺序进展工作，从上到下，一次修正一个错误。HTML用浏览器从上到下浏览，这些错误也是按同样顺序显示。 
　　3、每次修正代码后要刷新代码，使它们重新生效：一个小错误常常会引发之后整页的连串错误。因此如果操作不当，“修正错误”也可能引发更多错误。每次修正后使代码重新生效，这样就可以确保完全解决问题。
　　知道了上面这些基本的异常情况，下面我们就来看看版面设计无效的几个原因。

　　一、div 标签未关闭
　　这是版面设计失效的最常见原因之一。当我们了解到这是多少精致的版块设计失效的罪魁祸首时，总会大吃一惊。开启的div标签是最普遍的版块设计失误之一，也是最难诊断的失误之一。验证程序有时会指向错误的开启div标签，诊断时就像大海捞针一样麻烦。

　　二、麻烦的embed标签
　　九十年代早期，Microsoft和Netscape的浏览器开始能够辨认非标准的独有字体。遗憾的是这意味着W3C验证程序还不能识别某些关键HTML 标签，如“embed”，即使这些标签已经被广泛使用。如果确实希望得到严格的DOCTYPE(文档类型)验证，就只能放弃嵌套。
　　如果同时想要生效的版面设计和嵌入式媒体，可以试试Flash Satay方法。

　　三、不当的DOCTYPE声明
　　不声明DOCTYPE，或者在文件开始错误声明DOCTYPE，也是一个常见错误。根据一般经验，Strict DOCTYPE是大家追求的最高级验证。Strict validation表明你的网页能够在所有浏览器上都得到最佳展示。关于DTD文档类型的声明，您可以参考52CSS.com的相关文章。

　　四、结尾斜线
　　如果你的网站不能验证，很有可能是在代码的某个地方漏写了结尾斜线。我们很容易忽略结尾斜线之类的东西，特别是在image标签等元素中。
　　在严格的DOCTYPE中这是无效的。要在img标签结尾处加上“/”以解决此问题。

　　五、Align标签
　　如果DOCTYPE被设为Transitional，你就会使用“align”标签，但如果要求更高一点希望得到Strict验证，你会看到很多错误。 Align是另一个不可用于版面设计的标签。可以尝试用“float”或者“text-align”来代替align转换元素。

　　六、JavaScript
　　如果已经声明Strict DOCTYPE，就需要在JavaScript中覆盖CDATA标签。验证程序的这一方面难倒了很多程序员，因为网站倾向于为广告和追踪脚本使用嵌入的 JavaScript。如果必须用到JavaScript，可以在其前后加上如下标签：

　　七、图像需要“alt”属性
　　你可能还没有注意到，图像也是高级验证的潜在绊脚石。除了结尾斜线，高级验证也要求用alt标签来描述图像，如alt= ”Scary vampire picture”。
　　搜索引擎也靠alt标签来识别网页上的图像，所以无论怎样加上alt标签总是好的。

　　八、未知实体数据
　　实体数据是又一个影响验证的易犯错误。我们可以考虑用适当的编码字符来代替“&”等符号。entire list中列出在XHTML版块设计中可用的适当的编码字符实体数据。

　　九、不良嵌套
　　嵌套就是元素里又包括元素，我们容易混淆嵌套元素的顺序。例如在div标签前启动strong标签，但又先关闭div标签。这可能不会改变版块布局，但却会使你的版块设计失效。

　　十、缺少“title”标签
　　尽管这看上去是一个很明显的错误，很多程序员(包括我自己)还是经常会在“head”版块中遗漏title标签。当你看到“missing a required sub-element of HEAD”(缺少HEAD的必要子元素)时，才会发现自己忘记添加title标签了。
　　]]> http://www.52css.com/default.asp?id=1166 <![CDATA[DivCSS小结：浏览器默认HTML的CSS样式属性]]> MrJin@52css.com(52css) Sun,18 Apr 2010 21:08:01 +0800 http://www.52css.com/default.asp?id=1166 但通配选择器在大型网站的构建中，影响性能，可以参考52CSS.com的相关文章，大家还是需要谨慎一些。

　　以前一直在找这份文档，今天偶然在w3上看到了。除了inline和block的定义，主要是要注意body|h1~h6|blockquote|menu|ul|ol|dd等标签的默认样式（margin和font-size）。 

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
html, address, 
blockquote, 
body, dd, div, 
dl, dt, fieldset, form, 
frame, frameset, 
h1, h2, h3, h4, 
h5, h6, noframes, 
ol, p, ul, center, 
dir, hr, menu, pre   { display: block } 
li              { display: list-item } 
head            { display: none } 
table           { display: table } 
tr              { display: table-row } 
thead           { display: table-header-group } 
tbody           { display: table-row-group } 
tfoot           { display: table-footer-group } 
col             { display: table-column }  
colgroup        { display: table-column-group } 
td, th          { display: table-cell; } 
caption         { display: table-caption } 
th              { font-weight: bolder; text-align: center } 
caption         { text-align: center } 
body            { margin: 8px; line-height: 1.12 } 
h1              { font-size: 2em; margin: .67em 0 } 
h2              { font-size: 1.5em; margin: .75em 0 } 
h3              { font-size: 1.17em; margin: .83em 0 } 
h4, p, 
blockquote, ul, 
fieldset, form, 
ol, dl, dir, 
menu            { margin: 1.12em 0 }  

h5              { font-size: .83em; margin: 1.5em 0 } 
h6              { font-size: .75em; margin: 1.67em 0 } 
h1, h2, h3, h4, 
h5, h6, b, 
strong          { font-weight: bolder } 
blockquote      { margin-left: 40px; margin-right: 40px } 
i, cite, em, 
var, address    { font-style: italic } 
pre, tt, code, 
kbd, samp       { font-family: monospace } 
pre             { white-space: pre } 
button, textarea, 
input, object,  
select          { display:inline-block; } 
big             { font-size: 1.17em } 
small, sub, sup { font-size: .83em } 
sub             { vertical-align: sub }  
sup             { vertical-align: super } 
table           { border-spacing: 2px; } 
thead, tbody, 
tfoot           { vertical-align: middle } 
td, th          { vertical-align: inherit } 
s, strike, del  { text-decoration: line-through } 
hr              { border: 1px inset } 
ol, ul, dir, 
menu, dd        { margin-left: 40px } 
ol              { list-style-type: decimal } 
ol ul, ul ol, 
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 } 
u, ins          { text-decoration: underline } 
br:before       { content: "\A" } 
:before, :after { white-space: pre-line }  

center          { text-align: center } 
abbr, acronym   { font-variant: small-caps; letter-spacing: 0.1em } 
:link, :visited { text-decoration: underline } 
:focus          { outline: thin dotted invert } 

/* Begin bidirectionality settings (do not change) */ 
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override } 
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override } 

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed } 
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed } 

@media print { 
  h1            { page-break-before: always } 
  h1, h2, h3, 
  h4, h5, h6    { page-break-after: avoid } 
  ul, ol, dl    { page-break-before: avoid } 
]]>