怎样从零开始学习CSS

Question

以前一直是做后台程序开发，
很少接触 css 编写，
目前的状况是基本懂得 html 各个元素的使用方法和场景，
js有一定功力。

求应该怎么从零开始学习css，以及怎样系统的学习 css 。
主要目的是想构建一些 css 框架以及可重用的组件。

Answer 1

我推薦一個很不錯的網頁，清楚明瞭： http://www.htmldog.com/guides/css/
基本上都看過一遍就 ok 了，不用強記。

接着一定要瞭解一下：http://sass-lang.com/

如果可以，請直接使用 http://compass-style.org/ 搭配 SCSS 語法實作你的 CSS 設計。

Answer 2

推荐一个学习 CSS 布局的网站：http://learnlayout.com

Answer 3

看到上面那么多推荐在w3schools上面学习css的，我下面说下w3schools的几个问题吧：

1. W3Schools.com更新太慢，并且没用提供一个供人们纠正错误、更新内容的机制；
2. W3Schools.com和W3C组织没有关系；
3. 它上面的证书没有多大价值。

具体可以看http://www.w3fools.com/ 上面的吐槽。其实上面第一条才是硬伤，决定了如果有好的资源的话不要花太长时间在W3Schools上。

下面提供几个比较好的资源吧：

1. W3C自己的wiki
2. mozill上的教程
3. http://docs.webplatform.org/wiki/css

一边看这些教程或者wiki，一边动手实践，应该很快就能学会了。

Answer 4

既然你已经熟悉 HTML，这里就不讨论了。
首先，你得大概地了解 CSS 的属性，可以上 w3school，不过我个人推荐你看 CSS 手册。
其次，把 CSS 属性分类划分开来学习，比如定位布局的有哪些、文本属性的又有哪些等，并动手操作写几套模板，博客的、CMS 的都好，去熟悉它们。
然后，在学习动手的过程中，去熟悉常遇到的一些常见问题、BUG，如：盒模型、浮动、边距重合等等一些IE常见BUG，并找到办法解决它们。
最后，规范自己的代码，注重写高性能的 CSS 代码。

基本到这里，你已经有很不错的 CSS 水平了，可以尝试去学习模块化、组件化等设计。现成的 CSS 框架有很多，也很优秀，比如：YUI、bootstrap等等，个人觉得就没必要构建自己个人的框架了，现成的这样都非常优秀，可以自己拿来扩展一下就行。

Answer 5

先了解一下html吧！我当初在w3c school上一并学习了html,css,js。然后买了一本《高级cssXXX指南》，大概就算入门了。接下来就是用chrome developer tool看网站的源码。

Answer 6

其实很简单。 找一张网上的比较炫的设计图，当然要比较复杂，做出来一张静态网页，基本什么都会了。 CSS是静态化语言，东西很少，但是需要经过项目实战，得记住。像我只做过一个小型CMS的全站CSS，基本什么都会了。或者给你用的个人博客程序做一套皮肤，这个做出来以后还能发布给别人用。 至于参考，W3CSchool足够。

Answer 7

1.了解常用的css属性 2.了解盒子模型 3.了解float以及清除float 4.多做

Answer 8

首先你需要学习HTML ，理解每个标签的作用和使用场合，HTML是用来构建页面结构，CSS作用于HTML，用于页面表现的。其次就是学习每个CSS的标签及其属性，你可以先了解常用的，同时理解CSS的盒子模型，它是CSS的核心。最后就是实战，多做练习，可以看别人的代码，还有注意CSS代码的重用，合理使用类和ID，了解CSS的position等。 推荐一本书《CSS设计指南》，老外写的，讲的很好，希望对你有帮助哈！

Answer 9

初级的入门可以从W3c school开始，通过这个基本了解css的代码结构。后面要深入就得看很多设计良好的网站的代码，并且动手去实现一些设计了。推荐给自己博客设计一个主题开始。

Answer 10

css禅意花园 这本书可以

Answer 11

我记得最早就是在自己的博客里瞎改改，大概知道css是干嘛用的 第一次比较有条理的竟然是这里...http://www.w3school.com.cn/css/index.asp 后来看的是 css cookbook http://book.douban.com/subject/2324038/

Answer 12

我还是觉的基础的话看一下W3c school就可以了，只有自己不断的去实战慢慢的就可以了，我的个人网址http://www.huin8808.com也就是这样倒腾出来的。

Answer 13

W3CSchool 可以在这上面学习,而且每节完之后都有联系,很方便 之后就可以看看CSS方面的书籍了 <<CSS权威指南>> 这个就可以 最后一点需要多做才能领悟多个浏览器怎样做出相同的效果

Answer 14

自己回答一个

1.首先从 盒子模型 的理解开始

(上面这篇文章举了实际例子，说明了盒子模型为什么这样设计及其意义，简单明白，值得推荐)

2.W3C 和 IE的盒子模型在解释 width 属性的差异：

关于 IE盒子模型的bug 在维基百科上有详细说明

Answer 15

了解了基本点css后，可以看看bootstrap，写界面会方便很多

Answer 16

边看w3school边自己做着试，可以初步的入门并取得点小成就保持兴趣，后面就是了解更多的细节了，阅读大牛的博客

Answer 17

我认为要先学会分离HTML和CSS，在学习基本的CSS样式 例如margin,padding,color,font,float等等最后有一份CSS2或CSS3的API chm版的 按着上面的小示例一个个验证，当然要把布局弄明白 这个是关键，看视频什么的没有什么效果 只有多动动手一个个亲自验证过 你才学的快些 之后有一点基础后多看看别人网站的后台CSS 现在的chrome、火狐的firebug都有CSS定位的功能。希望对你有帮助。

Answer 18

推荐一个学习路线： （1）找一些经典书籍看一看，推荐一本《CSS实战》（英文名：CSS In Action），可以从ppurl网站上下载（www.ppurl.com）。 （2）针对W3C参考手册，多做练习，可以从知名网站的源代码开始。 （3）使用Firefox提供的Firebug或Chrome浏览器提供的开发者工具进行样式调试。 （4）掌握浏览器兼容性调试方法。

Answer 19

这里有很多视频教程：幕课网　推荐看看