内容介绍
- CSS选择器(基本、层级、属性、伪类、伪状态)
- CSS常用样式属性
- CSS3 过渡、变换、动画
- 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) 动态伪类选择器
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
a:active 必须被置于 a:hover 之后,才是有效的。
2) 目标伪类选择器
- :target 选取当前活动的目标元素测试
URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)
3) 语言伪类选择器
- :lang 用于选取带有以指定值开头的 lang 属性的元素 测试
4) UI元素伪类选择器 (大多用在表单元素上)
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 改变表单的默认样式
伪类与伪元素的特性及其区别:
- 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息;
- 伪元素本质上是创建了一个有内容的虚拟容器;
- CSS3中伪类和伪元素的语法不同;
- 可以同时使用多个伪类,而只能同时使用一个伪元素,并且只能出现在最后;(a:first-child:hover ;p:hover::first-letter )
6.优先级
- 内联样式(1000)>id选择器(100)>类选择器,属性选择器,伪类选择器(10)>标签选择器、伪元素选择器(1)
- 提高优先级的方法:使用!important关键字
二、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图片说明
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轴正方向是从屏幕到人的眼睛(垂直)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。