第8课 网页的数据呈现 课件 2024—2025学年浙教版（2023）初中信息技术八年级上册

知识回顾 01 HTML标签 HTML文件的基本结构： <html> # 标记网页的开始# <head> # 标记头部的开始# <title> 显 示 网 页 的 标 题 < /title> </head> # 标记头部的结束# <body> # 标记网页正文开始# 网页内容 </body># 标记网页正文结束# </html> # 标记网页的结束# 网页的数据呈现 css层叠样式表 新知学习 02 一、网页数据呈现的方式 结构层： HTML定义了网页的内容结构，即网页呈现的文字、图文、视频等内容。 样式层：使用CSS可以有效地对网页中数据的布局、字体和背景等效果实现更精确的控制，同时可以将网页的结构和格式分离。 比如对网站所有页面的风格可以应用一个CSS，只要修改这个CSS文件就可以更新所有页面的风格样式，既提高了更新和维护的效率，同时又缩减了网页的代码，提高了网页的浏览速度。 二、 CSS样式 CSS全称为层叠样式表(Cascading Style Sheets)，也是一种标识语言，CSS样式可以方便地设置网页效果。 css的样式分为两种： 1：文字的样式 2：盒模型 css的文字属性有哪些 文字三属性： 1、字体颜色 color 2、字体 font-family 3、字号 font-size 三、样式表的基本结构 <style>标签表示要定义的样式，type="text/css"用于说明这是一段CSS规则代码，选择符可以使用HTML标签的名称。可以对HTML标签设置样式，也可以对网页上的文本、图像等来设置样式。 样式表的基本结构如下： <style type="text/css"> 选择符{样式属性1:属性值1;样式属性2:属性值2:样式属性3:属性值2;} </style> color css的颜色 css的颜色有三种表现形式： 1、英文表示法 2、十六进制表示法 3、RGB模式 三、样式表的基本结构 <style>标签表示要定义的样式，type="text/css"用于说明这是一段CSS规则代码，选择符可以使用HTML标签的名称。可以对HTML标签设置样式，也可以对网页上的文本、图像等来设置样式。 样式表的基本结构如下： <style type="text/css"> 选择符{样式属性1:属性值1;样式属性2:属性值2:样式属性3:属性值2;} </style> color 字体 css的字体 常用的中文字体有：宋体、隶书、微软雅黑 常用的英文字体有：Arial、consolas 如果同时设置两个字体网页的字体会变成什么样？ 三、样式表的基本结构 <style>标签表示要定义的样式，type="text/css"用于说明这是一段CSS规则代码，选择符可以使用HTML标签的名称。可以对HTML标签设置样式，也可以对网页上的文本、图像等来设置样式。 样式表的基本结构如下： <style type="text/css"> 选择符{样式属性1:属性值1;样式属性2:属性值2:样式属性3:属性值2;} </style> color 字体 字号 css的字号 css的字号常用的是以：px为单位的数字值 <style type="text/css"> 选择符{样式属性1:属性值1;样式属性2:属性值2:样式属性3:属性值2;} </style> <style type="text/css"> 选择符{ ; ; ;} </style> color:red font-size:35px font-family:黑体 练习一下 03 1.用CSS样式表设置网页文字。 2.尝试让“走进人工智能”居中显示。 居中对齐：<center></center> $$