|
被叫作为前端三剑客的HTML、CSS、JS
HTML咱们上节课已然进行了简单的介绍，未看过的朋友能够点击传送门：
果冻公开课：什么是HTML
本节课，咱们就来用几分钟快速认识下，附着在HTML骨骼上，使得页面呈现出丰富内容的CSS层叠样式表。
动画视频：
文字解析：
CSS，全叫作为层叠样式表。
简单来讲，便是给被HTML标记的内容加上装饰，让它能有所区别，不管是外观还是内在，都有一个新的变化。
这个过程咱们能够叫作之为为内容增多新的属性，赋予它更加多的可能。
与HTML区别的是，它用的是花括号{}来包裹属性。
CSS的属性大体能够分为5大类。
其中样式、框模型、定位、选取器为较为常用的四类，而其余属性皆归为高级属性。
CSS的语言规则分为两部分：
第1部分是选取器，顾名思义咱们要告诉浏览器这个属性是用在哪个或哪几个标签上。
第二部分是声明，是告诉浏览器详细我要为它附加什么属性，增多什么变化的部分。
让咱们瞧瞧加上了属性之后，咱们的HTML有什么变化吧~
color，改变了文字的颜色
font-size能够让文字的体积出现变化
bac公斤round-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弹可口。
更加多内容，欢迎加大师姐微Xit_xzy，入群717415872认识课程动态、幕后花絮，还有机会参与到课程制作，作为联合制作人
记得备注来自果冻课堂哟
| 
发表于 2024-6-30 11:11:47
