点滴集

css引用方法：
#总的布局#
<style type="text/css" media="all">
 @import url("css/style.css");
</style>
# 本页细节色彩#
<style type="text/css" media="all">
 @import url("css/yellow.css");
</style>
# 打印#
<style type="text/css" media="print">
 @import url("css/style.css");
</style>

/*-------公共css -------*/
*{margin:0px;padding:0px;}
BODY {
 margin:0px;
 padding:0px;
 font-size:12px;
 font-family:Arial, "宋体";
 text-align:center;
 background:#fff;
}
img {
 border:0px;
}
A img {
 border:0px;
}
div{
 border:0px;
 margin:0px auto;
 padding:0px;
 text-align:left;
 height:auto;
}
FORM {
 border:0px;
 margin:0px;
 padding:0px;
 text-align:left;
 height:auto;
}
ul{
 border:0px;
 margin:0px;
 padding:0px;
 text-align:left;
 height:auto;
}
ol{
 border:0px;
 margin:0px;
 padding:0px;
 text-align:left;
 height:auto;
}
li{
 border:0px;
 margin:0px;
 padding:0px;
 text-align:left;
 height:auto;
 list-style:none;
}
dl{
 border:0px;
 margin:0px;
 padding:0px;
 text-align:left;
 height:auto;
}
dt{
 border:0px;
 margin:0px;
 padding:0px;
 text-align:left;
 height:auto;
}
dd{
 border:0px;
 margin:0px;
 padding:0px;
 text-align:left;
 height:auto;
}
p{
 margin:0px;
 padding:0px;
 text-align:left;
 height:auto;
}
span{
 border:0px;
 margin:0px;
 padding:0px;
 text-align:left;
 height:auto;
 float:left;
}
h1{
 margin:0px;
 padding:0px;
 text-align:left;
 height:0px;
 font-size:12px;
}
h2{
 margin:0px;
 padding:0px;
 text-align:left;
 height:0px;
}
h3{
 margin:0px;
 padding:0px;
 text-align:left;
 height:0px;
}
h4{
 margin:0px;
 padding:0px;
 text-align:left;
 height:0px;
}
h5{
 margin:0px;
 padding:0px;
 text-align:left;
 height:0px;
}
h6{
 margin:0px;
 padding:0px;
 text-align:left;
 height:0px;
}
table {
 font-size:12px;
}
td {
 font-size:12px;
}
tr {
 font-size:12px;
}
th {
 font-size:12px;
}
.clear {
 clear: both;
 font-size:0px;
 height:0%;
 visibility:hidden;
 width:0px;
 background:#FFFFFF;
}
a:link {
 font-size: 12px;
 color: #000;
 text-decoration: none;
}
a:visited {
 font-size: 12px;
 color: #000;
 text-decoration: none;
}
a:hover {
 font-size: 12px;
 color: #000;
 text-decoration:underline;
}

/*-------浏览器兼容解决方法 -------*/
!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权
box{color:red !important;}
最重要的一点是：IE一直都不支持这个语法，而其他的浏览器都支持。因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义，例如，我们定义这样一个样式：

有条件注释
<!--[if ie 5] <style type="text/css">@import("ie.css")--> 
注释一种特定的浏览器
<!--[if ie] <style type="text/css">@import("ie5.0.css")--> 

指定一组浏览器比如ie5.5和更高的版本：

<!--[if get ie5.5000] <style type="text/css">@import("ie.55upcss")--> 

#知识点收集#
BORDER: medium none; /*不显示边框*/
transparent"指背景为透明
DISPLAY:inline;一句表示将li强制作为内联对象呈递，从对象中删除行，通俗讲就是li不换行。实现横向排列

 

#关于IE与FF在web标准下的兼容问题##
一般情况下使用第一种写法，如果FF下正常，IE6中不正常，就在第一种写法的基础上加上第二种，如果FF，IE6都正常，IE7不正常，那么再加上第三种写法
不是在CSS前加上，而是在相应的代码位置加上

#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */

## 阻止IE5继续解释 voice-family : "/";}/""; voice-family : inherit; 后面，直至 } 结束前的内容。
voice-family : "/";}/"";
voice-family : inherit;
###
1.在mozilla    firefox和IE中的BOX模型解释不一致导致相差2px解决方法：
[Copy to clipboard]CODE:
div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：
[Copy to clipboard]CODE:
div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

2.IE5和IE6的BOX解释不一致IE5下div{width:300px;margin:0  10px  0  10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改

[Copy to clipboard]CODE:
div{width:300px!important;width  /**/:340px;margin:0  10px  0  10px}

，关于这个/**/IE5和firefox都支持但IE6不支持

3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义

[Copy to clipboard]CODE:
ul{margin:0;padding:0;}

就能解决大部分问题

4.关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为

[Copy to clipboard]CODE:
<script  type="text/javascript">

 

 

########组件按比例缩放##########
style="zoom:0.5"
#########左对齐右对齐############
img { float: right }
#########################
CURSOR:pointer
##########################
style="cursor:hand" 
手形 
style="cursor:crosshair" 
十字形 
style="cursor:text" 
文本形 
style="cursor:wait" 
沙漏形 
style="cursor:move" 
十字箭头形 
style="cursor:help" 
问号形 
style="cursor:e-resize" 
右箭头形 
style="cursor:n-resize" 
上箭头形 
style="cursor:nw-resize" 
左上箭头形 
style="cursor:w-resize" 
左箭头形 
style="cursor:s-resize" 
下箭头形 
style="cursor:se-resize" 
右下箭头形 
style="cursor:sw-resize" 
左下箭头形
###########DIV边框###############
overflow : visible | auto | hidden | scroll
 
参数：
 
visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 　不显示超过对象尺寸的内容
scroll : 　总是显示滚动条
#############文字竖显示#######################
layout-flow : horizontal | vertical-ideographic
##############文本流从左到右##################
direction : ltr | rtl | inherit
参数：
ltr : 　文本流从左到右
rtl : 　文本流从右到左
inherit : 　文本流的值不可继承
############自动换行##########
word-break : normal | break-all | keep-all
参数：
normal : 　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本
############不换行#####################
 white-space: nowrap;
############显示大小写###################
text-transform : none | capitalize | uppercase | lowercase
参数：
none : 　无转换发生
capitalize : 　将每个单词的第一个字母转换成大写，其余无转换发生
uppercase : 　转换成大写
lowercase : 　转换成小写
############文字间距#############
letter-spacing : normal | length
#############A超连接####################
　　a:link 指正常的未被访问过的链接；
　　a:active 指正在点的链接；
　　a:hover 指鼠标在链接上；
　　a:visited 指已经访问过的链接；
　　text-decoration是文字修饰效果的意思；
　　none参数表示超链接文字不显示下划线；
　　underline参数表示超链接的文字有下划线
##############加粗#################
font-weight:800
##############取所有样式####################
obj.style.cssText="color:#ff0"
##############虚线###################
{border:1px dotted #FF0000}
#############CSS优先级################
1、标有"!important"的规则有最高优先级

一个样式规则可以有一个"important"附带标签，表示该样式规则具有最高优先级。例如下面例子中，前景色被标为important。

H1{color:black !importan; font-family:sans-serif}
##############图片自适应####################
<style>
#nr img,table{
 max-width:505px;
 star : expression(this.style.width=this.offsetWidth>=505?"505px":"auto");
}
</style>
#########MOZ特有的css#############
 CSS 语法：
-moz-outline: 边框颜色 边框宽度 边框样式
-moz-outline-raius: 边框圆角;
或者：
-moz-outline-color: 边框颜色;
-moz-outline-width: 边框宽度;
-moz-outline-style: 边框样式;
-moz-outline-radius: 边框圆角;
#############