CSS的总结

2017-11-27 本文已影响0人熊蛋子17

写在前面

最近一直在学习CSS，感触良多，写一篇文章作为总结，以便于自己以后学习，也希望给大家行点方便

在前端的学习道路上，说道比如掌握的东西，再不济的人都会脱口而出，HTML、CSS、JavaScript。然而现实情况是前端学习并不是只有这三个，由此可以凸显出这三个语言是多么的重要。

css

1. CSS的特点

CSS（Cascading Style Sheets）中文全称为层叠样式表。他是一种样式表语言用来描述HTML或者是XML文档中的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
然而写过页面的同学都会认为CSS其实并不是像想象中的那样简单，各种样式之间擦杂，当页面内容的复杂性开始增加的时候，因为CSS 的属性互不正交，大量的依赖与耦合会导致难以记忆。
在知乎上有一个关于CSS为何难以学习的讨论，具体的链接在此，我们可以从中可以得出相当多的关于CSS的如何难以学习的论点，足以阐述CSS存在的当前问题，在我看来CSS的发展和现状其实并不是像JS那样发展的十分的完整，所以我们在写CSS样式的时候会经常发现自己的样式会出现某些局限性。并不是完全的能够兼容所有的情况所有的屏幕尺寸，并且在相同的样式情况下我们可以得出的结论是并不是有且只有一种途径下才能够完成所有的结果。所以CSS的学习是需要相当多的经验积累以及良好的运用经验的。

使用CSS的优势
网页的读者和作者都可以使用CSS来决定文件的颜色、字体、排版等显示特性。CSS最主要的目的是将文件的内容与显示分隔开来。这有许多好处：

文件的可读性加强
文件的结构更加灵活
作者和读者可以自己决定文件的显示
文件的结构简化

另外，在HTML中：
一个整个网站或其中一部分网页的显示信息被集中在一个地方，要改变它们很方便
不同的读者可以有不同的样式，比如有的读者需要字体比较大
HTML文件本身的范围变小了，它的结构简单了，它不需要包含显示的信息
CSS还可以控制其他参数，例如声音（假如浏览器有阅读功能的话）或给视障者用的感受装置。

2. CSS的简介

从1990年代初HTML被发明开始，样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。
但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。

1994年哈肯·维姆·莱提出了CSS的最初建议。伯特·波斯（Bert Bos）当时正在设计一个叫做“Argo”的浏览器，他们决定一起合作设计CSS。
当时已经有过一些样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。在CSS中，一个文件的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。
哈肯于1994年在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。当时W3C刚刚创建，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。哈肯、波斯和其他一些人（比如微软的托马斯·里尔登）是这个项目的主要技术负责人。1996年底，CSS已经完成。1996年12月CSS要求的第一版本被出版。
1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是1998年5月出版的第二版要求。到2017年为止，第三版还未完备。

关于CSS的版本信息：

两个人合作发明了 CSS
1994年哈肯·维姆·莱提出了CSS的最初建议。伯特·波斯（Bert Bos）当时正在设计一个叫做“Argo”的浏览器，他们决定一起合作设计CSS。
W3C 开始接管 CSS
1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷。
CSS 2.1
1998年5月W3C发表了CSS2
CSS2.1修改了CSS2中的一些错误，删除了其中基本不被支持的内容和增加了一些已有的浏览器的扩展内容。
CSS 3
从 2011 年开始 CSS 被分为多个模块单独升级，统称为 CSS 3。这些模块有：
- CSS 选择器 level 3
- CSS 媒体查询 level 3
- CSS Color level 3
- 更多请搜索 CSS spec
CSS 4?
不好意思，没有 CSS 4，只有各个模块的 level 4

关于周边工具：

LESS CSS
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。

使用LESS可以更加方便的书写具体例子是

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

使用LESS简化以后的样式为

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

具体的使用LESS的参见链接

SASS

Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。它允许你使用变量、嵌套规则、 mixins、导入等众多功能，并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好，同时也让你能够快速开始小型项目，特别是在搭配 Compass 样式库一同使用时。

使用使用SASS的特点：

完全兼容 CSS3
在 CSS 语言基础上添加了扩展功能，比如变量、嵌套 (nesting)、混合 (mixin)
对颜色和其它值进行操作的{Sass::Script::Functions 函数}
函数库控制指令之类的高级功能
良好的格式，可对输出格式进行定制
支持 Firebug
Sass 有两种语法。第一种被称为 SCSS (Sassy CSS)，是一个 CSS3 语法的扩充版本，这份参考资料使用的就是此语法。也就是说，所有符合 CSS3 语法的样式表也都是具有相同语法意义的 SCSS 文件。另外，SCSS 理解大多数 CSS hacks 以及浏览器专属语法，例如IE 古老的filter语法。这种语种语法的样式表文件需要以.scss扩展名。

第二种比较老的语法成为缩排语法（或者就称为 "Sass"），提供了一种更简洁的 CSS 书写方式。它不使用花括号，而是通过缩排的方式来表达选择符的嵌套层级，I 而且也不使用分号，而是用换行符来分隔属性。很多人认为这种格式比 SCSS 更容易阅读，书写也更快速。缩排语法具有 Sass 的所有特色功能，虽然有些语法上稍有差异；这些差异在{file:INDENTED_SYNTAX.md 所排语法参考手册}中都有描述。使用此种语法的样式表文件需要以.sass作为扩展名。

任一语法都可以导入另一种语法撰写的文件中。只要使用sass-convert命令行工具，就可以将一种语法转换为另一种语法：
例如：

# 将 Sass 转换为 SCSS
$ sass-convert style.sass style.scss

# 将 SCSS 转换为 Sass
$ sass-convert style.scss style.sass

具体的使用方法，参见链接

3. CSS的学习

关于CSS的学习建议：中文学习资源只看大 V 的（毕竟他们要维护形象不能瞎写），英文资源看 CSS Tricks、MDN 和 Codrops。书的话作用不大，最权威的书其实是文档。

如果你想快速上手，就先写小 demo 再学理论。
如果你想一鸣惊人，就仔细看 CSS 规范文档。

4. 私人的CSS学习资料

写在最后

CSS的学习并不是一蹴而就的事情，需要大量的经验累积和积累，一句个人的座右铭送给各位

春风不止砥砺前行

最后希望对大家有帮助的话点个赞呗靴靴。