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	視頻出現錯誤