CSS基础
一、引入方式（只介绍两种常用的）
1、直接在HTML的head标签写<style></style>添加样式
2、在head中引入CSS文件： <link href="xx.css" type="text/css" rel="stylesheet" >
二、选择器
1、标签、id、class选择器
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>TEST</title>
6 <style>
7 /*标签选择器*/
8 p{
9 color: blue;
10 }
11 /*id选择器*/
12 #Myid{
13 color: red;
14 }
15 /*class选择器,为所有的class="Myclass2"的加样式*/
16 /*也可以用 div.Myclass2来表示为div标签的class为Myclass2的加样式*/
17 .Myclass2{
18 color: red;
19 background-color: black;
20 }
21 </style>
22 </head>
23 <body>
24 <P>标签选择器</P>
25 <p id="Myid">id选择器（id是唯一的不可以重复）</p>
26 <div class="Myclass1">class选择器（名称可以重复，也可以有多个）1</div>
27 <div class="Myclass1 Myclass2">class选择器（名称可以重复，也可以有多个）2</div>
28 </body>
29 </html>
2、组合选择器
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>TEST</title>
6 <style>
7 /*逗号表示同时样(可以多个组合)*/
8 p,div{
9 color: brown;
10 background-color: blue;
11 }
12 /*为css1后代所有的div标签加红色背景*/
13 .css1 div{
14 color: brown;
15 background-color:red;
16 }
17 /*为css1的子代所有的div标签加白色背景*/
18 .css1>div{
19 color:black;
20 background-color:white;
21 }
22 /*为紧挨着css2的P标签（兄弟标签）加上绿色的背景*/
23 .css2+P{
24 color:black;
25 background-color:green;
26 }
27 </style>
28 </head>
29 <body>
30 <p>与小div爷爷同级的p</p>
31 <div class="css1">我是是小div爷爷！
32 <div>我是小div的爸爸！
33 <div class="css2">我是小div！</div>
34 <p>我是小div的兄弟，小p</p>
35 </div>
36 </div>
37 </body>
38 </html>
3.伪装类选择器
.xx:after{} #在xx后加样式
.xx:befre{} #在xx之前加样式
.xx:hover{} # 鼠标放上去加样式 （border:2px solid red; 鼠标放上去有一个红的框）
.xx:ative{}
4.常用的Css属性
1、visibility：hidden #隐藏 但是还是会占高度配合height：0；使用
display：none #隐藏不占高度
下面代码可以用来既然保留xx的背景、又可以float（免去clear: both;的麻烦）
1 .xx:after{ 2 content: "111"; 3 clear: both; 4 display: block; 5 visibility: hidden; 6 height: 0; 7 background-color: green; 8 }
2、display inline； #块级变内联，（无法使用高度等属性）
display block； #内连变块级
dispaly inline-block #内联，可以使用高度等属性
3、z-index：num；#num代表数字。指定层级，显示大的
4、margin:0 auto; #用来使div居中
5、padding：1px，2px，3px，4px； #代表上右下左的内边距（顺时针）
6、text-decoration：none； #去掉下划线
7、line-height: 44px; #如有一个44px的div，现在要将里面的文字居中就是用line-height属性
8、float属性
1.脱离文档流
2.如果该标签前面一个是块级标签，会飘到下一行的开始处。如果前一个也是float属性的，则会紧挨着上一个标签。
3.clear：left； #清除桌边的漂浮 （clear只能控制自己本身）
clear：both； #表示允许浮动，（如：在子标签都浮动起来后，父标签会失去背景，因为没有内容去撑起来，这时用clear：both清除即可）
9、position属性
1.position:static; #按文档流排
2.position:fixed; #将该标签固定（相对于html的位置固定不变）如果将top、right、bottom、left都设置为0 就表示离上下左右的距离都是0既覆盖整个页面
3.relative：top/bottom/left/right;(改变相对位置，文档流的位置不会被替换，表现为空白)
如：position：relative；right：100px; #表示相对于文档流位置向左移动100像素
4.position：absoulte #与relative用法一致；他会一层层网上去找relative属性（利用left、top等来改变与其的相对位置）利用伪类after效果更佳。
10、display:none与visibility：hidden
都表示隐藏；但是display隐藏不占高度，visibility：hidden会占高度
11、opacity与background：rgba
都是用来设置透明度的如opacity：0.6 、background：rgba（0,0,0,0.6）
5.其他
<style>
p[name1 ="xx1"]{/*加样式*/}
</style>
.......
<p name1="xx1">
----------------------------------------------
# 有多个名字，找其中的某个
<style>
p[name1^ ="xx2"]{/*加样式*/}
</style>
.......
<p name1="xx1 xx2">
----------------------------------------------
# 找一XX1开头的（| 代表找以什么开头的）
<style>
p[name1| ="xx1"]{/*加样式*/}
</style>
.......
<p name1="xx1-xx2">
