css
一：哪些位置可以写css样式
1，在head中添加style标签，可以写css样式
2，在body的标签中增加style属性，也可以写css样式
3，通过link标签(在head里)也可以导入css样式
（1）导入方式是：新建stylesheet文件c.css，html文件的head里写<link rel="stylesheet" href="c.css">，（rel代表引入的类型，stylesheet是指样式表，href是路径文件）
（2）stylesheet文件的样式写法同head中style标签的写法，id class等选择器的符号依旧是#和.
以上三个位置css的优先级：
（1）body中的标签中style属性引用的css样式优先级最高
（2）以body中的标签为基准，由内而外 由下到上，依次应用；比如head中的style样式和stylesheet文件中的样式，哪个写在后面，先应用哪个
二、选择器
1，选择器是用来定位body中的标签，给标签增加样式
2，分别有id选择器、class选择器、标签选择器、id或class组合选择器，属性选择器、id或class层级选择器
<head> <meta charset="UTF-8"> <title>Title</title> <style> <!--需要在style标签中添加css样式，style标签写在head里--> #i1{ <!--id选择器，对应的符号是#--> height:100px; width:100px; background-color:red; <!--分别是高度、宽度、背景色--> } #i2,#i3{ <!--id组合选择器，把多个id名写在一起，用逗号隔开--> height:100px; width:100px; background-color:oringe; } .c1{ <!--class选择器对应的符号是.--> height:100px; width:100px; background-color:blue; } div{ <!--标签选择器，直接写标签名--> height:100px; width:100px; background-color:yellow; } span{ <!--span标签选择器--> height:100px; width:100px; background-color:green; } div[hn='hn']{ <!--属性选择器，写标签的属性，属性可以自定义--> height:100px; width:100px; background-color:pink; } #i2 span{ <!--id层级选择器，对应body里标签的id为i2的span标签；空格代表下一层--> <!--同理,class层级选择器的样式这么写：.c1 span{background-color:pink}--> background-color:pink; } </style> </head> <body> <div id="i1">id选择器</div> <!--id的名字可以随意写，但一个名字的id选择器只能在一个html文件中被标签使用一次，再使用就得命名新的id，并且style里也得定义对应id名字的新的样式--> <div class="c1">class选择器</div> <input class="c1" > <!--class选择器的名字可以随意写，style里定义一个，就可以在body多个标签里使用，比如上面的div和input标签，这个选择器在css样式中使用率最高--> <div>div标签选择器</div> <span>span标签选择器</span> <!--标签选择器，style里定义后，就会适用于body里所有的这个标签--> <div hn="hn">属性选择器</div> <!--属性选择器，属性名可以自定义--> <div id="i2"> <!--id层级选择器，有多个层级时，给id为i2的下一个层级标签渲染样式--> <span>id层级选择器</span> </div> </body>
3，class属性可以同时引用多个选择器
<head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ display:none; <!--display:none 是隐藏的功能，加上这个，就会把其他样式隐藏掉--> } .c1{ height:100px; width:100px; background-color:blue; } </style> </head> <body> <div class="c1 active"></div> <!--标签中的class属性是可以同时引用多个选择器的-->
三、css常用样式
1，宽高字体等样式
<head> <meta charset="UTF-8"> <title></title> <style> .c1{ height: 100px; width: 100%; #宽度可以写百分比，100%是占满屏 background-color: blue; text-align: center; #文案水平居中 line-height: 100px; #相当于高度的一半，就是文案垂直居中的效果 border: 1px red solid; #边框是1像素 红色 实线 } .c2{ font-size: xx-large; font-weight: bolder; #这两个效果是字体加大加粗 } </style> </head> <body style="margin:0"> #margin:0效果是 body里的样式没有外边距 <div class="c1">HTML</div> <div class="c2">水瓶座</div>
</body>
2，float属性
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1{
height: 100px;
width: 200px;
background-color: blue;
border: 1px red solid; #边框是1像素 红色 实线
}
</style>
</head>
<body> <div class="c1" style="float: left">水瓶座</div> <div class="c1" style="float: left">水瓶座</div> #不加float: left的话，这两个div是占两行的，float:left就是样式都往左浮动，浮动到一行，如果样式比较多，会换行；同理，还有float:right
</body>
3，display属性
行内标签不可以应用宽、高、外边距、内边距等css样式，只有块级标签可以应用
<span style="height:100px;width:100px;display:block">水瓶座</span> #display:block是行内标签转块级标签 <div style="height:100px;width:100px;display:inline">水瓶座</div> #display:inline是块级标签转行内标签 <span style="height:100px;width:100px;display:inline-block;border:1px red solid">水瓶座</span> #inline-block既是行内标签也是块级标签，样式设置的宽和高多大就是多大，应用于为了文字附着一些宽和高 <div style="height:100px;width:100px;display:none"></div> #none效果是隐藏这个标签
4，margin外边距、padding内边距
比如一个方形框，border就是四条框线，padding就是框线里面的东西，margin就是框线外面的东西，上下左右边距分别是top bottom right left
<style> .c9{ height:100px; width:100%; border:1px red solid; } .c0{ height:50px; width:100%; background-color:blue; } </style> <body style="margin:0"}> #margin:0就是body里的内容没有外边距，不加这个的话，默认是8px <!--外边距margin-top，相当于距离外层的上边框 自身往下移动了10px，自身的宽和高并没有变化--> <div class="c9"> <div class="c0" style="margin-top:10px"></div> </div> <!--内边距padding-top，相当于自身的height增加了10px，改变自身--> <div class="c9"> <div class="c0" style="padding-top:10px"></div> </div> </body>
5，Position:给页面分层，设置了position属性的标签，与页面就是两个层面了
（1）position:fixed 分层的绝对定位
<div style="height:48px;width:100px;background-color: blue；position:fixed"></div> #position:fixed,页面滚动时这个样式会固定不动 <div style="height:1000px;width:100px"></div> #这个是为了出现滚动条
<div style="height:1000px;width:100px;"></div> #height比较大时会出现滚动条； <div style="height:48px;background-color: blue；position:fixed;top:0;right:0;left:0"></div> #不设定宽度，页面滚动时，效果是页面顶端 左右端都固定一个高度48像素平铺的蓝色面；做固定条一般是这么做
<div style="height:48px;width:48px;background-color: blue；position:fixed;bottom:0;right:0"></div> #页面滚动时，页面右下角固定一个高宽48像素的蓝色平面，适用于页面“返回顶部”
（2）position和a标签 应用于返回指定的页面位置
<body> <div style="height:1000px;width:100%" id="i1">顶部</div> <div style="height:1000px;width:100%" id="i2">中间</div> #这里设置好id i1和i2的页面位置 <div style="height:48px;width:48px;position:fixed;bottom:0;right:0"> <a href="#i1">回到顶部</a> #在页面的右下角设置一个固定的回到顶部的小标签，a标签可以看作锚点，点击“回到顶部”，页面就可以到href链接到的页面位置 </div> <div style="height:48px;width:48px;position:fixed;bottom:0;left:0"> <a href="#i2">回到中间</a> #同上，回到“中间”的页面位置 </div> </body>
（3）设置了position:fixed层级，显示其他文案的方法
<div style="height:48px;width:100px;background-color: blue；position:fixed"></div> #在页面顶部设置固定层级 <div style="height:1000px;width:100px;margin-top:48px">11111</div> #挨着固定层级的这个div如果不加上margin-top:48px（高度和设置的固定层级高度一致），11111等文案会被固定层级盖住显示不出来
（4）position:relative absolute 层级的相对定位，这俩需要连用
<head> <style> .out{ height:400px; width:400px; border:4px red solid; position:relative; #外框不需要移动的大正方形是position:relative } .inner{ height:100px; width:100px; position:absolute; #里面需要移动定位的小正方形是position:absolute；这里每个小正方形和大正方形都是两个页面层级 } </style> </head> <body> <div class="out"> <div class="inner" style="background-color: blue;right:0;bottom:0"></div> #相对定位后，蓝色inner小正方形在out大正方形右下角 <div class="inner" style="background-color: red;left:0;bottom:0"></div> #左下角 <div class="inner" style="background-color: pink;right:0;top:0"></div> #右上角 <div class="inner" style="background-color: black;left:0;top:0"></div> #左上角 </div> </body>
（5）z-index设置层级的优先级，数值越大，该层就在最上面
<div class="out"> <div class="inner" style="background-color: blue;z-index:1"></div> #不设置z-index的话，页面上 黑色小正方形会覆盖在蓝色正方形上；加上z-index:1，层级优先级就高了，蓝色正方形就会在黑色上面 <div class="inner" style="background-color: black"></div> </div>
6，cursor属性 :pointer 鼠标悬浮样式
<input type="button" value="小手" style="cursor:pointer"> #cursor:pointer这个属性会让鼠标光标悬浮到按钮时变成一个小手
7，overflow三个属性
#当内部图片或内容超出外层div的宽和高时，overflow:auto会自动添加滚动条，不超出时就不添加 <div style="height:100px;width:100px;border: 1px red solid;overflow:auto"><img src="http://ui.xxxx"></div> #不管内部图片或内容小于或大于外层的宽和高时，overflow:scroll都会添加滚动条，没有auto灵活 <div style="height:100px;width:100px;border: 1px red solid;overflow:scroll"><img src="http://ui.xxxx"></div> #当内部图片或内容超出外层的宽和高时，overflow:hidden会自动裁剪出图片或内容的左上角；是自动的，不超过就不裁剪 <div style="height:100px;width:100px;border: 1px red solid;overflow:hidden"><img src="http://ui.xxxx"></div>
8，backgroud-image backgroud-repeat 设置背景图和背景图堆叠
<div style="height:200px;width:200px;border: 1px red solid;backgroud-image:url('http://xxxxx');backgroud-repeat:no-repeat"></div> #backgroud-image:url()这个属性是设置背景图；当内部图片小于外部边框时，有backgroud-repeat:no-repeat就不堆叠，只显示一张图，不加这个属性，图片就会堆叠满外部边框 #backgroud-repeat:repeat-x 这个属性是让背景图横向堆叠满外部边框
#backgroud-repeat:repeat-y 这个属性是让背景图纵向堆叠满外部边框
9，backgroud-position 调整图片在div框里的位置
<div style="height:10px;width:10px;border: 1px red solid;backgroud-image:url('http://xxxxx');backgroud-position:0 0"></div> #backgroud-position这个属性是给背景图分层，相当于背景图这一层在div框的后面，通过设置backgroud-position的数值，可以移动背景图片，让图片的某部分显示在div框里
