翻譯一下就是我江哥的名言:廢話不多說,直接上代碼?。?!
一、知識總結(jié)
本來想把江哥講的所有CSS相關(guān)基礎(chǔ)知識全部整理出來,后來發(fā)現(xiàn)實(shí)在是太多,怕閱讀困難,只能借用江哥的圖片了,后來發(fā)現(xiàn)思維導(dǎo)圖的效果比文字好太多了,江哥見諒啊,
溫馨提示:以下圖片較大,請右鍵保存桌面后,用照片查看器觀看大圖
①CSS常見屬性
②CSS選擇器
③CSS三大特性
④CSS顯示模式
⑤背景和精靈圖
⑥盒模型
⑦浮動流
⑧清除浮動
⑨定位
二、江哥CSS的課程特點(diǎn)
課程特點(diǎn)一:強(qiáng)調(diào)對比
江哥的CSS課程一個(gè)很大的特點(diǎn)是強(qiáng)調(diào)代碼效率的對比,比如剛進(jìn)入CSS課程為了向我們解釋CSS對比HTML添加樣式的高效段就同時(shí)列舉了一下兩代碼
成功法則
遲到毀一生
早退窮三代
按時(shí)上下班
必成高富帥
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哈哈~)。
fwfont-weight:;fwbfont-weight: bold;fwbrfont-weight: bolder;fzfont-size:;fz30font-size:30px;fffont-family:;
課程特點(diǎn)四:相關(guān)知識及時(shí)補(bǔ)充
比如中英文字體處理的tips
1.如果設(shè)置的字體不存在, 那么系統(tǒng)會使用默認(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è)顏色例如:#FFEE00FF表示R EE表示G00表示B
這些相對冷僻的知識是我在其他視頻教程中從沒見過,也正是江哥的及時(shí)補(bǔ)充讓我在開發(fā)中有了更大靈活性和拓展性
課程特點(diǎn)五:講課風(fēng)格循循善誘
這一點(diǎn)尤其體現(xiàn)在浮動哪幾節(jié),江哥一共講了六種清楚浮動的方法,由淺入深,互相對比與劣,思路清晰、講課干練、循循善誘、步步為營,本來在看過其他機(jī)構(gòu)課程講的浮動之后一臉懵逼的我瞬間對這塊知識就豁然開朗了
課程特點(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)