信息技术七年级全一册第18课 美化网页方法多授课ppt课件

这是一份信息技术七年级全一册第18课 美化网页方法多授课ppt课件，共14页。PPT课件主要包含了问题情境，学习内容，第18课学习内容，用CSS美化网页，声明开始大括号，声明结束大括号，属性值，内部样式，style标签，CSS等内容，欢迎下载使用。
前面编写了介绍科技节某个项目的简单网页，这好似用HTML搭建好了“新房屋”的结构，接下来该怎样将“新房屋”“装修”得漂亮时尚？
一 用HTML代码美化网页
二 用CSS美化网页
请打开之前完成的科技节网页，使用HTML标签及属性对网页进行美化，如设置字体、设置背景等，然后交流讨论这种方式是否便捷，美化效果好不好。
一、用HTML代码美化网页
左表是常用的控制网页显示效果的代码。
用HTML代码进行美化，美化效果往往很有限，但操作却非常烦琐。在实际应用中，人们经常用CSS来美化网页。 CSS（cascading style sheets，串联样式表），生活中也经常被称为级联样式表或层叠样式表。
如果将HTML代码比作建造房屋的“建筑师”，那么CSS就是装饰这间房屋的“装潢设计师”。CSS可以描述网页等文档的外观和格式，控制某类HTML标签内容的颜色、字体、宽度、高度等。
写CSS代码时，需要先指定网页中的元素，然后对元素的颜色、字体等进行描述。浏览时，浏览器会按照CSS的描述显示相应的元素。
CSS的基本语法结构（选择器、声明）
选择器（需要改变样式的HTML元素）
声明（属性和值被: 分开，以; 结束）
fnt-size: 14px;
clr : #606266;
1．用HTML代码可以美化网页。2． CSS可以让网页呈现出效果一致的美化风格。3．使用CSS美化网页，效果更好。
bdy{ backgrund-clr: #191970;}h1{ text-align: center;}……
1．请参考右侧代码，尝试用CSS对科技节网页文本、标题、背景等进行美化。2．观察修改后网页显示效果的变化。3．交流讨论使用 CSS美化网页的心得。
校园科技节bdy{ backgrund-clr:#87CEFA;}h2{ fnt-family:黑体; fnt-size:50px; clr:#DB7093;}h1{ fnt-family:黑体; fnt-size:40px; clr:#DB7093;}p{ fnt-family:隶书; fnt-size:24px; text-indent:2em;}