第18课 美化网页方法多 课件 2024—2025学年人教版（2024）初中信息科技七年级全一册.pptxVIP

第18课美化网页方法多XXX学校XXX第四单元校园活动线上展义务教育信息科技课程资源七年级

学习目标知道用HTML代码简单美化网页的操作方法。知道串联样式表的作用，初步学会用它美化网页。能根据需求，分析不同方法的特点并合理选择，提高解决问题的效率。第18课美化网页方法多第四单元校园活动线上展

第四单元校园活动线上展一用HTML代码美化网页二用CSS美化网页学习内容第18课美化网页方法多

导入第四单元校园活动线上展前面编写了介绍科技节某个项目的简单网页，这好似用HTML搭建好了“新房屋”的结构，接下来该怎样将“新房屋”“装修”得漂亮时尚？第18课美化网页方法多

第四单元校园活动线上展请打开之前完成的科技节网页，使用HTML标签及属性对网页进行美化，如设置字体、设置背景等，然后交流讨论这种方式是否便捷，美化效果好不好。用HTML代码美化网页第18课美化网页方法多

第四单元校园活动线上展用HTML代码美化网页标签属性值作用fontcolor#RRGGBB规定文本颜色，采用十六进制表示颜色值，如fontcolor=#FF0000facefont_family规定文本的字体，如fontface=楷体sizenumber规定文本的大小，如fontsize=6bodybgcolor#RRGGBB规定背景的颜色，采用十六进制表示颜色值，如bodybgcolor=#0000FFpalignleft左对齐文本，如palign=leftright右对齐文本，如palign=rightcenter居中对齐文本，如palign=center左表是常用的控制网页显示效果的代码。第18课美化网页方法多

第四单元校园活动线上展用HTML代码美化网页用HTML代码进行美化，美化效果往往很有限，但操作却非常烦琐。在实际应用中，人们经常用CSS来美化网页。CSS（cascadingstylesheets，串联样式表），生活中也经常被称为级联样式表或层叠样式表。第18课美化网页方法多

第四单元校园活动线上展用CSS美化网页如果将HTML代码比作建造房屋的“建筑师”，那么CSS就是装饰这间房屋的“装潢设计师”。CSS可以描述网页等文档的外观和格式，控制某类HTML标签内容的颜色、字体、宽度、高度等。第18课美化网页方法多

第四单元校园活动线上展用CSS美化网页写CSS代码时，需要先指定网页中的元素，然后对元素的颜色、字体等进行描述。浏览时，浏览器会按照CSS的描述显示相应的元素。第18课美化网页方法多

第四单元校园活动线上展用CSS美化网页CSS的基本语法结构（选择器、声明）选择器（需要改变样式的HTML元素）声明开始大括号声明结束大括号声明（属性和值被:分开，以;结束）属性属性值p{}font-size:14px;color:#606266;第18课美化网页方法多

第四单元校园活动线上展用CSS美化网页内部样式headstylebody{background-color:#191970;}h1{text-align:center;}……/style/headstyle标签CSS第18课美化网页方法多

用CSS美化网页第四单元校园活动线上展1．请参考右侧代码，尝试用CSS对科技节网页文本、标题、背景等进行美化。2．观察修改后网页显示效果的变化。3．交流讨论使用CSS美化网页的心得。headtitle校园科技节/titlestylebody{background-color:#87CEFA;}h2{font-family:黑体;font-size:50px;color:#DB7093;}h1{font-family:黑体;font-size:40px;color:#DB7093;}p{font-family:隶书;font-size:24px;text-indent:2em;}/style/head第18课美化网页方法多

用CSS美化网页第四单元校园活动线上展属性值作用color#RRGGBB设置文本颜色，采用十六进制表示颜色值，如{color:#FF0000;}font-family字体系列名称设置文本的字体，如{font-family:楷体;}font-size长度值px/em设置文本的大小，如{font-size:6px;}background-color#RRGGBB设置背景颜色，采用十六进制表示颜色值，如{background-color:#0000FF;}text-alignleft左对齐文本，如{text-align:left;}right右对齐文本，如{text-ali