几个月来,也做了不少
CSS设计的工作,都是国外的客户,从一开始的啥都不懂,到现在的回头客不少,也算是有点心得了吧,跟大家分享分享。
大原则
DIV
布局
因为表格布局会使浏览器的兼容性产生很大问题,比如在手机,掌上电脑用户浏览表格布局会一片混乱,所以最好使用
DIV+CSS的布局,事实上我所有的客户,都是这样要求我的。
兼容性
对于一个好的
CSS设计来说,必须保证所有的主流浏览器都能正常地显示,IE6+,Firefox,Chrome,Opera,Safari,这些浏览器都要支持的。
CSS Hack
还记得
!important 吧,这个 CSS Hack 一度很流行呀,但是好的设计者,最好不要使用 CSS Hack 技术,因为不同浏览器下Hack都不一样,说不定某次浏览器的升级使得你使用的Hack无效了呢。
目前流行的做法是,给
IE,尤其是IE6单独做个CSS文件就好了,用新CSS覆盖掉老的,虽然有冗余,但是要比CSS Hack可读性好,也更容易修改。
Html代码 [url="]
[/url]
1 <!--[if lt IE 7]>
2 <link
rel="stylesheet"
type="text/css"
href="css/ie.css"
media="screen, projection"
/>
3 < ![endif]-->
页面头部设计
一个页面在设计的时候,设计者就要想到,正确添加头部信息,保证所有必要的头部信息都存在,有些是
W3C标准所要求的,有些是SEO所需要的,下面就是一个典型的页面的头部设计。
Html代码 [url="]
[/url]
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>
小细节
使用
px设置字体大小
因为不容浏览器兼容性的原因,尽量使用
px来设置字体大小,当然在IE下px是不支持字体缩放的,如果非要缩放不可,那可以使用em。
不要在
div中直接包含文字
最好是使用
h1,h2,h3,p这些标签来标示文字,div中最好不要直接包含文字。
使用小写字母书写标签
因为
XML对大小写敏感,所以XHTML对大小写也是敏感的,所有的XHTML元素和属性都要用小写字母书写,否则你的文档将是无效的,无法通过W3C标准的验证。
在
HTML中的文字尽量使用小写字母
一般来说,数据和表现要分离,所以在
HTML中尽量不要使用大写字母,尤其是全是大写字母的场合,其实很简单,一句CSS就可以把所有的字母变成大写。
Css代码 [url="]
[/url]
32 text-transform:uppercase;
使用标准字体
中文的标准字体就简单了,宋体,英文的标准字体则是
Arial和Helvetica等,一般来说在CSS中写上一行,就可以解决字体问题了。
Css代码 [url="]
[/url]
33 font-family:Arial, Helvetica, sans-serif;
良好的编写风格
其实
CSS也可以理解为编程的一种,好的编写风格也是需要的,紧凑,注释,易于理解,都是必不可少的。
最后,推荐大家看上一本书:
Jeffrey Zeldman 所著的《网站重构》,电子工业出版社出版,你会发现CSS中的原则还真不少呢。