当前页面位置: » 丰搜网 » 文档中心 » 详细内容
css 锦囊
翻译：onestab [2004.02.08]
原文：mezzoblue css crib sheet
在使用css建站时，您肯定遇到过形形色色的布局问题，最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易，当您遇到困难时为您提供快速参考。
如果您有所补充，请在这里发表您的意见.
本文的其他语言版：法语, 德语, 西班牙语 和 匈牙利语。 欢迎提供其他翻译。
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，将相似的css选择符编为一组，养成一致的命名习惯和空白格式（为跨平台考虑，建议用空白字符而不是tab。）以及适当的次序。
- 以功能（而不是外观）为类和id命名
- 假如您创建了一个
.smallblue 类，后来打算将文字改大，颜色变为红色，这个类名就不再有任何意义了。相反，您可以用更有描述性的名字如 .copyright 和 .pullquote。 - 组合选择符
- 保持css短小对减少下载时间非常重要。请尽量为选择符分组、 利用继承(inheritance)以及使用简写(shorthand)来减少冗余。
- 使用图片替换技术时要考虑亲和力
- 已经发现传统的fir在屏幕阅读器，以及关闭图片显示[的浏览器]中会出问题。 对此有其他解决办法，要根据具体情况，慎重使用。
出处：onestab
责任编辑：风狗
◎进入论坛网页制作、网站综合版块参加讨论
| | | 保持清晰的文档结构 | | | 月亮图腾教程ⅴ—最后一战 | | | x-sapce使用系列教程 | | | x-space安装系列教程 | | | 抽线以及虚线画法简明教程 | | | 创新设计 百万格子大楼 | | | discuz!转换系列教程 | | | 世界杯足球的32个变种 | | | 易上手简单图层样式扣图 | | | 一封写给mm学习linux的信 | | |
| | | 保持清晰的文档结构 | | | 月亮图腾教程ⅴ—最后一战 | | | x-sapce使用系列教程 | | | x-space安装系列教程 | | | 抽线以及虚线画法简明教程 | | | discuz!转换系列教程 | | | 易上手简单图层样式扣图 | | | 十分钟学会 xajax | | | css 菜单举一反三 | | | 利用照片制作版画简明教程 | | |
| | 蓝色理想版权申明：除部分特别声明不要转载，或者授权我站独家播发的文章外，大家可以自由转载我站点的原创文章，但原作者和来自我站的链接必须保留（非我站原创的，按照原来自一节，自行链接）。文章版权归我站和作者共有。
转载要求：转载之图片、文件，链接请不要盗链到本站，且不准打上各自站点的水印，亦不能抹去我站点水印。 特别注意：本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有 | | 本文总共有 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
好,说的好啊!经典!最常用的几个都说了
查看全部评论 | | |
| 关于站点 免责声明 联系站长 版权隐私 友情链接 网站地图 京icp备05002321号 | ©1999-2006 blueidea.com. 版权所有 | |
