果冻公开课第二课：三分钟了解CSS

被称为前端三剑客的HTML、CSS、JS

HTML我们上节课已经进行了简单的介绍

本节课，我们就来用几分钟快速了解下，附着在HTML骨骼上，使得页面呈现出丰富内容的CSS层叠样式表。

动画视频：

果冻公开课：三分钟了解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弹可口。