资源简介

(共18张PPT)
信息科技
七年级上册
浙江教育出版社（2023）
目录
学习目标
01
新知学习
02
课后小结
03
练习一下
04
第8课 网页的数据呈现
学习目标
01
通过体验CSS样式设置的效果，认识CSS样式表，了解样式表的作用；
通过网页中添加样式，掌握样式表的基本结构；
能理解使用CSS降低网页代码耦合度所带来的便捷。
新知学习
02
你浏览过的网页中，看到过哪些网页效果
你知道网页中的文字效果是如何实现的？
网站为了保证网页风格的整体性，在制作过程中往往要求文本、色彩等样式要协调统一，可以对网页数据各种呈现的效果进行样式的设置。
网页的数据呈现
更聪明
更网络化
一、网页数据呈现的方式
更仿生
二、CSS样式
三、样式表的基本结构
一、网页数据呈现的方式
HTML定义了网页的内容结构，即网页呈现的文字、图文、视频等内容，用HTML设计网页外观样式时需要使用大量的标记，代码相对多而复杂，使用CSS可以有效地对网页中数据的布局、字体和背景等效果实现更精确的控制，同时可以将网页的结构和格式分离，实现解耦。
比如对网站所有页面的风格可以应用一个CSS，只要修改这个CSS文件就可以更新所有页面的风格样式，既提高了更新和维护的效率，同时又缩减了网页的代码，提高了网页的浏览速度。
二、 CSS样式
CSS全称为层叠样式表(Cascading Style Sheets)，也是一种标识语言，CSS样式可以方便地设置网页效果。如网页中文字的字号、字体、颜色、位置以及图片的大小等，都涉及网页显示信息的样式。如图8-1和图8-2所示，是添加了样式表的网页效果的前后对比图。
图8-2所示的网页是在标签之 以下CSS字体、颜色等样式的代码。

修改样式表里的属性和属性参数，观察网页外观变化，尝试其他样式的设置。
三、样式表的基本结构

级联样式表
级联样式表（CascadingStyle Sheel，简称CSS）是由国际组织制定的一套延伸HTML样式的新标准，用来控制网页内容的外观格式，包括版面的精确位置、特定字体和格式，___________甚至图像、表格和图层等的位置和格式，称为“级联”的主要原因是支持应用多个样式表到同一张网页中。
课后小结
03
小结
练习一下
04
1.用CSS样式表美化网页.
2.尝试使用图像标签，在网页里加入一张平铺模式的背景图。
感谢聆听！
Thank you for listening

展开更多......

收起↑