css笔记
样式重置
body,h1,h2,h3,h4,h5,h6,p,dl,dd{margin:0; font-size: 12px;}
ul,ol{margin:0; padding:0; list-style:none;}
a{text-decoration:none;}
img{border:none; vertical-align:top;}
th,td{padding: 0;}
注释：IE6下border会有蓝边，vertical-align会有缝隙，加上随时对齐 暂时定义为垂直对齐
清除浮动
.clearfix{*zoom;}
.clearfix:after{content:""; display:block; clear:both;}
注释：兼容IE6需要加zoom
属性值
背景
background-color:red; 注释：颜色
background-image:url(bj.jpg); 注释：背景图
background-repeat:no-repeat; 注释：不重复 repeat-x——水平 repeat-y——垂直
background-position:center top; 注释：背景定位
background-attachment:fixed; 注释：fixed——固定（注意：fixed是相对于body而言，具体用法还有待研究试验） scroll——滚动
复合样式：background: red url(bj.jpg) no-repeat center top scroll;
边框
solid——实线
dashed——虚线
dotted——点划线 注释：各浏览器不同，不建议使用
边框的形状俗称非矩形，可创建三角箭头使用
文字
font-weight:bold； 注释：bold——加粗 normal——正常
font-style:italic； 注释：italic——倾斜
font-size:10px； 注释：px——大小
font-family:"微软雅黑"; 注释："微软雅黑"——字体
line-height:30px; 注释：行高和容器值一致时 垂直居中 行高奇数时上少下多
字体复合样式还需注意顺序：如font: bold italic 26px/26px "楷体";
文本
color:#000; 注释：文字颜色
text-align:left; 注释：文本对齐方式
text-indent: 2em; 注释：首行缩进，em等于当前字体大小
text-decoration:underline; 注释：文本设置下划线，none——没有
letter-spacing:10px; 注释：文字间距，同时适用于中英文
word-spacing:10px; 注释：词语间距需空格分割，不然无法判断
white-space:nowrap; 注释：强制不换行 normal——正常
margin 传递给父级问题暂时只能加border解决上下叠压问题需注意
a链接伪类
:link 注释：初始
:visited 注释：访问过后
:hover 注释：鼠标移入
:active 注释：选中
浮动
clear:both; 注释：清除两边浮动，inherit——继承
顺序右对齐只需在外层包裹span设置右浮动，内层设置左浮动
清浮动：1：加高度 2.给父级添加浮动 3.inline-block
溢出
overflow: hidden; 注释：隐藏 scroll——滚动
overflow也可以清除浮动
定位
position:static; 注释：默认
透明
opacity:0;
filter:alpha(opacity=100); 注释：IE6下需添加
层级
z-index:1;
样式重置
body,h1,h2,h3,h4,h5,h6,p,dl,dd{margin:0; font-size: 12px;}
ul,ol{margin:0; padding:0; list-style:none;}
a{text-decoration:none;}
img{border:none; vertical-align:top;}
th,td{padding: 0;}
注释：IE6下border会有蓝边，vertical-align会有缝隙，加上随时对齐 暂时定义为垂直对齐
清除浮动
.clearfix{*zoom;}
.clearfix:after{content:""; display:block; clear:both;}
注释：兼容IE6需要加zoom
属性值
背景
background-color:red; 注释：颜色
background-image:url(bj.jpg); 注释：背景图
background-repeat:no-repeat; 注释：不重复 repeat-x——水平 repeat-y——垂直
background-position:center top; 注释：背景定位
background-attachment:fixed; 注释：fixed——固定（注意：fixed是相对于body而言，具体用法还有待研究试验） scroll——滚动
复合样式：background: red url(bj.jpg) no-repeat center top scroll;
边框
solid——实线
dashed——虚线
dotted——点划线 注释：各浏览器不同，不建议使用
边框的形状俗称非矩形，可创建三角箭头使用
文字
font-weight:bold； 注释：bold——加粗 normal——正常
font-style:italic； 注释：italic——倾斜
font-size:10px； 注释：px——大小
font-family:"微软雅黑"; 注释："微软雅黑"——字体
line-height:30px; 注释：行高和容器值一致时 垂直居中 行高奇数时上少下多
字体复合样式还需注意顺序：如font: bold italic 26px/26px "楷体";
文本
color:#000; 注释：文字颜色
text-align:left; 注释：文本对齐方式
text-indent: 2em; 注释：首行缩进，em等于当前字体大小
text-decoration:underline; 注释：文本设置下划线，none——没有
letter-spacing:10px; 注释：文字间距，同时适用于中英文
word-spacing:10px; 注释：词语间距需空格分割，不然无法判断
white-space:nowrap; 注释：强制不换行 normal——正常
margin 传递给父级问题暂时只能加border解决上下叠压问题需注意
a链接伪类
:link 注释：初始
:visited 注释：访问过后
:hover 注释：鼠标移入
:active 注释：选中
浮动
clear:both; 注释：清除两边浮动，inherit——继承
顺序右对齐只需在外层包裹span设置右浮动，内层设置左浮动
清浮动：1：加高度 2.给父级添加浮动 3.inline-block
溢出
overflow: hidden; 注释：隐藏 scroll——滚动
overflow也可以清除浮动
定位
position:static; 注释：默认
透明
opacity:0;
filter:alpha(opacity=100); 注释：IE6下需添加
层级
z-index:1;