一. CSS：
1. 在标签上设置style属性：
background-color: #FFA000;
height: 48px;
2. 写在head里面，style标签中写样式：
CSS选择器
（1）id选择区：(用的少，了解）
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color:#FFA000;
height:48px;
/*样式复用*/
}
</style>
</head>
<body>
<div id="i1"></div>
<div id="i1"></div>
<div id="i1"></div>
/*但是id不能重复，矛盾了，怎么办*/
</body>
（2）class选择器：（推荐使用）
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color:#FFA000;
height:48px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
</body>
注：注释：（/* */）
(3)标签选择器：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color:#FFA000;
height:48px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
</body>
注：所有的div都用了定义的格式
(4) 关联选择器：（层级）
只有span下的div应用了格式。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span div{
background-color:#FFA000;
height:48px;
}
</style>
</head>
<body>
<div class="c1">lasi</div>
<span class="c1">
<div>
zhangsan
</div>
</span>
<div class="c1">wagnmazi</div>
</body>
（5）层级选择器：空格
.c1 span a p{ } : .c1下的span下的a下的p标签，各级标签之间用空格。
（6）组合选择器：逗号
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1,#i2,#i3{
background-color:#FFA000;
height:48px;
/*样式复用*/
}
</style>
</head>
<body>
<div id="i1"></div>
<div id="i2"></div>
<div id="i3"></div>
</body>
（7）属性选择器
对选择到的标签在通过属性进行一次筛选。
ps:优先级：标签上style优先，其次按代码编写顺序；
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: #FFA000;
color: red;
}
.c2{
font-size: 28px;
color: black;
}
</style>
</head>
<body>
<div class="c1 c2" >zhagnsan</div>
</body>
补充：css样式也可以写在单独的文件中，提高复用性（优先级同上）
3.注释
4.边框
宽度，样式，颜色，上下左右（每个属性之间用分号隔开）：
height：高度（数字，百分比（单独使用时无用））
width：宽度（宽度，百分比）
line-height自适应居中（垂直方向根据div大小居中）:
text-align:center :水平方向居中
color:颜色
font-size:字体大小
font-weight:字体加粗
<div style="border:1px solid red;" >zhagnsan</div>
<div style="border-bottom:1px solid red;" >zhagnsan</div>
5.背景
6. float（****重点***）
让标签浪起来，块级标签也可以堆叠：
代码见CSS中s6>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height:38px;
background-color: #dddddd;
/*灰色*/
line-height: 38px;
}
</style>
</head>
<body style="margin: 0 auto">
<div class="pg-header">
<div style="float: left;">收藏本站</div>
<div style="float: right;">
<a>登陆</a>
<a>注册</a>
<a>搜索</a>
</div>
</div>
<div style="300px;border: 1px solid red;">
<div style=" 96px;height: 30px;border: 1px solid green;float: left;">1</div>
<div style=" 96px;height: 30px;border: 1px solid green;float: left;">2</div>
<div style=" 96px;height: 30px;border: 1px solid green;float: left;">3</div>
<div style=" 96px;height: 30px;border: 1px solid green;float: left;">4</div>
<div style=" 96px;height: 30px;border: 1px solid green;float: left;">5</div>
<div style=" 96px;height: 30px;border: 1px solid green;float: left;">6</div>
<div style=" 96px;height: 30px;border: 1px solid green;float: left;">7</div>
<div style=" 96px;height: 30px;border: 1px solid green;float: left;">8</div>
<div style="clear: both;"></div>
<!--父子（红色边框）与儿子（绿色边框）的边框不冲突，注意这个坑-->
<!--div中可以嵌套div，里面的儿子可以飘（float）起来，飘起来之后，老子就管不住了，可以内部最后用<div style="clear: both;"></div>去调整；-->
</div>
</body>
</html>
示例2：
<body>
<div style=" 20%;background-color: red;float: left">zhangsan</div>
<div style="60%;background-color: green;float: left">xiaolaizi </div>
</body>
效果如下：
7.display 用的也较多
块级转行内，行内转块级标签
display:inline; 块级转行内
display:block; 内联变块级
display:none; 让标签消失
注：行内标签无法设置高度，宽度，padding margin;
那么可以做一些结合：
display:inline-block; 具有inline属性，默认自己有多少占多少，
又具有block属性，可以设置无法设置高度，宽度，padding，margin
转前：
<body> <div style="background-color: red;">ziyu</div> #div默认块级标签 <span style="background-color: blue;">xiaolaizi</span> #span默认行内标签 </body>
效果：
转后：
<body> <div style="background-color: red;display: inline">ziyu</div> <span style="background-color: blue;display: block">xiaolaizi</span> </body>
效果：
8.padding margin(0,auto) 边距
内边距：padding
外边距： margin
9.text-align
10.height width line-height color font-size font-weight
==================================================================
小结：
1. CSS重用
同一行有多种样式：
<head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ } .c2{ } </style> </head> <body> <div class="c1 c2"></div> <!--同一行有多种样式--> </body>
2. 改变大小变形
（1）左右滚动条的出现
（2）宽度的设置有两种：数字px
百分比
解决：在页面最外层设置像素的宽度=>最外层设置绝对宽度
3. 自适应
media属性
4.img默认标签，有一个1px的边框
解决：设置border为0即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
border:0;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">
<img src="1.jpg" style="200px;height: 300px;"/>
</a>
<!--用谷歌打开没问题，用ie打开出现蓝色的边框（ie浏览器会出现的问题)，加border可以解决-->
<!--<style>-->
<!--img{-->
<!--border:0;-->
<!--}-->
<!--</style>-->
</body>
</html>
==========================================================================================
二. CSS：
1.position （有了层的概念）（15章s3文件）
1)、 position:fixed => 固定在页面的某个位置（墙上贴张纸，纸上贴张画的功能）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
background-color: black;
color: orange;
position: fixed;
top:0px;
right: 0px;
left: 0px;
/*左面等于0，右面等于0可满足头部占满一行*/
}
.pg-body{
margin-top: 48px;
/*身体部分离顶部48px(头部的大小)，可避免头部压盖身体部分。*/
height: 50000px;
background-color: #888888;
}
</style>
</head>
<body>
<div class="pg-header">头部</div>
<div class="pg-body">内容</div>
<!--头部会挡住内容怎么办？-->/*身体部分离顶部48px(头部的大小)，可避免头部压盖身体部分。*/
</body> </html>
2）、position:absolute (一锤子买卖，常与relative一起使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="position:relative;500px; height:200px;border: 1px solid red;margin: 0 auto;">1
<div style="position: absolute;left: 0;bottom:0; 50px;height: 50px;background-color:gray;">11</div>
<!--依据父标签进行相对定位-->
</div>
<div style="position:relative;500px; height:200px;border: 1px solid red;margin: 0 auto;">2
<div style="position: absolute;right: 0;bottom:0; 50px;height: 50px;background-color:gray;">22</div>
</div>
<div style="position:relative;500px; height:200px;border: 1px solid red;margin: 0 auto;">3
<div style="position: absolute;right: 0;top:0; 50px;height: 50px;background-color:gray;">33</div>
</div>
</body>
</html>
效果： 应用场景示例：
3）、三层样式
opacity: 透明度设置；
z-index: 层级顺序；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="z-index:10;position: fixed;top: 50%;margin-top: -200px;left:50%;margin-left:-250px;background-color:white;height:400px;500px;opacity: 0.7 ">第三层</div>
<!--z-index:10 控制图层的顺序，谁的值大，谁在上一层-->
<!--top: 50%/left:50%:让框居中，但是是以左上角顶点居中的，为了让整个框居中，再以框的大小的一半像素平移，即margin-top: -200px;margin-left:-250px;-->
<div style="z-index:9;position: fixed;background-color: yellowgreen;top: 0;bottom: 0;left: 0;right: 0;opacity: 0.5 ">第二层</div>
<!--opacity:设置当前的透明度-->
<div style="z-index:8;height: 5000px;background-color: green">底面：第一层</div>
</body>
</html>
效果;
2、overflow
1）、 当图片比设置的框大的时候，会撑开框，为了是图片在框内显示：
overflow：hidden->超过框的不显示；（也就意味着只能看到图片的部分）
overflow：auto->在设置的框内出现滚动条，通过滚动条查看全图；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 200px; 300px;overflow: hidden"> <img src="1.jpg"> </div> </body> </html>
2）、一定需要看到整张照片呢，则可以把照片的大小和框的大小设置为一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px; 300px;">
<img src="1.jpg" style="height: 200px; 300px;" />
</div>
</body>
</html>
3. hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
right: 0;
left: 0;
top: 0;
height: 48px;
background-color: #2459a2;
line-height: 48px;
}
.pg-body{
margin-top: 50px;
}
.w{
width: 980px;
margin: 0 auto;
}
.pg-header .menu{
display: inline-block;
padding: 0 10px 0 10px;
color: white;
}
/*当鼠标移动到当前标签上时，以下css属性才生效*/
.pg-header .menu:hover{
background-color: blue;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">LOGO</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
</div>
</div>
<div class="pg-body">
<div class="w"></div>
</div>
</body>
</html>
效果：
4.background
1）图片背景
2）background-image:url('image/4.gif'); #默认，div比较大的时候，图片重复访
3） background-repeat：
4）background-position-x：
background-position-y：(position 抠洞原理）
background-position：10px 10px
===========================================================================================================================================================================================
综合的小示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--span：行内标签-->
<div style="height: 35px ; 400px;position:relative;border: 1px solid red;">
<input type="text" style="height: 35px ; 370px;padding-right: 30px"/>
<!--给右边留出30像素的大小放图标，把输入框大小设置为370像素，避免输入文本过长被图标遮挡（总的加起来还是整个div的大小。-->
<span style="position: absolute;right:0;top:10px;background-image:url(i_name.jpg);height: 16px; 16px;display: inline-block;"></span>
</div>
</body>
</html>
效果：
==========================================================================================================================================================================================