【果冻公开课】前端学习：3分钟了解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的选择器都有哪些。
请大家持续关注果冻公开课的其他内容哟，下节预告：CSS转换器
更多内容，欢迎加大师姐微信
入群了解课程动态、幕后花絮，还有机会参与到课程制作，成为联合制作人哟
微信号：it_xzy
记得备注来自果冻课堂
网友评论