多媒体案例
- 属性
- paused 多媒体的暂停状态
- duration 当前视频的总时长 单位是s
- currentTime 当前播放的时间 单位是s
- 事件
- oncanplay 视频可以播放
- ontimeupdate 当目前的播放位置已更改时
- onended 视频播放结束
- 方法
- 播放 play()
- 暂停 pause()
- 换算
- hour total/3600
- minute total%3600/60
- second total%60
属性选择器 ★
- 检查某个标签是否包含某个属性 - p[style]{}
- 检查某个标签是否包含某个属性并且属性值等于某个值 - p[style=a]
- 检查某个标签是否包含某个属性并且属性值是以什么开头 - p[style^=a]
- 检查某个标签是否包含某个属性并且属性值是以什么结尾 - p[style$=a]
- 检测某个标签中属性中是否包含某个值 - p[style*=a]{}
兄弟伪类 只能往下找★
- 查找一个 li+p 必须相邻 必须指定类型
- 所有兄弟元素 li ~ p 必须指定类型
结构伪类 - 相对于父元素★
- 能查找 -child 少用 -of-type 查找类型 更精确类型查找 数值是从1开始 n是0开始
- 第一个 li:first-child{} li:first-of-type{}
- 最后一个 li:last-of-type{}
- 奇数 li:nth-of-type(odd){} li:nth-of-type(2n-1){}
- 偶数 li:nth-of-type(even){} li:nth-of-type(2n){}
- 指定第3个 li:nth-of-type(3){}
- 前3个 li:nth-of-type(-n+3){}{}
- 后3个 li:nth-last-of-type(-n+3){}
- 3的倍数 li:nth-of-type(3n){}
- 空 li:empty{}
锚点伪类
元素:target{}
伪元素★
- 前伪元素
- 设置 div::before { content:"" } 默认是行内元素 转块 浮动 定位 紧挨着开始标签
- 后伪元素
- 设置 div::after{ content:"" } 默认是行内元素 转块 浮动 定位 紧挨着结束标签
其他伪元素
- 首个字符 p::first-letter{}
- 首行 p::first-line
- 设置默认选中样式 不能改大小 p::selection{}
颜色 ★
- 预定义
- 十六进制 # 0-9 A-F
- rgb(红,绿,蓝) 三个取值0-255
- hsl(色相(0-360),饱和度(0%-100%),l(明度0%-100%))
颜色半透明★
- 影响子元素的透明 opacity:0-1
- 不会影响子元素的透明 rgba(红,绿,蓝,通道) 前三个取值0-255 0 -1
- hsla(色相(0-360),饱和度(0%-100%),l(明度0%-100%),(0-1))
文本阴影★
- text-shadow: x偏移值 Y偏移值 阴影的模糊度 阴影颜色, x偏移值 Y偏移值 阴影的模糊度 阴影颜色;
圆角★
- boder-radius:10px 四个角
- boder-radius:10px 左上/右下 20px 右上/左下
- boder-radius:10px 左上 20px 右上/左下 30px 右下
- boder-radius:10px 左上 20px 右上 30px 右下 40px 左下
边框阴影(盒子阴影)★
- box-shadow: x偏移 Y偏移 阴影模糊度 阴影的缩放 阴影的颜色 内阴影(inset); 设置多个 逗号隔开
