一、CSS3 新增选择器
1、子级选择器
子级选择器用于选取带有特定父元素的元素。
书写语法:element1 > element2
注意:如果 element2 元素不是父元素 element1 的直接子元素,则不会被选择。
> 符号之前书写父级的选择器,> 符号之后写子级选择器,必须满足父子级关系才能选中标签。
div>p {
color: red;
}
2、兄弟选择器
选择器 | 简介 |
element1+element2 | 匹配同一个父元素中紧跟在element1后面的一个element2元素 |
element1~element2 | 匹配同一个父元素中在element1后面的所有element2元素 |
相邻兄弟选择器
- 相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素,而且二者有相同的父元素。
- 书写语法:E1 + E2。
- 注意:
- 选中的是紧跟在 E1 之后的同级元素 E2。
- 只能选中紧跟在后面的一个 E2 元素。
- 二者有相同的父元素。
- + 符号前后可以添加空格书写。
h1 + p {
margin-top: 50px;
}
其他兄弟选择器
- 其他兄弟选择器匹配同一个父元素中在 element1 后面的所有 element2 元素。
- 书写语法:element1~element2
- 注意:
- 选择 element1 之后出现的所有 element2。
- 两种元素必须拥有相同的父元素,但是 element2 不必直接紧随 element1。
- ~ 符号前后可以添加空格书写。
h2 ~ p {
background: #ff0000;
}
3、结构伪类选择器
nth-child(n)
- n 可以是数字,关键字和公式
- n 如果是数字,就是选择第 n 个
- 常见的关键词 even 偶数 odd 奇数
- 常见的公式如下 ( 如果 n 是公式,则从 0 开始计算,n是从 0 ,1,2,3.. 一直递增)
- 但是第 0 元素或者超出了元素的个数会被忽略
公式 | 取值 |
2n | 偶数 |
2n+1 | 奇数 |
5n | 5 10 15 …… |
n+5 | 从第5个开始(包含第5个)到最后,5 6 7 8 9 … |
-n+5 | 前5个(包含第5个),5 4 3 2 1 0…… |
E:nth-child(n) 和E:nth-of-type(n) 的区别
• E:nth-child(n) 匹配父元素的第 n 个子元素 E,同时需要满足两个条件。
• E:nth-of-type(n) 匹配同类型中的第 n 个同级兄弟元素 E,会忽视其他同级的非同类型元素。
4、伪元素选择器
新增伪元素
选择器 | 介绍 |
E::before | 在 E 元素内部的前面插入一个元素 |
E::after | 在 E 元素内部的后面插入一个元素 |
E::first-letter | 选择到了 E 容器内的第一个字母 |
E::first-line | 选择到了 E 容器内的第一行文本 |
h5 写法和传统写法区别
- 单冒号 E:before
- 双冒号 E::before
- 浏览器对以上写法都能识别,双冒号是 h5 的语法规范
伪元素的注意事项
- 伪元素只能给双标签添加,不能给单标签添加
- 伪元素的冒号前不能有空格,如 E ::before 这个写法是错误的
- 伪元素里面必须写上属性 content: "" ;
- before 和 after 创建一个元素,但是属于行内元素。
- 因为在 DOM 里面看不见刚才创建的元素,所以我们称为伪元素。
5、属性选择器
属性选择器用来选择包含指定属性的标签。
选择器 | 简介 |
E[att] | 选择具有att属性的E元素 |
E[att="val"] | 选择具有att属性且属性值等于val的E元素 |
E[att^="val"] | 匹配具有att属性、且值以val开头的E元素 |
E[att$="val"] | 匹配具有att属性、且值以val结尾的E元素 |
E[att*="val"] | 匹配具有att属性、且值中含有val的E元素 |
选择器权重
基础选择器:id 选择器 > 类选择器 > 标签选择器 > *
伪类选择器、属性选择器的权重等于类选择器 。
伪元素选择器的权重等于标签选择器 。
二、CSS3 盒模型
CSS3 中可以通过 box-sizing 来指定盒模型,这样我们就可以设置如何计算一个元素的总宽度和总高度。
属性值 | 简介 |
content-box | 默认值,标准盒子模型,盒模型是外扩的。 width 与 height 只包括内容的宽和高。 在 width 和 height 之外绘制元素的内边距和边框。 |
border-box | 怪异模式,盒模型是内减的。 width 和 height 属性包括内容,内边距和边框,但不包括外边距。 为元素指定的任何内边距和边框都将在已设定的 width和 height内进行绘制。 |
content-box 标准模式
Standard 模式:标准模式中,盒子总体大小为 width(height) + padding + border,内容区域是 width 和 height 部分。
border-box 怪异模式
Quirks 模式:怪异模式中,盒子总体大小为 width 和 height,添加了padding和border后, 内容区域会收缩。
三、CSS3 新增属性
1、边框圆角
属性名:border-radius
作用:设置边框的圆角。
属性值:可以是像素值,或者百分比,百分比参考的是盒子整体宽度、高度的百分比。
属性值 | 说明 |
x-radius / y-radius | / 分割两部分属性值,前面为水平半径,后面为垂直半径, 得到的是椭圆角。 |
radius | 一个属性值,则水平和垂直都设置为同一个值,得到的是圆角。 |
单一属性
- border-top-left-radius: 半径;
- border-top-right-radius: 半径;
- border-bottom-right-radius: 半径;
- border-bottom-left-radius: 半径;
简写方法
- border-radius 相当于四个单一属性的简写方法,类似 padding 也可以有四种值的写法。
- border-radius: 左上角 右上角 右下角 左下角;(上左右下右左)
- border-radius: 左上角 右上角和左下角 右下角 ;(左上 右上左下 右下)
- border-radius: 左上角和右下角 右上角和左下角 ;(左上右下 右上左下)
- border-radius: 四个角相同;
/ 的属性值写法
border-radius 属性值中出现了 / 斜线,那么 / 前面可以设置水平方向四种值的写法,/ 后面可以设置垂直方向四种值的写法。
border-radius: 50% 20% 40% / 20% 30%;
浏览器兼容
Internet Explorer 8 及以下版本浏览器不支持border-radius属性,其他浏览器都支持
2、文字阴影
在 CSS3 中,text-shadow 可向文本应用阴影。通过属性值能够规定水平阴影、垂直阴影、 模糊距离,以及阴影的颜色:
属性值 | 简介 |
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊的距离。 |
color | 可选。阴影的颜色。 |
文字阴影语法
text-shadow 属性向文本添加阴影,属性值有2-3个长度值和一个可选的颜色值进行规定,省略的长度是 0。
h1 {
text-shadow: 3px 4px 4px #FF0000;
}
多层阴影
text-shadow 属性也可以向文本添加多个阴影,逗号分隔多个阴影的属性值。 注意:多阴影中,先写的阴影压盖在后写的阴影上。
h1 {
text-shadow: 3px 4px 4px #FF0000,
6px 6px 3px #00ff00;
9px 9px 3px #0000ff;
}
3、盒子阴影
边框阴影
在 CSS3 中,box-shadow 属性用于对盒子边框添加阴影。
边框阴影语法:box-shadow 属性向盒子添加阴影,属性值有2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定,省略的长度是 0。
属性值 | 说明 |
---|---|
h-shadow | 必需的。水平阴影的位置。允许负值 |
v-shadow | 必需的。垂直阴影的位置。允许负值 |
blur | 可选。模糊距离 |
spread | 可选。阴影的大小 |
color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
inset | 可选。从外层的阴影(开始时)改变阴影内侧阴影 |
多层阴影
box-shadow 属性也可以向盒子添加多个阴影,逗号分隔多个阴影的属性值。 注意:多阴影中,先写的阴影压盖在后写的阴影上。
4、过渡属性
动画效果
CSS3 出现之前,前端一般使用 Flash 动画或 JavaScript 制作动画。
帧动画:通过一帧一帧的画面按照固定顺序和速度播放,如电影胶片。
过渡属性
属性名:transition
作用:在不使用 Flash 动画或 JavaScript 的情况下,使用 transition 可以实现补间动画(过渡效果), 并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指),那么A和B之间就可以实现平滑的过渡的动画效果。为了方便看效果,我们使用 :hover 切换状态。 语法格式:
transition: 过渡的属性 过渡时间 运动曲线 延时时间;
单一属性写法
属性值 | 描述 |
---|---|
transition-property | 指定CSS属性的name,transition效果 |
transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
transition-timing-function | 指定transition效果的转速曲线 |
transition-delay | 定义transition效果开始的时候 |
transition-property过渡的属性
- none 表示没有属性过渡
- all 表示所有变化的属性都过渡
- 属性名 使用具体的属性名,多个属性名中间逗号分隔
时间
- 过渡时间:以s秒为单位。
- 延时时间:以s秒为单位。0s也必须加单位。
transition-timing-function 时间曲线
值 | 描述 |
---|---|
linear | 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。 |
ease | 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。 |
ease-in | 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。 |
ease-out | 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。 |
ease-in-out | 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
以上linear~ease-in-out为贝塞尔曲线,参考W3School TIY Editorhttps://www.w3school.com.cn/tiy/t.asp?f=css3_animation_speed浏览器兼容
- Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
- Safari 需要前缀 -webkit-。
- 注意:Internet Explorer 9 以及更早的版本,不支持 transition 属性。
四、2D 转换
属性名:transform
作用:对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果。
属性值:多种转换方法的属性值,可以实现不同的转换效果。
位移 translate()
transform 的属性值为 translate() 时,可以实现位移效果。
书写语法:
值 | 描述 |
---|---|
translate(x,y) | 定义 2D 转换,x,y分别为水平和垂直方向位移的距离,可以为px值或百分比, 区分正负 |
translate(x) | 定义转换,只有一个数值,表示水平方向的位移 |
缩放 scale()
transform 的属性值为 scale() 时,可以实现元素缩放效果
书写语法:
属性值 | 说明 |
scale(x, y) | x,y分别为改变元素的宽度和高度的倍数 |
scale(n) | 只有一个值,表示宽度和高度同时缩放n倍 |
scaleX(n) | 改变元素的宽度 |
scaleY(n) | 改变元素的高度 |
旋转 rotate()
transform 属性值设置为 rotate() 时,实现元素的旋转。
书写语法: rotate(数字deg) 其中,deg为度数单位,正数表示顺时针旋转,负数表示逆时针旋转。2D的旋转只有 一个属性值。
注意:元素旋转后,坐标轴也跟着发生转变。
因此,多个属性值同时设置给 transform 时,书写顺序不同导致的转换效果有差异。
倾斜 skew()
transform 属性值设置为 skew() 时,实现元素的倾斜。
书写语法:
transform: skew(数字deg,数字deg);
两个属性值分别表示水平和垂直方向倾斜的角度,属性值可以为正可以为负,第二个数值不写默认为0。
transformorigin 属性
作用:设置调整元素的水平和垂直方向原点的位置。
调整元素的基准点。
属性值:包含两个,中间使用空格分隔。
值 | 说明 |
x | 定义 X 轴的原点在何处。可能的值:left 、center、right、像素值、百分比 |
y | 定义 Y 轴的原点在何处。可能的值:top、center、bottom、像素值、百分比 |
五、3D转换
transform 属性不止能实现 2D 转换,也可以制作 3D 立体转换效果,比普通的 x、y 轴组成的平面效果多了一条 z 轴。
透视
- 电脑显示屏是一个 2D 平面,图像之所以具有立体感(3D效果),其实只是一种视觉呈现, 通过透视可以实现此目的。
- 透视可以将一个 2D 平面,在转换的过程当中,呈现 3D 效果。
- 透视特点:近大远小。
- 注意:并非任何情况下需要透视效果,根据开发需要进行设置,如果需要展示 z 轴的变化, 则设置透视效果。
透视属性 perspective
- 属性名:perspective
- 作用:设置在 z 轴的视线焦点的观察位置,从而实现 3D 查看效果。
- 属性值:像素值,数值越大,观察点距离 z 轴原点越远,图形效果越完整且接近原始尺寸。
- 注意:透视属性需要设置给 3D 变化元素的父级。
3D 旋转
3D旋转比2D旋转更复杂,需要分别对三个方向的旋转角度值:
属性值:
值 | 说明 |
rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
注意:属性值的角度区分正负,正数表示沿对应坐标轴顺时针方向旋转,负数表示沿对应坐标轴逆时针方向旋转。
3D 位移
类似的,位移也分为三个方向的移动:
属性值:
值 | 说明 |
translateX(x) | 设置 X 轴的位移值 |
translateY(y) | 设置 Y 轴的位移值 |
translateZ(z) | 定义3D位移,设置Z轴的位移值 |
属性值为像素值或百分比,正负表示位移的方向。正值向对应轴的正方向移动,负值向对应轴的负方向移动。
transform-style属性
- 用于设置被嵌套的子元素在父元素的 3D 空间中显示,子元素会保留自己的 3D 转换坐标轴。
- 属性值:
- flat:所有子元素在 2D 平面呈现
- preserve-3d:保留 3D 空间
- 3D 元素构建是指某个图形是由多个元素构成的,可以给这些元素的父元素设置 transform-style: preserve-3d,来使其变成一个真正的 3D 图形。
- 一般来说,该属性设置给 3D 变换图形的父级元素。
浏览器兼容
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9 需要前缀 -ms-。
六、动画
- css3 中提供了自己的动画制作方法,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
- css3 动画制作分为两步:创建动画、绑定动画。
@keyframes 规则
@keyframes 规则用于创建动画。
在 @keyframes 中规定某项 CSS 样式,就能创建由从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数。 需要使用百分比来规定变化发生的时间,或用关键词 "from" 和 "to" ,等同于 0% 和 100%。 0%是动画的开始,100% 是动画的完成。
@keyframes 动画名称 {
动画过程,可以添加任意百分比处的动画细节
}
animation 属性
需要将 @keyframes 中创建的动画捆绑到某个选择器,否则不会产生动画效果。 animation 属性用于对动画进行捆绑。
div {
animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间;
}
其中必须设置动画名称和过渡时间,其他属性值可以根据需求设置。
单一属性列表:
值 | 说明 |
---|---|
animation-name | 指定要绑定到选择器的关键帧的名称 |
animation-duration | 动画指定需要多少秒或毫秒完成 |
animation-timing-function | 设置动画将如何完成一个周期 |
animation-delay | 设置动画在启动前的延迟间隔。 |
animation-iteration-count | 定义动画的播放次数。 |
animation-direction | 指定是否应该轮流反向播放动画。 |
animation-fill-mode | 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。 |
animation-play-state | 指定动画是否正在运行或已暂停。 |
浏览器兼容
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性