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中的原则还真不少呢。

分享这个帖子:
Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

2个评论 to “CSS设计的一些原则”

  • yabar 说道:

    不知道你的ID是不是fogtower,暂且称你fogtower哥。。
    fogtower哥,推荐几本div+css的书籍把,现在辞职了,可以专心学下css了,以前开发的web项目,和美工沟通太麻烦了,最近用了ext,也减少了对美工的依赖,不过,还是想深入系统的学习下css和div相关布局。。

    回复或者发邮件给我都可以,谢谢咯!
    hweiyahoo@163.com

    • 雾塔晨钟 说道:

      入门级别的,书都差不多,你去当当搜索一下就好了。

      提高级别的:
      1.Jeffrey Zeldman 所著的《网站重构》,电子工业出版社出版
      2.CSS禅意花园 人民邮电出版社
      更多的你需要慢慢积累了。像我在文章里面写的,大部分都是项目经验,书上都没有的,这种小知识点太多太多了。你只有多做项目,可以先做简单的练练手,慢慢模仿复杂的页面。

  • 留下评论:

    昵称(必须):
    邮箱地址 (不会被公开) (必须):
    站点
    评论 (必须)
    XHTML: 您可以使用这些标记: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">