tml5教程中的CSS對(duì)于大部分人來說都是非常簡(jiǎn)單的,也是人們常說能快速學(xué)會(huì)的,但為什么總有人會(huì)覺得CSS很難學(xué)呢?
很多Html5教程視頻會(huì)說幾小時(shí)學(xué)會(huì)CSS,但里面確是幾個(gè)常用的屬性,一旦深入去學(xué),會(huì)發(fā)現(xiàn)其實(shí)自己什么都不懂,而一般說好學(xué)的人可能也并沒有跳出常用的屬性。
所以我們想要學(xué)習(xí)CSS可以通過什么方式呢?最常見的就是看書和瀏覽社區(qū)文章。
但不是說咱們把東西瀏覽一遍就算了,看完了還是不會(huì),我們需要做的第一點(diǎn)就是基礎(chǔ)CSS的數(shù)據(jù)類型。想要學(xué)習(xí)更多的CSS屬性,不妨從數(shù)據(jù)類型開始,你會(huì)發(fā)現(xiàn)每次學(xué)習(xí)都會(huì)有新思路。
在記住了CSS的數(shù)據(jù)類型之后,我們需要讀懂CSS的語法。一般來說初學(xué)者或者只是想找一下某個(gè)CSS屬性的用法,采取最多的方式就是百度。
但如果有了解過clip-path這個(gè)屬性,百度在手,天下我有的氣勢(shì)瞬間蕩然無存。當(dāng)然對(duì)于大部分從業(yè)者來說,好像有一些屬性一輩子都不會(huì)用到,只要掌握常用的就可以了。
但I(xiàn)T行業(yè)發(fā)展是非常迅速的,誰也說不準(zhǔn)常用的屬性是否會(huì)繼續(xù)常用,不常用的屬性是否依舊待在冷宮,而且每個(gè)CSS大佬之所以是大佬也是因?yàn)樗麄儾粩鄬W(xué)習(xí),動(dòng)手實(shí)踐。
不斷的失敗,嘗試,再失敗,再嘗試才會(huì)有今日的輝煌。Html5教程中的CSS或許是難學(xué)的,但再難學(xué)也是人創(chuàng)造的,也是可以由人攻破。
了解更多
SS層疊樣式表
其實(shí)CSS并不難學(xué)。最主要的是要掌握方法。
就個(gè)人經(jīng)驗(yàn)而言,學(xué)習(xí)任何一門專業(yè)知識(shí)都是有一定步驟的:
首先,你需要了解該專業(yè)知識(shí)的一般概念、用途、用法,甚至也要了解一下其歷史沿革。比如CSS的概念是層疊樣式表,英文是“Cascading Style Sheets”,用于給網(wǎng)頁添加樣式,類似于給房屋粉刷墻壁、鋪地磚、打吊頂。等等……
其次,你需要對(duì)該專業(yè)知識(shí)的各詳細(xì)參數(shù)屬性有大概的了解,知道各屬性是用來做什么的。比如CSS中的選擇器有哪幾種,在何種情況下使用,CSS對(duì)文本的樣式有哪些控制屬性,對(duì)盒子模型又有哪些控制屬性等等……我在剛開始了解這些屬性的時(shí)候,是邊理解邊在腦中想象其在網(wǎng)頁中呈現(xiàn)的樣子的,這樣記憶這些屬性和參數(shù)就會(huì)更形象而且牢固。
然后,你就可以找一臺(tái)配置不用很好的電腦,來動(dòng)手實(shí)踐一下,寫一些樣式,來感知一下CSS的效果,以及印證之前學(xué)習(xí)中對(duì)CSS中各屬性呈現(xiàn)樣子的想象了。
在平時(shí)可以多看看網(wǎng)上別人寫得樣式,在瀏覽網(wǎng)頁時(shí),可以按F12查看頁面中各控件的CSS代碼,不斷加深對(duì)代碼的熟悉感。
最后就是不斷實(shí)踐,多練習(xí)。不出一年,甚至更短時(shí)間,你就會(huì)成為CSS中等水平的Front-End-Engineer了
我最近在編寫《精通CSS》系列文章,趕緊去看看:
CSS屬性值函數(shù)(1)概述及語法
CSS屬性值函數(shù)(2)calc()數(shù)值計(jì)算
CSS屬性值函數(shù)(3)clamp()限值函數(shù)
CSS屬性值函數(shù)(4)極值函數(shù)min()、max()
未完待續(xù)……
加油吧……
SS并不比其他編程語言更困難,說這個(gè)話大概是因?yàn)闆]有接觸到真正困難的地方。因?yàn)榇蟛糠殖绦騿T做的都是最基礎(chǔ)最簡(jiǎn)單的工作。
編程有兩類不同的工作:一類是機(jī)械性的,把比較清晰的行為邏輯翻譯成代碼;另一類是創(chuàng)造性的,給你的信息是不足的,需要發(fā)揮創(chuàng)造力,補(bǔ)上不足的部分,完成整個(gè)項(xiàng)目。它可以包含難易程度各自不同的很多內(nèi)容:
1. 根據(jù)接口設(shè)計(jì)算法
2. 根據(jù)功能設(shè)計(jì)相配合的接口和數(shù)據(jù)結(jié)構(gòu)
3. 設(shè)計(jì)容納現(xiàn)有功能及未來擴(kuò)展的軟件框架
4. 設(shè)計(jì)能達(dá)到預(yù)定目標(biāo)、滿足用戶需求同時(shí)開發(fā)成本最小的的功能
創(chuàng)造性的工作天生是困難的,許多程序員最多只接觸過1到2,甚至很多只是翻譯一下業(yè)務(wù)邏輯,自然會(huì)以為編程就是比較簡(jiǎn)單,那是因?yàn)樗讲粔?,?fù)雜的工作都讓別人替自己做了。即便是許多所謂架構(gòu)師、產(chǎn)品經(jīng)理,他們做3和4做的怎樣,你們心里恐怕也有數(shù)。
說回CSS。如果說你寫CSS的時(shí)候得到的信息跟寫業(yè)務(wù)邏輯一樣清楚,比如說:整個(gè)頁面有三個(gè)框,采用浮動(dòng)布局,左邊和右邊固定200px,最小高度是100vh,內(nèi)容是中間框的子節(jié)點(diǎn),padding是10px……那你也會(huì)覺得寫CSS很容易,就是翻譯一下嘛。問題在于寫CSS的時(shí)候給的并不是這種清晰的描述,而是只有整個(gè)東西長(zhǎng)什么樣,至于具體每個(gè)元素如何排布、使用怎樣的布局方式、如何設(shè)計(jì)選擇器,都是需要自己精心設(shè)計(jì)的,自然就顯得難了。
為什么整個(gè)東西長(zhǎng)什么樣不能直接翻譯成CSS呢?很多人以為CSS是給DOM元素設(shè)置屬性(attribute),其實(shí)CSS規(guī)定的并不是屬性,而是行為(behavior),DOM里的每個(gè)元素都可以看成是一個(gè)獨(dú)立的物體,按照CSS規(guī)定的方式運(yùn)動(dòng),最后穩(wěn)定下來的結(jié)果就是最終布局的結(jié)果。所以高票答案說CSS不正交,它當(dāng)然不是正交的,因?yàn)樗脑O(shè)計(jì)就是要求協(xié)變,要求在其他元素做出調(diào)整的時(shí)候,即便本元素的樣式?jīng)]有發(fā)生任何變化,也可以跟著調(diào)整位置和大小,以適應(yīng)新的內(nèi)容,維持設(shè)計(jì)風(fēng)格。
為什么CSS要設(shè)計(jì)成基于選擇器和多種各異的behavior,而不像其他框架那樣直接將顯示樣式綁定到每個(gè)元素呢?恰恰是因?yàn)檎恍?,因?yàn)镃SS和DOM是正交的,這樣DOM內(nèi)容變化時(shí),CSS可以規(guī)定一組不變的特性,從而以靈活的方式適應(yīng)內(nèi)容的改變。傳統(tǒng)的GUI通常每個(gè)元素都有固定的位置和大小,要實(shí)現(xiàn)根據(jù)內(nèi)容動(dòng)態(tài)調(diào)整,就必須針對(duì)各種情況(如視口大小改變,內(nèi)容改變)專門編寫代碼;WPF則有網(wǎng)格、流式、絕對(duì)三種不同的定位方式,與CSS有不少共同點(diǎn),但是自適應(yīng)的功能少了不少,也沒有選擇器的功能,這樣動(dòng)態(tài)生成的內(nèi)容就需要更多的代碼來調(diào)整。而CSS只要將DOM組織成特定的格式,就會(huì)自動(dòng)啟用相應(yīng)的樣式。WPF制作的界面畢竟變化比較少,大部分元素仍然是固定的,而網(wǎng)頁通常要求更高的靈活性。
我已經(jīng)編程一年多了,先后學(xué)過Python Java ,寫過爬蟲若干、用Django寫過網(wǎng)站一兩個(gè)(套模板),拿pygame 也寫過游戲,喜歡刷leetcode …總體來說我覺得編程是一件很有趣的事情。
然而上個(gè)月開始系統(tǒng)學(xué)習(xí)HTML CSS JavaScript…都說HTML CSS 特別容易,可我學(xué)了兩三個(gè)星期了,模仿個(gè)京東網(wǎng)站的靜態(tài)頁面還是感覺很難,尤其是布局這塊。我是跟著w3school上學(xué)的,每個(gè)標(biāo)簽,每個(gè)屬性可以說我都看的很仔細(xì),但每次一到自己從零開始做一個(gè)頁面的時(shí)候,我就會(huì)完全不知道從哪兒下手,一個(gè)下午下來一半都寫不出來…我總結(jié)出來覺得難的原因如下:
很多時(shí)間都花在debug 上了,比如在CSS選擇器中,div前面多加了一個(gè)點(diǎn),然而瀏覽器完全允許這種行為啊,導(dǎo)致每次出錯(cuò)我都得扒著屏幕一塊一塊看哪兒錯(cuò)了,。寫個(gè)代碼讓我有種吃屎一樣的難受…
前有IE 6的不兼容,后有CSS 3大量屬性的補(bǔ)充。讓我感覺內(nèi)容特別細(xì)、雜、多。
相反我倒覺得JavaScript 能學(xué)下去,畢竟是編程語言,以前接觸的比較多,理解起來不難。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。