Talk is cheap. Show me the code
翻譯一下就是我江哥的名言：廢話不多說，直接上代碼?。。?/strong>
一、知識總結(jié)
本來想把江哥講的所有CSS相關(guān)基礎(chǔ)知識全部整理出來，后來發(fā)現(xiàn)實(shí)在是太多，怕閱讀困難，只能借用江哥的圖片了，后來發(fā)現(xiàn)思維導(dǎo)圖的效果比文字好太多了，江哥見諒啊，哈哈~O(∩_∩)O~哈哈
溫馨提示：以下圖片較大，請右鍵保存桌面后，用照片查看器觀看大圖
-
①CSS常見屬性
-
②CSS選擇器
-
③CSS三大特性
-
④CSS顯示模式
-
⑤背景和精靈圖
-
⑥盒模型
-
⑦浮動(dòng)流
-
⑧清除浮動(dòng)
-
⑨定位
二、江哥CSS的課程特點(diǎn)
-
課程特點(diǎn)一：強(qiáng)調(diào)對比
江哥的CSS課程一個(gè)很大的特點(diǎn)是強(qiáng)調(diào)代碼效率的對比，比如剛進(jìn)入CSS課程為了向我們解釋CSS對比HTML添加樣式的高效段就同時(shí)列舉了一下兩代碼
<h1 align="center"> <font face="微軟雅黑" color="red">成功法則</font></h1>
<p align="center"> <font face="微軟雅黑" color="blue" size="5">遲到毀一生</font></p>
<p align="center"> <font face="微軟雅黑" color="blue" size="5">早退窮三代</font></p>
<p align="center"> <font face="微軟雅黑" color="blue" size="5">按時(shí)上下班</font></p>
<p align="center"> <font face="微軟雅黑" color="blue" size="5">必成高富帥</font></p>
<style type="text/css">
h1
{ text-align: center; color: red; font-family: "微軟雅黑"; }
p{ text-align: center; color: blue; font-size: 20px; }
-
課程特點(diǎn)二：及時(shí)復(fù)習(xí)
幾乎每段課程開始前20秒的話都是一樣的：
好！那經(jīng)過我們上節(jié)課學(xué)習(xí)呢，我們了解了一下我們這個(gè)XX...那這個(gè)XX究竟是用來干什么的呢？...
正是每次講課前這些看似重復(fù)追述的的話讓我對上節(jié)課的知識進(jìn)行了基本的回顧，而且大概知道了上下兩節(jié)課的大致聯(lián)系與不同，為以后的學(xué)習(xí)也鋪平了道路
-
課程特點(diǎn)三：百試不爽的快捷鍵總結(jié)
這些常用快捷鍵的總結(jié)大大提高了我的碼字效率,跟iOS中的代碼塊相比速度也是杠桿的，而且靈活性要高得多（PS：我iOS中的代碼塊也是跟著江哥學(xué)的O(∩_∩)O哈哈~）。
fw font-weight:;
fwb font-weight: bold;
fwbr font-weight: bolder;
fz font-size:;
fz30 font-size: 30px;
ff font-family:;
-
課程特點(diǎn)四：相關(guān)知識及時(shí)補(bǔ)充
比如中英文字體處理的tips
1.如果設(shè)置的字體不存在, 那么系統(tǒng)會(huì)使用默認(rèn)的字體來顯示默認(rèn)使用宋體
2.如果設(shè)置的字體不存在, 而我們又不想用默認(rèn)的字體來顯示怎么辦?可以給字體設(shè)置備選方案格式:font-family:"字體1", "備選方案1", ...;
3.如果想給中文和英文分別單獨(dú)設(shè)置字體, 怎么辦?但凡是中文字體, 里面都包含了英文但凡是英文字體, 里面都沒有包含中文也就是說中文字體可以處理英文, 而英文字體不能處理中文**注意點(diǎn): 如果想給界面中的英文單獨(dú)設(shè)置字體, 那么英文的字體必須寫在中文的前面
4.補(bǔ)充在企業(yè)開發(fā)中最常見的字體有以下幾個(gè)中文: 宋體/黑體/微軟雅黑英文: "Times New Roman"/Arial還需要知道一點(diǎn), 就是并不是名稱是英文就一定是英文字體因?yàn)橹形淖煮w其實(shí)都有自己的英文名稱, 所以是不是中文字體主要看能不能處理中文宋體 SimSun黑體 SimHei微軟雅黑 Microsoft YaHei
又比如顏色知識的補(bǔ)充
1.1英文單詞一般情況下常見的顏色都有對應(yīng)的英文單詞, 但是英文單詞能夠表達(dá)的顏色是有限制的, 也就是說不是所有的顏色都能夠通過英文單詞來表達(dá)
1.2rgbrgb其實(shí)就是三原色, 其中r(red 紅色) g(green 綠色) b(blue 藍(lán)色)格式: rgb(0,0,0)那么這個(gè)格式中的第一個(gè)數(shù)字就是用來設(shè)置三原色的光源元件紅色顯示的亮度第二個(gè)數(shù)字就是用來設(shè)置三原色的光源元件綠色顯示的亮度第三個(gè)數(shù)字就是用來設(shè)置三原色的光源元件藍(lán)色顯示的亮度這其中的每一個(gè)數(shù)字它的取值是0-255之前, 0代表不發(fā)光, 255代表發(fā)光, 值越大就越亮紅色: rgb(255,0,0);綠色: rgb(0,255,0);藍(lán)色: rgb(0,0,255);黑色: rgb(0,0,0);白色: rgb(255,255,255);在前端開發(fā)中其實(shí)并不常用黑色只要讓紅色/綠色/藍(lán)色的值都一樣就是灰色而且如果這三個(gè)值越小那么就越偏黑色, 越大就越偏白色例如: color: rgb(200,200,200);
1.3rgbargba中的rgb和前面講解的一樣, 只不過多了一個(gè)a那么這個(gè)a呢代表透明度, 取值是0-1, 取值越小就越透明例如: color: rgba(255,0,0,0.2);
1.4十六進(jìn)制在前端開發(fā)中通過十六進(jìn)制來表示顏色, 其實(shí)本質(zhì)就是RGB十六進(jìn)制中是通過每兩位表示一個(gè)顏色例如: #FFEE00 FF表示R EE表示G 00表示B
這些相對冷僻的知識是我在其他視頻教程中從沒見過，也正是江哥的及時(shí)補(bǔ)充讓我在開發(fā)中有了更大靈活性和拓展性
課程特點(diǎn)五：講課風(fēng)格循循善誘
這一點(diǎn)尤其體現(xiàn)在浮動(dòng)哪幾節(jié)，江哥一共講了六種清楚浮動(dòng)的方法，由淺入深，互相對比與劣，思路清晰、講課干練、循循善誘、步步為營，本來在看過其他機(jī)構(gòu)課程講的浮動(dòng)之后一臉懵逼的我瞬間對這塊知識就豁然開朗了-
課程特點(diǎn)六：我最佩服江哥的一點(diǎn)——耐心and細(xì)心
在這套課程中能明顯看出來江哥傾注了很多心血，尤其是講課過程中知識的總結(jié)非常到位，最讓我由衷敬佩的是江哥對這些這些知識，不論多少，不論難易，不勝其煩的全都注釋在代碼里，是的我們課后復(fù)習(xí)時(shí)也能對相關(guān)知識點(diǎn)信手拈來，不服請看下圖：
代碼注釋.png
代碼注釋2.png
江哥的好千言萬語說不盡，這套課程的好也不僅于此，限于篇幅，下章再講O(∩_∩)O哈哈~
真心祝愿小碼哥在李明杰和李南江兩位大神的帶領(lǐng)下將中國的IT培訓(xùn)行業(yè)重新洗牌，愿小碼哥越做越大、越做越強(qiáng)?。?！
學(xué)HTML5就選李南江，選培訓(xùn)機(jī)構(gòu)我只選小碼哥（www.520it.com）
