CSS笔记总结

1.	CSS放置位置
1）</head>之间：<style type="text/css">CSS代码</style>
2）<标签名 style=””/>
3）</head>之间：<link rel="stylesheet" type="text/css" href="要导入的.css">

2.	类型
1）	标签选择器 		div{ ……  }				<div>...</div>
2）	类选择器		.样式名{ ……  }			<div  class=” 样式名”>...</div>
3）	Id选择器		#样式名{ ……  }			<div  id=” 样式名”>...</div>
4）	嵌套选择器		div  span {.....}			<div><span></span></div>
5）子类选择器		.box.box2{....}				<div class="box box2"></div>
6）分组选择器		div，span{.....}			<div>测试</div> <span>测试</span>
让2个都实现同样的功能
3.	优先级：1.行内 2.id 3.class 4.标签定义行
4.	字体设置：
属性名	 			属性值			说明
font-weight			bold				粗体
font-size				像素			字体大小
font-family			字体名称		字体形状
color				颜色			字体颜色
5.	文本设置：
text-align				center			文字靠左
text-decoration			underline			加上下划线
none				去除其他
text-indent			长度			首行缩进
line-height			长度			行高

6.	背景设置：
background-color		颜色			背景颜色
background-image		url				url("bj.jpg")背景图片
background-position	top left			设置背景图片出现在上左方
center center		设置背景图片出现在IE中间
botton right		设置背景图片出现在下右方
background-repeat		repeat-x			将图片在水平方向填满
repeat-y			将图片在垂直方向填满
no-repeat			图片只出现一次
7.	列表设置：
list-style-image 		url (url) 			列表前面显示图标
list-style-type			none				无符号
disc				实体小圆点
circle			空心小圆点
square			实心小方块

8.	链接 伪类
a:link			表示该超链接文字尚未被点选
a:visited			表示该超链接文字已被点选过
a:active			表示该超链接文字正被点选，但未被放开
a:hover			表示当鼠标停留在文字上
9.	边框设置：
border-color		颜色		可依序设置上下左右的颜色
border-style		none			不显示边线
dotted		点线
dashed		虚线
solid			实线
double		双线
border-width		长度		表格宽度
border:1px solid back; 			常用写法
10.	边界设置：
内容跟边框的距离
padding-top		长度		元件上端边线的空隙
padding-bottom	长度		元件下端边线的空隙
padding-right		长度		元件右端边线的空隙
padding-left		长度		元件左端边线的空隙

边框和外部对象的边距
margin-top		长度/auto		设置上端空隙
margin-bottom		长度/auto		设置下端空隙
margin-left		长度/auto		设置左端空隙
margin-right		长度/auto		设置右端空隙
11.	定位：
position		relative			相对定位/设置区块基准点为自身左上角
absolute			不占位置/绝对定位/设置区块基本点为网页左上角
left			像素			以基准点定位在左边
right			像素			以基准点定位在右边
top			像素			以基准点定位在上边
bottom		像素			以基准点定位在下边
z-index		数字			数字越大越往上层
12.	布局
1）浮动
float
left 			左浮动
right 		右浮动
clear
left 			不允许左边浮动
right 		不允许右边浮动
both 		不允许两边浮动

2）显示
display
inline		让行元素（占一行DIV  P）变成 块元素
block		让块元素变成 行元素
none			让元素消失
3）鼠标
cursor:hand				鼠标移动上去变成手
4）滚动条
overflow:hidden			去掉页面滚动条

特殊问题：
1）	表格合并或显示边框的问题
可以用border-collapse具体实现-->
Table{border-collapse:collapse; border:1px solid red;}只写这句话，那么表格只显示外框
Td{ border:1px solid red;}两句话一起写，表格单元格跟外框全部显示
2）	网页居中的问题
1.层如果想左右居中那么就加入：margin:0px auto;
2.如果想左右居中后然后在上下居中那么还是用margin-top:数值;来进行调整。
3.必须给网页中加入规范标准：也就是最上面的DOCTYPE.
经测试IE跟火狐都可以左右，上下居中
测试结果：