CSS3
CSS3 新增选择器
- 子级选择器
- 兄弟选择器
- 结构伪类选择器
- 伪元素选择器
- 属性选择器
子级选择器
作用:用于选取具有父子关系,父元素的子元素
语法:.box>p { color: red}
如果不是父子级关系,是祖父级或者其他,都不会生效
兄弟选择器
- 相邻兄弟选择器
- 其他兄弟选择器
相邻兄弟选择器
- 书写:
element1 + element2 { color: red}
- 选择 element1 标签后紧邻的第一个 element2 标签,若是俩者之间有其他元素存在就不会生效
- 可以选择一个同级元素之后的紧邻元素
- 俩者要有相同父元素
- 多种情况
- 当我们书写一个
p + p { color: red}
段落2,3,4都会被选中,所以紧邻在某些情况下会选择多个满足条件的标签<div class="box1"> <h2>二级标题</h2> <p>段落0</p> <div>内容</div> <p>段落1</p> <p>段落2</p> <p>段落3</p> <p>段落4</p> </div>
- 当我们书写一个
其他兄弟选择器
书写:element1 ~ element2 { color: red}
作用:选择同一个父元素中 在 element1 后所有 element2
- 不再限制被紧邻
结构伪类选择器
- E:first-child
- 匹配父元素结构中第一个子元素
- E:last-child
- 匹配父元素结构中最后一个子元素
- E:nth-child(n)
- 匹配父元素结构中第n个子元素
- E:first-of-type
- 匹配父元素结构中同类型的第一个子元素
- E:last-of-type
- 匹配父元素结构中同类型的最后一个子元素
- E:nth-of-type(n)
- 匹配父元素结构中同类型第n个子元素
E:first-child
写法:.box1 :first-child { color: red}
.box1 p:first-child { color: red}
加了 p 标签,若是 box1 第一个元素不是 p 标签就不会生效
E:last-child
写法:.box1 :last-child { color: red}
.box1 p:last-child { color: red}
加了 p 标签,若是 box1 最后一个元素不是 p 标签就不会生效
E:nth-child(n)
写法:.box1 p:nth-child(4)
选中 box1 结构中第四个标签,若这个标签是 p 标签就会生效 否则不生效 也可以不要 p
.box1 :nth-child(4)
选中 box1 结构中第四个标签
属性值
- 数字
- n 就是数字 写第几个就选第几个
- 关键子
- even 偶数
- odd 奇数
- 公式( n 从 0 开始,间距 1 递增)
- 2n 偶数
- 2n+1 奇数
- -n + 5 前5个
等等
- 0 元素 或超出了元素个数就会忽略
E:first-of-type
写法:.box1 h2:first-of-type
作用:选取 box1 中 标签为 h2 的第一个子元素
E:last-of-type
写法:.box1 h2:first-of-type
作用:选取 box1 中 标签为 h2 的最后一个子元素
E:nth-of-type(n)
写法:.box1 p:nth-of-type(4)
左右:选取 box1 中 标签为 p 的第四个子元素
与 E:nth-child(n) 区别 : nth-of-type 是现根据子元素标签类型分组,再排序。而 nth-child(n) 是不区分子元素类型直接按结构顺序排序
属性值
- 数字
- n 就是数字 写第几个就选第几个
- 关键子
- even 偶数
- odd 奇数
- 公式( n 从 0 开始,间距 1 递增)
- 2n 偶数
- 2n+1 奇数
- -n + 5 前5个
等等
- 0 元素 或超出了元素个数就会忽略
伪元素选择器
- E::before
- 在 E 元素内部的第一行前面插入一个元素
div::before {content: "1";display: block;height: 50px;background-color: skyblue}
- E::after
- 在 E 元素内部的第后一行后面面插入一个元素
div::after {content: "1";display: block;height: 50px;background-color: skyblue}
- E::first-letter
- 选择 E 容器中的第一个字母(文字)
div::first-letter {color: red}
- E::first-line
- 选择 E 容器中的第一行文本
div::first-line {color: red}
注意:
- 伪元素只能给双标签的元素添加
- 书写时元素与伪类选择器之间不能有空格
E ::before
错 - 伪元素必须加内容 content
- before 和 after 创建的伪元素属于行内元素
- DOM 里看不见这样创建的元素,故称为伪元素
- div::before 和 div:before 都是可以的双冒号是H5的语法规范
属性选择器
- 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 元素
input[name] {
width: 30px;
height: 30px;
}
input[type="radio"] {
width: 30px;
height: 30px;
}
input[class^="icon"] {
width: 30px;
height: 30px;
}
input[class$="dan"] {
width: 30px;
height: 30px;
}
input[type*="o"] {
width: 30px;
height: 30px;
}
...
<input type="radio" name="sex" class="icon-dan"> 男性
新增选择器的权重变化
伪类选择器,属性选择器的权重等于类选择器。
伪元素选择器的权重等于标签选择器。
CSS3 盒模型
CSS3 中可以通过 box-sizing 来这指定盒模型
属性值分别是
- content-box (Standard 模式)
- 内容区域(width + height)固定,设置 padding 和 border 后扩展整个盒子的实际大小,内容区域大小不变
- border-box (Quirks 模式)
- 实体化区域不变(width + height + padding + border)固定, 设置 padding 和 border 后整个盒子的实体化区域大小不变,内容区域缩减
我们盒模型一般默认是 content-box
CSS3 新增属性
- border-radius 边框圆角
- text-shadow 文字阴影
- box-shadow 盒子阴影
边框圆角 border-radius
作用:设置边框圆角
属性值:可以是像素或百分比,百分比参考盒子整体宽度,高度百分比。
- x-radius / y-radius 水平方向和垂直方向
- radius 整体
当盒子是一个正方形时,若是想整个圆形就设置 radius 为宽高的 50%。
单一属性:以盒子的顶点方向来划分
- border-top-left-radius: 值
- border-top-right-radius:
- border-bottom-left-radius:
- border-bottom-right-radius:
注意 :top 跟 left 不能互换位置来写,违反语法规定
简写:
- 四值法 按顺时针方向来写
- 左上,右上,右下,左下
- 三值法
- 左上,右上和左下,右下
- 二值
- 左上和右下,右上和左下
- 一值
- 四值相同
特殊的 /
border-radius: x / y
x 也可用四值法或其它几值写法单独写
y 同理
x 与 y 分开计算互不影响。
例:border-radius: 10px 20px 30px / 40px 50px
兼容问题:ie8 和它以下不支持 border-radius属性
文字阴影 text-shadow
作用:可以给文本设置阴影
属性值
- h-shadow
- 水平阴影的位置,必填,可为负值
- v-shadow
- 垂直阴影的位置,必填,可为负值
- blur
- 模糊距离 选填
- color
- 阴影颜色 选填
写法:水平值 + 垂直值 + 模糊值 + 颜色
text-shadow: 2px 2px 2px red;
多层阴影用逗号隔开连续书写
text-shadow: 2px 2px 2px red,3px 3px 3px blue;
盒子阴影 box-shadow
作用: 给盒子边框添加阴影
属性值:
- h-shadow
- 水平阴影的位置,必填,可为负值
- v-shadow
- 垂直阴影的位置,必填,可为负值
- blur
- 模糊距离 选填
- spred
- 阴影尺寸 选填
- color
- 阴影颜色 选填
- inset
- 将默认值外部阴影改为内部阴影
书写顺序
水平值 + 垂直值 + 模糊值 + 尺寸 + 颜色 + 是否设为内部阴影
box-shadow: 3px 3px 2px 1px yellow inset;
多层阴影写法跟文字阴影一样,用逗号隔开
box-shadow: 3px 3px 2px 1px yellow inset,5px 5px 3px 1px blue inset;
注意 : 外部阴影为默认值,不需要设置啥;先写阴影压盖后写的
CSS3 过度属性 transition
作用:当元素有条属性发生变化时,例如宽度,我们使用 transition 就可以实现平滑的过度效果
属性值:
- 监测的属性
- 就是元素里某个属性值会发生变化
- 过度时间
- 从状态开始变化到结束的时间
- 运动曲线
- 变化过程中快慢速度
- 延时时间
- 延迟多久再让属性的发生变化
书写顺序transition: 属性 过度时间 过度曲线 延时时间;
transition: all 2s ease 0s; ``transition: all 2s cubic-bezier(0.29, 0.3, 0.25, 1) 0s;
单一属性写法
- transition-property
- 过渡的 CSS 属性名称
- none 表示没有
- all 表示所有变化属性都过渡
- 多个过渡属性名中间用逗号隔开
- transition-duration
- 过渡花费的时间 默认 0
- 秒 s 为单位
- transition-timing-function
- 过渡效果的时间曲线 默认"ease"
- linear 从开始到结束都是相同时间
- ease 开始到结束:慢-快-慢
- ease-in 开始到结束:慢-快
- ease-out 开始到结束:快-慢
- ease-in-out 开始到结束:慢-快-慢
- cubic-bezier(x1,y1,x2,y2) 自己定义开始到结束的快慢 参考谷歌浏览器控制中的调试效果 又名:贝塞尔曲线
- transition-delay
- 过渡效果多久后开始 默认是0
- 秒 s 为单位
兼容问题
IE9及以下不支持 transition 属性
苹果浏览器 Safari 需要前缀 -webkit- -webkit-transition: all 2s ease 0s;
Chrome Firfox Opera 都支持
2D转换 transform
作用:对元素进行移动、缩放、转动、拉伸或拉长
属性值:很多
- translate() 移动
- translate(x,y) x,y 分别为水平方向和垂直方向移动距离,可以是 px 和百分比
- translate(x) 只有一个数值,表示水平方向位移
- scale() 缩放
- scale(x,y) x,y 分别是元素宽度和高度缩放的倍数
- scale(n) 元素宽度和高度等比例缩放 n 倍
- scaleX(n) 缩放元素宽度
- scaleY(n) 缩放元素高度
- rotate() 旋转
- rotate(数字+deg)
- 正数顺时针旋转,负数逆时针
- 注意: 元素旋转后,坐标轴也发生了旋转。所以移动和旋转的先后顺序不同,最后元素所在的位置是完全不同的
- skew() 倾斜
- skew(数字+deg,数字+deg) 俩个值分别表示水平和垂直方向的倾斜,值可以正,可以负,第二个值不写默认0
设置基准点 transform-origin
作用:设置元素水平和垂直方向的原点位置
属性值:
- x
- 定义 X 轴的原点在何处。left、center、right、像素值、百分比
- y
- 定义 Y 轴的原点在何处。top、center、bottom、像素值、百分比
例:transform-origin: left top;
3D 转换-透视 perspective
要想看 3D 效果必须设置一个透视属性 perspective
- perspective
- 作用:设置在 Z 轴方向上的观察位置,实现 3D 查看效果
- 属性值:px 值越大,观察点距离 Z 轴原点越远,效果越好
- 注意:透视属性需要设置给 3D 变化元素的父级
3D 转换-旋转
属性名:transform
属性值:
- rotateX(数字+ deg) 沿 3D X轴方向旋转
- rotateY(数字+ deg) 沿 3D Y轴方向旋转
- rotateZ(数字+ deg) 沿 3D Z轴方向旋转
正数顺势针旋转,负数逆时针
3D 转换-位移
属性名:transform
属性值:为像素或是百分比,正值向正方向移动,负值向负方向移动
- translateX(x) 设置X轴位移值
- translateY(y) 设置Y轴位移值
- translateZ(z) 设置Z轴位移值
注意:同 2D 一样旋转或移动的先后顺序,会改变原点,最后得到的图形并不一致
transform-style 属性
作用:用于设置被嵌套的子元素在父元素的 3D 空间中显示,子元素保留自己的 3D 转换坐标轴。
属性值:
- flat :所有元素在 2D 平面呈现
- preserve-3d :保留 3D 空间
兼容问题
IE10,Firefox,Opera 支持 transform 属性
Chrome 和 Safari 需要前缀 -webkit-
IE9 需要前缀 -ms-
动画
1.创建动画
2.绑定动画
- @keyframes 规则
- 作用: @keyframes 用于创建动画,让元素由一种样式变成另一种,不限样式不限次数
- 用百分比或 from 和 to 来表示开始到结束。from 等价于 0%,to 等价于 100%
- 书写方法:
@keyframs 动画名称 { from { /* 开始样式最好和原始样式一致,避免动画不连贯 */ 样式1 } to { 样式2 } } @keyframs 动画名称 { 0% { 样式1 } 25% { 样式2 可以任意添加细节 } 40% { 样式3 } 100% { 样式4 } }
- animation 属性
- 作用:用于把动画绑定到对应元素上
- 语法:其中必须设置动画名称和过度时间,其他不是必填
div { animation: 动画名称 过度时间 速度曲线 动画次数 延时时间 }
- 单一属性
- animation-name 动画名称
- animation-duration 花费时间
- animation-timing-function 动画速度曲线,默认"ease"
- animation-delay 延时时间
- animation-iteration-count 动画播放次数 默认1 infinite 表示循环播放
兼容问题
IE10,Firefox,以及Opera 支持 @keyframs 规则和 animation 属性
Chrome 和 Ssfari 需要前缀 -webkit-
IE9 及一下 不支持 @keyframs 规则和 animation 属性