<![CDATA[CSS Web Design 我爱CSS - Div+CSS教程]]> http://www.52css.com/ PJBlog2 2010-08-23T22:57:36+08:00 <![CDATA[详解CSS网页布局中默认字体样式]]> 52css http://www.52css.com/ MrJin@52css.com 2010-08-23T22:57:36+08:00 2010-08-23T22:57:36+08:00 　　拿字体来说，各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如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=1174 <![CDATA[通过优化CSS代码 减小对系统资源的占用]]> 52css http://www.52css.com/ MrJin@52css.com 2010-07-28T22:51:23+08:00 2010-07-28T22:51:23+08:00
　　一、尽量不要使用*通配符。
　　这是以前我自己一直忽视的问题，觉得使用通配符很方便，但没考虑的这是很占用系统资源的，因为这通配符就是将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=1172 <![CDATA[CSS3 （Smashing Magazine） 设计比赛 获奖作品]]> 52css http://www.52css.com/ MrJin@52css.com 2010-07-13T22:24:36+08:00 2010-07-13T22:24:36+08:00 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=1171 <![CDATA[推荐3个所谓的“顶级”CSS技巧！ ]]> 52css http://www.52css.com/ MrJin@52css.com 2010-05-07T23:27:17+08:00 2010-05-07T23:27:17+08:00
一、在一行内声明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=1168 <![CDATA[欢迎购买：变幻之美 DivCSS网页布局揭秘（全彩印）]]> 52css http://www.52css.com/ MrJin@52css.com 2010-04-28T16:39:50+08:00 2010-04-28T16:39:50+08:00 　　
　　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=1109 <![CDATA[DivCSS网页布局中CSS无效的十个常见原因]]> 52css http://www.52css.com/ MrJin@52css.com 2010-04-22T23:36:48+08:00 2010-04-22T23:36:48+08:00
　　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=1167 <![CDATA[DivCSS小结：浏览器默认HTML的CSS样式属性]]> 52css http://www.52css.com/ MrJin@52css.com 2010-04-18T21:08:01+08:00 2010-04-18T21:08:01+08:00 但通配选择器在大型网站的构建中，影响性能，可以参考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 } 
]]> http://www.52css.com/default.asp?id=1166 <![CDATA[CSSer开发好帮手：CSS 3.0 参考手册 中文版]]> 52css http://www.52css.com/ MrJin@52css.com 2010-04-04T21:58:43+08:00 2010-04-04T21:58:43+08:00 　　CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

手册难点
　　中文资料少，对英文翻译功底要求较高； 
　　基础语法要求字斟句酌，避免产生歧义； 
　　兼容性列表涉及浏览器及版本众多； 
　　草案中的Grid布局被业界同仁普遍认为比“天书”还难… 
　　CSS3 还是草案，中文资料少之又少，基本上都是一篇内容转来转去，而我们的手册从基础语法到示例制作，都是根据W3C工作草案进行翻译，并结合自身的沉淀制作示例。

备受期待的 CSS 3 新功能
　　圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa - 加入透明色、文字阴影等等
　　CSS3 的出现，让代码更简洁、页面结构更合理，性能和效果得到兼顾。

　　CSS 3.0 参考手册 (中文版) 预览：

　　
下载文件 >> 点击下载 CSS 3.0 参考手册 中文版 <<
　　
　　]]> http://www.52css.com/default.asp?id=1164 <![CDATA[CSS基础：DIVcss初学者需要引起重视的10个问题与技巧]]> 52css http://www.52css.com/ MrJin@52css.com 2010-03-25T22:38:52+08:00 2010-03-25T22:38:52+08:00
　　一、检查HTML元素是否有拼写错误、是否忘记结束标记 
　　即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。 

　　二、检查CSS是否正确 
　　检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。 

　　三、确定错误发生的位置 
　　假如错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。 

　　四、利用border属性确定出错元素的布局特性 
　　使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。 

　　五、float元素的父元素不能指定clear属性 
　　MacIE下假如对float的元素的父元素使用clear属性，四周的float元素布局就会混乱。这是MacIE的闻名的bug，倘若不知道就会走弯路。 

　　六、float元素务必指定width属性 
　　很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。

　　七、float元素不能指定margin和padding等属性 
　　IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性（可以在float元素内部嵌套一个div来设置margin和padding）。也可以使用hack方法为IE指定非凡的值。 

　　八、float元素的宽度之和要小于100% 
　　假如float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。 

　　九、是否重设了默认的样式？ 
　　某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。 

　　十、是否忘记了写DTD？ 
　　假如无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写DTD。
　　]]> http://www.52css.com/default.asp?id=1163 <![CDATA[精简CSS文件 使您的CSS网页布局代码更专业]]> 52css http://www.52css.com/ MrJin@52css.com 2010-03-18T23:15:59+08:00 2010-03-18T23:15:59+08:00
　　在Table布局的时代，代码无数次的随着表格在页面里重复，致使整个网页文件变得臃肿无比，代码的可读性也降到最低，浏览器的解释时间自然也增加了不少。而自从DIV+CSS的布局替代Table布局之后，这一切都得到了极大的改善，让Table回归到它原本用于显示数据的位置上去，而布局就交给DIV+CSS来做，这样代码的可读性与复用性都得到了提高，而DIV+CSS更为重要的一点就是将网页文件的表现与结构区分开来，再也不用为了表现而去改动整个网页文件的结构了。

　　即使DIV+CSS的布局方式将以前Table布局时代码的臃肿降到了最低，但对于网页设计师来说，如何将网页文件的大小控制到最小是永远值得探索和追求的一个问题。

看如下一段代码：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
#header {   
margin-top:10px;   
margin-right:15px;   
margin-bottom:10px;   
margin-left:15px;   
backgroung-color:#333333;   
background-images:url(http://www.52css.com/Images/header.jpg);   
}  

　　这样的一段CSS代码，在条理上很清晰，结构也很明了，可读性很强，可是这样的一段代码却没有做精简，也就是说它是最原始的CSS代码，下面看精简后的代码：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
#header {   
margin:10px 15px;   
backgroung:#333 url(http://www.52css.com/Images/header.jpg);   
}  

　　在CSS中有复合属性这一说法，也就是说可以将很多属性参数整合在一起的，比如说上面的“margin-top; margin-right; margin-bottom; margin-left;”可以整合成一个“margin”属性，然后为其配上参数。

　　通过这一点，我们就可以在原始CSS代码的基本上将代码进一步的精简。而且这样写的结构也合理，可读性也同样强。可是对于要精简到彻底来说，这还不够。为了让这段CSS代码的结构明了，我们用上了空格换行等占用空间的东西，如果将这些占用空间的去掉呢？

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
#header{margin:10px 15px;background:#333 url(http://www.52css.com/Images/header.jpg);}  

　　只这一句就替代了上面的一段代码，这样代码就已经精简到了最大化，当然，并不推荐所有人都这样写，这样写的CSS代码在可读性上要远远差于段落式的写法，除非你对自己写的代码有完全掌握的信心。

　　在同一个站点的CSS文件中，不可避免的会出现不同的ID或Class却有一部分相同的属性，如果将这些ID或Class逐个分开来写的话，在CSS文件里无疑会生成重复代码，而我们要尽量的精简CSS文件的大小，那么“消灭”这部分重复的代码就变得势在必行。

　　看下面一段CSS代码：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
#header{margin:10px 15px;background:#333 url(http://www.52css.com/Images/header.jpg);}   
#content{margin:10px 15px;padding:10px;background:#999;}   
#copyright{margin:10px 15px;border:1px solid #f00;}  

　　在上面的三个ID中都有一个相同的属性“margin:10px 15px;”，如果就这样分开来写的话，这三个ID之间将保持各自独立的关系，但却生成了重复的代码，而我们可以将其写成如下格式：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
#header,#content,#copyright{margin:10px 15px;}   
#header{background:#333 url(http://www.52css.com/Images/header.jpg);}   
#content{padding:10px;background:#999;}   
#copyright{border:1px solid #f00;}  

　　将上面的ID换成Class也是一样的。这样写我们就成功的将重复代码“消灭”掉了。但是如果这里具有相同的属性的ID或Class过多的话，难免会造成代码可读性降到很低很低，所以除此之外当具有相同属性的都是Class时还有另外的一种写法：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
.main{margin:10px 15px;}   
.header{background:#333 url(http://www.52css.com/Images/header.jpg);}   
.content{padding:10px;background:#999;}   
.copyright{border:1px solid #f00;}  

　　当然这种写法时，调用时的写法也与平常不一样。

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<div class="header main"></div>  
<div class="content main"></div>  
<div class="copyright main"></div>  

　　这样的写法同样可以达到效果，并且也不会再怕具有相同属性的Class多而造成代码可读性差的问题，但值得注意的一点就是，这种写法对于ID是无效的，不管其中是存在一个ID或者全部都是ID，都将造成这段代码的无效。更多的技巧欢迎您关注52CSS.com的文章更新。
  　　]]> http://www.52css.com/default.asp?id=1162