您的位置: 首页 > 技术文档 > 网页制作 > CSS 锦囊
网站页面弹性设计 回到列表 MSAgent 详细解说
 CSS 锦囊

作者:mezzoblue 时间: 2004-02-18 文档类型:翻译 来自:onestab

翻译:onestab [2004.02.08]
原文:mezzoblue CSS Crib Sheet

在使用CSS建站时,您肯定遇到过形形色色的布局问题,最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易,当您遇到困难时为您提供快速参考。

如果您有所补充,请在这里发表您的意见.

本文的其他语言版:法语, 德语, 西班牙语匈牙利语。 欢迎提供其他翻译。

有疑问,先验证
在调试时,先对您的代码进行验证往往能省去不少麻烦事。格式不正确的XHTML/CSS 会导致许多布局上的错误。
在其他浏览器中进行测试之前,请先在最先进的浏览器中撰写和测试CSS代码,而不是相反。
如果您在破旧的浏览器中编写和测试,你的代码就不得不依赖那个破旧浏览器的糟糕的显示,然后在符合标准的浏览器中进行测试,看到显示结果“不正常”时,你会很沮丧的。相反,您应该先将您的代码完善,然后再设法为较低级的浏览器打算。这样从一开始您的代码就是符合标准的,你不必再为支持其他浏览器而劳心费神。当然了,目前遵从标准的浏览器无疑就是 Mozilla, Safari 或 Opera。
确保您期望的效果确实存在
许多特定的浏览器专有的CSS扩展在正式标准中并不存在。 如果您对 filter(滤镜) 或滚动条指定了样式,那么您就用了私有代码,除了IE之外,在别的浏览器中毫无作用。如果验证器告诉您代码没有定义,极有可能您用了私有样式,这样在不同的浏览器中很难达到一致的效果。
如果布局中一定要用浮动对象,别忘了适时使用清除(clear)属性。
浮动对象似易实难,而且不总是令人如愿以偿。如果您发现浮动对象伸出了容器的边界,或者不像您所期望的那样显示,请检查您的期望是否正确。关于这个问题请看Eric Meyer的教程
边距的合并:可用padding 或 border 来避免。
您可能被多余的(或者想要却不出现的)空白搞得焦头烂额。如果您用了 margins,边距的合并可能就是问题的根源。 Andy Budd 对此的解释可能为你解惑。
避免将 padding/border 固定宽度同时应用到同一元素。
IE5 的区块模型是错误的,是它把事情办坏了。对此也有权宜之计,不过最好是绕过这个问题,当子元素的宽度固定时,为父元素指定padding。
避免IE下未指定样式内容的闪烁。
如果您仅仅靠 @import 来输入外部样式表,早晚您会发现IE有“闪烁”的毛病。在应用CSS样式之前,未经格式化的HTML文本会短暂地出现。这是可以避免的.
别指望 min-width 在IE中有用。
IE不支持它,但是它将 width 当作 min-width,所以通过一些 IE 的过滤技巧(filtering),可以实现同样的最终效果。
把CSS过滤器(filters)当作最后的手段
CSS 技巧和过滤器可以使您有选择地应用到(或者不应用到)某些元素。应当尽可能地找到标准的跨浏览器的解决办法来实现您想要的效果,而不是动不动就使用过滤器。要将它当成走投无路时的救命手段。在这里可以找到大量的CSS 过滤技巧[译注:不要把这里的filters和IE中的滤镜混淆。由于各个浏览器对CSS标准的支持程度不一,人们找到了许多技巧,将浏览器无法解释或错误解释的样式表或规则屏蔽掉。这就是所谓的CSS过滤器或技巧。]
如果使用了锚点,在应用超链接样式时要特别小心。
如果您在代码中使用了传统的锚点(<a name="anchor">),您会注意到 :hover:active伪类也会作用于它。要避免这种情形,你可以使用 id,或者使用鲜为人知的语法: :link:hover, :link:active
记住“LoVe/HAte”(爱/恨)链接规则
要以下面的顺序指定超链接伪类:Link, Visited, Hover, Acitve。任何其他顺序都不妥当。假如用了 :focus,次序应为 LVHFA(“Lord Vader's Handle Formerly Anakin”,Matt Haughey这样建议)。
请记住“TRouBLED”(麻烦的)边框。
边框(border)、边距(margin)和补白(padding)的简写次序为:顺时针方向从上开始,即 Top, Right, Bottom, Left。比如 margin: 0 1px 3px 5px;表示上边距为零,右边距为1px,依此类推。
非零值要指明单位。
在用CSS指定字体、边距或大小时,必须指明所用的单位。某些浏览器对未指明单位的处理方法不足为凭。零就是零,不管是 px还是em还是其他单位,它不需要单位。例如: padding: 0 2px 0 1em;
测试不同的字体大小。
像Mozilla和Opera这样的高级浏览器允许对字体进行缩放,不管你用的是什么单位。某些用户的默认字体大小肯定和您的不同,尽最大努力去满足他们。
用嵌入式测试,发布时改为输入。
将样式表嵌入在你的HTML源代码中,在测试时可以消除许多缓存引起的错误,尤其是某些Mac下的浏览器。但在发布前,一定要记住将样式表移到外部文件,用 @import<link>引入。
加上明显的边框有利于布局调试。
div {border: solid 1px #f00;} 之类的全局规则可以暂时为你查出布局问题。为特定的元素加上边框可帮您找到难以发觉的交错或空白问题。
对图片路径不要用单引号。
当设置背景图片时,要坚持用双引号。尽管看起来有些多余,但是如果不这么做,IE5/Mac会噎住。
Mac IE5 对空的样式表比较感冒,会增加页面的装入时间。建议样式表中至少应该有一条规则(哪怕是注释也好),免得 MacIE噎住。

另外值得一提的还有一些虽然不针对某些功能,但是在开发过程中应当注意的理论:

好好组织您的CSS文件
恰当地成块注释CSS,将相似的CSS选择符编为一组,养成一致的命名习惯和空白格式(为跨平台考虑,建议用空白字符而不是tab。)以及适当的次序。
以功能(而不是外观)为类和ID命名
假如您创建了一个 .smallblue 类,后来打算将文字改大,颜色变为红色,这个类名就不再有任何意义了。相反,您可以用更有描述性的名字如 .copyright.pullquote
组合选择符
保持CSS短小对减少下载时间非常重要。请尽量为选择符分组、 利用继承(inheritance)以及使用简写(shorthand)来减少冗余。
使用图片替换技术时要考虑亲和力
已经发现传统的FIR在屏幕阅读器,以及关闭图片显示[的浏览器]中会出问题。 对此有其他解决办法,要根据具体情况,慎重使用。

出处:onestab
责任编辑:风狗

◎进入论坛网页制作网站综合版块参加讨论

相关文章 更多相关链接
第一届简历样式表设计圆满结束
使用外部CSS设置FlashMX组件外观
重构、标准、布局
CSS布局入门
CSS入门
作者文章
CSS 锦囊
热门搜索:CSS Fireworks 设计比赛 网页制作 Dreamweaver Studio8 Flash
站点最新 站点最新列表
Photoshop绘制真实的黑莓手机
标记语言——为文字指定样式
NewWebPick第17期专业版发布
php设计模式介绍之装饰器模式
Windows组策略之软件限制策略
大木花谷
疯狂的程序员 第二十五回
疯狂的程序员 第二十四回
IE下中英文字体不能对齐原因及解决
有些标志很类似
栏目最新 栏目最新列表
火星人的耳机
公司正式宣布创业失败
用corelDEAW 12打造唇膏
二行代码解决全部网页木马
一行代码解决iframe挂马
Photoshop制作星空爆炸效果
CorelDraw 12打造休闲裤
Firework如何画特殊的切角图形
Firework打造韩式风格的手提袋
flash实例:打造佛光效果
 

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

本文总共有 15 条评论,现在显示最新的 5 条。暂时没有人参与评分


220.162.214.96 Publish at 2004-7-3 12:19:52
怎么样才能使 一打开网业就有音乐啊??
还有那什么CSS怎么都看不懂啊
谁帮帮我 ?QQ227585359
谢谢!!!!!!!
218.27.87.150 Publish at 2004-5-30 15:51:11
—→首页—→网页建设其它相关—→正文
智慧型”网页制作技巧
人们都希望自己的主页生动活泼,并且多一些与访问者的交互。下面的小技巧是否能让你感到自己的网页多了几分色彩呢?
1.来访者访问次数的记录

一位来访者看到我能统计他访问我的主页的次数时,非常惊讶,他在留言簿里问我是不是发了黑客程序给他,其实就是下面这段小程序(见程序1)。

<script
LANGUAGE="JavaScript">
<!--
var caution = false
function setCookie(name,value,expires,path,domain,secure) {
var curCookie=name+"="+escape(value)+
((expires)?";expires="+expires.toGMTString():"")+((path)?";path="+path:"")+ domain)?";domain="+domain:"")+((secure)?";secure":"")
if (!caution || (name+"="+escape(value)).length<=4000)
document.cookie=curCookie
else
if (confirm("Cookie exceeds 4KB and will be cut!"))
document.cookie=curCookie
}
 function getCookie(name) {
var prefix = name + "="
var cookieStartIndex=document.cookie.indexOf(prefix)
if (cookieStartIndex == -1)
return null
var cookieEndIndex=document.cookie.indexOf(";",cookieStartIndex+prefix.length)
if (cookieEndIndex == -1)
cookieEndIndex=document.cookie.length
return unescape(document.cookie.substring(cookieStartIndex+prefix.length,
 cookieEndIndex))
 }
function deleteCookie(name, path, domain) {
if (getCookie(name)) {
document.cookie=name+"="+((path)?";path="+path:"")+((domain)?";domain="+domain:"")+";expires=Thu,01-Jan-70 00:00:01 GMT"
}
}
function fixDate(date) {
var base = new Date(0)
var skew = base.getTime()
if (skew > 0)
date.setTime(date.getTime()-skew)
}
var now = new Date()
fixDate(now)
 now.setTime(now.getTime()+365*24*60*60*1000)
var visits = getCookie("counter")
if (!visits)
visits = 1
else
visits = parseInt(visits) + 1
setCookie("counter", visits, now)
document.write("我想您是第"+visits+"次来这儿了!很高兴又见到你噢^_^!")
/ -->
</script>
(程序1)

2.可以根据时间变化的欢迎词

下面这段小程序能够根据访问者来访的时间的不同而致以不同的欢迎词(见程序2)。

<script
language="Javascript">
 <!-- Hiding
 var now = new Date()
 var year=now.getYear()
 var month=now.getMonth()+1;
 var date= now.getDate()
 var time = now.getHours()
if (time>=0)
{var hello="你真是个夜猫子!这么晚了还在闲逛,你知道吗?"}
if (time>=6)
{var hello="现在还是挺早的,"}
if (time>=9)
{var hello="小心老板哦,"}
if (time>=12)
{var hello="中午好呀!"}
if (time>13)
{var hello="中午睡觉了吗?"}
if (time>=18)
{var hello="吃晚饭了吗?"}
if time>19)
{var hello="怎么没看电视?"}
if (time>23)
{var hello="已经很晚了,还不去睡觉?你知道不?"}
var hour1=(now.getHours() >=10)?"":"0"
var m2=(now.getMinutes()>=10)?"":"0"
var t=(now.getHours()>12)?now.getHours()-12:now.getHours()
var r2 = (t >= 10) ? "" : ""
var color=(now.getSeconds()%2==0)?"ffff80":"00000f"
dcument.write("<font color=\"#",color,"\">",hello,"现在是北京时间:19",year,"年",month,"月",date,"日,",hour1,now.getHours(),"点",m2,now.getMinutes(),"分",((now.getSeconds()<10)?"0":"")+now.getSeconds(),"秒了","</font>")
 timerRunning=true
 //end hiding contents -->
 </script>
(程序2)

 看到这么亲切的问候词,你的访问者一定会多一份对你网页的关心和呵护。 3.访问者所使用的浏览器版本的确定

 <script>
 document.write("您现在用的是"+navigator.appName+""+navigator.appVersion+"版的浏览器,我猜对了吗?开个玩笑,无论对错,真的很希望您能经常来呦!")
 </script>

 把这些小程序加到你的网页中试试看,有什么问题可以写信告诉我,地址是 doggy007@188.net。


文章资料(滕伟 滕彬 "技巧驿站" 收集)

关闭当前窗口

61.146.126.202 Publish at 2004-5-22 20:32:24
ok2
202.96.126.146 Publish at 2004-5-21 14:06:00
看不懂,。。。苦啊
221.233.97.179 Publish at 2004-5-2 8:42:06
好,说的好啊!经典!最常用的几个都说了

查看全部评论

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
大师之路--Photoshop 完全解析
《超越CSS》新书上市
Don't Make Me Think 第2版
HTML与CSS入门经典(第7版)
《FLASH MX2004网站开发精粹》
《CSS入门经典》
《设计师谈网页设计思维》
作品集 更多内容

公司留念 QQ炫舞 无常 hexun.com 字体设计:感恩 武汉市硚口招商网 kingsoft [FENGYUAN]