CSS的总结

写在前面

最近一直在学习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的版本信息:

  1. 两个人合作发明了 CSS
    1994年哈肯·维姆·莱提出了CSS的最初建议。伯特·波斯(Bert Bos)当时正在设计一个叫做“Argo”的浏览器,他们决定一起合作设计CSS。
  2. W3C 开始接管 CSS
    1997年初,W3C内组织了专门管CSS的工作组,其负责人是克里斯·里雷。
  3. CSS 2.1
    1998年5月W3C发表了CSS2
    CSS2.1修改了CSS2中的一些错误,删除了其中基本不被支持的内容和增加了一些已有的浏览器的扩展内容。
  4. CSS 3
    从 2011 年开始 CSS 被分为多个模块单独升级,统称为 CSS 3。这些模块有:
    • CSS 选择器 level 3
    • CSS 媒体查询 level 3
    • CSS Color level 3
    • 更多请搜索 CSS spec
  5. 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的学习并不是一蹴而就的事情,需要大量的经验累积和积累,一句个人的座右铭送给各位

春风不止 砥砺前行

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容