前端—初级阶段2(5-8)

内容介绍

1. CSS选择器(基本、层级、属性、伪类、伪状态)
2. CSS常用样式属性
3. CSS3 过渡、变换、动画
4. CSS3 3D场景搭建与应用

一、CSS选择器

CSS选择器一共有五种:基本、层级、属性、伪类、伪元素 CSS选择器参考手册

1.基本选择器

• 通配符/全局选择器 *
• ID选择器 #Id
• class选择器 .classname
• 元素选择器 element
• 群组选择器 element,element

2.层级选择器

• 后代选择器 selecter selecter
• 子元素选择器 selcter>selecter 所有子元素 测试
• 相邻兄弟选择器 selecter+selecter 就下面的一个 测试
• 通配兄弟选择器 selecter1~selecter2 selecter1之后出现的所有selecter2 测试

3.属性选择器

• selecter[attr] 包含attr属性的元素 测试
• selecter[attr=val] arrt属性值是val的元素 测试
• seldcter[attr^=val] attr属性值是以val开头的元素 测试
• selecter[attr$=val] attr属性值是以val结束的元素 测试
• selecter[attr~=val] attr属性值val 或 包含val（两个值以空格隔开，其中一个是val) 测试
• selecter[attr*=val] attr属性值中包含val的元素,只要有这个字母就可以 测试
• selecter[attr|=val] attr属性值中带有以val开头的元素,val值必须是整个单词 测试

4.伪类选择器

1) 动态伪类选择器

• :link 未访问的链接 测试
• :visited 已访问的链接
• :hover 鼠标移动到链接上
• :active 选定的链接
• :focus 焦点 测试

提示:在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
a:active 必须被置于 a:hover 之后，才是有效的。

2) 目标伪类选择器

• :target 选取当前活动的目标元素测试
  URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)

3) 语言伪类选择器

• :lang 用于选取带有以指定值开头的 lang 属性的元素 测试

4) UI元素伪类选择器 （大多用在表单元素上）

• :enabled 匹配已启用的元素测试
• :diabled 匹配被禁用的元素
• :checked 匹配已被选中的input元素（只用于单选按钮和复选框）测试

5) 结构伪类选择器

• :first-child 父元素中第一个子元素 测试
• :last-child 父元素中最后一个子元素 测试
• :first-of-type　父元素中第一个类型(等于:nth-of-type(1)) 测试
• :last-of-type　 父元素中最后一个类型(等于:nth-last-of-type(1) 测试
• :only-child　父元素中有唯一子元素 测试
• :only-of-type 父元素中有唯一子类型测试
• :nth-child(n) 父元素中第n个子元素 测试
• :nth-last-child(n) 父元素中第n个子元素(从最后一个子元素开始计数) 测试
• :nth-of-type(n)　父元素中第n个子类型　测试　　　　　　　　
• :nth-last-of-type(n) 父元素中第n个子类型(从最后一个子类型开始计数)测试　　　　　　　
• :empty 匹配空的元素(父元素中没有有子元素和内容)测试
• :root 匹配文档根元素(在HTML中根元素始终是html元素)测试

6) 否定伪类选择器

• :not(selecter) 匹配非指定元素/选择器的每个元素测试

5.伪元素选择器

• ::first-letter 选择首字母 测试
• ::first-line 选择首行 测试
• ::before 在元素之前添加内容，默认行内元素
• ::after 在元素之后添加内容，默认行内元素
• ::selection 匹配被用户选取的内容(应用CSS 属性：color,background,cursor,outline) 测试
• ::-webkit-input-placeholder 改变表单的默认样式

---

伪类与伪元素的特性及其区别：

1. 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
2. 伪元素本质上是创建了一个有内容的虚拟容器；
3. CSS3中伪类和伪元素的语法不同；
4. 可以同时使用多个伪类，而只能同时使用一个伪元素，并且只能出现在最后；（a:first-child:hover ；p:hover::first-letter ）

6.优先级

• 内联样式(1000)>id选择器(100)>类选择器，属性选择器，伪类选择器(10)>标签选择器、伪元素选择器(1)
• 提高优先级的方法：使用!important关键字

二、CSS常用样式属性

css属性参考手册

1.box(盒子)

• 宽度 width: 长度 | 百分比 | auto;
• 高度 height: 长度 | 百分比 | auto;
• 边界 margin: 上 右 下 左 ;
• 填充 padding: 上 右 下 左 ;
• 定位 position: absolute | relative | static;
• 是否可见 visibility: inherit | visible | hidden;(会占据页面上的空间)
• 类型 display: block| inline| inline-block|flex|none; flex图片
• 溢出 overflow: visible | hidden | scroll auto;
• 浮动 float: left | right | none;清除浮动
• 阴影 box-shadow: h-shadow(水平阴影位置) v-shadow(垂直阴影位置) blur(模糊距离) spread(阴影尺寸) color(阴影颜色) inset|outset;阴影测试

2.font（字体）

• 颜色 color: 数值;
• 大小 font-size: 数值;
• 字体 font-family: 宋体,sans-serif;
• 样式 font-style: italic;(斜体) normal;(正常)
• 粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)
• 变体 font-variant: small-caps;(小型大写字母) normal;(正常)
• 行高 line-height :数值;
• 字间距 letter-spacing : 数值;

3.text（文本）

• 大小写 text-transform: capitalize(首字大写) | uppercase(英文大写) | lowercase(英文小写) | none;
• 修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线)
• 排列 text-align: justify | left | right | center;
• 缩进 text-indent: 数值 | inherit;
• 阴影 text-shadow:数值;

4.background（背景）

• 颜色 background-color: 数值;
• 图片 background-image: url() | none;
• 重复 background-repeat: no-repeat | repeat | repeat-x | repeat-y;
• 滚动 background-attachment: fixed | scroll;
• 尺寸 background-size:length|percentage|cover|contain;
• 位置 background-position:数值 | top | bottom | left | right | center;
• 简写 background:背景颜色 | 背景图象 | 背景重复 | 背景附件 | 背景位置 ;
• 多值 background:url(a.jpg') no-repeat fixed center , url('a.jpg') no-repeat fixed top;
  background-size:300px 300px,100px 100px;

5.border（边框）

• 样式 border-style: solid;dotted;(点线) dashed;(虚线) double;(双线) ;
• 宽度 border-width: 数值;
• 颜色 border-color: top值 right值 bottom值 left值;
• 简写 border: width style color;

6.list-style（列表样式）

• 类型 list-style-type: disc(实心圆形) | circle(空心圆形) | square(实心方形) | decimal(数字) |none;
• 位置 list-style-position: outside | inside;
• 图像 list-style-image: URL;
• 简写 list-style:样式类型 | 样式位置 | url;

三、CSS3 过渡、变换、动画

1.变换transform

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

1) 移动translate:将元素从原来的位置移动到指定位置 测试

• 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轴的值来缩放转换。测试
• scaleY(y) 设置Y轴的值来缩放转换。测试
• scaleZ(z) 设置Z轴的值来3D缩放转换。

3) 旋转rotate：指定需要进行旋转的坐标轴, angle 表示旋转角度

• rotate(angle) 2D 旋转 测试
• rotate3d(x,y,z,angle) 3D 旋转。
• rotateX(angle) 沿着X轴的 3D 旋转。测试
• rotateY(angle) 沿着Y轴的 3D 旋转。测试
• rotateZ(angle) 沿着Z轴的 3D 旋转。

4) 倾斜skew(x-angle,y-angle) 能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。skew图片说明

• skew(x-angle,y-angle) 沿着X和Y轴的2D倾斜转换。测试
• skewX(angle) 沿着X轴的2D倾斜转换。 测试
• skewY(angle) 沿着Y轴的2D倾斜转换。测试

2.过渡transition

• 参与属性 transition-property ：none|all| property(多个属性名以逗号分隔)
• 持续时间 transition-duration：time(秒或毫秒)，默认是0
• 转速曲线 transition-timing-function 测试
  linear以相同速度开始至结束的过渡效果。
  ease 慢速开始，然后变快，然后慢速结束的过渡效果
  ease-in 以慢速开始的过渡效果
  ease-out 以慢速结束的过渡效果
  ease-in-out以慢速开始和结束的过渡效果
  cubic-bezier(n,n,n,n)定义自己的值。可能的值是 0 至 1 之间的数值。
• 延迟时间 transition-delay：time(秒或毫秒)，默认是0

简写 transition: property duration timing-function delay;测试

3.动画animation

可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果.测试

1)必要元素

• 通过@keyframes指定动画序列；自动补间动画，确定两个点，系统会自动计算中间过程。这两个点就称为关键帧。我们可以设置多个关键帧
• 通过百分比将动画序列分割成多个节点；
• 在各节点中分别定义各属性
• 通过animation将动画应用于相应元素；

2)animation样式属性

• 动画名称 animation-name：move
• 持续时长 animation-duration : 1s ;默认是 0。
• 播放速度 animation-timing-function: linear;默认是 "ease" 测试
• 延时时间 animation-delay: 1s; 默认是 0。注意：animation: move 3s linear 0 2 ;(不执行) =>animation: move 3s linear 0s 2 ;
• 播放次数 animation-iteration-count: n|infinite; 默认是 1。
• 播放方向 animation-direction: normal|reverse|alternate|alternate-reverse;测试
• 播放完的状态 animation-fill-mode: none | forwards(最后一个关键帧) | backwards(第一个关键帧) | both;测试
• 播放状态 animation-play-state: paused|running;默认是 "running"。测试

animation所有动画属性的简写属性，除了 animation-play-state 属性。
简写animation: name duration timing-function delay iteration-count direction fill-mode; （默认值none 0 ease 0 1 normal none）

四、3D场景搭建与应用

1.属性介绍

perspective: number|none; 3D元素距视图的距离，以像素计
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.5px
backface-visibility:visible|hidden; 当元素不面向屏幕时是否可见。测试

2.坐标轴的概念

• 坐标系原点在左上角,x轴的正方向是向右,y轴正方向是向下,z轴正方向是从屏幕到人的眼睛(垂直)

3.应用

CSS3实现3D开门动画效果
图片的旋转木马效果
CSS3 3D transform变换
张鑫旭博客