三种CSS使用方法：
外部：<link rel="" href="">
内部：<style>
h{
color: red;
}
</style>
行内：<p style="text-align:conter; color:red">文字</p>
基本选择器：
标签选择器：
<style>
h1{
color:red;
background:green;
border-radius: 5em;
padding: 5em;
}
</style>
类选择器：
.zx{
color:red;
}
id选择器：
#zx{
color:red;
}
id选择器>class选择器>标签选择器
使用时 <h(标签) class="类选择" / id="id选择"></h>
层次选择器：
后代选择器：（body下的所有 p标签）
body p{
background:red;
}
子代选择器：(body下的第一代--子代 p标签， 在ul,ol中的p不算)
body>p{
background: green;
}
兄弟选择器：（action下的第一个P标签）
.action+p{
background:blue;
}
相邻选择器：（active下的所有一级p标签）
.active~p{
background:purple;
}
结构伪类选择器：
选中ul第一个和最后一个元素
ul li:first-child{
background: #148aff;
}
ul li:last-child{
background: #148aff;
}
选择父类为p的第一个元素
p:nth-of-type(1){
background: purple;
}
属性选择器：
. demo a{
float:left;(浮动：向左)
display:block;(类型：块元素)
height:50px;(高：50像素)
width:50;(宽：50像素)
border-radius:15px;(模型圆角：15像素)
background:red;
text-align:conter;(文字居中)
color:purple;
text-decoration:none;(下划线格式：无)
margin-right：5px;(右外边距：5px)
font:bold 20px/50px Arial;
}
CSS作用及字体样式：
font-family:楷体;(字体)
font-size:50px;(字体大小)
font-weight:bold;(字体粗细)
color:red;(字体颜色)
px--像素单位 em--字体缩进单位
font: oblique bolder 12px "楷体";
字体格式（斜体/正体等） 字体粗细 字体大小 字体格式（楷体/宋体等）
文本样式：
颜色：1.单词 2.RGB 0~F 3.RGBA A 0~1
<style>
p{
color: rgba(0,255,255,0.5);
text-indent: 2em;(首行缩进)
下划线：text-decoration:underline;
中划线：text-decoration:line-through;
上划线：text-decoration:overline;
去下划线：text-decoration:none;
水平对齐：vertical-align:middle;
}
</style>
文本阴影和超链接伪类：
<style>
默认：a{text-decoration:none;
color:#000000;}
鼠标悬停状态：a:hover{color:orange;
font-size:50px;}
鼠标按住未放状态：a:active{color:green;
}
</style>
阴影颜色:
#price{
text-shadow: #3cc7f5 10px 10px 2px;
}
背影图像应用及渐变：
设置div块背景图：
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("resources/OIP-C2.jpg");
}
图形平铺：repeat-x--水平平铺 repeat-y--垂直平铺 repeat--平铺
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: repeat;
}
渐变：
background: #ffffff; background-image: linear-gradient(115deg,#ffffff 0%,#6284ff 50%,#ff0000 100%);
盒子模型及边框应用：
margin:外边距 padding:内边距 border:边框
边框粗细/样式/颜色
border: 1px solid black;
内外边距及div居中：
margin: 0 auto;
margin + border + padding + 内容宽度。
圆角边框及阴影：
圆角边框：border-radius： 50px;（顺时针四个角 配置）
阴影：向右 向下 半径 颜色
box-shadow:20px 10px 2px yellow;
display和浮动：
块级元素：独占一行 h1~h6 div p 列表
行级元素：不独占一行 span img a strong ...
display：inline-block;(行级和块级)
float：right;(向右浮动 脱离父级元素的)
overflow及父级边框塌陷问题：
clear:right;右侧不允许有浮动元素 left(左侧) both(两边)
1.增加父级元素高度
2.增加空标签----clear：both;
3.使用溢出符号： overflow:scroll;
4.父类添加伪类：after
相对定位：（以父级元素做参照）
position: relative;
绝对定位：（以当前浏览器界面做参照）
position: absolute;
固定定位：（固定在界面的某个位置）
position： fixed;
z-index及透明度：
透明度：opacity: 0.5;
z-index：z-index: 777;（取值0~1000）