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;
<!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>显示效果 