css 层叠样式表
作用：
- 颜色
- 位置
注释 /* 这是注释 */
形式
- 内嵌样式 标签style
- 内联样式 head style
- 外联样式 单独文件
选择器
- id选择器 #
- class选择器 .
- 标签选择器
- 层级选择器 空格隔开父-子
- 组合选择器 逗号隔开同级元素
- 属性选择器 [] 里边写属性=值
优先级：
style由上至下
边框 border 宽度 样式 颜色
height高度 width宽度 像素，百分比
text-align:center水平位置，
line-height行高 垂直方向居中
color字体颜色
font-size字体大小
font-weight字体加粗
float 标签漂浮，块级标签堆叠
老子管不住：clear：both
display
- inline 行内显示 无法设置高度，宽度，边距
- block 块级显示 可以设置高度，宽度，边距
- none 不显示
- inline-block 双重属性
padding 内边距
margin 外边距
代码重用
两个样式相同的部分可以单独提出来
自适应media
布局变形解决办法：最外层用绝对宽度，内部可以使用百分比
img标签，默认有1像素的边框，border:0;
position
- fixed 固定
- relative+absolute 相对定位+绝对定位
z-index: 层级顺序，立体堆叠，值越大越靠前
opacity：模糊度0-1
overflow：auto hidden
hover
background-image: url("img/icon.png"); 默认重复
background-repeat: no-repeat;
background-position-x:0; 相当于扣了一个小洞
background-position-y:0;
float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-head{
height: 38px;
background-color: darkgray;
}
.pg-head-left{
float: left;
}
.pg-head-right{
float: right;
}
.pg-body{
width: 900px;
height:400px;
border: 1px solid red;
}
.pg-element{
width: 150px;
height:200px;
border: 1px solid green;
float: left;
}
</style>
</head>
<body style="margin: 0 auto;">
<div class="pg-head">
<div class="pg-head-left">左边的内容</div>
<div class="pg-head-right">右边的内容</div>
</div>
<div class="pg-body">
<div class="pg-element">内部元素</div>
<div class="pg-element">内部元素</div>
<div class="pg-element">内部元素</div>
<div class="pg-element">内部元素</div>
<div class="pg-element">内部元素</div>
<div class="pg-element">内部元素</div>
<div style="clear: both"></div>
</div>
</body>
</html>效果 
fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0 auto;
}
.pg-head{
background-color: black;
color:white;
position: fixed;
width: 100%;
height: 48px;
top:0;
text-align: center;
line-height: 48px;
}
.pg-body{
height: 5000px;
background-color: #dddddd;
margin-top: 48px;
color:green;
text-align: center;
font-size:50px;
}
#pg-goto-top{
width: 80px;
height: 50px;
background-color: black;
position: fixed;
right: 10px;
bottom:10px;
color:white;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="pg-head">顶部内容</div>
<div class="pg-body">主体内容</div>
<div onclick="gotoTop()" id="pg-goto-top">返回顶部</div>
<script>
function gotoTop() {
document.body.scrollTop=0;
}
</script>
</body>
</html>
background
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.icon{
width: 18px;
height: 18px;
background-image: url("img/icon.png");
background-repeat: no-repeat;
background-position-x:0;
/*border: 1px solid green;*/
float: left;
margin-right:10px ;
}
.icon-1{background-position-y:0;}
.icon-2{background-position-y:-20px;}
.icon-3{background-position-y:-40px;}
.icon-4{background-position-y:-60px;}
.icon-5{background-position-y:-100px;}
.icon-6{background-position-y:-120px;}
.icon-7{background-position-y:-140px;}
.icon-8{background-position-y:-160px;}
.icon-9{background-position-y:-180px;}
</style>
</head>
<body>
<p>原图：</p>
<div>
<img src="img/icon.png" alt="">
</div>
<p>背景图：</p>
<div class="icon icon-1"></div>
<div class="icon icon-2"></div>
<div class="icon icon-3"></div>
<div class="icon icon-4"></div>
<div class="icon icon-5"></div>
<div class="icon icon-6"></div>
<div class="icon icon-7"></div>
<div class="icon icon-8"></div>
<div class="icon icon-9"></div>
</body>
</html>icon.png 
效果 
hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0 auto;
height: 5000px;
}
.pg-head{
background-color: #2459a2;
height:48px;
position: fixed;
top:0;
left:0;
right:0;
color:white;
line-height: 48px;
}
.w{
width:960px;
margin: 0 auto;
}
.pg-body{
margin-top: 50px;
}
.pg-head .menu{
display: inline-block;
padding: 0 20px;
}
/*鼠标经过生效*/
.pg-head .menu:hover{
background-color: #0d3ea2;
}
</style>
</head>
<body>
<div class="pg-head">
<div class="w">
<a class="logo" >logo</a>
<a class="menu" >主页</a>
<a class="menu" >段子</a>
<a class="menu" >图片</a>
<a class="menu" >1024</a>
</div>
</div>
<div class="pg-body">
<div class="w">这里是主体内容</div></div>
</body>
</html>效果 
login
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.login{
width: 300px;
height:35px;
position: relative;
display: inline-block;
}
.icon{
height: 35px;
width: 35px;
background-image: url("img/pwd-icons-new.png");
background-repeat: no-repeat;
background-position-x: 0;
background-position-y: -48px;
position: absolute;
top:3px;
right:-15px;
}
input{
width: 275px;
height:35px;
font-size:20px;
padding-right:40px; /*右边内边距增加*/
}
label{
height:35px;
}
</style>
</head>
<body>
<label for="username">登陆：</label>
<div class="login">
<input id="username" type="text">
<span class="icon"></span>
</div>
</body>
</html>pwd-icons-new.png (来自京东商城登陆页面) 
显示效果 
margin-padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-margin{
border:1px solid red;
width:200px;
height:200px
}
.pg-margin-box{
border:1px solid green;
width:180px;
height:180px;
background-color: green;
margin:10px;
}
.pg-padding{
border:1px solid red;
width:180px;
height:180px;
padding: 10px
}
.pg-padding-box{
border:1px solid green;
width:180px;
height:180px;
background-color: green
}
</style>
</head>
<body>
<div class="pg-margin">
<div class="pg-margin-box">
外边距margin
</div>
</div>
<div class="pg-padding">
<div class="pg-padding-box">
内边距padding
</div>
</div>
</body>
</html>显示效果 
overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--超出范围隐藏-->
<div style="width:200px; height: 200px;overflow: hidden">
<img src="img/sun.jpg" alt="">
</div>
<!--超出范围出现滚动条-->
<div style="width:200px; height: 200px;overflow: auto">
<img src="img/sun.jpg" alt="">
</div>
</body>
</html>
图片： 
显示效果： 
property
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border: 1px solid red; /* 边框 */
width: 200px; /* 宽 */
height: 200px; /* 高 */
text-align: center; /* 水平居中 */
line-height: 200px; /* 垂直居中 */
color: green; /* 字体颜色 */
font-size: 20px; /* 字体大小 */
font-weight: bold; /* 字体加粗 */
}
</style>
</head>
<body>
<div>简单的div测试</div>
</body>
</html>显示效果 
selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器*/
p{
background-color:green;
}
/*id选择器*/
#i1{
background-color:yellow;
}
/*类选择器*/
.c1{
background-color:blue;
}
/*层级选择器*/
div p{
background-color:red;
}
/*组合选择器*/
#i2, .c2{
background-color:orange;
}
/*属性选择器*/
p[color="pink"]{
background-color:pink;
}
</style>
</head>
<body>
<p>标签选择器 green</p>
<p id="i1">id选择器 yellow</p>
<p class="c1">类选择器 blue</p>
<div><p>层级选择器 red</p></div>
<p class="c2">组合选择器 orange</p>
<p id="i2">组合选择器 orange</p>
<p color="pink">属性选择器 pink</p>
</body>
</html>显示效果 
z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0 auto;
}
.pg-body{
height: 5000px;
background-color: #dddddd;
color:green;
}
.pg-background{
z-index:9;
background-color: orange;
position: fixed;
top:0;bottom:0;
left:0;
right:0;
opacity:0.5;
/*display:none*/
}
.pg-box{
z-index:10;
background-color: white;
width:500px;
height:400px;
position:fixed;
top:50%;
left:50%;
margin-top:-200px;
margin-left: -250px;
/*display:none;*/
}
</style>
</head>
<body>
<div class="pg-box"></div>
<div class="pg-background"></div>
<div class="pg-body">
<button onclick="showBox()">注册</button>
</div>
</body>
</html>显示效果 
布局实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.pg-body-left-li{
height:60px;
line-height: 60px;
background-color: coral;
text-align: center;
font-weight: bold;
border:1px solid lawngreen;
}
.pg-body-right-div{
width:150px;
height:220px;
background-color: #dddddd;
padding: 10px;
float:left;
margin-right: 10px;
margin-bottom: 10px;
}
</style>
<body style="margin: 0 auto;">
<!--页面头部部分-->
<div style="background-color: #dddddd; height:36px">
<div style="width: 960px;margin: 0 auto">
<div style="float: left;line-height: 36px">收藏本站</div>
<div style="float: right;line-height: 36px">登陆</div>
<div style="float: right;line-height: 36px"> | </div>
<div style="float: right;line-height: 36px">注册</div>
</div>
</div>
<!--购物车-->
<div style="width:960px;margin: 0 auto;height:36px">
<div style="width:100px;height: 36px;background-color: #dddddd;line-height: 36px;text-align:center;float:right">购物车</div>
</div>
<!--导航栏-->
<div style="background-color: red;height: 40px">
<div style="width: 960px; margin: 0 auto">
<div style="float:left;color:white;line-height: 40px;margin: 0 50px">全部分类</div>
<div style="float:left;color:white;line-height: 40px;margin-right: 10px">首页</div>
<div style="float:left;color:white;line-height: 40px;margin-right: 10px">|</div>
<div style="float:left;color:white;line-height: 40px;margin-right: 10px">天猫超市</div>
<div style="float:right;color:white;line-height: 40px;">研究院</div>
<div style="float:right;color:white;line-height: 40px;margin-right: 10px">|</div>
<div style="float:right;color:white;line-height: 40px;margin-right: 10px">论坛</div>
</div>
<!--清除浮动-->
<div style="clear: both;height:10px"></div>
<!--主体部分-->
<div style="width: 960px;margin: 0 auto">
<!--左边栏-->
<div style="height:520px;width:200px;float:left;background-color: green">
<div class="pg-body-left-li">南方水果</div>
<div class="pg-body-left-li">南方水果</div>
<div class="pg-body-left-li">南方水果</div>
<div class="pg-body-left-li">南方水果</div>
<div class="pg-body-left-li">南方水果</div>
<div class="pg-body-left-li">南方水果</div>
</div>
<!--右边栏-->
<div style="height:500px; width:720px; float:right; background-color: orange;padding:10px ">
<div class="pg-body-right-div">
<div style="height:180px;background-color:#64b5dd;"></div>
<div style="height: 5px"></div>
<div style="height: 40px;line-height: 40px; text-align:center;background-color: coral">商品信息</div>
</div>
<div class="pg-body-right-div">
<div style="height:180px;background-color:#64b5dd;"></div>
<div style="height: 5px"></div>
<div style="height: 40px;line-height: 40px; text-align:center;background-color: coral">商品信息</div>
</div>
<div class="pg-body-right-div">
<div style="height:180px;background-color:#64b5dd;"></div>
<div style="height: 5px"></div>
<div style="height: 40px;line-height: 40px; text-align:center;background-color: coral">商品信息</div>
</div>
<div class="pg-body-right-div">
<div style="height:180px;background-color:#64b5dd;"></div>
<div style="height: 5px"></div>
<div style="height: 40px;line-height: 40px; text-align:center;background-color: coral">商品信息</div>
</div>
<div class="pg-body-right-div">
<div style="height:180px;background-color:#64b5dd;"></div>
<div style="height: 5px"></div>
<div style="height: 40px;line-height: 40px; text-align:center;background-color: coral">商品信息</div>
</div>
<div class="pg-body-right-div">
<div style="height:180px;background-color:#64b5dd;"></div>
<div style="height: 5px"></div>
<div style="height: 40px;line-height: 40px; text-align:center;background-color: coral">商品信息</div>
</div>
<div class="pg-body-right-div">
<div style="height:180px;background-color:#64b5dd;"></div>
<div style="height: 5px"></div>
<div style="height: 40px;line-height: 40px; text-align:center;background-color: coral">商品信息</div>
</div>
<div class="pg-body-right-div">
<div style="height:180px;background-color:#64b5dd;"></div>
<div style="height: 5px"></div>
<div style="height: 40px;line-height: 40px; text-align:center;background-color: coral">商品信息</div>
</div>
</div>
</div>
</div>
</body>
</html>显示效果 
