CSS设计的一些原则
几个月来，也做了不少[font=Times New Roman]CSS[/font][font=宋体]设计的工作，都是国外的客户，从一开始的啥都不懂，到现在的回头客不少，也算是有点心得了吧，跟大家分享分享。[/font]大原则
DIV[font=宋体]布局[/font]
因为表格布局会使浏览器的兼容性产生很大问题，比如在手机，掌上电脑用户浏览表格布局会一片混乱，所以最好使用[font=Times New Roman]DIV+CSS[/font][font=宋体]的布局，事实上我所有的客户，都是这样要求我的。[/font]
兼容性
对于一个好的[font=Times New Roman]CSS[/font][font=宋体]设计来说，必须保证所有的主流浏览器都能正常地显示，[/font][font=Times New Roman]IE6+[/font][font=宋体]，[/font][font=Times New Roman]Firefox[/font][font=宋体]，[/font][font=Times New Roman]Chrome[/font][font=宋体]，[/font][font=Times New Roman]Opera[/font][font=宋体]，[/font][font=Times New Roman]Safari[/font][font=宋体]，这些浏览器都要支持的。[/font]
CSS Hack
还记得 [font=Times New Roman]!important [/font][font=宋体]吧，这个 [/font][font=Times New Roman]CSS Hack [/font][font=宋体]一度很流行呀，但是好的设计者，最好不要使用 [/font][font=Times New Roman]CSS Hack [/font][font=宋体]技术，因为不同浏览器下[/font][font=Times New Roman]Hack[/font][font=宋体]都不一样，说不定某次浏览器的升级使得你使用的[/font][font=Times New Roman]Hack[/font][font=宋体]无效了呢。[/font]
目前流行的做法是，给[font=Times New Roman]IE[/font][font=宋体]，尤其是[/font][font=Times New Roman]IE6[/font][font=宋体]单独做个[/font][font=Times New Roman]CSS[/font][font=宋体]文件就好了，用新[/font][font=Times New Roman]CSS[/font][font=宋体]覆盖掉老的，虽然有冗余，但是要比[/font][font=Times New Roman]CSS Hack[/font][font=宋体]可读性好，也更容易修改。[/font]
[align=left]Html[font=宋体]代码 [/font][url="][img=16,14]file:///G:\Users\久林\AppData\Local\Temp\ksohtml\wps_clip_image-8683.png[/img][/url][/align]
1 <!--[if lt IE 7]>
2 <link
rel="stylesheet"
type="text/css"
href="css/ie.css"
media="screen, projection"
/>
3 < ![endif]-->
页面头部设计
一个页面在设计的时候，设计者就要想到，正确添加头部信息，保证所有必要的头部信息都存在，有些是[font=Times New Roman]W3C[/font][font=宋体]标准所要求的，有些是[/font][font=Times New Roman]SEO[/font][font=宋体]所需要的，下面就是一个典型的页面的头部设计。[/font]
[align=left]Html[font=宋体]代码 [/font][url="][img=16,14]file:///G:\Users\久林\AppData\Local\Temp\ksohtml\wps_clip_image-19135.png[/img][/url][/align]
4 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5 <html
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en"
lang="en">
6 <head>
7 <meta
http-equiv="content-type"
content="text/html; charset=utf-8"/>
8
9 <title>Title</title>
10
11 <meta
name="keywords"
content=""
/>
12 <meta
name="description"
content=""
/>
13
14 <meta
name="language"
content="en"
/>
15 <meta
name="author"
content=""
/>
16 <meta
name="copyright"
content="(c) Copyright 2009 All Rights Reserved"
/>
17 <meta
name="robots"
content="follow, all"
/>
18
19 <!-- CSS -->
20 <link
rel="stylesheet"
type="text/css"
media="screen, projection"
href="css/screen.css"
/>
21 <!--[if lt IE 7]>
22 <link
rel="stylesheet"
type="text/css"
href="css/ie.css"
media="screen, projection"
/>
23
< ![endif]-->
24
25 <!-- Javascripts -->
26
27 <!-- Favicon -->
28 <link
rel="shortcut icon"
type="image/ico"
href="images/favicon.ico"
/>
29
30 </head>
31 </html>
小细节
使用[font=Times New Roman]px[/font][font=宋体]设置字体大小[/font]
因为不容浏览器兼容性的原因，尽量使用[font=Times New Roman]px[/font][font=宋体]来设置字体大小，当然在[/font][font=Times New Roman]IE[/font][font=宋体]下[/font][font=Times New Roman]px[/font][font=宋体]是不支持字体缩放的，如果非要缩放不可，那可以使用[/font][font=Times New Roman]em[/font][font=宋体]。[/font]
不要在[font=Times New Roman]div[/font][font=宋体]中直接包含文字[/font]
最好是使用[font=Times New Roman]h1,h2,h3,p[/font][font=宋体]这些标签来标示文字，[/font][font=Times New Roman]div[/font][font=宋体]中最好不要直接包含文字。[/font]
使用小写字母书写标签
因为[font=Times New Roman]XML[/font][font=宋体]对大小写敏感，所以[/font][font=Times New Roman]XHTML[/font][font=宋体]对大小写也是敏感的，所有的[/font][font=Times New Roman]XHTML[/font][font=宋体]元素和属性都要用小写字母书写，否则你的文档将是无效的，无法通过[/font][font=Times New Roman]W3C[/font][font=宋体]标准的验证。[/font]
在[font=Times New Roman]HTML[/font][font=宋体]中的文字尽量使用小写字母[/font]
一般来说，数据和表现要分离，所以在[font=Times New Roman]HTML[/font][font=宋体]中尽量不要使用大写字母，尤其是全是大写字母的场合，其实很简单，一句[/font][font=Times New Roman]CSS[/font][font=宋体]就可以把所有的字母变成大写。[/font]
[align=left]Css[font=宋体]代码 [/font][url="][img=16,14]file:///G:\Users\久林\AppData\Local\Temp\ksohtml\wps_clip_image-8169.png[/img][/url][/align]
32 text-transform:uppercase;
使用标准字体
中文的标准字体就简单了，宋体，英文的标准字体则是[font=Times New Roman]Arial[/font][font=宋体]和[/font][font=Times New Roman]Helvetica[/font][font=宋体]等，一般来说在[/font][font=Times New Roman]CSS[/font][font=宋体]中写上一行，就可以解决字体问题了。[/font]
[align=left]Css[font=宋体]代码 [/font][url="][img=16,14]file:///G:\Users\久林\AppData\Local\Temp\ksohtml\wps_clip_image-20782.png[/img][/url][/align]
33 font-family:Arial, Helvetica, sans-serif;
良好的编写风格
其实[font=Times New Roman]CSS[/font][font=宋体]也可以理解为编程的一种，好的编写风格也是需要的，紧凑，注释，易于理解，都是必不可少的。[/font]
最后，推荐大家看上一本书：[font=Times New Roman]Jeffrey Zeldman [/font][font=宋体]所著的《网站重构》，电子工业出版社出版，你会发现[/font][font=Times New Roman]CSS[/font][font=宋体]中的原则还真不少呢。[/font]
页:
[1]