文档介绍：该【网页设计与制作ppt课件 】是由【miao19720107】上传分享，文档一共【33】页，该文档可以免费在线阅读，需要了解更多关于【网页设计与制作ppt课件 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。项目化实战教程
项目单元三、设计和制作网站首页
掌握CSS的三种应用方式
理解盒子模型、学会使用div和span
知识目标
能应用CSS的三种应用方式制作网页
能应用盒子模型设计网页
技能目标
情感态度
激发学生自信心,培养积极向上,创新进取的健康心态。
---CSS的应用方式和盒子模型
重点难点
2010
%
重点:
CSS的三种应用方式
难点:
CSS的三种应用方式
二、项目单元实施
外部样式表
行内样式表
内部样式表
二、项目单元实施
在<head>区声明的样式表,称为“内部样式表”。
内部样式表的特点:仅对本页面有效。
内部样式表的缺点:各个页面CSS重复率较高,以后维护起来不方便。
内部样式表
二、项目单元实施
。
有了单独的CSS文件,HTML文档如何引用这个文件呢?
<html>
<head>
<title>淘宝网</title>
<linkrel="stylesheet"href=""type="text/css">
</head>
<body>
<h2>如何加入“消费者保障服务”?</h2>
……
<link>标签
指定CSS文件的路径
演示:外部样式表
二、项目单元实施
推荐使用外部样式表
二、项目单元实施
如果某个样式规则使用频率不高,只是极个别元素使用,可以把样式定义在元素的标签里。
<body>
<h2>如何加入“消费者保障服务”?</h2>
<pstyle="color:red;font-size:16px;">您可以通过“我的淘宝”->“我是卖家”->“消费者保障服务”申请加入。在申请加入之前请先确认自己是否符合加入消费者保障服务的条件,如果符合申请要求,您可以点击“申请加入”按钮提交申请。</P>
行内样式表
二、项目单元实施
三种样式表的特点
样式表类型
样式表声明
作用范围
内部样式表
在<head>区声明
只对本网页的元素有效
外部样式表
可以被多个网页引用,推荐使用。
行内样式表
在标签内使用sytle属性声明
仅对本标签有效,偶尔用用也可以。
二、项目单元实施
样式表的“最近原则”
<linkrel="stylesheet"href=""type="text/css">
<styletype="text/css">
p{
font-size:18px;
color:red;
}
</style>
……
<pstyle="font-size:24px;color:green;">您可以通过“我的……您可以点击“申请加入”按钮提交申请。</P>
外部样式表
内部样式表
行内样式表
第一段、第二段文本的格式分别是什么?
如果将外部样式表、内部样式表更换位置,结果又怎样?查看示例