多媒体案例

• 属性
  • 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); 设置多个 逗号隔开