(
课件网) 第18课 美化网页方法多 第四单元 校园活动线上展 1 2 3 知道用HTML代码简单美化网页的操作方法。 学习目标 知道串联样式表的作用，初步学会用它美化网页。 能根据需求，分析不同方法的特点并合理选择，提高解决问题的效率。 第18课 学习目标 前面编写了介绍科技节某个项目的简单网页，这好似用HTML搭建好了“新房屋”的结构，接下来该怎样将“新房屋”“装修”得漂亮时尚？ 问题情境 第18课 课堂导入 一 用HTML代码美化网页 二 用CSS美化网页 学习内容 第18课 学习内容 请打开之前完成的科技节网页，使用HTML标签及属性对网页进行美化，如设置字体、设置背景等，然后交流讨论这种方式是否便捷，美化效果好不好。 第18课 学习内容 一、用HTML代码美化网页 标 签 属 性 值 作 用
color #RRGGBB 规定文本颜色，采用十六进制表示颜色值，如 face font_family 规定文本的字体，如 size number 规定文本的大小，如 bgcolor #RRGGBB 规定背景的颜色，采用十六进制表示颜色值，如 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:cen ... ... 
