一、css简介
1、层叠样式表：叠加效果，不同css对同一html修饰，冲突部分，优先级高作用，不冲突部分，共同作用
2、css作用
(1)修饰html
(2)替代了标签自身的颜色，字号等属性，提高复用性
(3)html内容与样式分离，便于后期维护
3、css引入方式
(1)内嵌样式
<div style="color:red;font-size:100">内嵌方式</div>
(2)内部样式（写在head中）
<style type="text/css">
div{color:red;font-size:100}
input{color:red;font-size:100}
</style>
(3)web全局样式
1.创建css文件
2.键入：div{color:red;font-size:200px}
3.引入该css文件
<link ref="stylesheet" href="cssDemo.css" type="text/css">
(4)@import方式
基本不用，原因迟滞于html加载css，不支持js动态修改，部分低ie版本不支持
小结：
style:告知浏览器使用css去解析
ref:css和html的关系
引入写在head中
内部样式也写在head中
二、css选择器
1、基本选择器
(1)、标签/元素选择器
<style>
div{color:red;font-size:10px}
</style>
(2)、id选择器
<style>
#div1{color:red;font-size:10px}
</style>
<div id="div1">id选择器</div>
(3)、class选择器
<style>
.style1{color:red;font-size:10px}
.style2{color:pink;font-size:10px}
</style>
<div class="style1">id选择器1</div>
<div class="style1">id选择器2</div>
<div class="style2">id选择器3</div>
优先级总结：id选择器>类选择器>标签选择器
2、属性选择器
<style>
input[type='text']{background-color:green}
input[type='password']{background-color:yellow}
</style>
<form>
name<input type="text" value=""/>
password<input type="password" value=""/>
</form>
3、a标签伪元素选择器
语法：鼠标放到链接上有四种状态
静止状态 a:link{css属性}
悬浮状态 a:hover{css属性}
点击状态 a:active{css属性}
释放状态 a:visited{css属性}
<style type="text/css">
a:link{background-color:white}
a:hover{background-color:pink}
a:active{background-color:red}
a:visited{background-color:green}
</style>
<a href="#">hit me</a>
4、层叠选择器
语法：适用于div嵌套，给其中指定的元素修饰
<style>
#div1 .div1class span{color:red;font-size:100px}
.body2 .div2class span{color:pink;font-size:50px}
</style>
三、css属性
1、文字属性
font-size:字体大小
font-family:字体类型
2、文本属性
color:颜色
text-decoration:下划线
属性值：none/underline
text-align:对齐方式
属性值：left/right/center
3、背景属性
background-color:背景颜色
background-image:背景图片
background-repeat:平铺方式
属性值：repeat-x/repeat-y/repeat
4、列表属性
list-style-type
属性值很多，用时查
可以在li前面加图片，效果很棒
格式：list-style-image:url("xxx.gif");
5、尺寸属性
宽
height:高
6、显示属性
display
属性值：none/inline
<style type="text/css">
span{display:none;color:red}
</style>
<script type="text/javascript">
function deal(){
document.getElementById("span").style.display="inline";
}
</script>
<form>
username<input type="text" value="">
<span id="span">对不起您的输入有误！</span><br>
password<input type="password" value=""><br>
<input id="btn" type="button" value="button" onclick="deal()">
</form>
7、浮动属性
float:
属性值：
left:向左浮
right：向右浮动
clear:
属性值：
left:清除左浮动
right：清除右浮动
both:左右均清除
<style type="text/css">
#div1{background-color:red;50px;height:60px;float:left}
#div2{background-color:green;50px;height:60px;float:left}
#div3{background-color:pink;50px;height:60px;float:left}
</style>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
8、盒子模型
查资料