首先我们要知道，html相当于把我们每个人的身体轮廓描述了出来，但除了基本的功能外，它更像是一个裸替的人，不美观，也不和谐。所有我们要给他穿上漂亮的衣服----CSS。
基本写法：
1、一般测试或者偷懒是使用的最基本方法，很显然，如果正式环境这么写维护起来特别不方便，而且也变得十分臃肿。
<body >
<div style="background-color: cadetblue;height: 50px">头</div>
<div style="background-color: black;height: 50px">上身</div>
<div style="background-color: green;height: 50px">下身</div>
</body>
进阶写法
这里面有两个问题：
1、首先是在head里面加上style标签，如下写法，这id选择器里面写上样式，然后再标签里面应用这个id的样式。
注意：但是id选择器原则上只能被调用1次，像下面的写法就会提示红色的波浪线。
终极写法
1、在同级目录下面新建css目录，然后在里面创建common.css(这个名字自己随便写，自己认得就行)。
2、在css/common.css文件里面写上你要的样式，如下图。
3、然后在head标签里面用link标签把common.css这个css样式的文件应用到当前的html里面，其他都是固定写法。
4、在想应用的标签里面应用这个样式，如下图写法：
注意：大家可以观察，其实很多网站都是这么写的，大一点的网站都不会在同级目录下创建css文件，都会是一个链接。
各种选择器
1、上面我们学习了怎么来写css样式，但是应用的手法还是不太一样的，下面我们就学习一下各种选择器。
2、这里为了方便给大家演示，我们就用进阶的写法介绍各种选择器的简单应用。
前面我们学习了各种标签，比如span、div、a等等的标签，标签选择器顾明思意就是给固定的标签应用样式。
1、我们写了一个div标签，要想直接给这个标签应用样式，可以在style里面如下的写法写，这样不管有多少个div标签，都会应用这个样式。个人感觉这么用其实挺虎的，估计也没人这么用。
class选择器
1、上面终极写法其实就是class选择器的应用。
2、写法如下，点代表是class选择器，后面跟的是名字。大括号里面写的是样式。应用的话直接在标签里面写上class=“c1”就行。
id选择器
1、进阶写法里面写的其实就是id选择器。
2、#代表的是当前的样式类别是id选择器，i1是名字，大括号里面是样式。标签里面写上id=“i1”就应用上了样式。
3、一个id选择器只能被应用一次，否则提示错误，也几乎没人这么用的。
关联选择器
1、关联选择器，我其实一直理解为它可以改名叫层级选择器，我们知道html里面可以标签套标签，这里的关联选择器其实就是找到谁下面的谁给他应用样式，如下：
2、如下所示，我们定义了一个class选择器，并且只有标签的class=“c1”，且下面有span标签的才会生效。
3、这里不单单可以写.c1 span，其实就是层级关系，你可以写div span等等，多少级都行，为了好维护，不建议写太深。但是记得中间是有空格隔开的。
组合选择器
1、组合选择器，顾名思义就是一组或组合起来的意思，如下图：
2、我们写了一个.c1,.c2的样式，也就是说所有应用了class选择器c1和c2标签都生效，当然也可以写成.c1,.c2,#i1,#i2等等。其实就是说应用了这些样式的标签的样式是一样的，就不用再逐个写了，直接整合到一起。
属性选择器
1、属性选择器，那肯定是跟属性有关系了。如下，我们给的所有input标签且type=“text”的标签应用一个样式。
2、这个属性不一定非要是系统自带的，也可以我们自己创建的。如下，我们给class=“c2”的标签，且name=“haha”的标签应用一个样式，也是可以的。以此类推，可以灵活应用。
应用的优先级
我们用的最多的可能是class选择器，每个标签很可能应用多个选择器的样式，那么哪个优先呢，其实就一句话“就近原则”，谁距离这个标签进就先应用谁的样式。基础写法最优先，其次是进阶写法。进阶写法里面谁距离标签进，就是谁最优先。
常用CSS样式
1、边框
2、float
1、float即飘的意思，就是让标签飘动到哪里的意思。
2、我们在写html的时候注意要有结构化，比如一个界面大致可以分为头、身、尾。在头里面可以再定义头发、眉毛、眼睛等细小的属性。
3、如下，我们先写一个div，在div里面描述出来整个头部的基本框架。
4、我们在写css样式的时候，宽度不建议直接写死，一般都是屏幕的百分之多少，整个宽度是百分之百。
5、如下，div是块级标签，他一个div就能占用整行。所以我们让收藏本站一行的左边，登陆和注销按钮的div飘到整行的右边。pading-right就是内边距，好比你家的房子和邻居家的房子，两栋房子的距离叫外边距。你家的桌子距离你家墙的距离叫内边距。
6、细心的同学发现body里面我直接写了一个margin:auto，这个margin就是外边距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>htmltest</title>
<style>
.page-header {
height: 35px;
background-color: #dddddd;
line-height: 35px;
}
.c1 {
float: left;
padding-left: 100px;
}
.c2 {
float: right;
padding-right: 200px;
}
</style>
</head>
<body style="margin: auto">
<div class="page-header">
<div class="c1">
♥收藏本站
</div>
<div class="c2">
<a>登陆</a>
<a>注销</a>
</div>
</div>
</body>
</html>
float进阶用法
1、使用场景，比如我们在页面的一个位置，例如电商平台有很多商品。我们可以像下面这种做，定义一个父级div标签，规定商品存放的范围。然后让每个商品都让它float:left，父级标签固定宽度就是400px，每个商品是一个页面，宽度是100。这样的4个商品是刚好是一行，如果超出去了就直接跑到下一行开始。
2、默认情况下，里面的页面float起来以后，父级标签的border就被撑没了，所以需要在所有标签的最后面加上clear：both，父级标签的border才不会丢失，否则就会变成下图二。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>htmltest</title>
<style>
.page-header {
background-color: #dddddd;
width: 400px;
border: 1px solid red;
}
.c1 {
background-color: cadetblue;
float: left;
width: 100px;
}
.c2{
clear: both;
}
</style>
</head>
<body style="margin: auto">
<div class="page-header">
<div class="c1">页面1</div>
<div class="c1">页面2</div>
<div class="c1">页面3</div>
<div class="c1">页面4</div>
<div class="c1">页面5</div>
<div class="c2"></div>
</div>
</body>
</html>
图一：
图二：
dispaly:
1、display:none；隐藏，也就是不显示这个标签，有些视频网站的开灯关灯会用到，还有弹窗之类的。
2、display:inline；让当前标签变成行内标签。
3、display:block; 让当前标签变成块级标签。
4、display:inline-block; 让当前标签具有行内标签和块级标签的属性，比如我们知道的行内标签是无法设置宽度和高度的，如果我们要设置，就可以在当前标签加上这个属性，就可以让它能够设置这些属性。
边距
1、padding（内边距）
1、内边距其实简单理解内部边距，我们做个案例就知道。
结论：
1、我们给class的c1和c2都设置了高度是150px，但是padding内边距变成50以后，高度明显就不只是150px了，所以可以得出结论，padding更像是自我膨胀，数字越大，自己越大。
2、他跟margin唯一想象的是padding:0，上下左右也都是等于0。
3、padding:10px的时候代表上下左右扩充10像素，注意要是行内标签的话，需要display等于inline-block，才能显示出来。如果padding：0 10px，代表是上下是0，左右是10像素，写全的话是padding：0 10px 0 10px，就是上右下左。
2、margin（外边距）
首先我们定义了一个头的div，然后我们在div里面再创建一个大的div，宽度设置为980px，在这div里面里面再创建两个div。分别是收藏本站和登陆注销按钮。我们设置收藏本站飘左边，登陆注销飘右边。然后我们让这个980px的div居中，如下图，这样就很漂亮的让它呈现出来。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>htmltest</title> <style> .page-header { height: 35px; background-color: #dddddd; line-height: 35px; } .c1 { float: left; } .c2 { float: right; } </style> </head> <body style="margin: auto"> <div class="page-header"> <div style="width: 980px;margin: 0 auto"> <div class="c1"> ♥收藏本站 </div> <div class="c2"> <a>登陆</a> <a>注销</a> </div> <div style="clear: both"></div> </div> </div> </body> </html>
1、margin有很多属性，常用的margin:0 auto就是说上下间距为0，左右自动。当然也可以单个设置，前面我们知道body其实也是块级标签，默认他也是有8px外边距，怎么让他去掉这个外边距呢，就是在body里面加上style="margin:0",或者margin: 0 auto，通过查看属性我们知道其实都一样。
2、默认body是的margin:8px，也就是上下左右都是8px。所以以后做html上来就可以设置margin:0；
3、做个案例吧；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>htmltest</title> <style> .c1 { background: red; height: 150px; } .c2 { background: green; height: 150px; margin: 0px; padding: 0px; } </style> </head> <body> <div> <div class="c1">内边距</div> <div class="c2">外边距</div> </div> </body> </html>
3、我们先看外边距
结论：
1、margin:0，这个0是多少，确实就是上下左右都是多少(margin-top: 50px;margin-right: 50px;margin-bottom: 50px;margin-left: 50px;)，如下图设置：
2、相对第一个div，外边距就是距离另外一个div的实际距离，相对别人的距离。
3、数字越大，自己就会变得越来越小。
注释
CSS样式的注释是在选择器的前后加上/*和*/就代表是注释
/*.c1 {
background: red;
height: 150px;
}
*/
扩展
1、CSS样式重用的问题。
首先我们要明确的一个问题是，一个标签可以同时应用多个class，写法如下，多个class名字中间用空格隔开。我们提列出来通用的样式可以同时应用多个class。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="common.css">
<style>
.c1 {
width: 500px;
}
.c2{
width: 800px;
}
.c3{
height: 38px;
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="c1 c3"></div>
<div class="c2 c3"></div>
</body>
</html>
2、页面缩小放大以后样式变了。
问题：左右宽度不建议直接写上百分比，否则页面肯定会变形。
解决办法：
1、首先我们在设置最外层先设置一个固定的宽度，然后再在固定宽度里面写好百分比，这样基本就不会变形了。
3、自适应
问题：菜单里面横向写了很多按钮，一旦点页面小到一定程度，按钮就没了，会一种全新的方式显示。
示例：
解决思路：
1、当页面小于一定的跨度，比如600px就会应用一个新的样式。
4、双击图标是一个超链接，直接跳转到图标的网页里面，这里会用到a标签好img标签，这里需要注意老一点的IE都会显示一个边框，怎么去掉呢。只需要在img标签里面设置边框为零即可。注意，所有是0像素的样式都不用加px单位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="common.css">
</head>
<body>
<a href="https://www.baidu.com" target="_blank">
<img src="123.png" style="border: 0">
</a>
</body>
</html>
position
fixed属性使用场景
需求：
我们进场看到好论坛之类的网站，往下拉好几页的时候右下角有个返回头部的按钮，还有好多官网有一个客服的框永远都在右边最中间或者下面。那这个时候就用到了position就可以实现了。
1、返回顶部，position: fixed;就代表分层，right: 50px;bottom: 80px，就是靠右边起往左50像素，从最底下往上80像素，要是top:0;的话，就是距离窗口最上面往下0像素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="common.css">
</head>
<body style="margin: 0">
<div style="height: 50px;width: 50px;background-color: cadetblue;color: brown;position: fixed;right: 50px;bottom: 80px">返回顶部</div>
<div style="height: 5000px;background-color: aliceblue"></div>
<script>
</script>
</body>
</html>
2、“冻结首行”，就是页面的上线固定。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="common.css"> <style> .pg-header { height: 38px; top: 0; right: 0; left: 0; color: brown; position: fixed; background-color: darkblue; } .pg-body{ height: 5000px; background-color: aliceblue; margin-top: 38px; } </style> </head> <body style="margin: 0"> <div class="pg-header">头部</div> <div class="pg-body">身体</div> <script> </script> </body> </html>
2、absolute属性使用场景
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="common.css"> <style> .pg-header { height: 100px; width: 100px; color: brown; position: absolute; background-color: cadetblue; right: 40px; bottom: 500px; } .pg-body{ height: 5000px; background-color: aliceblue; } </style> </head> <body style="margin: 0"> <div class="pg-header">固定窗口</div> <div class="pg-body">身体</div> <script> </script> </body> </html>
固定窗口会永远固定在网页的这个问题，上下拉动会跟着网页一起上下移动。而fixed则会永远漂浮在某个位置，随便怎么移动，它都会在那个位置。
3、absolute+relative
absolute在哪取决relative，也就是说absolute只能在relative范围里面的某个位置，不会超出relative的范围。一句话absolute相对relative在什么位置，如下示例一。
注意：如果right、top、bottom等于负数，它实际上也是相对relative在什么位置，看上去是超出去了，但还是相对relative，如下示例二。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="common.css"> <style> .pg-header { height: 500px; width: 500px; border: 1px solid red; position: relative; margin: 0 auto; } .pg-body-1 { position: absolute; top: 0; left: 0; width: 50px; height: 50px; background-color: aquamarine; } .pg-body-2 { position: absolute; bottom: 0; right: 0; width: 100px; height: 100px; background-color: chartreuse; } </style> </head> <body style="margin: 0"> <div class="pg-header"> <div class="pg-body-1"></div> <div class="pg-body-2"></div> </div> <script> </script> </body> </html>
示例一：
示例二：
4、三层基础
1、这里面我们学到了几个属性，第一就是透明度opacity: 0.5;等于0.5的时候个人感觉最合适。
2、如果position都等于fixed的时候，谁在前谁在后呢？z-index: 5;谁的z-index值大，谁就在最前面。
3、下图中黑色阴影部分上下左右都等于0的时候，才能完全遮住浏览器。
4、border-radius: 3%;我们平时写的对话框都方方正正贼丑，用这个参数会和谐一点。
5、怎么才能让中间白色的框放到正中间呢？如下，它的高和宽等于多少，margin-top和margin-left都得除以2的负数，才能在正中间对其。
height: 400px; width: 600px; margin-top: -200px; margin-left: -300px;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="common.css"> <style> .c1{ background-color: green; width: 100%; height: 2000px; } .c2{ z-index: 5; background-color: black; opacity: 0.5; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } .c3{ z-index: 10; position: fixed; height: 400px; width: 600px; margin-top: -200px; margin-left: -300px; background-color: white; border-radius: 3%; top: 50%; left: 50%; } </style> </head> <body style="margin: 0"> <div class="c1">最后一层</div> <div class="c2"></div> <div class="c3"></div> <script> </script> </body> </html>
效果：
overflow
1、overflow的主要作用就是当图片太大的时候，为了不撑坏当前的样式，给他自动加了一个横竖的拉动框。
overflow: auto;拉动框
overflow: auto;没有拉动框，最外层限制多少，就显示图片的多少。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="common.css">
<style>
.c1{
margin: auto;
background-color: green;
width: 200px;
height: 220px;
overflow: auto;
}
</style>
</head>
<body style="margin: 0">
<div class="c1">
<img src="123.png">
</div>
<script>
</script>
</body>
</html>
效果：
hover
1、当鼠标移动当前标签以后，颜色就会变了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="common.css"> <style> .c1{ margin: 50px 500px; background-color: cadetblue; border-radius: 10%; height: 45px; width: 70px; line-height: 45px; color: aliceblue; } .c1:hover{ background-color: forestgreen; } </style> </head> <body style="margin: 0"> <div class="c1"> <div>变色按钮</div> </div> <script> </script> </body> </html>
正常显示
鼠标放上去以后显示。
background-image
1、默认background-image上下左右都会不断复制，一直到左右占满位置，上下复制多少取决于设置的高度，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="common.css"> <style> .c1{ height: 300px; background-image: url("123.png"); } </style> </head> <body style="margin: 0"> <div class="c1">1234</div> <script> </script> </body> </html>
这里其实是一张图片。
如果我们不想让它这么上下左右限制，直接加上background-repeat: no-repeat;就只显示图片本身了。
上面我们知道如果要想让图片显示出来就要设置一定的高度，但默认他会横着竖着都复制，如果我们想让它竖着复制，就使用background-repeat: repeat-y;
但是如果我们只想让它横着复制的话，就得使用background-repeat: repeat-x;参数。
图片的定位:
1、默认情况下一个网页不会每个图标都单独存放，那网页的请求就会增多，网站的压力就会增大，这里有个挺有意思的东西，我们只需要把一张图标请求过来，剩下的事儿就是定位了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="common.css"> <style> .c1{ height: 20px; width: 20px; background: #dddddd url("456.png") -20px -20px no-repeat; } </style> </head> <body style="margin: 0"> <div class="c1"></div> <script> </script> </body> </html>
效果：
下面是完整写法，但是如果一旦用的多的话，这么写代码就会很多，所以建议上面那种写。
height: 20px; 设置高度，需要的图标有多高就写多少。
width: 20px; 设置宽度，需要的图标有多宽就写多少
background-color: #dddddd; 背景色，这里其实可以忽略。
background-image: url("456.png"); 把完整的背景图片加进来
background-repeat: no-repeat; 不让它上下左右复制，只显示图片本身
background-position-x:-53px; 横向定位图标位置
background-position-y: -41px; 竖向定位图标位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="common.css"> <style> .c1{ height: 20px; width: 20px; background-color: #dddddd; background-image: url("456.png"); background-repeat: no-repeat; background-position-x:-53px; background-position-y: -41px; } </style> </head> <body style="margin: 0"> <div class="c1"></div> <script> </script> </body> </html>
案例一
效果图
1、首先我们在最外面加了一个div让它距离顶部35像素，方便截图，更好的展示效果。
2、设置div宽度400px，高度35像素，设置relative，里面我们设置absolute位置。
3、加一个input标签，设置跟div一样的高度。
4、加一个span标签，让它可以设置高和宽，用到了display标签。把图标加进来，设置高度和宽度让图标展现出来。因为div给了relative，这里给了absolute，所以可以设置距离div的高的像素，距离最左边的像素。
注意，这里为什么input的宽度是360px呢，因为分层了，我们要让input的宽度加上图标的宽度刚好等于400px（这400就是div的宽度）。否则我们输入的字就会被图标挡住。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="common.css">
<style>
.c1{
height: 35px;
width: 400px;
position: relative;
margin-top: 36px;
}
.input{
height: 38px;
width: 360px;
padding-left: 40px;
}
.span{
background-image: url("678.png");
display: inline-block;
height: 40px;
width: 40px;
position: absolute;
top: 2px;;
left: 0;
}
</style>
</head>
<body style="margin: 0">
<div class="c1">
<input class="input" type="text" >
<span class="span"></span>
</div>
<script>
</script>
</body>
</html>