标签：
一、基本语法
1、table有哪些属性：width、height、border、cellspacing、cellpadding、bordercolor、bgcolor、align
宽 高 边框 内框宽度 文字到边框距离 边框颜色 背景色 水平位置
2、body有哪些属性：bgcolor、background、text
背景颜色 背景图片 文字颜色
二、CSS重点回顾（一）
1、css选择器：
相当于一个标识，有3种选择器
第一种选择器：标签选择器 p{ color:red;}
第二种选择器：class类选择器 .c1{ color:green;} 可被多次调用
第三种选择器：id选择器 #d1{ color:blue;} 独有
优先级：标签 < class < id
注意：一个标签可以有多个class，但是只能有一个id
样式的4种控制方法：
1）行内样式
2）内嵌式
3）链接式
4）导入样式
<style>@import url(1.css)</style>
2、css文字效果：
字体：font-family
字号：font-size
颜色：color
粗体：font-weight
下划线：text-decoration：underline （ 删除线：line-through； 顶划线：overline； 去掉下划线：none ）
英文首字母大写：text-transform：capitalize（全部大写：uppercase；全部小写：lowercase）
字母间距：letter-spacing
水平位置：text-align
居中：
水平居中：text-align:center
垂直居中：line-height:300px;(和文字所在的div的高度一样)
3、css继承性：
#d1 p 表示id为d1的标签下面的p标签
#d1,p 表示id等于d1的标签和p标签
注意：css具有继承性，只有字体相关的css属才能够被继承 （面试常问）
4、表格边框：
样式 粗细 颜色
border: solid 1px red;
等同于下面3句话：
边框样式：border-style:solid;（实线：solid；虚线：dashed；点划线：dotted）
边框粗细：border-width:1px;
边框颜色：border-color:red;
5、表格样式：
1）表格标题：<caption> 属性：caption-side:bottom; （标题位于表格下方）
2）边框重叠：border-collapse:collapse;（表格间隙合并）
3）行列表头：th scope=”row” （行的表头） th srope=”col” （列的表头）
6、背景：
背景颜色：background-color:#00FF00;
背景图片：background-image:url(路径);
（注意：当图片的的大小，小于它所在的div时，图片会横向、纵向填满div）
背景重复：background-repeat:no-repeat;（不重复：no-repeat；横向重复：repeat-x；纵向重复：repeat-y）
背景方位：background-position:5px 10px;（左边、上边）
背景固定：Background-attachment:fixed;
综合：
background:blue url(xx.jpg) no-repeat fixed 5px 10px;
7、超链接：
1）去掉超链接下划线：text-decoration:none;
2）效果：
a:link 正常浏览状态的样式
a:visited 被点击过的超链接样式
a:hover 鼠标经过时的样式
3）鼠标经过时手指：cursor:pointer;
三、CSS重点回顾（二）
1、块级元素的特点：
（1）块级元素里面的内容，或者背景图片，默认显示在块的左上角
（2）块级元素，默认情况下，单独占满一行。
常用的块级元素：div、p、h1-h6、hr、ul li、ol li、table、body...
2、浮动：float
作用：通过漂浮，让块级元素实现并排
float:left 或 right
注意：如果div左边或者右边的块存在浮动，会对此div产生影响，此时需要清除左右方的浮动
清除浮动：clear:left（清除左边div的浮动）或right（清除右边div的浮动）或both（同时清除两侧的浮动）
简单说明：想排在一行就使用浮动（float:left），想提行就清除浮动（直接用 clear：both 即可，不用管左右）
3、盒子模型：
（1）border：边框
border-top：上边框
border-left：左边框
border-right：右边框
border-bottom：下边框
（2）padding：内边距（框内文字距离框线的间距）有3种写法
第一种：上下左右 padding:10px;
第二种：上下左右 padding:10px 20px;
第三种：上右下左 padding:10px 20px 10px 15px;
第四种：上左右下 padding:10px 20px 10px;
（3）margin：外边距（边框对边框外其他内容的间距）有3种写法
第一种：上下左右 margin:10px;
第二种：上下左右 margin:10px 20px;
第三种：上右下左 margin:10px 20px 10px 15px;
第四种：上左右下 margin:10px 20px 10px;
注意：在设定好宽度时，padding会把盒子撑开，此时可以通过减小width、height的值来保持盒子原大小
*{ padding,margin:0px;}：默认网页里所有的标签都内外间距为0
4、行内元素的特点：
（1）默认情况下，不受到height、width属性的影响
（2）不会占满一行
常用的行内元素：span（适用于一小节文字的样式设定）、a（链接）
【备注】 display:block; 将 行内元素转成块级元素
5、绝对定位 & 相对定位：
（1）绝对定位：position:absolute;
当设置一个块级元素为绝对定位的时候，它就脱离了文档流，浮动就不会对它有影响
此时对它设置top、left、right、bottom，就是针对窗体的距离
（2）相对定位：position:relation;
当设置一个块级元素为相对定位的时候，它没有脱离文档流，浮动对它是有影响的
此时对它设置top、left、right、bottom，是针对上一级容器的距离
【注意】当相对定位的前面有块级元素占据位置时，则实际距离=设置距离+占位块级元素宽或高
【请大家多多实践，结合浮动float、清除浮动 clear、绝对及相对定位】
四、CSS重点回顾（三）
1、z-index=数字
z轴的值，当几个div重叠时，z-index数字越大的，越在上面
2、overflow：hidden（超过部分隐藏）/auto（超过时出现滚动框）/scroll（一直有滚动条）
3、浏览器兼容性问题：
（1）兼容性问题：不同的浏览器基于不同的内核，对一些前端代码支持不一样，导致显示效果不一样
（2）测试的各大浏览器：IE7-IE11（可使用IETester,不考虑IE6）、Opera、Safari、Chrome、Firefox
（3）关于兼容性非常好的介绍文章：http://www.cnblogs.com/zhutianxiang/archive/2012/01/19/2320349.html
4、上下块级元素margin重合：以较大值为准，相当于两者重叠了（左右不受影响）
5、上下块级元素和行内元素margin重合：可在行内元素display设置为block。 { display:block; }
6、超链接样式：
a:link 平时的链接样式
a:visited 已访问过的链接样式
a:hover 鼠标放上去时的样式
a:active 鼠标点击时的样式
必须按照以上顺序放（lvha）才会有正常的效果
7、块级元素不靠边：*{ marin:0px; padding:0px}
8、ul在不同浏览器靠边问题：在IE中，ul的默认边距是margin，在Firefox中，ul的默认边距是padding，所以设置时margin和padding都设为0px
9、行内元素的上下margin撑不开自己所在的块级元素的高度：需在行内元素上下各加一个<div style="height:0px;overflow:hidden"></div>辅助撑开
五、CSS重点回顾（四）
1、网站常见小图标调用方式：
将所有小图标做在一张大图上a.png，然后根据横纵轴来调用。
background:url("a.png") -23px -70px no-repeat;
2、块级元素居中的常见写法：
margin:0px auto;
3、如何让超链接影响到整个块？
将行内元素变成块级元素：display:block
4、文本框只留下面一条线：
{ border-width:0px; border-bottom:solid 1px #000; }
5、仿站：
用所学知识制作一个完整的网站
需要练习的同学，可以在小群群文件里下载、或者去官网下载网站实例照着仿站：
6、html及css常用易混短语总结：
超出部分隐藏： overflow：hidden;
行级元素变块级： display:block;
下划线/去掉下划线： text-decoration：underline/ none;
文字居中： text-align:center;
边框为实线： border-style:solid;
边框缝隙合并： border-collapse:collapse;
背景图片不重复： background-repeat:no-repeat;
列表前无符号： list-style-type:none;
标签：
原文地址：http://www.cnblogs.com/mmtk/p/4695246.html
