CSS二三事 -（简史与学习方法）

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 的体系化学习

大概的思路分为四个方面：

1. 得知道基本语法

2. 得知道如何进行调试

3. 得知道在哪可以查到资料：google搜索、mdn、css tricks、张鑫旭的博客

4. 标准的制定： 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 大法。