欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS设计的一些原则

程序员文章站 2022-03-12 23:01:07
...

几个月来，也做了不少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中的原则还真不少呢。

 

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

 

相关标签： CSS 浏览器 IE ASP 出版

上一篇： Guice 3.0 发布：Java轻量级依赖注入框架(IOC)

下一篇： 关于kotlin泛型的使用

推荐阅读