CSS的简史
CSS 的概念在 1994 年由 蒂姆·伯纳斯-李 的挪威同事**哈肯·维姆·莱** 提出。
CSS1 于 1996 年正式推出。
CSS2 于 1998 年正式推出。
CSS2.1 的推出则略显波折,它在 2004 - 2011 年之间持续的进行修改,目前是使用最广泛的一个版本,现代浏览器都已经完全支持 CSS2.1 版本的属性。
CSS3 于 1999 年 就着手开发。在 2001 年,W3C 完成了 CSS3 的工作草案,提出 CSS 分模块升级的概念,将标准分为若干个相互独立的模块。
随着 CSS 的发展,我们也能看到它的标准文档的页数也在急剧的增加。但根据二八定律,CSS 标准中百分之二十的规范,足够我们完成百分之八十的工作,因此学习 CSS(任何事),都是一样,抓住核心的部分,之后再慢慢向外扩散。
CSS 的学习
CSS 更像是一门艺术,需要用感性的思维去理解 CSS,理性的思考将会让自己苦恼,因为你会发现 CSS 没有逻辑可言。为什么添加这个属性,就会影响页面的显示,为什么去除这个属性,就会产生奇怪的样式,这就是 CSS 的难学之处,因为 CSS不正交。(参见知乎问题:为什么 CSS 这么难学?)。
遇见一些 奇奇怪怪的 CSS 组合方式产生的效果,不要去问 为什么会这样?,而是要说 原来是这样啊,因为 浏览器说怎么样,那就是怎么样。
CSS 的体系化学习
大概的思路分为四个方面:
-
得知道基本语法
-
得知道如何进行调试
-
得知道在哪可以查到资料:google搜索、mdn、css tricks、张鑫旭的博客
-
标准的制定: W3C(不是国内的 w3school)
一个具体的的学习方法: CRM学习法:
-
C - Copy 即 复制
-
R - Run 即 运行
-
M - Modify 即 修改
整个的学习流程就是 先拷贝,运行一遍,之后再添加上自己的一些理解,进行修改,再运行一遍,直至弄懂。
CSS 的基本语法
-
最基本的语法规则
选择器 { 属性: 属性值; /* 只有这一种注释方法 */ }
-
常见的
@
语法@charset 'UTF-8'; @import url(xxx.css); @media { }
-
@charset
是指字符集, 而UTF-8
是Unicode
字符集的一种编码方式,至于为啥这么写,这属于历史遗留问题,现在一般很少使用。 -
@import
原生的 CSS 语法就支持导入其他 CSS 样式,但是它会发送一个 HTTP 请求, 现在一般很少使用。 -
@media
媒体查询,通过该语法可以通过得知设备的一些信息,来修改 CSS 的样式,以此来达到响应式的效果。
-
CSS 的错误与调试
-
错误
CSS 的错误大多属于低级错误,比如单词拼写错了,中英文的标点没有区分,有些属性值的单位写错了,还有花括号
{}
没有闭合。CSS 的错误很少有高级错误,因为 CSS 本身就没有逻辑可言,是怎么样浏览器就会展现出什么样,不过存在各个属性之间产生奇怪的影响之类的错误,这类问题只能靠硬背去记住。
-
调试
-
使用 W3C 的 CSS 验证器(麻烦,不要用)
-
开发者工具的提示信息(webstorm 最强,但是启动慢)
-
border
大法。使用起来也很简单,通过给不同的元素添加上足够区分的border
样式,逐渐定位错误的位置。不过有时border
会导致布局的问题,因为本身是具有宽度的,这个时候可以考虑使用outline
大法。
-