(
课件网) 第8课 网页的数据呈现 年 级：八年级 学 科：初中信息科技（浙教版）
人工智能 走进人工智能
回顾 HTML语言用来组织网页的结构和内容。 优秀的网页数据呈现效果有什么作用？ 分析 文字和图片等数据，大小更合适、位置更合理、颜色更统一、协调 分析 优秀的网页数据呈现效果有什么作用？ 网页更美观 更便于阅读 有整体风格特色 只有结构和内容的网页 设置了效果的网页 实验一 尝试删除、恢复link标签行，观察实验结果。 link代码行实现了整个网页效果的设置
链接类型 链接文件路径及文件名 新知1：层叠样式表 新知1：层叠样式表 定义网页中数据的外观和表现形式，实现网页效果的设置。 层叠样式表 CSS cascading style sheets 新知2：样式表的基本结构 选择符 样式属性1:属性值1; 样式属性2…… a { color:green;font-size:20px;} 样式声明 { } 尝试体验 请你自己尝试添加样式，观察网页的效果变化，进一步掌握样式表的基本结构。 添加CSS的三种方式
1.外部样式表 2.内部样式表 3.内联样式表 添加CSS的三种方式 2.内部样式表
走进人工智能
样式属性1:属性值1; 样式属性2:属性值2 添加CSS的三种方式 3.内联样式表 内联样式表 实验二 有三个用不同CSS方式添加了样式的网站，请尝试修改三个网站中所有网页的某一个样式体验三种不同添加CSS的方式的便捷度，并填写表格。 内部样式表 外部样式表 知识链接：
标签 选择符 {样式属性1:属性值1; 样式属性2……} 类名
走进人工智能
知识链接：
标签 类名 实现网页数据样式的精准控制 知识链接：
标签 实验二 有三个用不同CSS方式添加了样式的网站，请尝试修改三个网站中所有网页的某一个样式体验三种不同添加CSS的方式的便捷度，并填写表格。 添加css方式 网页代码 复杂程度 网页样式 修改难度 网页内容与样式的分离程度 内联样式表 内部样式表 外部样式表 实验二 有三个用不同CSS方式添加了样式的网站，请尝试修改三个网站中所有网页的某一个样式体验三种不同添加CSS的方式的便捷度，并填写表格。 添加css方式 网页代码 复杂程度 网页样式 修改难度 网页内容与样式的分离程度 内联样式表 内部样式表 外部样式表 内部样式表实现了网页内容与样式的基本分离 外部样式表实现了网页内容与样式的完全分离 解耦 ★★★ ★★★ ★★ ★★ ★★ ★★★ 小结 小结 1.层叠样式表CSS 2.样式表的作用 3.样式表的基本结构 4.CSS降低网页代码耦合度带来的便捷 作业 用css来美化自己主题网站的网页，你可以从改变文字的字体和颜色开始，然后尝试添加平铺背景图等样式效果。 下课 Thanks! https://www.21cnjy.com/recruitment/home/fine ... ...
~~ 您好，已阅读到文档的结尾了 ~~
