被称为前端三剑客的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弹可口。