8.8网页的数据呈现（学习任务单）-信息技术八年级上册同步备课（浙教版）
2024-12-25
|
2页
|
83人阅读
|
0人下载
普通
资源信息
| 学段 | 初中 |
|---|---|
| 学科 | 信息科技 |
| 教材版本 | 初中信息科技浙教版八年级上册 |
| 年级 | 八年级 |
| 章节 | 第8课 网页的数据呈现 |
| 类型 | 学案-学习任务单 |
| 知识点 | - |
| 使用场景 | 同步教学 |
| 学年 | 2024-2025 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | DOCX |
| 文件大小 | 358 KB |
| 发布时间 | 2024-12-25 |
| 更新时间 | 2024-12-25 |
| 作者 | xkw_079922842 |
| 品牌系列 | - |
| 审核时间 | 2024-12-25 |
| 下载链接 | https://m.zxxk.com/soft/49570487.html |
| 价格 | 1.50储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
八年级（上）第二单元互联网数据
第8课 网页的数据呈现
【活动一】玩一玩
网站为了保证网页风格的整体性，在制作过程中往往要求文本、色彩等样式要协调统一。请你打开https://www.chnmuseum.cn/fw/并尝试修改图1的①中文字大小和颜色。
图1
【活动一】想一想
在【玩一玩】的过程中，修改一个样式属性，①中的文字样式都会发生改变，请你思考该设置样式的方法和直接用HTML标签设置样式对比，有哪些好处？
【活动二】
利用半成品1.0或半成品2.0，修改CSS样式中的属性和参数美化上一节课网页作品。
【知识库】
一、常见的元素选择符和样式属性
将bj.jpg设置为背景图片并覆盖背景区域
body{background-image:url('bj.jpg');background-size: cover;}
设置h1标签的颜色、大小和字体
<h1>{color:red;font-size:35px;font-family:黑体}</h1>
设置p标签的颜色、大小和字体
<p>{color:red;font-size:35px;font-family:黑体}</p>
二、CSS的层叠性
CSS具有层叠性，意味着可以通过多个规则来定义相同元素的样式，样式将按照优先级的顺序层叠在一起。例如有以下两个CSS规则：
h1 {color: red;font-size: 24px;}
h1 {font-weight: bold;font-size: 30px}
这两个规则都选择了<h1>标题元素，第一个规则指定了标题的颜色为红色，字体大小为24像素。第二个规则指定了标题的字体粗细为粗体，字体大小为30像素。
根据层叠性的原则，后面的规则会覆盖先前的规则。因此，最终应用到<h1>标题元素上的样式将是红色文本、30像素大小和粗体字。
三、CSS的导入方式
1.内联样式（Inline Styles）：可以直接在HTML元素的style属性中编写CSS样式。例如：
<p style="color: red; font-size: 16px;">这是一段红色字体、16像素大小的文本。</p>
2.内部样式表（Internal Stylesheet）：将CSS样式代码放置在HTML文档的<style>标签中。该标签通常位于<head>元素内。例如：
<head>
<style type="text/css">
p {color: red;font-size: 16px;}
</style>
</head>
<body>
<p>这是一段红色字体、16像素大小的文本。</p>
</body>
内部样式表适用于整个HTML文档或指定范围内的元素，它的优先级高于外部样式表。
3.外部样式表（External Stylesheet）：将CSS代码保存在一个独立的外部文件（通常是以.css为扩展名）中，并通过HTML文档的<link>标签进行引用。外部样式表可以在多个HTML文档之间共享。例如：
在一个名为styles.css的外部样式表文件中：
在HTML文档中引用外部样式表：
p {
color: red;
font-size: 16px;
}
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>这是一段红色字体、16像素大小的文本。</p>
</body>
</html>
学科网（北京）股份有限公司
$$
资源预览图
1
相关资源
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。