易截截图软件、单文件、免安装、纯绿色、仅160KB

CSS的十八般技巧

最近,经常有朋友问我一些工作中遇到的CSS问题。他们总是不能很好的控制CSS,影响CSS的效率发挥。我来分析总结一下错误所在,帮助大家更加容易使用CSS。
本文总结了我开始使用CSS布局方法以来所有的技巧和兼容方案,我愿意把这些与你分享,我会重点解释一些新手容易犯的错误(包括我自己也犯过的),如果你已经是CSS高手,这些经验技巧可能已经都知道,如果你有更多的,希望可以帮我补充。
一.使用css缩写
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,这里就不展开描述。
二.明确定义单位,除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100",但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格。
三.区分大小写
当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的。为了避免这种错误,我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。
四.取消class和id前的元素限定
当你写给一个元素定义class或者id,你可以省略前面的元素限定,因为ID在一个页面里是唯一的,而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如:
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
可以写成
#content { /* declarations */ }
.details { /* declarations */ }
这样可以节省一些字节。
五.默认值
通常padding的默认值为0,background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突,可以在样式表一开始就先定义所有元素的margin和padding值都为0,象这样:
* {
margin:0;
padding:0;
}
六.不需要重复定义可继承的值
CSS中,子元素自动继承父元素的属性值,象颜色、字体等,已经在父元素中定义过的,在子元素中可以直接继承,不需要重复定义。但是要注意,浏览器可能用一些默认值覆盖你的定义。
七.最近优先原则
如果对同一个元素的定义有多种,以最接近(最小一级)的定义为最优先,例如有这么一段代码
Update: Lorem ipsum dolor set
在CSS文件中,你已经定义了元素p,又定义了一个class"update"
p {
mar


相关文档:

CSS兼容IE6、IE7、火狐(Firefox)技巧集合


 CSS 对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了 一下。对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明。 
 
CSS技巧 
 
1.d ......

CSS解决未知高度垂直居中

原文链接 作者:怿飞
尽管有 CSS 的 vertical-align 特性,但是并不能有效解决未知高度的垂直居中问题(在一个 DIV 标签里有未知高度的文本或图片的情况下)。
标 准浏览器如 Mozilla, Opera, Safari 等.,可将父级元素显示方式设定为 TABLE(display: table;) ,内部子元素定为 table-cell (display: table-cell),通过 ......

IE和Firefox在JS和CSS方面的兼容性

1.document.formName.item("itemName") 问题
说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"];
Firefox下,只能使用document.formName.elements["elementName"].
解决方法:统一使用document.formName.elements["elementName"].
2.集合类对象问题
说明:
IE下,可以 ......

滑动图片展示效果(js+css)

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.zishu.cn< ......

CSS中的Clear tsiring的专栏

在当今web2.0时代,在设计网页的时候大家都会使用div+css进行布局,有点就不用多说了,自然有很多好处了,至少会比用table布局少些代码,而用div布局也有他们的不方便之处,就是比较复杂,尤其是多个div在一行显示,多个浏览器兼容等等,所以初学者还是尽量用table布局,待熟练了在用div.
现在说的是DIV+CSS中clear:both的作用,先看 ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号