网页设计10-文字效果.pptVIP

内部培训资料,不作任何宣传用途 P o w e r B a r 中国专业PPT设计交流论坛 授课人：何蕴婷 EMAIL：jmhyt@126.com 内部培训资料,不作任何宣传用途 内部培训资料,不作任何宣传用途 网页设计与制作（10） ---- CSS样式（5） 知识技能目标 1、通过实训项目熟练掌握css对页面文字效果的综合运用。 实训内容 css对页面文字效果的综合运用 1、模拟Google的Logo 2、制作五彩的标题 3、模拟百度搜索页面 实训项目 实训一、模拟Google的Logo 实训二、制作五彩的标题 实训三、模拟百度搜索页面 复习引入 html head title文字粗体/title style !-- h1 span{ font-weight:lighter;} span{ font-size:28px; } span.one{ font-weight:100; } span.two{ font-weight:200; } span.three{ font-weight:300; } span.four{ font-weight:400; } span.five{ font-weight:500; } span.six{ font-weight:600; } span.seven{ font-weight:700; } span.eight{ font-weight:800; } span.nine{ font-weight:900; } span.ten{ font-weight:bold; } span.eleven{ font-weight:normal; } -- /style /head body h1文字span粗/span体/h1 span class=one文字粗细:100/span span class=two文字粗细:200/span span class=three文字粗细:300/span span class=four文字粗细:400/span span class=five文字粗细:500/span span class=six文字粗细:600/span span class=seven文字粗细:700/span span class=eight文字粗细:800/span span class=nine文字粗细:900/span span class=ten文字粗细:bold/span span class=eleven文字粗细:normal/span /body /html 实例1：页面中使用到的多种选择器 复习引入 思考： 上例中红框中的是何种选择器，给页面带来怎样的控制？ 小知识： 1. SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。 2. SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。DIV也被用来在HTML文件中建立逻辑部分。但与SPAN不同， DIV工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。 新课讲授 html head titleGoogle/title /head body pGoogle/p /body /html 实训一：模拟Google的Logo——文字效果的综合运用 1.新建页面的基本结构，在页面显示”Google” 新课讲授 html head titleGoogle/title /head body pGoogle/p /body /html 实训一：2.对p标记的文字效果进行控制 style !-- p{ font-size:80px; letter-spacing:-2px; /* 字母间距 */ font-family:Arial, Helvetica, sans-serif; } -- /style 新课讲授 html head titleGoogle/title /head body pGoogle/p /body /html 实训一：3.对各字母分别设定CSS风格 style !-- p{……} .g1, .g2{ color:#184dc6; } .o1, .e{ color:#c61800; } .o2{ color:#efba00; } .l{ color