css笔记
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;
我曾七次鄙视自己的灵魂:
第一次,当它本可进取时,却故作谦卑;
第二次,当它空虚时,用爱欲来填充;
第三次,在困难和容易之间,它选择了容易;
第四次,它犯了错,却借由别人也会犯错来宽慰自己;
第五次,它自由软弱,却把它认为是生命的坚韧;
第六次,当它鄙夷一张丑恶的嘴脸时,却不知那正是自己面具中的一副;
第七次,它侧身于生活的污泥中虽不甘心,却又畏首畏尾。
第一次,当它本可进取时,却故作谦卑;
第二次,当它空虚时,用爱欲来填充;
第三次,在困难和容易之间,它选择了容易;
第四次,它犯了错,却借由别人也会犯错来宽慰自己;
第五次,它自由软弱,却把它认为是生命的坚韧;
第六次,当它鄙夷一张丑恶的嘴脸时,却不知那正是自己面具中的一副;
第七次,它侧身于生活的污泥中虽不甘心,却又畏首畏尾。