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

align left 左对齐文本，如

right 右对齐文本，如

center 居中对齐文本，如

左表是常用的控制网页显示效果的代码。
第18课　美化网页方法多
第四单元　校园活动线上展
用HTML代码美化网页
用HTML代码进行美化，美化效果往往很有限，但操作却非常烦琐。在实际应用中，人们经常用CSS来美化网页。
CSS（cascading style sheets，串联样式表），生活中也经常被称为级联样式表或层叠样式表。
第18课　美化网页方法多
第四单元　校园活动线上展
用CSS美化网页
如果将HTML代码比作建造房屋的“建筑师”，那么CSS就是装饰这间房屋的“装潢设计师”。CSS可以描述网页等文档的外观和格式，控制某类HTML标签内容的颜色、字体、宽度、高度等。
第18课　美化网页方法多
第四单元　校园活动线上展
用CSS美化网页
写CSS代码时，需要先指定网页中的元素，然后对元素的颜色、字体等进行描述。浏览时，浏览器会按照CSS的描述显示相应的元素。
第18课　美化网页方法多
第四单元　校园活动线上展
用CSS美化网页
CSS的基本语法结构（选择器、声明）
选择器
（需要改变样式的HTML元素）
声明开始大括号
声明结束大括号
声明
（属性和值被: 分开，以; 结束）
属性
属性值
p {
}
font-size: 14px;
color : #606266;
第18课　美化网页方法多
第四单元　校园活动线上展
用CSS美化网页
内部样式



style标签
CSS
第18课　美化网页方法多
用CSS美化网页
第四单元　校园活动线上展
1．请参考右侧代码，尝试用CSS对科技节网页文本、标题、背景等进行美化。
2．观察修改后网页显示效果的变化。
3．交流讨论使用 CSS美化网页的心得。




第18课　美化网页方法多
用CSS美化网页
第四单元　校园活动线上展
属　　性 值 作　　用
color #RRGGBB 设置文本颜色，采用十六进制表示颜色值，
如{color:#FF0000;}
font-family 字体系列名称 设置文本的字体，如{font-family:楷体;}
font-size 长度值px/em 设置文本的大小，如{font-size:6px;}
background-color #RRGGBB 设置背景颜色，采用十六进制表示颜色值，
如{background-color:#0000FF;}
text-align left 左对齐文本，如{text-align:left;}
right 右对齐文本，如{text-align:right;}
center 居中对齐文本，如{text-align:center;}
text-indent 长度值px/em 设置段落中首行文本的缩进，如{text-indent:2em;}
第18课　美化网页方法多
课堂总结
1．用HTML代码可以美化网页。
2． CSS可以让网页呈现出效果一致的美化风格。
3．使用CSS美化网页，效果更好。
第四单元　校园活动线上展
第18课　美化网页方法多
拓展与提升
第四单元　校园活动线上展
尝试用在线人工智能模型，美化已有的HTML代码。
只要把已有的HTML代码提交给模型，然后要求它使用CSS美化就可以了。
第18课　美化网页方法多
用所学知识
去探索未知世界吧！
同学，你学会了吗？