360前端星学习笔记-深刻CSS

时间 2019-12-08

标签前端学习笔记深刻 css 栏目 CSS 繁體版

原文原文链接

深刻CSS

课程ppt连接css

1、CSS的版本（level）

~~css Level 1~~
css Level 2（CSS2.2规范）
css Level 3html
- Color Module Level 3
- Selectors Level 3
- Media Queries
- Fonts Level 3
- ...

在css2.2以前，把css全部标准放在一块儿去管理，这样推动起来版本升级比较难，后来在css3的版本中，将css标准分红几个模块来管理。css3

2、css选择器

1. 简单选择器

通配选择器 *
标签选择器 E
类选择器 .class-name
Id选择器 #id_name

2. 属性选择器

/* 具备某个属性 */
[disabled]

/* 属性为指定的值 */
[type="checkbox"]

/* 属性值包含某个字符串 */
[href*="example"]

/* 属性值以某个字符串开头 */
[href^="http:"]

/* 属性值以某个字符串结束 */
[href$="jpg"]

/* 属性值以空格分割后包含某个字符串 */
[lang~＝"zh-cn"]

3. 伪类选择器

a:link    { ... }       /* 未访问过的连接 */
a:visited { ... }       /* 已访问过的连接 */

a:hover   { ... }       /* 鼠标移到连接上的样式 */
a:active  { ... }       /* 鼠标在链接上按下时的样式 */
a:focus   { ... }       /* 得到焦点时的样式 */

input:disabled { ... }  /* 禁用时的样式 */
input:checked { ... }   /* 选中时的样式 */

4. 结构性伪类

:first-child    
:last-child     
:nth-child
:first-of-type  
:last-of-type
:nth-of-type
:empty

详细介绍在mdn 选择器文档算法

5. 组合器（combinator）

后代组合器  E   F
亲子组合器  E > F
兄弟选择器  E ~ F
相邻兄弟    E + F

6. 伪元素

::before
::after
::first-letter
::first-line

举个栗子🌰

<p>莫哈韦沙漠不只纬度较高，并且温度要稍微低些，是命名该公园
的短叶丝兰——<a href="#">约书亚树</a>的特殊栖息地。约书亚
树以从茂密的森林到远远间隔等各类形式出现。除了约书亚树森林之
外，该公园的西部包括加州沙漠里发现的最有趣的地质外观。</p>

<style>
  p {
    line-height: 1.7
  }
  p::first-letter {
    line-height: 1.5;
    background: #F44336;
    color: #fff;
    font-size: 200%;
    float: left;
    padding: 0 0.2em;
    margin-right: 0.2em;
  }
  a::after {
    content: '⚓'
  }
</style>

结果是这样子的：chrome

利用::first-letter把第一个文字选中，修改样式。
利用::after把a标签文字的最后面添加一个特殊文字。

再举个栗子🌰

实现一个toggleapi

<div class="toggle">
  <input type="checkbox" checked id="t">
  <label for="t"></label>
</div>

<style>
.toggle {
  width: 80px;
  height: 26px;
  background: #333;
  margin: 20px auto;
  position: relative;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5),
    0px 1px 0px rgba(255,255,255,0.2);
}
 .toggle:after {
  content: 'OFF';
  color: #fff;
  position: absolute;
  right: 10px;
  z-index: 0;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-shadow: 1px 1px 0px rgba(255,255,255,.15);
}
.toggle:before {
  content: 'ON';
  color: #f66;
  position: absolute;
  left: 10px;
  z-index: 0;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
}
.toggle label {
  display: block;
  width: 34px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 1;
  background: #fcfff4;
  background: linear-gradient(top, #fcfff4 0%,
    #dfe5d7 40%, #b3bead 100%);
  border-radius: 50px;
  transition: all 0.4s ease;
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
}
.toggle input[type=checkbox] {
  visibility: hidden;
}
.toggle input:checked + label {
  left: 43px;
}
</style>

toggle演示：浏览器

缺点：缓存

只能点击白色区域才能切换状态
不能用键盘来控制

3、选择器的特异度（权重）

解释一下：服务器

特异度的算法是：ide
- 内联样式在千位
- id在百位
- 类和伪类在十位
- 元素和伪元素在个位
#nav .list li a:link包含1个id标签#nav，1个class类.list，1个伪类:link，2个标签a和li，因此它的特异度（权重）是 122
.hd ul.links a包含两个class类.hd和.links,两个元素ul和a，因此它的特异度是 22

属性覆盖

同一个级别的下面的样式会覆盖上面的
优先级高的会覆盖优先级低的相同属性

! important

若是咱们不想让样式被其余优先级高的属性覆盖，咱们能够给这个属性后面加!important
若是咱们想把上面带有!important的属性覆盖，就须要给下面的优先级高的属性也添加!important就能够了

4、css样式的来源

页面开发者
用户（好比开放用户对页面字体的大小，样式设置等等）
浏览器预设

用户样式：能够将设置后的样式存在本地css文件中，打开页面时自动加载
浏览器预设样式：

哪条css样式会起做用呢？（css优先级）

找出匹配到的该属性全部声明
根据规则来源，优先级从低到高：
- 浏览器预设
- 用户设置
- 网页样式
同一来源中，越特殊优先级越高
特异度同样时，书写顺序在后面的优先级高

有!important时的变化

找出匹配到的该属性全部声明
根据规则来源，优先级从低到高：
- 浏览器预设
- 用户设置
- 网页样式
- 含！important的网页样式
- 含！important的用户设置样式
同一来源中，越特殊优先级越高
特异度同样时，书写顺序在后面的优先级高

5、课后练习题

单选题：关于标签嵌套的正确说法是？
A. table标签能够直接嵌套tr
B. video中能够嵌套img做为视频的封面图片
C. button中不能包含其余任何标签
D. p标签中能够嵌套div

答案：A
解析：video里面能够放track、source等标签，封面图用poster属性，因此B是错误的
button里面能够嵌套标签，如span标签，但<input type='button'/>是单标签不能嵌套。
p是表明段落，里面只能放段落内容，不包含div

知识点：`<video>`

<video>的属性

属性	描述
width	视频宽度
height	视频高度
controls	显示控制条
poster	贴图
autoplay	自动播放
muted	默认状态下静音
volume	控制音量
preload	预加载
loop	循环播放
src	资源路径
currentSrc	当前播放路径
currentTime	播放时间的控制
duration	播放时长

volume 音量控制api

<video id="_volume" src="./test.mp4" width="200" height="200" muted preload controls autoplay></video>
<script>
    // 获取video元素
    var v = document.getElementById("_volume");
    // 音量范围0-1，将音量设置为50%
    v.volume = 0.5;
</script>

currentTime 播放进度api

<!-- 播放时间控制 -->
<video id="_currentTime" src="./test.mp4" width="200" height="200" muted preload controls autoplay></video>
<script>
    var v = document.getElementById("_currentTime");
    // 播放进度设置为1分钟
    // currentTime的单位：秒
    v.currentTime = 60; 
</script>

src 视频资源api

<!-- 播放地址的切换 -->
  <video id="_src" src="./test.mp4" width="200" height="200" muted preload controls autoplay></video>
  <script>
    var v = document.getElementById("_src");
    setTimeout(() => {
        // 两秒后视频资源切换为test2.mp4
        // 场景：当用户选择高清，普清时，经过src地址来切换清晰度
        v.src = './test2.mp4'
    }, 2000);
  </script>

也能够在video里面嵌入source标签, 经过currentSrc获取当前视频播放地址

<video id="_source" width="200" height="200" controls>
    <source src="./video.mp4" type="video/mp4">
    <!-- 备用地址 -->
    <source src="./video.mp4" type="video/mp4">
  </video>
  <script>
    var v = document.getElementById("_source");
    // 场景：经过遍历source的地址，找到currentSrc地址前的地址，上传错误地址到服务器
    setTimeout(() => {
      console.log('当前播放的src', v.currentSrc)
      v.currentSrc = './test.mp4'
    }, 2000);
</script>

<video>的事件

事件	描述
loadstart	视频播放时触发
durationchange	当视频的时长数据发生变化时触发
loadedmetadata	视频源数据加载完成
loadeddata	当前帧的数据已加载，但没有足够的数据来播放指定视频的下一帧触发。
progress	当浏览器正在下载指定的视频时触发
canplay	视频有帧播放时触发
canplaythrough	当浏览器预计可以在不停下来进行缓冲的状况下持续播放指定的视频时触发
play	视频播放时触发
pause	视频暂停时触发
ended	视频播放完毕 (用途：向视频添加广告)
seeking	用户在视频中移动/跳跃到新的位置时触发
seeded	寻找资源完毕
waiting	当视频没法继续播放，且须要加载时触发
timeupdate	进度条进度每更新一次，触发一次`timeupdate`事件
error	视频出现错误

<video>建立时，拿不到时长信息，所以在初始状态下，duration为NaN。

以chrome为例子，当视频处于加载过程当中时，会依次发生如下事件：

progress (加载视频资源)
loadstart (此时duration为NaN)
progress (浏览器加载视频视频, 可触发屡次)
durationchange (此时duration为总时长)
loadedmetadata (视频源数据加载完毕)
loadeddata (当前帧加载完毕)
canplay (视频能够播放，但没有缓冲)
progress (浏览器加载视频视频, 可触发屡次)
canplaythrough (视频缓冲完毕, 能够流畅的播放)
progress (浏览器自动缓存数据, 可触发屡次)

场景1：当用户点击按钮跳转到新的位置时，会触发下列事件

seeking 寻找资源
progress 加载资源
seeked 寻找完毕
canplay 能够播放当前帧
canplaythrough 能够连续播放

场景2：当用户播放时，点击跳转按钮，会触发下列事件

seeking 寻找资源
play 播放视频
progress 加载资源
waiting 等待资源加载
seeked 寻找完毕
canplay 能够播放当前帧
playing 播放状态下，资源加载完毕，视频继续播放
canplaythrough 视频有足够的缓冲能够持续播放