标题:
CSS设计的一些原则
[打印本页]
作者:
飞翔的蜗牛
时间:
2011-12-10 10:38
标题:
CSS设计的一些原则
几个月来,也做了不少
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
中的原则还真不少呢。
欢迎光临 CSS论坛 (http://www.divcss5.com/bbs/)
Powered by Discuz! 6.1.0