CSS设计的一些原则

fogtower

浏览: 58782 次
性别:
来自: 北京

最近访客更多访客>>

ant04444

xjtufreeman

LampJiang

沐刃青蛟

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS 浏览器 IE ASP 出版

几个月来，也做了不少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 技巧之一 CSS Sprite | 自己开发的js日历

2010-01-22 09:22
浏览 1581
评论(26)
论坛回复 / 浏览 (26 / 11870)
分类:Web前端
查看更多

26 楼 fu013013 2010-04-17

我是滥用了ul li 觉得这个ul li太好用了用ul li做表格很好、

25 楼 fogtower 2010-02-03

shuxiang 写道

heqishan 写道

cuixiping 写道

DIV来包含文字比较方便设置宽度和高度，用P就不好控制这个了。

文字也可以用span包含吧？

当字很少的时候，应该用ｓｐａｎ比较好吧

span和div类似，都是用户标示层的，最好不要用来包含文字，当然一定要用也不算错。

24 楼 fogtower 2010-02-03

shuxiang 写道

fogtower 写道

eimhee 写道

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

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

借地问一下，用class选择符与用“，”有什么区别呢？

"," 是选择符分组的意思。

语法：

E1,E2,E3

说明：

将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式并为组。

示例：

.td1,div a,body { font-size:14px; }

23 楼 shuxiang 2010-02-02

heqishan 写道

cuixiping 写道

DIV来包含文字比较方便设置宽度和高度，用P就不好控制这个了。

文字也可以用span包含吧？

当字很少的时候，应该用ｓｐａｎ比较好吧

22 楼 shuxiang 2010-02-02

fogtower 写道

eimhee 写道

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

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

借地问一下，用class选择符与用“，”有什么区别呢？

21 楼 fogtower 2010-01-31

<div class="quote_title">hlw579 写道</div>
<div class="quote_div">用 div进行定位的时候会出现漂移的情况 <br>换一个浏览器，布局就变了，LZ有没有好点的解决方案</div>
<p><br><br>出现漂移，是你的div定位的时候没定位好。<br>首先，2部分divs之间需要加上一段</p>
<pre name="code" class="html"><div style="clear:both;"></div></pre>
<p> 这样保证上下两部分的divs不影响。</p>
<p> </p>
<p>其次，注意各个div的margin和padding，在IE6，有时候div的margin和padding定位和其他浏览器不太一样。</p>

20 楼 hlw579 2010-01-29

用 div进行定位的时候会出现漂移的情况
换一个浏览器，布局就变了，LZ有没有好点的解决方案

19 楼 heqishan 2010-01-27

cuixiping 写道

DIV来包含文字比较方便设置宽度和高度，用P就不好控制这个了。

文字也可以用span包含吧？

18 楼 heqishan 2010-01-27

我觉得，很多地方，表格是不能层取代的。

17 楼 fogtower 2010-01-26

hyj1254 写道

《网站重构》上还有什么原则再写写吧，没买，你表述得挺好的，想看免费版的。
不过请允许我再发表个疑问：请勿使用固定的字体尺寸，w3school上的似乎和《网站重构》在这点上有分歧:

引用

因为不容浏览器兼容性的原因，尽量使用px来设置字体大小

那些原则不都是《网站重构》书上的。
不过关于尽量使用px来设置字体大小确实是《网站重构》上的。
使用px来设置字体大小，是因为这样可以保证在所有版本的浏览器上，字体的大小都是一致的。

hyj1254 写道

这项建议最重要的理由是无法通过浏览器重新调整固定尺寸的大小。

这是w3school上的原因，但是随着浏览器的发展，目前除了IE6之外，其他的浏览器都支持缩放页面了，也就是说，即时使用固定尺寸，绝大部分浏览器也是可以重新调整固定尺寸的大小的。

16 楼 Inside 2010-01-26

hyj1254 写道

引用

因为不容浏览器兼容性的原因，尽量使用px来设置字体大小

关于这个看看《无懈可击的Web设计》就好，整体字体的设置很简单。

15 楼 hyj1254 2010-01-26

引用

因为不容浏览器兼容性的原因，尽量使用px来设置字体大小

14 楼 cuixiping 2010-01-26

DIV来包含文字比较方便设置宽度和高度，用P就不好控制这个了。

13 楼 fogtower 2010-01-26

luoting2762 写道

我也想问一下，为什么尽量不要在div中直接放文字啊？有什么不好的地方吗？

http://baike.baidu.com/view/1393958.htm
看看百度百科对于div的定义，DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。
div用于结构。

而p则是表示一段。

所以从W3C设计HTML的初衷出发，用p包含文字比较合适，这也是欧美网站主流的做法。

12 楼 luoting2762 2010-01-26

我也想问一下，为什么尽量不要在div中直接放文字啊？有什么不好的地方吗？

11 楼 fogtower 2010-01-25

fight_bird 写道

Inside 写道

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

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

如果用table作横向布局的话，在手持设备中，比如iphone中浏览，就会面目全非，而div则会自动排到下面去。国外的网站都要求支持手持设备，所以tableless的布局一般都是客户要求的。

10 楼 fogtower 2010-01-25

code_k 写道

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

因为在w3c的设计中，div并不是被设计用来包含文字的，而p却是，你可以看一下wordpress架构下的文章，都是用p包在里面的，而不是div。你可以理解这是一种好的编程风格，但不一定是强制性的。

9 楼 fogtower 2010-01-25

eimhee 写道

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

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

8 楼 fogtower 2010-01-25

Inside 写道

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

7 楼 code_k 2010-01-25

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

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论