文章目錄
html:結構
css:樣式
js:行爲
1.主流瀏覽器及其內核
| shell | 內核 |
|---|---|
| IE | trident |
| Firefox | Gecko |
| Google chrome | webkit/blink |
| safari | webkit |
參考博客：https://blog.csdn.net/zhy0929/article/details/88774703
2.css三種引入方式
2.1 行間樣式
使用style屬性引入：
效果：
2.2 頁面級css
在head中的style標籤中設置：
效果：
2.3 外部css文件
引入外部css文件：
效果：
3.css選擇器
參考手冊：https://www.w3school.com.cn/cssref/css_selectors.asp
詳解：https://blog.csdn.net/wangchaohpu/article/details/82413850
3.1 id
頁面唯一，可精準定位元素
3.2 class
不是頁面唯一
3.3 標籤選擇器
效果：
3.4 通配符
所有元素
效果：
3.5 僞類選擇器
.hover 等，參考博客：https://blog.csdn.net/wangchaohpu/article/details/82413850 即可。
3.6 父子選擇器（即派生選擇器）
瀏覽器尋找匹配標籤時，從span–>div這樣的順序
3.7 直接元素選擇器
效果：
3.8 並列選擇器
3.9 分組選擇器
3.10 僞類選擇器
hover
https://www.w3school.com.cn/cssref/selector_hover.asp
3.11 選擇器優先級
優先級：!important > 行間樣式 > id > class | 屬性 > 標籤選擇器 > 通配符
可用css權重來具體區別：
| 類型 | 權重 |
|---|---|
| !important | infinity |
| 行間樣式 | 1000 |
| id | 100 |
| class/屬性/僞類 | 10 |
| 標籤/僞元素 | 1 |
| 通配符 | 0 |
注：（多個選擇器權重相加）權重相同，後面的選擇器覆蓋前面的選擇器。
4.css屬性
css屬性參考手冊：https://www.w3school.com.cn/cssref/index.asp
畫一個三角形：
效果：
剩下一個三角形：
4.1 常用屬性
文本屬性：
對齊方式：text-align:left（左對齊）、right（右對齊）、center（居中）；
文本高度：line-height；
https://www.w3school.com.cn/cssref/pr_dim_line-height.asp
文本在容器中垂直居中，可設置文本高度等於容器高度；
首行縮進：text-indent:2em;
em：是一個相對大小，相對所指的是相對於元素父元素的font-size；
文本裝飾：text-decoration：none（默認，沒有線）、underline（文本下方線）、overline（文本上方線）、line-through（穿過文本線）、blink（閃爍）
光標類型：cursor：text（文本）、pointer（一隻手）
直接參考文檔
https://www.w3school.com.cn/cssref/pr_class_cursor.asp
開發過程一般先寫css，再給標籤分配；
標籤選擇器主要是用來給標籤初始化樣式
通配符選擇器可以初始化所有標籤格式