内容介绍CSS选择器（基础、分层、属性、伪类、伪状态）CSS常用样式属性CSS3过渡、变换、动画CSS33D场景构建与应用一、CSS选择器CSS选择器有五种类型：基本、层次、属性、伪类、伪元素CSS选择器参考手册1.基本选择器通配符/全局选择器*ID选择器#Idclass选择器。组选择器元素，element2。层次选择器后代选择器选择器子元素选择器selector>selecter所有子元素测试相邻兄弟选择器selecter+selecter下面测试通配符兄弟选择器selecter1~selecter2afterselecter1出现的所有selector2测试3.属性选择器selector[attr]被选中的元素包含attr属性Testselector[attr=val]arrt属性值为val的元素Testseldcter[attr^=val]attr属性值以val开头的元素Testselector[attr$=val]attr属性值为以val结尾的元素withvalTestselector[attr~=val]attr属性值为val或包含val（两个值用空格隔开，其中一个为val）Testselector[attr*=val]中包含val的元素attr属性值只要有这个字母就可以测试Selector1）动态伪类选择器：linkunvisitedlinktest:visitedvisitedlink:hovermouseoverlink:activeselectedlink:focusfocustesthint:在CSS定义中，a:hovermust只有放在a:link和a:visited之后才有效。a:active必须放在a:hover之后才有效。2）target伪类选择器：target选择当前激活的目标元素。测试URL后跟锚名称#，指向文档中的特定元素。被链接的元素就是目标元素（targetelement）3）语言伪类选择器：lang用于选择lang属性以指定值开头的元素4）UI元素伪类选择器（多用在表单元素上面）:enabled匹配enabled元素test:disabled匹配disabled元素:checked匹配已经被选中的input元素（只针对单选按钮和复选框）test5)结构伪类选择器：first-child测试父元素中的第一个子元素:last-child父元素中的最后一个子元素测试：first-of-type 父元素中的第一个类型（等于：nth-??of-type(1)）测试:last-of-type 父元素中的最后一个类型（等于：nth-??last-of-type(1)Test:only-child 父元素中有一个唯一的子元素Test:only-of-type有父元素中唯一的子类型Test:nth-child(n)父元素中的第n个子元素Test:nth-last-child(n)父元素中的第n个子元素（从最后一个子元素算起）test:nth-of-type(n) 父元素中的第n个子类型 test :nth-last-of-type(n)父元素中的第n个子类型（从最后一个开始subtypecount)test :empty匹配一个空元素（父元素中没有子元素或内容）test:root匹配文档根元素（root元素在HTML中总是html元素）test6)否定伪类选择器：not(selecter)匹配每一个不是指定元素/选择器的元素Test5.伪元素选择器::first-letter选择首字母Test::first-line选择第一行Test::before在元素之前添加内容，默认为inlineelement::after在元素之后添加内容，默认为inlineelement::selection匹配用户选择的内容（应用CSS属性：颜色、背景、光标、轮廓）test::-webkit-input-placeholder改变表单默认样式伪类和伪元素的特点和区别：伪类本质上是为了弥补常规CSS选择器的不足，以获得更多的信息；伪元素本质上是创建一个包含内容的虚拟容器；伪类和CSS3伪元素有不同的语法；多种的伪类，但同时只能使用一个伪元素，而且只能出现在末尾；(a:first-child:hover;p:hover::first-letter)6.优先内联样式(1000)>id选择器(100)>类选择器、属性选择器、伪类选择器(10)>标签选择器、伪元素选择器（一）提高优先级的方法：使用!important关键字2.CSS常用样式属性css属性参考手册1.box（盒子）widthwidth:length|百分比|汽车;高度高度：长度|百分比|汽车;边框边距：右上左下；填充：右上左下；定位位置：绝对|相对|静止的;可见或不可见：inherit|可见|隐;(会占用页面空间)typedisplay:block|内联|内嵌块|flex|none；fleximageoverflow溢出：可见|隐藏|自动滚动；浮动浮动：左|对|没有任何;clearfloatingshadowbox-shadow:h-shadow(水平阴影位置)v-shadow(垂直阴影位置)blur(模糊距离)spread(阴影大小)color(阴影颜色)inset|outset;阴影测试2.font(字体)颜色color:value;大小字体大小：值；字体font-family:Arial,sans-serif;样式字体样式：斜体；（斜体）正常；(normal)thicknessfont-weight:bold;(bold)lighter;(thin)normal;(normal)variantfont-variant:small-caps;(smallcaps)normal;(normal)lineheightline-height:value;字间距letter-spacing:Value;3.文本（text）大写text-transform：capitalize（大写）|大写（大写）|小写（小写）|不没；修改文字装饰：下划线；（下划线）上划线；（上划线）划线；（删除线）排列文本对齐：对齐|左|对|中心;缩进文本缩进：值|继承;阴影文字-shadow:value;4.background（背景）颜色background-color:value;图像背景图像：url()|没有任何;重复背景重复：不重复|重复|重复-x|重复-y；滚动背景附件：已修复|滚动;大小背景大小：长度|百分比|覆盖|包含；位置背景位置：值|顶部|底部|左|对|中心;缩写背景：背景色|背景图片|背景重复|背景附件|背景位置；多值背景：url(a.jpg')no-repeatfixedcenter,url('a.jpg')no-repeatfixedtop;background-size:300px300px,100px100px;5.border(边框)样式border-style:solid;dotted;(dottedline)dashed;(dottedline)double;(doubleline);widthborder-width:value;colorborder-color:topvaluerightvaluebottomvalueleftvalue;简写border:widthstylecolor;6.list-style（列表样式）类型list-style-type:disc（实心圆）|圆（空心圆）|正方形（实心正方形）|decimal(number)|none;positionlist-style-position:outside|里面;图像列表样式图像：URL；缩写list-style：样式类型|风格定位|网址；三、CSS3transition、transform、animation1.Transformationtransformtransform属性对元素应用2D或3D变换这个属性允许我们旋转、缩放、移动或倾斜元素。1）Movetranslate：将元素从原位置移动到指定位置测试translate(x,y)2D变换。translate3d(x,y,z)3D平移。translateX(x)用X轴的值进行平移。translateY(y)用Y轴的值进行平移。translateZ(z)3D平移仅使用Z轴的值。2）缩放scale：根据中心原点缩放元素，测试scale(x,y)2D缩放变换。scale3d(x,y,z)3D缩放变换。scaleX(x)设置X轴值以缩放变换。testscaleY(y)设置Y轴的值以缩放变换。TestscaleZ(z)设置3D缩放变换的Z轴值。3）Rotaterotate：指定需要旋转的坐标轴，angle表示旋转角度rotate(angle)2Drotationtestrotate3d(x,y,z,angle)3Drotation。rotateX(angle)沿X轴的3D旋转。测试rotateY(angle)沿Y轴的3D旋转。测试rotateZ(angle)沿Z轴的3D旋转。4)Obliqueskew(x-angle,y-angle)可以使元素倾斜显示。它可以使物体以其中心位置绕X轴和Y轴按一定角度倾斜。skewimagedescriptionskew(x-angle,y-angle)沿X轴和Y轴的2D倾斜变换。测试沿X轴的2D倾斜变换的skewX(angle)。测试沿Y轴的2D倾斜变换的skewY(angle)。测试2.Transition过渡参与属性transition-property:none|all|property（多个属性名用逗号隔开）durationtransition-duration：时间（秒或毫秒），默认为0speedcurvetransition-timing-functiontestlinear以相同速度开始和结束的过渡效果。ease开始缓慢，变得更快，结束缓慢的过渡ease-in开始缓慢ease-out结束缓慢ease-in-out开始和结束的过渡slowcubic-bezier(n,n,n,n)定义了它自己的值。可能的值是0到1之间的数值。延迟时间transition-delay：时间（秒或毫秒），默认为0简写transition：属性duration时序-函数delay；测试3.Animation动画可以通过设置多个节点来精确控制一个或一组动画，常用于实现复杂的动画效果。测试1）必要元素通过@keyframes指定动画顺序；自动补间动画，确定两点，系统自动计算中间过程。这两点称为关键帧。我们可以设置多个关键帧，将动画序列按百分比划分为多个节点；定义每个节点中的每个属性，并通过动画将动画应用到相应的元素上；2)动画样式属性动画名称animation-name:movedurationanimation-duration:1s;默认为0。播放速度animation-timing-function:linear;默认为“ease”测试延迟animation-delay:1s;默认为0。注意：动画：移动3秒线性02；（未执行）=>动画：移动3秒线性0秒2；播放次数animation-iteration-count：n|infinite；默认为1。播放方向animation-direction:normal|reverse|alternate|alternate-reverse;测试播放后的状态animation-fill-mode:none|转发（最后一个关键帧）|向后（第一个关键帧）|两个都;测试播放状态animation-play-state:paused|running;默认为“运行”。用于测试除animation-play-state属性之外的所有动画属性的动画的速记属性。速记动画：namedurationtiming-functiondelayiteration-countdirectionfill-mode；（默认值none0ease01normalnone）四、3D场景构建及应用1、属性介绍perspective:number|none;3D元素距视图的距离Distance，以像素为单位perspective-origin:50%50%3D元素所基于的X轴和Y轴。用于更改3D元素的底部位置。为元素定义perspective和perspective-origin属性时，其子元素会得到透视效果，而不是元素本身transform-style:preserve-3d;设置3D，调整元素在3维空间transform-origin:x(left/center/right/length/%)y(top/center/bottom/length/%)z(length);调整旋转中心默认值为(50%50%0)测试用例-边框设置0.5pxbackface-visibility:visible|hidden;元素不面向屏幕时是否可见。测试2.坐标轴概念坐标系原点在左上角，x轴正向向右，y轴正向向下，z轴是从屏幕到人眼（垂直）3.应用CSS3实现3D开门动画效果图片轮播效果CSS33D变换张新旭博客
