教科版 高中信息技术选修3 5.2.2 CSS 样式表 课件(共21张PPT)

高中信息技术网络技术应用
CSS样式表体验与探究
打开演示网站，观察网页变化
什么是css样式表？
CSS就是Cascading Style Sheets 的缩写。中文翻译为层叠样式表。简称样式表。CSS 样式表作为当前网页制作中的一种常用技术，可以更加精确地控制布局、颜色、背景和其他图文效果。
样式1
CSS样式表
样式2
……
三国人物志
关羽
{
属性:值;
……
}
……
张飞
{
身高:185cm;
体重:105kg;
性别:男;
性格:暴躁;
……
}
css样式表结构
体验任务一
任务一：打开端午节网站的“index.html”,修改文字样式
用Frontpage打开index.htm网页，将以下样式代码复制在区域的段落标签

中，观察效果。
style=“color：red;”或者style=“color：#000000”
例如想规定一个

标记中的文字为蓝色，字体大小为12pt，则可以书写为：
.......
其中各个属性之间用“;”隔开，属性与属性值之间用“:”隔开。
在HTML标记中使用style样式，直接写入需要定义的属性。
<标签名 style="属性1:值1; ?属性2:值2 ；......">......
1.嵌入式样式表
标签名与样式语句留有空格
英文状态标点符号
拓展任务
用Frontpage打开index.htm网页，将以下样式复制在超链接标签中，观察效果。
style="font-size: 12pt; color: #008080; text-decoration:none; "
请同学们在body区内写入正确的代码。
归纳嵌入式样式表的特点；
1.位置： 区域；
2.对网页中的单个标记起作用；
给整个网页设置相同样式效果
体验任务二
1.请将以下代码复制在head区合适的位置，浏览并观察效果。代码如下：

请修改其中样式属性代码，并观察效果比较与嵌入式样式表差别
2.内联式样式表，修改网页中所有超链接样式
2.内联式样式表
嵌入式样式表局限于某个标签，如果希望本网页内的所有同类标签都采用统一样式，这时应采用内联式样式表。
应用方式：在body区，要在应用样式的文字头和尾加上样式组名即可。
原则：先定义，后应用。
注释语言
归纳内联式样式表的特点；
1.位置： 区域；
2.对当前整个网页起作用；
思考：
若将整个网站设置相同的风格页面，该如何操作？
是否在每个页面head区中都添加样式表？
体验任务三
记事本中应该输入以下代码：
body {background-image:url(bg1.jpg);}
td {text-align:center;}
th { color:#669900;}
table tr td {border:1px solid green;}
a:link { font-size: 12pt; color: #9900CC; text-decoration:none; }
a:visited { font-size: 12pt; color: #ccffcc;text-decoration:none; }
a:hover { font-size: 12pt; color: #008080; text-decoration:none; }
#name1{height:200;background-image:url(banner.jpg);}
保存的时候保存为h3.css
请注意后缀！
请把样式代码写到记事本中，保存的文件名称为skin.css，将此页面引用刚才定义的样式。
思考：应该添加什么代码？代码添加在什么地方？
skin.css必须与想实现效果的网页保存在同一个目录内。
3.外联式样式表





添加的代码

端午节习俗 实现的效果 归纳外联式样式表的特点； 1.位置： 区域； 2.对多个网页设置统一的风格； 2.定义*.css文件； 有些同学实现不了CSS样式表带来的效果 1、保存的CSS文件和网页文件不在同一个目录下； 2、引用的文件名与样式名混淆； 3、代码的拼写和标点的问题。 【归纳提炼】 CSS样式表 类型 应用范围 存放位置 书写格式 网页中的一个元素 嵌入式 样式表 内联式 样式表 外联式 样式表 一个网页 一个网站 <标签 style=″属性:属性值;″> 内容 点击下载 同课章节目录 第一章 网络能为我们做什么 1.1 跨时空的服务 1.2 因特网信息交流与网络安全 1.3 因特网信息资源检索 第二章 因特网的组织与管理 2.1 域名与域名的管理 2.2 IP 地址及其管理 2.3 如何将计算机接入因特网 第三章 网络是如何工作的 3.1 网络的功能与构造 3.2 网络通信的工作原理 3.3 网络的规划设计 3.4 动手组建小型局域网 第四章 建立主题网站 4.1 规划网站 4.2 网站设计 4.3 网站实现 4.4 发布、管理网站 第五章 动态网页制作 5.1 认识动态网页 5.2 理解动态HTML 5.3 应用动态HTML 5.4 ASP脚本的应用 点击下载 VIP下载 © 21世纪教育网 友情链接：21课件 21教件 排课软件 21组卷网 21书城 刷题宝