果冻公开课第二课：三分钟了解CSS
已认证的官方帐号
10 人赞了该文章
被称为前端三剑客的HTML、CSS、JS
HTML我们上节课已经进行了简单的介绍，未看过的同学可以点击传送门：
本节课，我们就来用几分钟快速了解下，附着在HTML骨骼上，使得页面呈现出丰富内容的CSS层叠样式表。
动画视频：
果冻公开课：三分钟了解CSS
文字解析：
CSS，全称为层叠样式表。
简单来说，就是给被HTML标记的内容加上装饰，让它能有所不同，不管是外观还是内在，都有一个新的变化。
这个过程我们可以称之为为内容增加新的属性，赋予它更多的可能。
与HTML不同的是，它用的是花括号{}来包裹属性。
CSS的属性大体可以分为5大类。
其中样式、框模型、定位、选择器为较为常用的四类，而其余属性皆归为高级属性。
CSS的语言规则分为两部分：
第一部分是选择器，顾名思义我们要告诉浏览器这个属性是用在哪个或者哪几个标签上。
第二部分是声明，是告诉浏览器具体我要为它附加什么属性，增加什么变化的部分。
让我们看看加上了属性之后，我们的HTML有什么变化吧~
color，改变了文字的颜色
font-size可以让文字的大小发生变化
background-color可以添加背景颜色
border可以让文字的外边出现了边框
margin和padding可以添加内外边距，让文字和线框，线框和块之间出现了新的空间
float可以让文字浮动
top给文字增加了顶部的距离
在有了内容和样式后，我们的网页现在是这个样子，看起来和我们平时看到的网页没什么不同。
但当你对他进行操作时，你会发现，为什么这里不动了，为什么那里没反应了？
这是因为我们缺少激活它的语言JS，JS全称为javascript，是一种脚本语言。
整体来说，JS在网页中起到的作用，就像装修好的房子，你要通电才能使用这些电器一样，只有有了电，你才能使用这些电器。
而电器就是我们的CSS和HTML。
那么，为什么浏览器可以把这些代码变成我们平时浏览的网页呢？
这里可以给大家举一个很简单的例子：
大家都知道记事本，只可以在里面输入的文字。
但当我们在word中输入文字的时候，可以通过word中的各种按钮给他增加字体、字号、颜色，还可以插入表格、排版等。
而这些按钮就是前面说到的标签和属性，他为文字增加了很多新的东西。
而浏览器就相当于我们的word，可以把我们写好的HTML文件打开，让大家看到编辑好的内容。
网页没有我们想的那么复杂，HTML和CSS也没有我们想的那么神秘，它只是换了一种方式的word。
我们要先用一个软件打开和编辑我们的HTML文件，然后再用浏览器打开它，就能看到我们平时看到的那些网页了。
而我们只是将编辑的过程给了编译器，显示的过程给了浏览器，各司其职而已。
好了，今天的果冻公开课就先到这里，下期我们将向大家介绍CSS的选择器都有哪些。
★★★★★
这里是果冻公开课，一个用趣味的动画来分享IT知识的课堂
我们将原本复杂、不易理解的编程知识，转化为一个个有趣的动画短视频，为更多人提供生动有趣的IT内容/服务
无论是大咖还是小白，都可以快速学会并深度了解每一个知识点，让IT，Q弹可口。
更多内容，欢迎加大师姐微信it_xzy，入群717415872了解课程动态、幕后花絮，还有机会参与到课程制作，成为联合制作人
记得备注来自果冻课堂哟