CSS四种导入方式：
① 行内样式 <p style=""> 行内样式 </p>
② 内嵌式 <head> <style type="text/css"> p{ 内嵌式 } <style> </head>
③ 链接式 <link href="css链接文件" type="text/css" rel="stylesheet"/>
④ 导入样式 @import url("css链接文件")；
CSS的选择器：
（标签选择器、类选择器、ID选择器、通配选择器、包含选择器、
子选择器、相邻选择器、兄弟选择器、分组选择器、属性选择器
伪类选择器（动态伪类、结构伪类、否定伪类、状态伪类、目标伪类））
<style type="text/css">
div{ color:Green;} /*元素样式*/
.blue{ color：Blue；} /*class样式*/
#header{ color:Gray; } /*id样式*/
div > span { ... } /*子选择器*/
p+h3{....} /* 相邻选择器*/
p~h3{....} /*兄弟选择器*/
h1,h2,h3{....} /*分组选择器*/
/*属性选择器*/：
E[attr]:只使用了属性名，但没有确定任何属性值。
E[attr="value"]：指定了该属性的属性值。
E[attr~="value"]：指定了属性名，并且具有属性值，此属性值是一个词列表。
E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的。
E[attr$="value"]：指定了属性名，并且有属性值，属性值是以value结尾的。
E[attr*="value"]：指定了属性名，并且有属性值，属性值中包含了value。
E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（如zh-cn）
/*伪类选择器*/
a：link{ ... } /*动态伪类*/
first-child：选择某个元素的第一个子元素。 /*以下是结构伪类*/
last-child：选择某个元素的最后一个字元素。
nth-child（）：选择某个元素的一个或多个特定的子元素。
nth-last-child（）：选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始计算。
nth-of-type（）：选择指定的元素。
nth-last-of-type（）：选择指定的元素，从元素的最后一个开始计算。
first-of-type（）：选择一个上级元素下的第一个同类子元素。
last-of-type（）：选择一个上级元素的最后一个同类子元素。
only-child（）：选择 的元素是它的父远元素的唯一一个子元素。
only-of-type（）：选择一个元素是它的上级元素的唯一一个相同类型的子元素。
empty（）：选择的元素里面没有任何内容。
/*否定伪类*/
E th：not(.end): 将括号中的排除应当设定的效果。
/*状态伪类*/
Enabled：文本框可写入。
Disabled：文本框不可写入。
Checked：匹配片段中单选按钮。
/*目标选择器*/
E：target : 地址栏输入相关属性，达到操控页面的效果。
CSS属性：
text-align：left；/*文本对齐方式*/
text-indent：2em； /*首行缩进2个文字大小空间*/
font-size：18px；/*设置字体大小*/
font-weight:bold/normal; /*字体加粗/取消加粗*/
margin：0 auto；/*火狐浏览器居中*/
margin-bottom：20px；/*段落下边距*/
line-height:25px；/*设置行高*/
color：#009900 /*设置颜色*/
font-family: "黑体" /*字体为黑色*/
font-style: italic /*字体效果为倾斜*/
background-color: /*设置背景色*/
/*CSS注释*/ /*CSS注释*/
padding: /*内边距大小*/
padding：0 20px; /*标签的左右间距*/
margin：/*外边距*/
text-decoration: none;underline;/*有无下划线*/
a:link：/*链接状态下的样式*/
a:vistted：/* 访问过的状态*/
a:hover： /*鼠标经过后的状态*/
a:active: /*鼠标击中激活时候的样式*/
a:foucs: /*获取焦点时候的样式，主要用来定义表单对象*/
float left; right;：/*浮动*/
position: absolute; (绝对定位) fixed;( 绝对定位) relative;(相对定位)
static;(默认值 没有定位) inherit;(从父类继承position属性的值) /*定位*/
bottom：/*该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移*/
opacity: 0.6;/*声明用来设置一个元素的透明度，1到0之间的任何值都表示该元素的透明程度。*/
display: block; /*指定对象为块元素*/
display：inline /*取消块属性*/
margin：/*置一个元素所有外边距的宽度，或者设置各边上外边距的宽度*/
z-index：定位元素。
cursor:pointer; /*设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。*/
font-variant: /*定义字体的大小写*/
text-transform: /*定义单词大小写样式*/
vertical-align: /*垂直对齐*/
letter-spacing /*属性定义字距*/
word-spacing: /*属性定义词距*/
text-shadow: /*定义文本阴影*/注：有四个值，1.水平偏移值2.垂直偏移值3.模糊值 4.投影颜色
white-space: nowrap; /*强制文本在一行显示*/
overflow：hidden; /*控制内容溢出范围*/
text-overflow; /*设置超长文本省略显示*/
line-break: /*专门负责控制日文换行*/
word-wrap: /*属性可以换行 */
word-break: /*属性主要针对亚洲语言和非亚洲语言进行控制换行*/
white-space: /*属性具有格式化文本的作用*/
color：initial: /*可以直接取消对某个元素的样式指定*/
visibility:hidden: /*设置元素不可见，但占据页面中其原本所应该占有的空间位置。*/
display:none; /*设置元素不可见，也不占据页面中任何空间位置*/
box-shadow:rgba(0,0,0,0.1) 0px 0px 8px; /*设置边框阴影*/
border:none; /*清除图像边框*/
border：width; style; color; radius； /*规定边框的样式*/
border-style:dotted; dashed; /*点线框样式类和虚线框样式类*/
background-image： /*定义背景图像*/
background-color： /*定义背景的颜色*/
background-origin: /*指定背景的显示区域*/
background-clip: /*指定背景的裁剪区域*/
background-repeat: /*设置背景图像是否及如何重复铺排*/
background-size: /*定义背景图像的大小*/
background-position: /*设置背景图像位置*/
background-break: /*定义平铺内联元素背景图像时的循环方式（过时）*/
background：-webkit-gradient(liner, .....) :/*Webkit渐变背景-线性渐变*/
background：-webkit-gradient（radial，...）: /*Webkit渐变背景-径向渐变*/
background：-moz-linear-grandient（）: /*Gecko线性渐变*/
background：-moz-radial-grandient（）: /*Gecko径向渐变*/
background: linear-gradient(...): /*W3C线性渐变*/
background：radial-gradient(...): /*W3C径向渐变*/
cursor: /*定义鼠标在指定对象上的样式*/
transform 和transition: /*实现在浏览器中旋转图片的功能*/
list-style： /*复合属性。设置列表项目相关内容*/
list-style-image: /*设置列表项目的符号图像*/
list-style-positon: /*设置列表项目符号显示的位置，根据文本在外排列，取值包括outside|inside*/
list-style-type: /*设置列表项目符号的类型*/
border-collapse:cpllapse; /*合并单元格边框*/
border-spacing:10px行间距 30px列间距; /*分割单元格边框*/
border-collapse：separate(边分开) collapse(边合并) /*定义表格的行和单元格的边是合并在一起还是按照标准的html样式分开*/
empty-cells:show：丨hide /*定义当单元格的caption对象位于表格的顶部或底部。应与caption一同使用*/
caption-side：/*定义表格的caption对象位于表格的顶部或底部*/
nth-of-type(odd)：/*奇数行*/
nth-off-type(even)：/*偶数行*/
border：/*定义边框*/
margin：/*定义外边距*/
padding：/*定义内边距*/
box-sizing: /*该属性能够事先定义盒模型的尺寸解析方式*/
resize:none: both | horizontal | vertical | inherit
overflow: /*属性定义当一个块级元素的内容溢出了元素的框时，是否剪切显示*/
outline: /*属性可以定义块元素的轮廓线，offset定义轮廓边框偏移位置*/
border-image：/*来模拟background-image属性功能*/
float: none | left | right：/*属性定义元素向左或向右浮动*/
clear：left | right | both | none：/*可以清除浮动，定义与浮动相邻的元素在必要的情况下换行显示，这样可控制浮动元素挤在一行内显示*/
position：static | relative | absolute | fiexd /*定义元素定位显示*/
z-index: /*用来确定定位元素的层叠等级 声明：只有在position属性取值为relative、absolute、fiexd时才可以使用*/
columns: /*属性定义多列布局*/
column-width：length | auto /*可以定义单列显示的宽度*/
column-count: integer | auto /*属性定义列数*/
column-gap: normal | length /*属性定义两栏之间的间距*/
column-rule: length | style | color | transparent(边框透明显示) /*属性定义每列之间边框的宽度、样式和颜色*/
column-span none | all /*属性定义跨列显示，也可以设置单列显示*/
column-fill：auto | balance /*属性定义栏目的高度是否统一*/
display:flex |inline-flex /*通过设置元素flex或inline-flex可以得到一个伸缩容器*/
flex-direction：row|row-reverse|column|column-reverse /*属性主要用来创建主轴，从而定义伸缩项目在伸缩容器内的放置方向*/
flex-wrap: nowrap|wrap|wrap-reverse /*主要用来定义伸缩容器里是单行还是多行显示，侧轴的方向决定了新行堆放的方向*/
flex-flow: /*flex-direction和flex-wrap的复合属性*/
justify-content：flex-start|flex-end|center|space-between|space-around /*用来定义伸缩项目沿着主轴线的对齐方式，该属性适用于伸缩容器*/
align-items:flex-start|flex-end|center|baseline|stretch /*主要用来定义伸缩项目可以在伸缩容器的当前行的侧轴上的对齐方式，该属性适用于伸缩容器*/
align-content: flex-start|flex-end|center|space-between|space-around|stretch /*主要用来调准伸缩行在伸缩容器里的对齐方式，该属性适用于伸缩容器*/
order: /*可以控制伸缩项目在它们的伸缩容器出现的顺序，该属性适用于伸缩项目*/
flex-grow: /*可以根据需要用来定义伸缩项目的扩展能力，该属性适用于伸缩项目*/
flex-shrink: /*可以根据需要来定义伸缩项目收缩的能力，该属性适用于伸缩项目*/
flex-basis: /*用来设置伸缩基准值，剩余的空间按比率进行伸缩，该属性适用于伸缩项目*/
align-self: auto|flex-start|flex-end|center|baseline|stretch: /*用来在单独的伸缩项目上覆写默认的对齐方式*/
transform:rotate(-90deg); /*函数能够旋转指定的元素对象，它主要在二维空间内进行操作，接收一个角度参数，用来指定旋转的幅度*/
transform:scale(1.5); /*能够缩放元素大小，该函数包含两个参数值，分别用来定义宽和高缩放比例*/
transform:translate(4px,4px); /*能够重新定位元素的坐标，该函数包含两个参数值，分别用来定义x轴和y轴坐标*/
transform:skew(30deg, -10deg); /*函数能够让元素倾斜显示，该函数包含两个参数值，分别用来定义x轴和y轴坐标倾斜的角度*/
transform:matrix(1, 0.4, 0 , 1, 0, 0 ); /*是矩阵函数，调用该函数可以非常灵活的实现各种变换效果，如倾斜（skew）缩放（scale）旋转（rotate）位移（translate）*/
transform-origin: 0 0; /*可以将原点设置在对象左上角或者左下角等，改变中心点的效果*/
perpective:1200px; /*3d应用：设置舞台，定义观察者距离*/
transform-style：preserve-3d; /*创建三维空间*/
translate3d(tx,ty,tz); /*函数使一个元素在三维空间移动*/
translateZ(t); /*功能是让元素在3d空间沿着z轴进行位移*/
scaleZ()和scale3d(sx,sy,sz); /*主要用于定义缩放，需要配合其他变换函数一同使用才有效果 scale3d（1,1，sz ）; == scaleZ(sz);*/
rotateX(45deg)和rotateY(45deg)和rotateZ(45deg); == rotate3d(.6, 1,.6,45deg); /*分别位于X轴、Y轴、Z轴定义旋转*/
hover: /*最常用的过渡触发方式是使用hover （鼠标经过的元素）*/
active: /*表示用户单击某个元素并按住鼠标按钮时显示的状态 （鼠标点击元素时）*/
focus: /*通常会在表单对象接收键盘响应时出现，输入框获取焦点时 （元素被选中时）*/
checked: /*当复选框被选中时触发*/
@media only screen and (max-width : 420px){...} /*媒体查询 让窗口发生变化时，将触发过渡动画*/
animation-name: /*属性定义CSS动画的名称*/
animation-duration: /*属性定义CSS动画播放时间*/
animation-timing-function: /*属性定义CSS动画类型*/
animation-delay: /*属性定义CSS动画延迟播放的时间*/
animation-iteration-count: /*属性定义CSS动画的播放次数*/
animation-direction: /*属性定义CSS动画的播放方向*/
animation-play-state: /*属性定义动画正在运行，还是暂停*/
animation-fill-mode: /*属性定义动画外状态*/
@keyframes ball { 0% {left:0;top:0;}
25% {left:200px;top:0;}
50% {left:200px;top:200px;}
75% {left:0;top:200px;}
100% {left:0;top:0;}}