高中信息技术选修3：网络技术应用 5.2.2 CSS 样式表同课异构_第1页
高中信息技术选修3：网络技术应用 5.2.2 CSS 样式表同课异构_第2页
高中信息技术选修3：网络技术应用 5.2.2 CSS 样式表同课异构_第3页
高中信息技术选修3：网络技术应用 5.2.2 CSS 样式表同课异构_第4页
高中信息技术选修3：网络技术应用 5.2.2 CSS 样式表同课异构_第5页
已阅读5页，还剩16页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

苏州大学附属中学黄志锋高中信息技术网络技术应用CSS样式表体验与探究打开演示网站，观察网页变化什么是css样式表？CSS就是CascadingStyleSheets的缩写。中文翻译为层叠样式表。简称样式表。CSS样式表作为当前网页制作中的一种常用技术，可以更加精确地控制布局、颜色、背景和其他图文效果。样式1CSS样式表样式2……三国人物志关羽{

属性:值;……}……张飞{

身高:185cm;

体重:105kg;

性别:男;

性格:暴躁;……

}css样式表结构体验任务一任务一：打开端午节网站的“index.html”,修改文字样式用Frontpage打开index.htm网页，将以下样式代码复制在<body>区域的段落标签<p>中，观察效果。

style=“color：red;”或者style=“color：#000000”例如想规定一个<table>标记中的文字为蓝色，字体大小为12pt，则可以书写为：<tablestyle=“color:

blue;font-size:12pt"></table>

其中各个属性之间用“;”隔开，属性与属性值之间用“:”隔开。

在HTML标记中使用style样式，直接写入需要定义的属性。<标签名style="属性1:值1;

属性2:值2；"></标签名>1.嵌入式样式表标签名与样式语句留有空格英文状态标点符号拓展任务用Frontpage打开index.htm网页，将以下样式复制在超链接标签<a>中，观察效果。

style="font-size:12pt;color:#008080;text-decoration:none;"

请同学们在body区内写入正确的代码。归纳嵌入式样式表的特点；1.位置：<body>区域；2.对网页中的单个标记起作用；给整个网页设置相同样式效果体验任务二1.请将以下代码复制在head区合适的位置，浏览并观察效果。代码如下：<styletype="text/css"><!--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;}--></style>请修改其中样式属性代码，并观察效果比较与嵌入式样式表差别2.内联式样式表，修改网页中所有超链接样式2.内联式样式表嵌入式样式表局限于某个标签，如果希望本网页内的所有同类标签都采用统一样式，这时应采用内联式样式表。应用方式：在body区，要在应用样式的文字头和尾加上样式组名即可。原则：先定义，后应用。注释语言归纳内联式样式表的特点；1.位置：<head>区域；2.对当前整个网页起作用；思考：

若将整个网站设置相同的风格页面，该如何操作？是否在每个页面head区中都添加样式表？体验任务三记事本中应该输入以下代码：body{background-image:url(bg1.jpg);}td{text-align:center;}th{color:#669900;}tabletrtd{border:1pxsolidgreen;}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.外联式样式表<head><linkrel=stylesheettype=text/csshref=‘skin.css'><metahttp-equiv="Content-Language"content="zh-cn"><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>端午佳节(网站1)</title></head>添加的代码<body><table><tr><tdid=name1>

<ahref="习俗.htm">端午节习俗</a>实现的效果归纳外联式样式表的特点；1.位置：<head>区域；2.对多个网页设置统一的风格；2.定义*.css文件；有些同学实现不了CSS样式表带来的效果1、保存的CSS文件和网页文件不在同一个目录下；2、引用的文件名与样式名混淆；3、代码的拼写和标点的问题。【归纳提炼】CSS样式表类型应用范围存放位置书写格式网页中的一个元素嵌入式样式表内联式样式表外联式样式表一个网页一个网站<标签

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论