网页设计8-CSS对页面.pptVIP

内部培训资料,不作任何宣传用途 P o w e r B a r 中国专业PPT设计交流论坛 授课人：何蕴婷 EMAIL：jmhyt@126.com 内部培训资料,不作任何宣传用途 内部培训资料,不作任何宣传用途 网页设计与制作（8） ---- CSS样式（3） 知识技能目标 1、通过实训项目了解css对页面的控制。 2、通过实训项目熟练掌握css的3种选择器的语法结构。 实训内容 页面中的3种CSS选择器 1、类别选择器 2、标记选择器 3、ID选择器 实训项目 CSS对页面的控制 实训项目 项目效果 实践操作 html head title体验CSS/title /head body div CSS简介/div div CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。它以HTML为基础，提供了丰富的格式化功能，如字体、颜色、背景、整体排版等等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪、PDA等等。CSS的引入随即引发了网页设计的一个又一个新高潮，使用CSS设计的优秀页面层出不穷。/div /body /html 一、构建基本页面框架： 标题和正文 实践操作 html head title体验CSS/title /head body div CSS简介/div div img src=bike.jpg border=0 CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。它以HTML为基础，提供了丰富的格式化功能，如字体、颜色、背景、整体排版等等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪、PDA等等。CSS的引入随即引发了网页设计的一个又一个新高潮，使用CSS设计的优秀页面层出不穷。/div /body /html 二、插入图片 实践操作 html head title体验CSS/title /head body div CSS简介/div div …… /div /body /html 三、加入CSS控制： 1.标记选择器：通过设置body实现对页面整体效果的控制 style type=text/css !-- body{ padding:0px; margin:0px; background-color:#FFFF99; /* 设置背景颜色*/} -- /style /* 避免老式浏览器不支持CSS */ 实践操作 html head title体验CSS/title …… /head body div id=“title”CSS简介/div div id=“content”……/div /body /html 三、加入CSS控制： 2.ID选择器 实践操作 style type=text/css !-- body{ padding:0px; margin:0px; background-color:#FFFF99; /* 设置背景颜色*/} -- /style 三、加入CSS控制： （1）对标题ID样式进行修改，设置title的属性 #title{ font-size:19px; /* 字号 */ font-weight:bold; /* 粗体 */ text-align:center; /* 居中 */ padding:15px; /* 间距 */ background-color:#FFFFCC; /* 背景色 */ border:1px solid #FFFF00; /* 边框 */ } 实践操作 style type=text/css !-- body{ …… -- /style 三、加入CSS控制： （2）对内容ID样式进行修改，设置content的属性 #title{ …… } #content{ padding:6px; /* 间距 */ font-size:13px; /* 字号 */ line-height:130%; /* 行间距 */ } 实践操作