如何高效自學CSS？

01-05

我是美術設計出身，之前沒有任何代碼基礎，想通過自學學會基礎的CSS樣式。
別人推薦一本Richard York的 CSS基礎入門。學習之前想問一下用什麼方法可以高效的自學基礎CSS，有什麼需要特別注意的，哪些是可以暫時先帶過的？

回憶了下自己的經歷，我提點簡單的建議吧

初期不要急著自己去設計頁面，直接仿站來讓自己獲得從0到1的能力。我個人應該主要是通過模仿WordPress模板入的門。當然找的都是一些比較有新意的，結構上稍有複雜度的，基本沒切過有高相似度的頁面，時間要花在刀刃上。當時國外應該有大量應用了css3動畫以及響應式設計等較新技術的頁面（2011年），也確實培養起了自己對CSS的興趣。
找份真實的工作來鞏固深入學習。相信我，放低姿態去找份真實的開發工作，比你自己業餘去摸索要高效10倍。我個人畢業後進入網易，經過公司的內部系統培訓，理解了CSS模塊化的思想，才發現自己以前只能算是完成了一個頁面，而不算是做好了它。真實的產品開發才是自己的CSS能力真正落地的開始。
工作後應繼續關注相關一些例如Codrops 等這類能帶來CSS使用靈感的網站，去思考為什麼，而不是copy它的代碼去完成功能。頁面開發中有太多重複的工作，如果你一直用一個思路去解決問題，會有礙於經驗和能力的積累，形成一個較低級舒適區的怪圈。平時也可以去codepen這類網站收集一些瑣碎的靈感，增加知識面
學習css過程中千萬不要剝離HTML學習。當你什麼時候理解了html的重要性（從頁面開發角度而言，它可以視為是後續良好css和js編碼得以實施的基礎，相當於程序中的數據結構，設計好了可以讓你事半功倍），你才可以稱得上是一個合格的頁面開發
對於新人，我建議除了幾個關鍵概念，如布局、盒模型、單位等等，都不應該花大量去扣細節，甚至背書記憶，瀏覽性學習知道有這個東西就行，在實際應用時再去加深記憶。

算拋磚引玉吧，好久沒有機會好好寫寫CSS了。雖然我一直認為純粹的CSS頁面開發並不適合作為前端領域裡深入發展的方向，但不可否認，在學習玩耍css的過程中，帶給了自己很多樂趣。

無法高效，你需要不停的練習，用時間來證明。

我沒看過css的書，屬於奇葩入門。

貌似是在有一天，做了轉崗，然後以前從沒寫過css，被逼著去一點一點寫。

一開始所有的樣式都在頁面標籤里，一開始ie6就是個災難，一開始天天加班改東西。

那時候每天大約做三四個頁面吧，有時候更多。

慢慢也就好了，相信我。。。需要注意的你寫著寫著就知道了，不需要的你也遇不到，遇到再google吧。。。

簡單的css也能做出漂亮的效果，重在創意，技術是基石。

我建議先廣度鋪開，再追求深度。然後以模仿的方式做各種效果。把代碼放到git倉庫保留，方便複習總結。

同時看書以求系統化的知識體系。

基礎書到豆瓣搜高分的就好。

高級的可以看css2的標準。

先掌握HTML幾個基礎標籤，比如div，h，p，span，a，ul，li。然後找一個網站頁面做高仿，盡量用基礎的HTML標籤和CSS去實現，不要用JS庫，如果碰到要用JS腳本的，自己覺得沒必要或者精力有限就直接跳過吧。

如果這樣能擼出一個高仿的，我覺得差不多了。

推薦一本書《CSS揭秘》

我建議直接照著淘寶的首頁，擼一個相同的demo，把效果做出來，不用考慮兼容性，直接用css3來實現，做完了，就可以算入門了

在於實戰，在華夏互聯，我們要求至少要有三年。

第一年，怎麼做都是垃圾。

第二年，美容網做成了色情網的水平。

第三年，怎麼做都看出抄襲的痕迹，

如此堅持實踐，你行嗎？

到w3c看教程，CSS 教程。

另外，學css，肯定也要懂html才行，w3c也有教程。w3c是web開發很好的入門材料，看完之後就知道日後的學習方向了。

許多人都開始學習CSS，但又不知從何入手，所以此文就是給那些初學者所寫，帶他們踏上CSS列車。

一. CSS學習重在方法!

學習任何東西都是一樣，從小學、中學、大學，除了學習知識外就是去學習方法! 要想掌握CSS, 首先要學會HTML，因為一個樣式它是不可能脫離HTML頁面的，HTML不與樣式結合的話, CSS就失去了存在的意義。所以一般書中都會舉一個例子，然後讓你上機測試效果，這是筆者想讓你有對樣式表CSS有一個初步的印象，告訴你CSS能做什麼。一個小例子：「麻雀雖小，五臟俱全」，你可能看不懂每一個語句的真正意思。但是你可以記得例子的模式，以後在實踐中不斷地用，不斷用的過程就是不斷記的過程，所以不能恢心，不能總認為自己記憶力不好，但不管你騎的是牛也好，千里馬也罷，只要有恆心，一定會到達終點的。閱讀一本書，一般來說第一次要先把整個書通讀一遍，不理解的也要往下看，在往下看的過程中你也許會找到那個問題的答案。看完後你有一個大概的印象，但一定有很多不明白的地方，沒關係，繼續往下看。第二遍你就要邊看邊做學習筆記了，把你認為是重點的部分寫上，還有，你覺得有疑問的部分也要記下，帶著疑問看下去，如果沒有答案，你可以去BBS上發一個貼子，好心人還是很多的，提示一句：「一定要學會如何去問問題!」這裡就不說了。你還要上機去練習書上的例子，最讓你困惑的：「一是記不住，二是對概念的理解有誤(這一條可能是書譯的不好，另外就是你的理解不對)」，對於第一條你就要樹立信心，堅持再堅持下去。當你到達終點時你回發現一切都是順理成章的事。因為你努力了，努力了就會有回報，有結果。

有好多人視頻也看了，帖子，但是沒有什麼進步，分析主要有以下幾個原因：原因一：壓力不夠，因為有不少人比如美工學CSS，因為是看別人學，所以學之，不學就沒優勢!這樣的壓力是很小的，學不好還有美工這碗飯。原因二：只是業餘學習，這樣學還只是玩一玩，因為你不一定非要以這門技術吃飯。原因三：方法不對，有的人只是在看教程，但他不動手去做，我以前就是看的太多，做的太少，所以有了實踐你才能把理論的東西揉進去。

二. 掌握CSS的四個學習階段學CSS可以分成以下幾個階段：

階段一：不去想瀏覽器的兼容性問題的情況下能做出頁面，但頁面里到處用TABLE的模式DIV寫出的頁面。

階段二：想到了兼容性問題，但無法提前預防，只會修補問題，大量使用HACK技術(我對HACK技術只是知道，但用的很少)

階段三：可提前預防BUG，但樣式表中大量應用了ID,CLASS，CSS譯過來是重疊樣式表，比如「DIV P SPAN」。這句代碼是標明DIV子元素中P的子元素SPAN，這樣寫就可以定義SPAN的樣式了，不用在SPAN中加入CLASS了。這也就是CSS的優點所在，為什麼不好好利用而一定要定義一個CLASS呢!

最好別看書，去模仿一個網站，看到陌生樣式去百度，多練習

多動手

代碼需要多實踐，不過前提是要對概念的理解滲透，不然反而浪費時間。建議找兩本 css 方面的書籍，一本偏向基礎，一本偏向高級，系統學習一下。然後再在實踐加以磨練。css 相對而言還是比較簡單的，沒有多少邏輯性，靠記憶和實踐。

我覺得有些回答了一堆還需要題主自己去找重點，這裡我簡單說下我的方法

1.重點的，如果你對css完全都沒接觸過的話，先把w3c的css基本內容從頭到尾過一遍，扎紮實實的敲一遍

2.此時應該懂了基本的css，嘗試去找些經典的布局雙飛翼聖杯什麼的練練手

3.現在，找個psd，不用太複雜的，耐心的慢慢寫出來，不會的就百度查api

這樣下來基本上css基礎算入門了

作為一個剛剛自學入門的，並剛剛寫了一個自己很滿意網站的菜鳥。以我快速入門的技術告訴你。學css你的和div組合學習，並多看實戰教程，自己根據自己需求實踐製作。html是基礎，高度，寬度，盒子模型這些你必須熟悉。所以我一般選擇凌晨就像屌絲打遊戲一樣安安靜靜的的學習。如果你真有興趣，基本可以2天內掌握，只是常用單詞還不熟悉，像我，英語水平還等於0，總的辭彙量不超過20.除去那23個字母哈。不熟悉，沒事，多看看別人怎麼寫的，模仿寫幾遍就熟悉了。你自己興趣和需求決定了你的學習速度。

看代碼，寫代碼。

css都是點記憶性的東西。

沒事多寫網頁就行了。