一、css简介
1、css是什么?
css(Cascading Style Sheet)是层叠的样式表。用于控制网页样式，并允许将样式信息与网页内容分离的一种标记性语言。
2、css三种控制方式
行内样式 引入方式 style=””
内嵌式 引入方式 <style></style>
链接式 引入方式 <link rel=”stylesheet”type=”text/css” href=””>
导入式 引入方式 <style>@import url(“”)</style>
二、CSS 基本语法
1、css选择器
1）标签选择器 p{ color:red;}
2）类别选择器 .c1{ color:green;} 可被多次调用
3） ID选择器 #d1{ color:blue;} 独有
4）派生选择器： #d1 p 表示id为d1的标签下面的p标签
集体声明：
h1, h2, h3, h4, h5, p{ /* 集体声明 */
color:purple; /* 文字颜色 */
font-size:15px; /* 字体大小 */
}
优先级 ID>class>标签选择器
4）css继承
子标记会继承父标记的所有样式，并可以自己修改，但不会影响父标记。
三、文字效果
字体：font-family 字号：font-size 颜色：color 粗体：font-weight 下划线：text-decoration：underline （ 删除线：line-through； 顶划线：overline； 去掉下划线：none ） 单词首字母大写：text-transform：capitalize 全部大写：uppercase；全部小写：lowercase） 字符间距：letter-spacing 水平位置：text-align 垂直位置：line-hight：与div的高度一致
例1：字符间距：letter-spacing 和 用于文本样式：span
html：
<p><span class="g1">G</span><span class="o1">o</span><span class="o2">o</span><span class="g2">g</span><span class="l">l</span><span class="e">e</span></p>
css：
p{
font-size:80px;
letter-spacing:-10px; /* 字母间距 */
font-family:Arial;
}
.g1, .g2{ color:#184dc6; }
.o1, .e{ color:#c61800; }
.o2{ color:#efba00; }
.l{ color:#42c34a; }
四、图片效果
1、图片边框
border-style:dotted 点划线 dashed虚线 solid 实线 border-color:边框颜色 border-边框粗细 以上三个属性等价于 border: solid 1px red;
2、背景
背景颜色：background-color:#00FF00;
背景图片：background-image:url(路径);
背景重复：background-repeat:no-repeat;（不重复：no-repeat；横向重复：repeat-x；纵向重复：repeat-y）
背景固定：Background-attachment:fixed;
背景方位：background-position:5px 10px;（左边、上边）
组合：Background:blue url(xx.jpg) no-repeat fixed 5px 10px;
五、表格样式
1、表格边框：
border: solid 1px red; 等价于边框样式：border-style:solid;（实线：solid；虚线：dashed；点划线：dotted） 边框粗细：border-1px; 边框颜色：border-color:red;
2、表格标题：<caption> 属性：caption-side:bottom; （标题位于表格下方）
3、边框重叠：border-collapse:collapse;（表格间距合并）
4、行列表头：th scope=”row” （行的表头） th srope=”col” （列的表头）
六、CSS与表单
1、*浏览器样式显示有差异是因为各浏览器对部分CSS属性的默认值不同导致的，通畅的解决办法就是指定该值，而不是让浏览器使用默认值。
例：
input{ /* 所有input标记 */
color: #00008B;
}
input.txt{ /* 文本框单独设置 */
border: 1px inset #00008B;
background-color: #ADD8E6;
}
input.btn{ /* 按钮单独设置 */
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
padding: 1px 2px 1px 2px;
}
2、文字一样的按钮
.btn{
background-color:transparent; /* 背景色透明 */
border:0px; /* 边框取消 */
}
3、直接输入EXCEL表格
table input{
200px;
padding:1px 3px 1px 3px;
margin:0px;
border:none; /* 输入框不要边框 */
font-family:Arial;
}
七、超链接
1）去掉超链接下划线
Text-decoration:none;
1）效果
a:link 正常浏览状态的样式
a:visited 被点击过的超链接样式
a:hover 鼠标经过时的样式
2）鼠标经过时手指
A:hover
{
Cursor:pointer;
}
八、行内元素与块级元素的区别
1、行内元素默认情况下不单独沾满一行，不换行，但块级元素单独沾满一行，自动换行。
2、行内元素的高度宽度不会受到属性height、width的影响，只受到里面内容多少的影响。但块级元素大小会受到属性height、width的影响。
行内元素: span、br、a、b、u、img
块级元素: h1-h6、hr、div、table、ul、ol
块级元素的特点：默认情况下单独沾满一行、里面的内容、背景图片默认显示在块的左上角。
九、浮动：float
通过漂浮，让块级元素实现并排 float:left、right、none;
如果div左边或者右边的块存在浮动，会对此div产生影响，此时需要清除左右方的浮动
清除浮动：clear:left（清除左边div的浮动）或right（清除右边div的浮动）或both（同时清除两侧的浮动）
简单说明：想显示在一行就使用浮动（float:left） ，想换行就清除浮动（直接用 clear：both 即可，不用管左右）
十、菜单制作
1、不显示项目符号 list-style-type:none
2、区块显示 display:none,通过display:block语句超链接被设置成了块元素，当鼠标进入该块的任何部分时候都会被激活，而不是仅仅在文字上方时才被激活。
十一、盒子模型
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
十二、绝对定位 & 相对定位：
1、绝对定位：position:absolute;
当设置一个块级元素为绝对定位的时候，它就脱离了文档流，浮动就不会对它有影响
此时对它设置top、left、right、bottom，就是针对窗体的距离
2、相对定位：position:relative;
当设置一个块级元素为相对定位的时候，它没有脱离文档流，浮动对它是有影响的
此时对它设置top、left、right、bottom，是针对上一级容器的距离
【注意】当相对定位的前面有块级元素占据位置时，则实际距离=设置距离+占位块级元素宽或高
3、overflow：hidden（超过部分隐藏）/auto（超过时出现滚动框）/scroll（一直有滚动条）
4、z-index:值越大越在上面；
十三、兼容性问题
1、关于兼容性非常好的介绍文章：http://www.cnblogs.com/zhutianxiang/archive/2012/01/19/2320349.html
例子：
1）上下块级元素margin重合：以较大值为准，相当于两者重叠了（左右不受影响）
2）上下块级元素和行内元素margin重合：可在行内元素display设置为block。 { display:block; }
3）块级元素不靠边：*{ marin:0px; padding:0px}
4）ul在不同浏览器靠边问题：在IE中，ul的默认边距是margin，在Firefox中，ul的默认边距是padding，所以设置时margin和padding都设为0px
5）行内元素的上下margin撑不开自己所在的块级元素的高度：需在行内元素上下各加一个<div style="height:0px;overflow:hidden"></div>辅助撑开6) 超链接访问后hover样式不出现:必须要遵守lovehate原则：即link、visited、hover、active。这四个超链接属性必须按顺序写。