CSS设计的一些原则

会玩就好 · 发表于 2011-6-20 09:47

本帖最后由会玩就好于 2011-6-20 11:52 编辑

几个月来，也做了不少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代码




页面头部设计

一个页面在设计的时候，设计者就要想到，正确添加头部信息，保证所有必要的头部信息都存在，有些是W3C标准所要求的，有些是SEO所需要的，下面就是一个典型的页面的头部设计。

Html代码
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Title</title>

<meta name="keywords" content="" />
<meta name="description" content="" />

<meta name="language" content="en" />
<meta name="author" content="" />
<meta name="copyright" content="(c) Copyright 2009 All Rights Reserved" />
<meta name="robots" content="follow, all" />


<link rel="stylesheet" type="text/css" media="screen, projection" href="css/screen.css" />





<link rel="shortcut icon" type="image/ico" href="images/favicon.ico" />

</head>
</html>

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Title</title>

<meta name="keywords" content="" />
<meta name="description" content="" />

<meta name="language" content="en" />
<meta name="author" content="" />
<meta name="copyright" content="(c) Copyright 2009 All Rights Reserved" />
<meta name="robots" content="follow, all" />


<link rel="stylesheet" type="text/css" media="screen, projection" href="css/screen.css" />





<link rel="shortcut icon" type="image/ico" href="images/favicon.ico" />

</head>
</html>

小细节

使用px设置字体大小

因为不容浏览器兼容性的原因，尽量使用px来设置字体大小，当然在IE下px是不支持字体缩放的，如果非要缩放不可，那可以使用em。
不要在div中直接包含文字

最好是使用h1,h2,h3,p这些标签来标示文字，div中最好不要直接包含文字。

使用小写字母书写标签

因为XML对大小写敏感，所以XHTML对大小写也是敏感的，所有的XHTML元素和属性都要用小写字母书写，否则你的文档将是无效的，无法通过W3C标准的验证。
在HTML中的文字尽量使用小写字母

一般来说，数据和表现要分离，所以在HTML中尽量不要使用大写字母，尤其是全是大写字母的场合，其实很简单，一句CSS就可以把所有的字母变成大写。

Css代码
text-transform:uppercase;

text-transform:uppercase;
使用标准字体

中文的标准字体就简单了，宋体，英文的标准字体则是Arial和Helvetica等，一般来说在CSS中写上一行，就可以解决字体问题了。

Css代码
font-family:Arial, Helvetica, sans-serif;

font-family:Arial, Helvetica, sans-serif;
良好的编写风格

其实CSS也可以理解为编程的一种，好的编写风格也是需要的，紧凑，注释，易于理解，都是必不可少的。

最后，推荐大家看上一本书：Jeffrey Zeldman 所著的《网站重构》，电子工业出版社出版，你会发现CSS中的原则还真不少呢。

更多信息，请浏览我的博客。

找不到我 · 发表于 2011-6-20 09:47

这些就很受用了，谢谢楼主，期待继续更新

无处不在 · 发表于 2011-6-20 09:47

对大原则不完全认可。
举个例子：在常见的左中右三栏布局下，使用div+css就要用到浮动，而分栏div浮动在IE6下简直就是自找麻烦，经常会有莫名其妙的BUG。
现在我设计页面不是必要情况下不考虑浮动（因为IE6对浮动的支持太烂了），而是使用表格，表格布局本身没什么，实际上各浏览器包括IE6在内对表格的支持都不错，关键是表格布局被不分情况的滥用了。
合理使用表格，可以使你用一套CSS做几乎全浏览器兼容的页面，只有极少数情况需要定制，根本不需要什么css hack，开发轻松愉快。
一句话，不要只是为了不用表格而全部使用div+css，这是本人在走弯路情况下得来的经验。

yoyo · 发表于 2011-6-20 09:47

Inside 写道
对大原则不完全认可。
举个例子：在常见的左中右三栏布局下，使用div+css就要用到浮动，而分栏div浮动在IE6下简直就是自找麻烦，经常会有莫名其妙的BUG。
现在我设计页面不是必要情况下不考虑浮动（因为IE6对浮动的支持太烂了），而是使用表格，表格布局本身没什么，实际上各浏览器包括IE6在内对表格的支持都不错，关键是表格布局被不分情况的滥用了。
合理使用表格，可以使你用一套CSS做几乎全浏览器兼容的页面，只有极少数情况需要定制，根本不需要什么css hack，开发轻松愉快。
一句话，不要只是为了不用表格而全部使用div+css，这是本人在走弯路情况下得来的经验。

赞成你的观点，纵向block级分割用DIV合适，横向或横向+纵向的分割用Table合适，用div + css实现一切是走极端，css并不排斥table。

broken · 发表于 2011-6-20 09:47

引用
最好是使用h1,h2,h3,p这些标签来标示文字，div中最好不要直接包含文字。

这个不太对哦~~~h标签是有固定的用法、用处的，不能单纯为了表示字体而用它，具体见W3School。

对于DIV+CSS的看法是，它大部分时候能做到表现和结构分离，而使用table布局则使两者混在一起，但遇到适合使用table的地方就应该用。

hxy · 发表于 2011-6-20 09:47

表现表格型数据时,用div替换table会相当麻烦

broken · 发表于 2011-6-20 09:48

应用CSS一直有一个问题, 什么时候用ID和class, 我发现能用id的地方,很多网站也用class

愚人 · 发表于 2011-6-20 09:48

弱弱的问下，为什么在div中包含文字不好呢

钰云 · 发表于 2011-6-20 09:48

Inside 写道
对大原则不完全认可。
举个例子：在常见的左中右三栏布局下，使用div+css就要用到浮动，而分栏div浮动在IE6下简直就是自找麻烦，经常会有莫名其妙的BUG。
现在我设计页面不是必要情况下不考虑浮动（因为IE6对浮动的支持太烂了），而是使用表格，表格布局本身没什么，实际上各浏览器包括IE6在内对表格的支持都不错，关键是表格布局被不分情况的滥用了。
合理使用表格，可以使你用一套CSS做几乎全浏览器兼容的页面，只有极少数情况需要定制，根本不需要什么css hack，开发轻松愉快。
一句话，不要只是为了不用表格而全部使用div+css，这是本人在走弯路情况下得来的经验。

我只是抛砖引玉，凡事没有绝对的，Table布局该用的时候还是要用的。但是你要是为自己开发web站点，使用table没有问题，但是如果是为客户开发，很多客户的第一个需求就是tableless，这样就没办法了。

爱车车 · 发表于 2011-6-20 09:48

eimhee 写道
应用CSS一直有一个问题, 什么时候用ID和class, 我发现能用id的地方,很多网站也用class

这个一般没有固定的，大的模块一般使用id，比如footer，header，因为一个网站一般只有一个这样的模块。

楠楠 · 发表于 2011-7-16 11:31

一个鸡蛋滚来滚去，越滚越圆，

找不到我 · 发表于 2011-7-17 10:05

一楼的位置好啊..

只学java · 发表于 2011-7-21 11:12

顶！！！！！！！！！！！！！！！！！！！！！！！！！

broken · 发表于 2011-7-21 11:12

看你快沉底了~~~~~~

帐号		自动登录	找回密码
密码			成为会员

CSS设计的一些原则

相关帖子