论坛首页 Web前端技术论坛

CSS设计的一些原则

浏览 11803 次
精华帖 (6) :: 良好帖 (0) :: 新手帖 (1) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-01-22   最后修改:2010-01-22
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可读性好,也更容易修改。

 

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, projection" />
< ![endif]-->

 


页面头部设计

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

 

< !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" />

<!-- CSS -->
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/screen.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, projection" />
  < ![endif]-->

<!-- Javascripts -->

<!-- Favicon -->
<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就可以把所有的字母变成大写。

 

text-transform:uppercase;
 

使用标准字体

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

 

font-family:Arial, Helvetica, sans-serif;

 
良好的编写风格

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

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

 

更多信息,请浏览我的博客

 

   发表时间:2010-01-22  
这些就很受用了,谢谢楼主,期待继续更新
0 请登录后投票
   发表时间:2010-01-24  
对大原则不完全认可。
举个例子:在常见的左中右三栏布局下,使用div+css就要用到浮动,而分栏div浮动在IE6下简直就是自找麻烦,经常会有莫名其妙的BUG。
现在我设计页面不是必要情况下不考虑浮动(因为IE6对浮动的支持太烂了),而是使用表格,表格布局本身没什么,实际上各浏览器包括IE6在内对表格的支持都不错,关键是表格布局被不分情况的滥用了。
合理使用表格,可以使你用一套CSS做几乎全浏览器兼容的页面,只有极少数情况需要定制,根本不需要什么css hack,开发轻松愉快。
一句话,不要只是为了不用表格而全部使用div+css,这是本人在走弯路情况下得来的经验。
2 请登录后投票
   发表时间:2010-01-25  
Inside 写道
对大原则不完全认可。
举个例子:在常见的左中右三栏布局下,使用div+css就要用到浮动,而分栏div浮动在IE6下简直就是自找麻烦,经常会有莫名其妙的BUG。
现在我设计页面不是必要情况下不考虑浮动(因为IE6对浮动的支持太烂了),而是使用表格,表格布局本身没什么,实际上各浏览器包括IE6在内对表格的支持都不错,关键是表格布局被不分情况的滥用了。
合理使用表格,可以使你用一套CSS做几乎全浏览器兼容的页面,只有极少数情况需要定制,根本不需要什么css hack,开发轻松愉快。
一句话,不要只是为了不用表格而全部使用div+css,这是本人在走弯路情况下得来的经验。

赞成你的观点,纵向block级分割用DIV合适,横向或横向+纵向的分割用Table合适,用div + css实现一切是走极端,css并不排斥table。
0 请登录后投票
   发表时间:2010-01-25  
引用
最好是使用h1,h2,h3,p这些标签来标示文字,div中最好不要直接包含文字。

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

对于DIV+CSS的看法是,它大部分时候能做到表现和结构分离,而使用table布局则使两者混在一起,但遇到适合使用table的地方就应该用。
0 请登录后投票
   发表时间:2010-01-25  
表现表格型数据时,用div替换table会相当麻烦
0 请登录后投票
   发表时间:2010-01-25  
应用CSS一直有一个问题, 什么时候用ID和class, 我发现能用id的地方,很多网站也用class
0 请登录后投票
   发表时间:2010-01-25  
弱弱的问下,为什么在div中包含文字不好呢
0 请登录后投票
   发表时间:2010-01-25  
Inside 写道
对大原则不完全认可。
举个例子:在常见的左中右三栏布局下,使用div+css就要用到浮动,而分栏div浮动在IE6下简直就是自找麻烦,经常会有莫名其妙的BUG。
现在我设计页面不是必要情况下不考虑浮动(因为IE6对浮动的支持太烂了),而是使用表格,表格布局本身没什么,实际上各浏览器包括IE6在内对表格的支持都不错,关键是表格布局被不分情况的滥用了。
合理使用表格,可以使你用一套CSS做几乎全浏览器兼容的页面,只有极少数情况需要定制,根本不需要什么css hack,开发轻松愉快。
一句话,不要只是为了不用表格而全部使用div+css,这是本人在走弯路情况下得来的经验。


我只是抛砖引玉,凡事没有绝对的,Table布局该用的时候还是要用的。但是你要是为自己开发web站点,使用table没有问题,但是如果是为客户开发,很多客户的第一个需求就是tableless,这样就没办法了。
0 请登录后投票
   发表时间:2010-01-25  
eimhee 写道
应用CSS一直有一个问题, 什么时候用ID和class, 我发现能用id的地方,很多网站也用class


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

0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics