標籤：

想要學CSS應該如何入門？

01-05

唔=A=可以的話，希望推薦一些書或者教程網頁之類的...

CSS Mastery

我是看這本書入門的，後面主要看一些博客、MDN、CSS 規範之類的了。

建議先知其然再知其所以然

先跟著菜鳥教程 CSS 教程 跟著案例，運行嘗試修改，知道一些基本的概念語法，建立興趣。

再系統地看 MDN文檔 CSS

相關的書籍有《CSS權威指南》（很詳細但是有點兒老了）

《CSS揭秘》

《精通CSS：高級Web標準解決方案》

平時可以看看一些不錯的博客和專欄等。

。。。

我覺得最好的方式是實踐出來的。

如果你沒有一個網站或者一個伺服器等等之類的。

你可以用Github去做一個自己的博客，雖然是靜態的但是也是夠的。

可以按下面的步驟來學習，一個網站正常情況下由三部分組成:

1. Head 頂部導航

2. Content 內容

3. Footer 頂部導航

對於Head來說有不同的玩法，而首先你需要學會的是ul li a 這三個基礎的HTML，而對於大部分前端程序員來說。要手動寫一個水平導航可以說是一個入門的標誌，還有豎直的導航，浮動的導航等等。如知乎的head的z-index，決定了他一直在前面

接著你還會遇到的問題是如何處理底部的footer，讓他一直在最下面的。而不會亂跑，

大概需要的過程

1. 學會分析一個網頁的結構

2. 理解每部分的原理

3. 手動寫CSS

了解一樣東西,我認為最重要的莫過於了解Ta的過去,Ta的現狀,以及Ta的未來.學習CSS也不外乎如此.

通過網路學習一樣新東西,最大的困惑就是----網上的文章,寫得非常好.但就是碎片化,不系統.而且還有個情況就是:有些問題,大神們覺得很簡單,不屑一提或者毫無意識的內容或知識,對於那些剛入門的人因為不知道,也沒人點播,有可能會在這個問題上迷茫很久.這一點我體會頗深.

經驗分享:入門階段不要管好那麼多細節,記憶之類的東西,儘快地入門才是最重要的.其實入門,無非就是對所學內容形成一套概念,知其然,所以然.大概的就成了.

我就結合自己的學習歷程和踩過的一些坑,來談談我對CSS的認識吧.希望可以幫助到剛剛入門想學習CSS的童鞋,建立起對CSS的認知體系.

~Hope you like it~

相關回答

瀟13狼：如何有效快速的學習HTML/CSS/JS？

瀟13狼：想要學CSS應該如何入門？

瀟13狼：什麼才是JS模塊化？

前言

如果說,前端最令人苦惱的事情,我相信百分之百的童鞋都會說,瀏覽器的兼容性問題.這是一個大坑.而瀏覽器的兼容性問題,99%來自於CSS——層疊樣式表.

目前CSS的版本就是,一般指的就是CSS2.1這個版本,而現在正在推廣的版本是CSS3.國外已經基本用上了,國內正在推廣.CSS3有很多新功能,但我認為最重要的一點就是,因為這個版本的CSS是幾大瀏覽器廠商談出來的,所以在兼容性方面會有很大提升.

CSS層疊樣式表,主要有兩個功能:一是組件的具體樣式(如字體,背景,邊框等等);二是網頁的布局.

網頁布局

先談一下網頁布局吧,最早的網頁布局,是table(html標籤的一種,意為表格)布局,這是由兩個原因造成的,1最早的網頁只有html,沒有css. 所以html身兼兩職,內容與樣式.而後來隨著前端技術的發展,出現了css,開始了內容與樣式的分離,table布局這種hack寫法才逐漸消亡.(名詞解釋:hack,黑客,在前端中,意為使用特殊而不正規的代碼解決瀏覽器的兼容性問題,雖然我知道這種寫法不好,但它就是管用.所以你就得用,在低版本ie中最為常見.只能記,沒有什麼規律) 現在的主流是div+css布局.但是初入門的童鞋不要覺得這很高大上,其實這個現在已經是非常非常基礎的概念的,對於現在只要是個網頁都是DIV+CSS.前幾年,這個概念還算是比較新,比如學校圖書館裡就借到過標題為」DIV+CSS」的書.好像現在噹噹上還有.但我建議吧,到現在還用這個概念宣傳的書,可以不用買的.

PS:Div和Table都是html里的標籤,區別在於: 標籤Table,意為表格.主職是展示以表格的形式展示大量的數據,曾經的布局功能,是hack寫法,現在不推薦.標籤DIV,無含義標籤,布局是其主要功能.

剛開始初入門前端的時候,http://www.w3school.com.cn/.

例子都很簡單,很好上手,但過於細了.但有些可以需要注意的,部分內容建議跳過.比如說用html實現樣式效果的部分..因為這種寫法是最早的寫法,那時沒有css,而現在已經不推薦了.我一開始自學的時候,這一部分的內容,對我後面學習css造成了一定的困擾,因為有些屬性名會互相干擾.

其實,單獨拿出來說,是想表達----對於有些已經過時的內容,就應該果斷跳過.因為人的記憶和時間都是有限的,也是寶貴的.如果是為了考試或者是筆試,那麼加強一下記憶是很有必要的.但是一般工作,你都是可以根據手冊,搜索,書籍,或者參考代碼找到你需要的東西.很多東西用的多了,自然就記住了.

這也是一個經驗吧,入門階段不要管好那麼多細節,記憶之類的東西,儘快地入門才是最重要的.其實入門,無非就是形成一套概念,知其然,所以然.大概的就成了.如果入了半天,還停留在細節處的熟悉,會對信心造成打擊.極端情況下,會造成學一樣東西,入半天門而不得入,然後換一樣東西,繼續入半天門而不得入的情況.

基礎概念

CSS盒模型.

盒子模型有兩種,分別是 IE 盒子模型和標準 W3C 盒子模型.他們對盒子模型的解釋各不相同.先來看看我們熟悉的標準盒子模型.

　　從上圖可以看到標準 W3C 盒子模型的範圍包括 margin,border,padding,content,並且 content 部分不包含其他部分.

從上圖可以看到 IE 盒子模型的範圍也包括 margin,border,padding,content,和標準 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading.

問題1:那應該選擇哪種盒子模型呢?

當然是「標準 W3C 盒子模型」了.

問題2:怎麼樣才算是選擇了「標準 W3C 盒子模型」呢?

很簡單,就是在網頁的頂部加上 DOCTYPE 聲明.如果不加 DOCTYPE 聲明,那麼各個瀏覽器會根據自己的行為去理解網頁,即 IE 瀏覽器會採用 IE 盒子模型去解釋你的盒子,而 FF 會採用標準 W3C 盒子模型解釋你的盒子,所以網頁在不同的瀏覽器中就顯示的不一樣了.反之,如果加上了 DOCTYPE 聲明,那麼所有瀏覽器都會採用標準 W3C 盒子模型去解釋你的盒子,網頁就能在各個瀏覽器中顯示一致了.

CSS網頁布局

CSS傳統解決方案

CSS實現頁面布局,或者是在頁面上做些小效果的時候經常會用到 display,position和float 屬性,如果對它們不是很了解的話,很容易出現一些莫名其妙的效果,讓我們從基礎的CSS知識談起,相信很多初學者一樣不明白CSS原理,一味追求效果,結果頁面漏洞百出,錯誤匪夷所思.(參考:」CSS布局 ——從display,position, float屬性談起」,鏈接:http://www.cnblogs.com/dolphinX/archive/2012/10/13/2722501.html).

這裡面有幾個地方講的比較好,我摘錄一下.其實這些內容,網上還有很多相同的,但都不太系統,一篇文章只講一個內容.我這裡把他們串起來,方便理解認識.

塊級元素與行內元素

首先談談人們經常提及的塊級元素和行內(內聯)元素

p, ul, form, div等元素被稱為塊級元素,這些元素顯示為一塊兒內容（會自動換行）,span, input 等元素稱為行內元素,這兩者主要區別就是塊級元素會從上到下一個個垂直排列,每個自佔一行,而行內元素在一行中水平排列,行內元素的高度由其內容撐開,不可顯示的設置其高度,這就是為什麼我們一次次的在span上設置height屬性不好使的原因.

簡單了解了這些知識,讓我們看看display常用的幾個屬性.

  • 在顯示隱藏元素的時候經常會用到把display設為none或者』』,設為none效果很明顯,就是讓元素脫離文檔流,不顯示,不佔文檔空間.
  • inline-block屬性是CSS2.1新加值,IE8以上及其他主流瀏覽器都已經支持,它可以使元素像行內元素那樣水平一次排列,但是框的內容符合塊級元素行為,能夠顯示設置寬,高,內外邊距.很有意思.
  • 還有一點兒很有意思,可以通過不同的賦值改變元素生成框的類型,也就是說,通過將display屬性設置為block,可以使行內元素表現的像塊級元素一樣,反之亦然.

position屬性

要想了解CSS元素定位就需要了解position屬性.position屬性有幾個常用值如下:

定位機制

CSS有三種基本的定位機制:普通流,絕對定位和浮動.

普通流

  • 普通流是默認定位方式,在普通流中元素框的位置由元素在html中的位置決定.元素position屬性為static或繼承來的static時就會按照普通流定位,這也是我們最常見的方式.(position : static)
  • 相對定位比較簡單,對應position屬性的relative值,如果對一個元素進行相對定位,它將出現在他所在的位置上,然後可以通過設置垂直或水平位置,讓這個元素相對於它自己移動,在使用相對定位時,無論元素是否移動,元素在文檔流中佔據原來空間,只是表現會改變.相對定位可以看作特殊的普通流定位,元素位置是相對於他在普通流中位置發生變化.(position : relative)

絕對定位

  • 絕對定位的元素的位置是相對於距離他最近的非static祖先元素位置決定的.絕對定位使元素的位置與文檔流無關,也不佔據文檔流空間,普通流中的元素布局就像絕對定位元素不存在一樣.如果元素沒有已定位的祖先元素,那麼他的位置就相對於初始包含塊兒（body或html）元素.因為絕對定位與文檔流無關,所以絕對定位的元素可以覆蓋頁面上的其他元素,可以通過z-index屬性控制疊放順序,z-index越高,元素位置越靠上.(position : absolute)
  • 最後要說的就是fixed屬性了,fixed定位也叫固定定位,固定定位是絕對定位的一種.固定定位的元素也不包含在普通文檔流中,差異是該元素的包含塊兒是視口（viewport）.所謂視口,說簡單點,就是指瀏覽器窗口.最常見一些頁面彈出窗口,總在瀏覽器窗口的右下角,估計用的是類似技術.(position : fixed)

浮動

  • 首先介紹一些浮動模型的基本知識:浮動模型也是一種可視化格式模型,浮動的框可以左右移動（根據float屬性值而定）,直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣.浮動元素不在文檔的普通流中,文檔的普通流中的元素表現的就像浮動元素不存在一樣.(float: left / float: right)

CSS彈性布局

此段參考: 阮一峰-Flex 布局教程:語法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

布局的傳統解決方案,基於盒狀模型,依賴 display 屬性 + position屬性 + float屬性.它對於那些特殊布局非常不方便,比如,垂直居中就不容易實現.2009年,W3C 提出了一種新的方案----Flex 布局,可以簡便、完整、響應式地實現各種頁面布局.目前,它已經得到了所有瀏覽器的支持.

這意味著,現在就能很安全地使用這項功能.Flex 布局將成為未來布局的首選方案.

Flex 布局是什麼

Flex 是 Flexible Box 的縮寫,意為"彈性布局",用來為盒狀模型提供最大的靈活性.

任何一個容器都可以指定為 Flex 布局.

.box{display: flex;}

行內元素也可以使用 Flex 布局.

.box{ display: inline-flex;}

Webkit 內核的瀏覽器,必須加上-webkit前綴.

.box{ display: -webkit-flex; /* Safari */display: flex;}

注意,設為 Flex 布局以後,子元素的float、clear和vertical-align屬性將失效.

Flex 基本概念

採用 Flex 布局的元素,稱為 Flex 容器（flex container）,簡稱"容器".它的所有子元素自動成為容器成員,稱為 Flex 項目（flex item）,簡稱"項目".

容器默認存在兩根軸:水平的主軸（main axis）和垂直的交叉軸（cross axis）.主軸的開始位置（與邊框的交叉點）叫做main start,結束位置叫做main end；交叉軸的開始位置叫做cross start,結束位置叫做cross end.

項目默認沿主軸排列.單個項目佔據的主軸空間叫做main size,佔據的交叉軸空間叫做cross size.

Flex 容器的屬性

以下6個屬性設置在容器上.

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

Flex項目的屬性

以下6個屬性設置在項目上.

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

CSS的書寫

CSS層疊樣式表之——層疊.簡單點就是說,你所看到樣式,其實父級元素的樣式,加上子級元素的樣式共同決定的,而共同決定的方式也即為層疊.既然是層疊,難免會有重複衝突的地方,那麼聽誰的,這裡面就有一個優先順序的問題.一般來說,id&>class.其實在一般的實踐過程中,id因為特指單一,一般用於js的選取,而css很少用id. 而css中的屬性又不是全部都能由子元素繼承.所以有些屬性會繼承,有些不會.比如...比如...

Css作為樣式的實現,相當的方便.一種效果,通常都會有好幾種實現方式,但考慮到後期的修改,以及擴展,css的層級不能過於複雜,應儘可能精簡.故而,如何組織CSS代碼,就成為必須考慮的問題.&書里推薦的是原子化,但有的人持另外的觀點,強烈反對之,但不管怎樣,我認為這本書的出發點,是可供學習的,就是css代碼好壞,應該從可復用性,可擴展性,可維護性出發.打比方說,...

隨便說一下吧,想說的東西太多,但很不好組織,先寫出來吧.

CSS RESET與Normalize.css

摘錄至:http://jerryzou.com/posts/aboutNormalizeCss/ 譯至官網,感謝作者的翻譯.

Normalize.css 只是一個很小的CSS文件,但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性.相比於傳統的CSS reset,Normalize.css是一種現代的、為HTML5準備的優質替代方案.Normalize.css現在已經被用於Twitter Bootstrap、HTML5 Boilerplate、http://GOV.UK、Rdio、CSS Tricks 以及許許多多其他框架、工具和網站上.

概念綜述

Normalize.css是一種CSS reset的替代方案.經過@necolas和@jon_neal花了幾百個小時來努力研究不同瀏覽器的默認樣式的差異,這個項目終於變成了現在這樣.

Normalize VS Reset

知道Normalize.css和傳統Reset的區別是非常有價值的.

1. Normalize.css 保護了有價值的默認值

Reset通過為幾乎所有的元素施加默認樣式,強行使得元素有相同的視覺效果.相比之下,Normalize.css保持了許多默認的瀏覽器樣式.這就意味著你不用再為所有公共的排版元素重新設置樣式.當一個元素在不同的瀏覽器中有不同的默認值時,Normalize.css會力求讓這些樣式保持一致並儘可能與現代標準相符合.

2. Normalize.css 修復了瀏覽器的bug

它修復了常見的桌面端和移動端瀏覽器的bug.這往往超出了Reset所能做到的範疇.關於這一點,Normalize.css修復的問題包含了HTML5元素的顯示設置、預格式化文字的font-size問題、在IE9中SVG的溢出、許多出現在各瀏覽器和操作系統中的與表單相關的bug.

3. Normalize.css 不會讓你的調試工具變的雜亂

使用Reset最讓人困擾的地方莫過於在瀏覽器調試工具中大段大段的繼承鏈,如下圖所示.在Normalize.css中就不會有這樣的問題,因為在我們的準則中對多選擇器的使用時非常謹慎的,我們僅會有目的地對目標元素設置樣式.

4. Normalize.css 是模塊化的

這個項目已經被拆分為多個相關卻又獨立的部分,這使得你能夠很容易也很清楚地知道哪些元素被設置了特定的值.因此這能讓你自己選擇性地移除掉某些永遠不會用到部分（比如表單的一般化）.

5. Normalize.css 擁有詳細的文檔

Normalize.css的代碼基於詳細而全面的跨瀏覽器研究與測試.這個文件中擁有詳細的代碼說明並在Github Wiki中有進一步的說明.這意味著你可以找到每一行代碼具體完成了什麼工作、為什麼要寫這句代碼、瀏覽器之間的差異,並且你可以更容易地進行自己的測試.

這個項目的目標是幫助人們了解瀏覽器默認是如何渲染元素的,同時也讓人們很容易地明白如何改進瀏覽器渲染.

CSS 預處理器框架/CSS擴展語言

有一種說法,CSS是設計人員的語言,不是程序猿的語言.沒有變數,重複的東西要寫那麼多次,頻繁修改怎麼辦,這些都讓程序猿們感覺很不對付.所以機智的程序猿們決定改變這一現狀,於是出現了CSS預處理器框架,也稱之為CSS擴展語言.目前流行的主要有LESS,SASS.

介紹幾個概念:

基礎概念

首先我們來簡單介紹下什麼是 CSS 預處理器,CSS 預處理器是一種語言用來為 CSS 增加一些編程的的特性,無需考慮瀏覽器的兼容性問題,例如你可以在 CSS 中使用變數、簡單的程序邏輯、函數等等在編程語言中的一些基本技巧,可以讓你的 CSS 更見簡潔,適應性更強,代碼更直觀等諸多好處.

LESS和SASS之所以被稱為預處理器,是因為在正式的生產環境中,都需要被預先編譯成CSS文件(備註: LESS文件在相應的JS文件支持下,可以直接應用於生產環境,但由於速度的原因,不推薦).

LESS依賴於NodeJS,在sublime編輯器中,加裝插件,實現代碼提示,以及編譯功能.這非常非常地棒.因為牆的原因,有可能不能如官網介紹的那樣直接安裝成功,所以要在國內網站上找版本.而這裡面有個比較坑的情況是,網上找到的版本大多來自某前端網分享出來的,很多鏈接其實都指向這個源頭,但這個版本文件是缺失的,是無法正常運行的.好在我是找東西比較厲害的,也沒那麼容易放棄了,終於找到了一個完整的版本.可以正確運行.

sass基於Ruby語言開發而成,因此安裝sass前需要安裝Ruby.（注:mac下自帶Ruby無需在安裝Ruby!）window下安裝SASS首先需要安裝Ruby,先從官網下載Ruby並安裝.安裝過程中請注意勾選Add Ruby executables to your PATH添加到系統環境變數.

關於LESS

官網:http://lesscss.cn

Less 是一門 CSS 預處理語言,它擴展了 CSS 語言,增加了變數、Mixin、函數等特性,使 CSS 更易維護和擴展.Less 可以運行在 Node 或瀏覽器端.

關於SASS

官網:https://www.sass.hk/

Sass是最早的css預處理語言,有比less更為強大的功能.但因其一開始的縮進式語法並不能被開發者們接受,所以使用率不高,不過由於其強大的功能和Ruby on Rails 的大力推動,逐漸被更多開發者使用.

Sass是採用的Ruby語言編寫的一款css預處理語言,它誕生於2007年,是最早成熟css預處理語言.最初它是為了配合haml而設計的,因此有著和haml一樣的縮進式風格.

Sass從第三代開始,放棄了縮進式風格,並且完全向下兼容普通的css代碼,這一代的sass也被稱為Scss.

補充說明

在這裡我要澄清一些問題,很多人覺得哇噻,又要學習新東西,感覺很頭大.具體情況具體分析,學習這兩個預編譯器,其實學習成本都非常非常地低,Less我花了一個下午基本就入門了.其實道理很簡單,聽我分析,只要你會基本的CSS,其實語法/結構都差不多,然後你又有一點基本的編程基礎,基本就很簡單了.說到SASS有人覺得Ruby,呀,沒學過,有排斥心理.比如說,我自己,之前剛接觸的時候選擇Less,就是這個原因,後來因為工作原因,也接觸了SASS,就知道,這樣的擔心是多餘的,其實和LESS寫起來差不多的.所以,有另外一種擔心說,沒有時間學兩種,但怕只學一種,另一種不會怎麼辦?這兩種的遷移成本是比較低的.會了一種,另一種也就差不多.

網上經常有爭論說哪種好,兩者各自的官網,都說是自己的好.相對來說,SASS要強大一點,但日常工作中,SASS強大的部分,又有多少應用率呢?與其停留在選擇的徘徊中,不如直接學了再說.我認為這種爭論是無謂的,大概和程序猿爭論哪種語言好一樣,大家都認為自己的語言才是最好的.

CSS in JS

參考文檔: 阮一峰 - CSS in JS 簡介 www.ruanyifeng.com/blog/2017/04/css_in_js.html

既然說到了CSS預處理器,就順便提一下這個概念吧~

問題1:它們與"CSS 預處理器"（比如 Less 和 Sass,包括 PostCSS）有什麼區別?

答: CSS in JS 使用 JavaScript 的語法,是 JavaScript 腳本的一部分,不用從頭學習一套專用的 API,也不會多一道編譯步驟.簡單點說,就是用JavaScript寫CSS.

這與最早的JavaScript直接操作css代碼的方式略略有點相通,但這裡的實現比較高級,是通過構建成第三方的庫,來封裝CSS.目前就有數十種庫.比如說polished.js.很遺憾的是,目前還看不出哪個庫會脫穎而出,成為主流.

問題2:為什麼會出現這麼多的CSS in JS的庫呢?

答:這一切都是因為一個框架React.它非常地火,前端技術比較顛覆.但由於其對CSS 的封裝非常弱(React 對 CSS 封裝非常簡單,就是沿用了 DOM 的 style 屬性對象),由此催生了一系列的第三方庫,用來加強 React 的 CSS 操作.

問題3:為什麼React需要加強對CSS的操作?

答:React 是組件結構,它強制要求把 HTML、CSS、JavaScript 寫在一起.

表面上,React 的寫法是 HTML、CSS、JavaScript 混合在一起.但是,實際上不是.它是用 JavaScript 在寫 HTML 和 CSS.React 在 JavaScript 裡面實現了對 HTML 和 CSS 的封裝,我們通過封裝去操作 HTML 和 CSS.也就是說,網頁的結構和樣式都通過 JavaScript 操作.

補充說明

最後說兩句個人觀點,因為React對前端的顛覆比較大,基本上就是構建了屬於自己的一個前端生態圈,學習成本也比較大.但它的影響又比較大,寫這篇文章又不能完成忽略它,故此一提,有興趣的童鞋,自行深入學習.

CSS框架

因為 CSS 布局很難使用,所以催生了不少 CSS 框架來幫助開發者.如果你想看看那麼這裡有一些.只有在框架的功能滿足你的需求時,使用框架才是個好主意.掌握CSS的工作方式是無可替代的.

CSS框架的實際數量遠不止以上幾種

在實際的工作中,構建CSS樣式表中,使用框架反而是更為常見的選擇.框架的使用有很多好處,比如框架可以替你預處理掉很多問題,讓你能更專註於代碼開發工作.在使用框架的過程中,只要多翻閱手冊,基本上大多數問題都能得到解決.而另一方面,基本上,大多數公司都會選擇並使用一套框架,而且不會輕易變更.你需要適應公司的要求.而框架因為其本身的適用場景限制,適用於PC網站的,不一定適用於移動版. 還有另外一個比較麻煩的地方,框架不可能百分百適用於你的項目,通常需要自己也寫一些CSS文件來配合框架的使用.通常地,當使用框架所實現的某一效果,與要求不符甚至衝突,都需要你小心翼翼地增添或修改代碼.

以我個人的經驗來說,我曾將Bootstrap框架套在一個商城項目上,然後也把這個商城項目搬到移動端,雖然Bootstrap支付移動版,但畢竟存在不少問題.後面重新開發,不用框架了,我參考借鑒的是小米商城和京東商城的移動版.整個過程,磕磕碰碰,遇到很多問題,解決很多問題,進步也挺大的.感覺就是小米的代碼很乾凈;京東的就複雜得多,因為應該場景很多,要考慮很多問題.抄網站,確實是一個學習CSS,學習前端的好方法.

大概就醬了~

http://weixin.qq.com/r/Byrn-4-ElNLrrcuc938V (二維碼自動識別)

瀟13狼：哪裡可以找到實用的IT教程和資料？

作為一個非CS專業，零基礎學Ruby on Rails的菜鳥來回答。風格也偏向於開發0基礎入門了。不知道是否能對答主胃口。

1.W3C的CSS教程

在最開始的時候，我想學開發，別人就和我說去看這個吧。

2.目的是什麼？

但是你一看，發現，這能叫教程？有人看字典學會寫作文的嗎？

所以，看W3C的CSS教程的目的，就是明白CSS是幹什麼的。

——也就是用來改變我們看的網頁的樣子的。

比如知乎下面這個「發布回答」的按鈕，什麼顏色，按鈕四個角是圓形還是方形？裡面的字是白色還是黑色？用的什麼字體，這些就是CSS做的。

看W3C的CSS教程，只要了解到這個程度就行了

3.其實你想做設計？

假設你是0基礎外行來學的話，其實很有可能，你想要的，是一個好看的頁面。

而好看的頁面，是「設計」；而頁面的實現，是「代碼」。

在一般的團隊中，前者由設計師完成，後者由程序員完成（前端工程師）。

所以也無外乎你會覺得，學到的CSS選擇器和屬性和自己想要實現的東西，相差太遠。

有了好的頁面設計（「界面」），才能進行實際的代碼實現。當然，也可以自己直接用代碼把想要的頁面效果實現出來。但是設計這個過程，是始終存在的，並且最重要的

4.那怎麼做頁面設計？

比如說我之前寫的一個首頁圖 http://sisuo.coding.io

這裡我想以一個實例說明，包括怎麼寫CSS代碼，但更重點的是怎麼抄……。但是鑒於此時已經偏離題主的問題太遠，而且也不知道題主是不是0基礎這個方向。所以先看看反應吧，如果有人需要，我再詳細說明

5.工程實例

如果說，看字典沒辦法學會寫作文的話，那麼看範文應該是最容易學會寫作文的了

在實際中，如果我們已經有了頁面設計，接下來就是怎麼寫CSS代碼實現了。

具體涉及到應該有

（1）整體的代碼組織

比如一個頁面，有header,有好幾個部分，是都寫在一堆，還是分開成幾個部分寫？字體是放在一起，還是分別放在各個部分裡面？

（2）具體component怎麼寫？

比如一個知乎上面這個導航欄，下面這個按鈕怎麼寫

（3）頁面整體布局

比如知乎這裡分成了兩欄。左邊是本題的內容，右邊一欄是相關內容

這個還是通過具體實例來表面比較好？

因此，選書的標準已經出來了，那就是以實例為依據。我個人沒讀到過特別好的書，就推薦一樓的CSS Mastery和Missing Manual吧，應該還不錯。

最後，學習當中兩個很重要，但上面沒辦法提到的東西

1.使用Firebug, Developer Tools來扒前端代碼

2.使用Google, Stackoverflow來解決學習當中碰到的細節。

我推薦《css禪意花園》，不用把它當成工具書，就當成一本故事書看，平常沒事翻翻就覺得css其實很好玩。

「作為」一個FE，我一直認為自己的CSS水平非常的不過關，僅知其形，不知其理。

目前案頭的幾本書：

CSS權威指南 by Eric.Meyer

精通CSS 高級Web標準解決方案 by Andy Budd (就是目前第一 顧教授的CSS Mastery，還是比較推薦看英文版)

圖解CSS3 by 大漠

拓展閱讀

Sass與Compass實戰

CSS禪意花園

先學HTML，再學CSS。每天堅持寫代碼（從早到晚），一周即可隨意寫出基本效果（親身體驗），推薦w3school，裡面的代碼一定要自己打一遍，看懂不一定代表你能寫出來，很多細節眼睛是看不見的。w3school里的一兩天就能看完，看完之後開始找網頁模仿，不多久你就入門了。

少年啊，不能太賴啊！

CSS 教程

汗..

入門不難啊.. 走不走的下去就不好說了. 沒什麼實際需求的話, 估計很快又忘了吧.

說下自己的理解.

先看 《慾望的教育》 ， 也不用太多， 理解 人類目前只能熟練使用 方形 和 圓形。比如房子，盤子，電視機，都是如此。別的形狀都很難，幾千年沒變過。

這樣， 就能很快理解盒模型了。

然後，學習如何用文字精確描述一個東西的外觀，讓看的人能夠一看就知道你寫的到底是什麼東西。

這樣，就知道css到底是什麼了。

最後學習，人視覺的原理。 那就能明白動畫效果，特效 css能否實現，以及如何分解成css能實現的東西。

沒了。 剩下的路就得看鑽研了。 認字容易， 寫書， 難啊。

一開始不要在W3C網站上學習，因為內容太多，雖然很系統，但是我一點都不相信你會有耐心全部看下來！

1.一開始學習，首先找些小的實戰項目看看，騰訊課堂那邊多的是，裡面講的非常細，一開始可能有一些不是很懂，推薦你免費的一個，非常好學網頁開發 （HTML+CSS+JavaScript 從入門到精通）【職坐標】

2.自己變看邊寫，可以直接抄

3.結合W3C裡面的資料自己寫一點

4.學習javascript（這個稍微難一點）

隨便看一本html和css 基礎書(W3school其實已經足夠http://www.w3school.com.cn/)

然後去仿一個自己喜歡的網站

想學編程就建議直接上手英文版。W3Schools 是一個非常好的入門網站。

W3Schools Online Web Tutorials

理論離不開實戰，選個例子多，又CSS技術比較全的，推薦一本

《CSS高效開發實戰：CSS 3、LESS、SASS、Bootstrap、Foundation》

這是一本站在CSS前沿為大家答疑解惑的實戰書，其中的作者非常了解知識來源於實踐這一原則，對每個CSS特性都進行了示例演示，並在最後提供了4大項目，讓學習者接手實際項目時不再無所適從。適合從入門往上爬的新手們。

把 w3school看一遍，然後借本書，自己規劃一下試著寫一個網站起來【最好其實是有一個項目然後你只負責CSS如果你只是想學CSS】,遇到問題努力解決，不厭其煩的調整位置，視覺效果。這樣一個項目下來應該就好很多了，這時候再去看別人的源碼，又發現自己好像其實什麼都不會好多小技巧。不斷學習不斷吸收然後自己寫東西。

大概就可以了。

對著淘寶主頁抄。30天後肯定入門了。不要問我為什麼要對著淘寶抄。你抄就是了

和題主一樣，CSS正在入門中( ╯□╰ ) 我是看著W3Schools里的教程來的，感覺挺基礎的，還很詳細。補充一下，因為對建站很感興趣，所以也看了一下其他技術怎麼入門，題主可以看一看啦：

&http://www.zhihu.com/question/22646257">建站技術學習順序&

感謝知乎呼呼呼~

  1. 使用瀏覽器開發工具的 Inspector 功能，查看 HTML 與頁面元素的對應關係，查看個元素的相關樣式；區分 block elements 和 inline elements。
  2. CSS 屬性方面，三個重點：盒模型，頁面佈局與排字。
  3. Stylish 是個好玩具。

《精通CSS：高級Web標準解決方案》 這個必須要看的，其實看完以後直接去codepen就差不多了

多寫幾個大型網站的靜態頁面吧！！

推薦閱讀：

※CSS transform中的rotate的旋轉中心怎麼設置？
※HTML5 的 hidden="hidden" 和CSS的 display:none有什麼區別？
※overflow：hidden的問題？
※怎樣隱藏滾動條還能滾動頁面（包括滑鼠滾輪）？
※如何理解塊級格式化上下文BFC(block formatting context)?

TAG:前端開發 | CSS | 網站開發 |