极客观点
项目管理
HarmonyOS
以前一直是做后台程序开发，
很少接触 css 编写，
目前的状况是基本懂得 html 各个元素的使用方法和场景，
js有一定功力。
求应该怎么从零开始学习css，以及怎样系统的学习 css 。
主要目的是想构建一些 css 框架以及可重用的组件。
怎样从零开始学习CSS
阅读 22.5k
看到上面那么多推荐在w3schools上面学习css的，我下面说下w3schools的几个问题吧：
- W3Schools.com更新太慢，并且没用提供一个供人们纠正错误、更新内容的机制；
- W3Schools.com和W3C组织没有关系；
- 它上面的证书没有多大价值。
具体可以看http://www.w3fools.com/ 上面的吐槽。其实上面第一条才是硬伤，决定了如果有好的资源的话不要花太长时间在W3Schools上。
下面提供几个比较好的资源吧：
- W3C自己的wiki
- mozill上的教程
- http://docs.webplatform.org/wiki/css
一边看这些教程或者wiki，一边动手实践，应该很快就能学会了。
既然你已经熟悉 HTML，这里就不讨论了。
首先，你得大概地了解 CSS 的属性，可以上 w3school，不过我个人推荐你看 CSS 手册。
其次，把 CSS 属性分类划分开来学习，比如定位布局的有哪些、文本属性的又有哪些等，并动手操作写几套模板，博客的、CMS 的都好，去熟悉它们。
然后，在学习动手的过程中，去熟悉常遇到的一些常见问题、BUG，如：盒模型、浮动、边距重合等等一些IE常见BUG，并找到办法解决它们。
最后，规范自己的代码，注重写高性能的 CSS 代码。
基本到这里，你已经有很不错的 CSS 水平了，可以尝试去学习模块化、组件化等设计。现成的 CSS 框架有很多，也很优秀，比如：YUI、bootstrap等等，个人觉得就没必要构建自己个人的框架了，现成的这样都非常优秀，可以自己拿来扩展一下就行。
先了解一下html吧！我当初在w3c school上一并学习了html,css,js。然后买了一本《高级cssXXX指南》，大概就算入门了。接下来就是用chrome developer tool看网站的源码。
其实很简单。 找一张网上的比较炫的设计图，当然要比较复杂，做出来一张静态网页，基本什么都会了。 CSS是静态化语言，东西很少，但是需要经过项目实战，得记住。像我只做过一个小型CMS的全站CSS，基本什么都会了。或者给你用的个人博客程序做一套皮肤，这个做出来以后还能发布给别人用。 至于参考，W3CSchool足够。
首先你需要学习HTML ，理解每个标签的作用和使用场合，HTML是用来构建页面结构，CSS作用于HTML，用于页面表现的。其次就是学习每个CSS的标签及其属性，你可以先了解常用的，同时理解CSS的盒子模型，它是CSS的核心。最后就是实战，多做练习，可以看别人的代码，还有注意CSS代码的重用，合理使用类和ID，了解CSS的position等。 推荐一本书《CSS设计指南》，老外写的，讲的很好，希望对你有帮助哈！
初级的入门可以从W3c school开始，通过这个基本了解css的代码结构。后面要深入就得看很多设计良好的网站的代码，并且动手去实现一些设计了。推荐给自己博客设计一个主题开始。
我记得最早就是在自己的博客里瞎改改，大概知道css是干嘛用的 第一次比较有条理的竟然是这里...http://www.w3school.com.cn/css/index.asp 后来看的是 css cookbook http://book.douban.com/subject/2324038/
W3CSchool 可以在这上面学习,而且每节完之后都有联系,很方便 之后就可以看看CSS方面的书籍了 <<CSS权威指南>> 这个就可以 最后一点需要多做才能领悟多个浏览器怎样做出相同的效果
自己回答一个
1.首先从 盒子模型 的理解开始
(上面这篇文章举了实际例子，说明了盒子模型为什么这样设计及其意义，简单明白，值得推荐)
2.W3C 和 IE的盒子模型在解释 width 属性的差异：
关于 IE盒子模型的bug 在维基百科上有详细说明
我认为要先学会分离HTML和CSS，在学习基本的CSS样式 例如margin,padding,color,font,float等等最后有一份CSS2或CSS3的API chm版的 按着上面的小示例一个个验证，当然要把布局弄明白 这个是关键，看视频什么的没有什么效果 只有多动动手一个个亲自验证过 你才学的快些 之后有一点基础后多看看别人网站的后台CSS 现在的chrome、火狐的firebug都有CSS定位的功能。希望对你有帮助。
新手上路，请多包涵
推荐一个学习路线： （1）找一些经典书籍看一看，推荐一本《CSS实战》（英文名：CSS In Action），可以从ppurl网站上下载（www.ppurl.com）。 （2）针对W3C参考手册，多做练习，可以从知名网站的源代码开始。 （3）使用Firefox提供的Firebug或Chrome浏览器提供的开发者工具进行样式调试。 （4）掌握浏览器兼容性调试方法。
推荐问题
扁平化数组转换成树形?
背景：需要将扁平化数组转换成树形数组。比如原始数组如下： {代码...} 期望转换后的数据 {代码...}8 回答4.7k 阅读✓ 已解决
省市区街道数据在哪里可以下载？
省市区街道数据在哪里可以下载？6 回答3.4k 阅读✓ 已解决
网站的不同域名互相跳转如何保持登录态？
一个网站部署了多个域名（不是子域名），比如：www.abc.com和www.aaa.com,如何从一个域名跳转到另一个域名的时候，仍然保持登录态呢？6 回答2.3k 阅读
Vue项目一个报错无法找到原因?
排查了好久实在没有找到哪儿出了问题，时不时弹出来，编译结果又是正常的，尝试排查了好久但是一直没有办法排查出来，有遇到过这种报错的同学吗？或者有没有同学提供一种排查思路，因为我真的搞懵逼了。哈哈哈。5 回答6.3k 阅读✓ 已解决
如何自定义设置虚线边框的样式？
背景： {代码...} 如上图所示：虽然可以设置虚线边框，但是虚线边框的样式往往需要修改：比如:单个实线间的间距自定义调整;单个实线的长度自定义调整。5 回答1.3k 阅读✓ 已解决
前端有没有办法实现页面截图？
前端有没有办法实现页面截图？不是html-to-canvas那种实现，而是类似于windows上各种截图工具那样，直接截取屏幕上图像目前搜到的全是html-to-canvas的方案3 回答2.5k 阅读✓ 已解决
只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？
只用一个div，宽高固定（width: 100px; height: 50px;），文本内容不固定，如何实现水平、垂直居中，超出两行显示省略号？3 回答1.4k 阅读✓ 已解决
我推薦一個很不錯的網頁，清楚明瞭： http://www.htmldog.com/guides/css/
基本上都看過一遍就 ok 了，不用強記。
接着一定要瞭解一下：http://sass-lang.com/
如果可以，請直接使用 http://compass-style.org/ 搭配 SCSS 語法實作你的 CSS 設計。