一、基本语法

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;