進階學習隨手記二——CSS
阿新 • • 發佈：2020-07-27
一、隨手記
1、面試問題：我們和什麼打交道最多？
答案是瀏覽器，那麼主流瀏覽器有哪些，它的核心是什麼呢？
| 主流瀏覽器 | 核心 |
| IE | trident |
| Firefox | Gecko |
| Geogle Chrome | webkit/blink |
| Safari | webkit |
| Opera | presto |
2、引入CSS有三種方式
①行間樣式
這種是在body裡的，可以直接在標籤屬性裡用style來寫CSS，如：
<!DOCTYPE html>
<html>
<head>
<title>列表</title>
</head>
<body>
<div style="width:100px;height:100px;background-color:red;">樣式</div>
</body>
</html>②頁面級CSS
這種樣式在head部分，如：
<!DOCTYPE html>
<html>
<head>
<title>列表</title>
<style type="text/css">
div{
width:100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>樣式</div>
</body>
</html>③外部CSS檔案
這種樣式是html一個檔案，css一個檔案
no4.html
<!DOCTYPE html>
<html>
<head>
<title>列表</title>
<link rel="stylesheet" type="text/css" href="no3.css">
</head>
<body>
<div>樣式</div>
</body>
</html>
no3.css
div{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: black;
}
3、選擇器
選擇器也有很多，有id選擇器、class選擇器、標籤選擇器、萬用字元選擇器、屬性選擇器等
①id選擇器
id選擇器類似身份證，和元件一對一的關係。
②clss選擇器
class選擇器類似於一款衣服，可以被多個使用者使用。
③標籤選擇器
標籤選擇器就是，同時為所有該標籤的內容使用該樣式
④萬用字元選擇器
⑤屬性選擇器
4、選擇器的優先順序
優先順序排序：
| 選擇器 | CSS權重 |
| !important | Infinity |
| 行間樣式 | 1000 |
| id | 100 |
| class|屬性|偽類 |
10 |
| 標籤 | 1 |
| 萬用字元 | 0 |
CSS權重小知識：10和1並不是十進位制或二進位制，而是256進位制，即01＋255=10，所以1和10之間的差距是差很遠的。