从0开始学python第11.2节-css&JavaScript

上节课,我们学了html。html是网页的骨架,决定了网页的展示内容。这节课,我们来一起学习一下怎让网页拥有美丽的外观和动态的功能。

在讲解本节课内容之前,咱们再来回忆一下盖房子的过程。

html就是房子的骨架,接下来,我们看看怎么给网页做装修。

CSS

CSS是层叠样式表(Cascading Style Sheets)的缩写,CSS就是网页的粉刷器,描述了HTML标签的具体展示样式(颜色、大小、位置、边框等)。我们看下面网页的例子:https://www.w3schools.com/css/css_intro.asp 。在这个网页里演示在不同的CSS设置里网页所呈现的不同效果。

我们来看一下CSS是怎么来控制一个标签样式的。

style标签中统一声明

一般情况下,我们将一个网页的所有样式集中在style标签中管理。每个样式块格式如下:

选择器: 首先定义一个选择器,这个选择器可以是标签的名字(name)、标签里的class()属性或者id()属性

选择器里面的样式内容用大括号包起来

声明:大括号里面是一个个声明。每个声明包含了用冒号分开的属性(property)和值(value)。这个是不是和python的字典定义很像?哈哈

分割:每个声明用分号分隔

内联方式

内联的方式是直接在标签里面写这个标签长什么样子,这种方法的优点是方便,缺点是不好管理。

小技巧

我们在chrome浏览器里打开,按下键打开浏览器的调试模式。选择一个p标签,看看这个p标签都有哪些样式吧。

我们还可以改样式里的内容,网页的展示样式会立刻发生变化。这里注意,我们如果刷新网页。改变的东西就没了,小朋友们知道是什么原因吗?

JavaScript

给网页装修好后,我们就来通上水电吧。

JavaScript在被发明的时候,是为了往网页活起来的。很显然,JavaScript很好的完成了这项功能。我们现在随意点开一个网页,都会有复杂的交互(点击按钮、动态加载数据、form表单、动画游戏)。JavaScript又可以缩写成JS。JavaScript是一门完备的脚本语言,具有和python一样的所有语法实现。

JavaScript可以直接写在HTMl文件的里的,当网页被浏览器加载。网页标签里的JS代码会立刻运行。

除了浏览器外,JavaScript还可以像python一样在电脑上命令行里运行,这个叫NodeJS。

我们来主要学习一下JavaScript在网页里能做哪些事情。

维护HTML标签,包括读取、修改、删除、写入 某些标签和它们的样式。

对用户在网页上的操作做响应,比如 点击按钮、移动鼠标。

像服务端发起请求,拉取一小块数据渲染到网页上。

详细的代码我们会在项目实战中介绍。

小技巧

和CSS一样,我们打开Chrome的调试模式可以调试我们的JS代码。

总结

这两节,我们概括了怎么用 html css JavaScript 3门语言来写一个静态网站,是不是知识点很多?没关系,掌握了原理。在具体开发网页时,我们可以利用强大的搜索引擎帮助我们的开发。

下节课,我们来具体动手写一个项目实例,用前面的知识写一个网页计算器。

阿达老师-孩子身边的编程专家

完整课程请关注阿达老师,主页里有完整的课程目录和观看地址

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180917A08LMK00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券