`
fogtower
  • 浏览: 59167 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

CSS设计的一些原则

    博客分类:
  • 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中的原则还真不少呢。

 

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

 

分享到:
评论
26 楼 fu013013 2010-04-17  
我是滥用了ul li 觉得这个ul li太好用了 用ul li做表格很好、
25 楼 fogtower 2010-02-03  
shuxiang 写道
heqishan 写道
cuixiping 写道
DIV来包含文字比较方便设置宽度和高度,用P就不好控制这个了。

文字也可以用span包含吧?

当字很少的时候,应该用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包含吧?

当字很少的时候,应该用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">&lt;div style="clear:both;"&gt;&lt;/div&gt;</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 写道
《网站重构》上还有什么原则再写写吧,没买,你表述得挺好的,想看免费版的。
不过请允许我再发表个疑问:请勿使用固定的字体尺寸,w3school上的似乎和《网站重构》在这点上有分歧:
引用
因为不容浏览器兼容性的原因,尽量使用px来设置字体大小



关于这个看看《无懈可击的Web设计》就好,整体字体的设置很简单。
15 楼 hyj1254 2010-01-26  
《网站重构》上还有什么原则再写写吧,没买,你表述得挺好的,想看免费版的。
不过请允许我再发表个疑问:请勿使用固定的字体尺寸,w3school上的似乎和《网站重构》在这点上有分歧:
引用
因为不容浏览器兼容性的原因,尽量使用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 写道
对大原则不完全认可。
举个例子:在常见的左中右三栏布局下,使用div+css就要用到浮动,而分栏div浮动在IE6下简直就是自找麻烦,经常会有莫名其妙的BUG。
现在我设计页面不是必要情况下不考虑浮动(因为IE6对浮动的支持太烂了),而是使用表格,表格布局本身没什么,实际上各浏览器包括IE6在内对表格的支持都不错,关键是表格布局被不分情况的滥用了。
合理使用表格,可以使你用一套CSS做几乎全浏览器兼容的页面,只有极少数情况需要定制,根本不需要什么css hack,开发轻松愉快。
一句话,不要只是为了不用表格而全部使用div+css,这是本人在走弯路情况下得来的经验。


我只是抛砖引玉,凡事没有绝对的,Table布局该用的时候还是要用的。但是你要是为自己开发web站点,使用table没有问题,但是如果是为客户开发,很多客户的第一个需求就是tableless,这样就没办法了。
7 楼 code_k 2010-01-25  
弱弱的问下,为什么在div中包含文字不好呢

相关推荐

    CSS权威指南 css彻底设计研究 HTML5和CSS3实战 HTML5与CSS3设计模式

    这本书可能涵盖色彩理论、排版、布局设计原则,以及如何利用CSS进行图形绘制。同时,它可能还会介绍一些高级技巧,如自定义字体、CSS预处理器(如Sass和Less)的使用,以及如何处理浏览器兼容性问题。 "HTML5和CSS3...

    CSS设计大师设计思路与实践

    总结来说,《CSS设计大师设计思路与实践》会涵盖从基础到高级的CSS知识,包括设计原则、最佳实践、工具和技巧,帮助读者提升CSS技能,成为一名出色的设计者。通过不断的实践和学习,我们可以掌握创建高效、优雅、可...

    《CSS设计彻底研究》光盘源码

     3.6 盒子在标准流中的定位原则   3.6.1 实验1——行内元素之间的水平margin   3.6.2 实验 2——块级元素之间的竖直margin   3.6.3 实验3——嵌套盒子之间的margin   3.6.4 实验4——将 margin设置为...

    CSS设计彻底研究 源码

    在本文中,我们将详细阐述CSS的一些核心概念、设计原则以及常见应用,同时结合提供的源码进行解析。 1. CSS基础 CSS(Cascading Style Sheets)是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML...

    css设计彻底研究 源代码

     2.1 “CSS禅意花园”简介 2.2 郊野——两列布局 2.3 像素画——三列布局 2.4 百合池塘——三列布局变体 2.5 郁金香——多列布局 2.6 日与夜——包含圆角的设计 2.7 Si6——包含倾斜的设计 2.8 清茶...

    HTML与CSS前台页面设计

    在进行前台页面设计时,理解并熟练运用HTML和CSS的语法规则、选择器、盒模型、布局技巧和响应式设计原则至关重要。此外,还需要关注浏览器兼容性问题,因为不同的浏览器可能对某些CSS特性支持不同。使用预处理器如...

    htm+css网页设计课程作业

    这体现了现代网页设计的一个核心原则——移动优先。 总的来说,这个“htm+css网页设计课程作业”不仅是一份完整的网页项目,也是学习HTML5和CSS3的宝贵参考资料。通过对这个项目的分析和学习,你可以掌握网页开发的...

    《CSS设计彻底研究》【中文PDF+源代码】

    《CSS设计彻底研究》是一本深入研究和揭示CSS设计技术的书籍。《CSS设计彻底研究》在透彻地讲解CSS核心技术的基础上,深入到各个实际应用领域中,充分向读者演示了如何使用CSS的各项技术,实现令人眩目的网页布局和...

    CSS设计彻底研究(光盘)

    《CSS设计彻底研究》是一本深入探讨CSS(层叠样式表)的专业书籍,旨在帮助读者全面掌握CSS的设计原理和实际应用技巧。光盘内容作为书本的补充,提供了丰富的实例和练习,使得学习过程更加直观和实践化。下面将详细...

    CSS设计指南,超清带书签完整版

    《CSS设计指南》是一本深入探讨CSS(Cascading Style Sheets)的专业书籍,它为读者提供了全面而详尽的CSS知识。CSS是网页设计中不可或缺的一部分,它负责控制网页的布局和样式,使得网页呈现出丰富多彩的视觉效果。...

    一些CSS的设计原则浅谈

    相信大多数人都有过关于CSS的痛苦经历,从我加入公司到现在,不到两年的时间里,听到最多CSS相关的讨论就是‘很难调’。所以我也一直在探究这其中有怎样的问题,为什么很多人觉得CSS很难写,如何才能让其他人更优雅...

    基于CSS模式的软件设计方案

    总结来说,基于CSS模式的软件设计方案是一种创新的思维方式,它将Web前端的组织原则引入到软件设计中,使得软件开发更加高效、灵活且易于维护。通过深入理解和运用CSS模式,开发者可以构建出更加优雅、可扩展的系统...

    中华传统文化题材网页设计主题:基于HTML+CSS设计放飞青春梦想网页【学生网页设计作业源码】

    网页设计的原则与要素 - **页面结构**:一个好的网站通常包括页头、导航菜单、主要内容区域以及页脚四个部分。 - **导航设计**:导航应简洁明了,易于访问。可以使用下拉菜单等手段增加层次感。 - **多媒体元素*...

    网页设计配色方案(配色方案、配色原则、CSS代码生成器)

    5. **CSS代码生成器**:为了方便开发者快速实现配色,有许多在线工具如ColorBrewer、Coolors等,它们可以根据设定的参数自动生成相应的CSS代码,帮助设计师快速创建和测试颜色方案。 6. **实际应用**:在网页设计中...

    设计团队css+div网页模板

    模板中可能包含了头部、导航、主体内容、侧边栏、页脚等常见的网页区域,每个区域都经过精心设计,既符合美学原则,也考虑到了功能性和可用性。 此外,压缩包内的文件"chahua2200"可能是这个模板的主文件或目录名,...

    超越CSS:Web设计艺术精髓 transcending css the fine art of web design

    书中可能阐述了如何遵循ALMcss原则组织和编写CSS代码,以优化大型项目的开发流程。 以上这些知识点都是Web设计者在提升技能和创作高质量网站时需要掌握的核心概念。通过阅读《超越CSS:Web设计艺术精髓》,设计师...

    HTML+CSS课程设计大一网页期末大作业

    压缩包里是一套完整的HTML+CSS课程设计,有一个主页以及六个子页面,制作精美良好,应付期末的网页课设或者期末大作业什么啦肯定是不成问题的,我在做课设的时候,到处找课设的案例找不到,很是苦恼,所以在这里本着...

    网页设计css工具及api

    学习CSS的过程中,理解盒模型、选择器优先级、层叠原则以及响应式设计是基础。同时,掌握CSS预处理器如Sass或Less,可以提高代码的组织性和可维护性。此外,利用浏览器的开发者工具(如Chrome的DevTools)进行实时...

Global site tag (gtag.js) - Google Analytics