怎样从零开始学习CSS

livem
  • 432

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

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

回复
阅读 18.8k
19 个回答

看到上面那么多推荐在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,一边动手实践,应该很快就能学会了。

既然你已经熟悉 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足够。

fhefh
  • 2
新手上路,请多包涵

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

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

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

css禅意花园 这本书可以

小萝莉
  • 1
新手上路,请多包涵

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

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

自己回答一个

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

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

盒子定义

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

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

请输入图片描述

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

Beyoung
  • 3
新手上路,请多包涵

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

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

hbynlsl
  • 4
新手上路,请多包涵

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

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