网页的数据呈现课件浙教版初中信息技术八年级上册.pptx

知识回顾01

HTML标签HTML文件的基本结构：html#标记网页的开始#head#标记头部的开始#title显示网页的标题/title/head#标记头部的结束#body#标记网页正文开始#网页内容/body#标记网页正文结束#/html#标记网页的结束#

网页的数据呈现css层叠样式表

新知学习02

一、网页数据呈现的方式结构层：HTML定义了网页的内容结构，即网页呈现的文字、图文、视频等内容。样式层：使用CSS可以有效地对网页中数据的布局、字体和背景等效果实现更精确的控制，同时可以将网页的结构和格式分离。比如对网站所有页面的风格可以应用一个CSS，只要修改这个CSS文件就可以更新所有页面的风格样式，既提高了更新和维护的效率，同时又缩减了网页的代码，提高了网页的浏览速度。

二、CSS样式CSS全称为层叠样式表(CascadingStyleSheets)，也是一种标识语言，CSS样式可以方便地设置网页效果。css的样式分为两种：1：文字的样式2：盒模型

css的文字属性有哪些文字三属性：1、字体颜色color2、字体font-family3、字号font-size

三、样式表的基本结构style标签表示要定义的样式，type=text/css用于说明这是一段CSS规则代码，选择符可以使用HTML标签的名称。可以对HTML标签设置样式，也可以对网页上的文本、图像等来设置样式。样式表的基本结构如下：styletype=text/css选择符{样式属性1:属性值1;样式属性2:属性值2:样式属性3:属性值2;}/stylecolor

css的颜色css的颜色有三种表现形式：1、英文表示法2、十六进制表示法3、RGB模式

三、样式表的基本结构style标签表示要定义的样式，type=text/css用于说明这是一段CSS规则代码，选择符可以使用HTML标签的名称。可以对HTML标签设置样式，也可以对网页上的文本、图像等来设置样式。样式表的基本结构如下：styletype=text/css选择符{样式属性1:属性值1;样式属性2:属性值2:样式属性3:属性值2;}/stylecolor字体

css的字体常用的中文字体有：宋体、隶书、微软雅黑常用的英文字体有：Arial、consolas如果同时设置两个字体网页的字体会变成什么样？

三、样式表的基本结构style标签表示要定义的样式，type=text/css用于说明这是一段CSS规则代码，选择符可以使用HTML标签的名称。可以对HTML标签设置样式，也可以对网页上的文本、图像等来设置样式。样式表的基本结构如下：styletype=text/css选择符{样式属性1:属性值1;样式属性2:属性值2:样式属性3:属性值2;}/stylecolor字体字号

css的字号css的字号常用的是以：px为单位的数字值styletype=text/css选择符{样式属性1:属性值1;样式属性2:属性值2:样式属性3:属性值2;}/stylestyletype=text/css选择符{;;;}/stylecolor:redfont-size:35pxfont-family:黑体

练习一下03

1.用CSS样式表设置网页文字。2.尝试让“走进人工智能”居中显示。居中对齐：center/center