今天在饑人谷學(xué)習(xí)了css基礎(chǔ)知識(shí)稻励，結(jié)合維基百科寥假，寫(xiě)下此博客跟大家分享逐沙，如有錯(cuò)誤之處偏序，歡迎指正（沒(méi)有獎(jiǎng)勵(lì)??）哼御。
目錄：
- css歷史
- 體系化學(xué)習(xí)
css歷史
css：中文為層疊樣式表（又稱(chēng)串樣式列表、級(jí)聯(lián)樣式表兰粉、串接樣式表故痊、階層式樣式表）是一種用來(lái)為結(jié)構(gòu)化文檔（如HTML文檔或XML應(yīng)用）添加樣式（字體、間距和顏色等）的計(jì)算機(jī)語(yǔ)言玖姑，由W3C定義和維護(hù)愕秫。當(dāng)前最新版本是CSS2.1，為W3C的推薦標(biāo)準(zhǔn)客峭。CSS3現(xiàn)在已被大部分現(xiàn)代瀏覽器支持，而下一版的CSS4仍在開(kāi)發(fā)中抡柿。1994年舔琅，哈肯·維姆·萊提出了CSS的最初建議。
層疊:
- 樣式層疊：可以多次對(duì)同一選擇器進(jìn)行樣式聲明洲劣。
- 選擇器層疊：可以用不同選擇器對(duì)同一個(gè)元素進(jìn)行樣式聲明备蚓。
- 文件層疊：可以用多個(gè)文件進(jìn)行層疊。
note：這些特性使得css極度靈活囱稽，也為css被吐槽留下了隱患郊尝。
目前CSS2.1為使用最廣泛的版本（IE支持），CSS3為最新版本（IE8部分支持）战惊。
使用caniuse.com檢查各種瀏覽器支持哪些特性流昏。
體系化學(xué)習(xí)
怎樣學(xué)習(xí)一門(mén)語(yǔ)言：
-
語(yǔ)法（怎樣寫(xiě)代碼）
-
語(yǔ)法1：樣式語(yǔ)法
選擇器{ 屬性名:屬性值; /*注釋*/ }
Notes：
- 所有符號(hào)都是英文符號(hào)。
- 區(qū)分大小寫(xiě)吞获。
- 沒(méi)有//注釋
- 最后一個(gè)分號(hào)可省略况凉，但建議不要省略。
- 任何一個(gè)地方寫(xiě)錯(cuò)了各拷，都不會(huì)報(bào)錯(cuò)刁绒，瀏覽器會(huì)忽略。
- 若想知道寫(xiě)錯(cuò)烤黍，
-
語(yǔ)法2:@語(yǔ)法
@charset "UTF-8"; @import url(css路徑); @media (min-width: 100px)and (max-width:200px){ 語(yǔ)法1 }
Notes:
- @charset必須放在第一行知市。
- 前兩個(gè)@語(yǔ)法都必須以;結(jié)尾。
- @media語(yǔ)法以后在講速蕊。
- charset是字符集的意思嫂丙，但UTF-8是字符編碼encoding，為歷史遺留問(wèn)題规哲。
-
-
調(diào)試（查找代碼錯(cuò)誤）
https://jigsaw.w3.org/css-validator/將代碼粘貼上去即可奢入，不推薦
vscode顏色報(bào)錯(cuò)，位置不大準(zhǔn)。
WebStorm看顏色腥光，位置準(zhǔn)確关顷。
-
Chrome開(kāi)發(fā)者工具看警告。
1. 找到標(biāo)簽 2. 是否有選擇器 3. 樣式是否被劃掉 4. 樣式是否被警告 -
Border調(diào)試法：
1. 找到懷疑元素 2. 給該元素加一個(gè)border 3. 若border沒(méi)生效武福，說(shuō)明選擇器錯(cuò)了或語(yǔ)法錯(cuò)了 4. 若border生效了议双，看看邊界是否符合預(yù)期 5. bug解決了刪除bordernote：
CSS的border調(diào)試法相當(dāng)于JS的log調(diào)試法。
-
查資料
- mdn
- css tricks
- 張?chǎng)涡癫┛?/li>
-
標(biāo)準(zhǔn)制定者w3c
- all css specifications
- css2.1中文版
如何學(xué)
- 抄文檔捉片，抄老師
- 在自己電腦上運(yùn)行
- 加入自己的想法平痰，重新運(yùn)行并調(diào)試。
