教案:S2-Y2转换课程第1章常见的CSS样式

授课教师:牟勇

课时:100分钟

 

l  本章技能目标

n 会创建统一外观的字体文本

n 会创建无下划线的超连接样式

n 会创建个性化的表格

n 会创建个性化的表单

l  本章重点

nCSS语法规则

nCSS常用属性

l  本章难点

n会创建个性化的表格

n会创建个性化的表单

l  本章工作任务

u  美化“宝贝分类”页面

u  制作并美化“注册”页面

l   整章授课思路

n本章共有共有三个知识点:CSS语法规则,CSS用法,CSS常用属性

n因为4.0的学员在S1就已经学习过CSS,所以CSS语法规则部分可以采用回顾的方式来进行。

nCSS用法依然可以采用回顾的方式进行。

nCSS属性重点讲述边框属性。

n教员应多与学员互动,让学员参与课堂教学过程,及时进行鼓励和表扬,增强学员自信心。

回顾:   [5分钟]

表单中提交数据的方法有那两种及其区别?

创建一个登录界面需要哪些表单元素?

target属性取值可以为哪些及其含义?

预习检查:   [5分钟]

简述样式表的基本结构?

常用的样式属性有哪些?

课程知识点讲解:   

CSS样式表规则:[10分钟]

为什么需要CSS样式表

答案:HTML可以对网页进行描述,但是离做出漂亮的网页还差很远,另外,通常网页内容和网页的外观是由不同的人来完成的,如果都使用HTML会造成冲突。而如果外观使用CSS来完成就可以解决这个问题,另外,由于网页的内容和外观进行了分离,也就让我们可以实现同样的内容用不同的外观来显示,大大提高了网页的变化,降低了网页维护成本。

样式表的基本语法

提问:我们在S1的时候就已经学习过了CSS,现在谁来说说,样式表的基本语法?

答案:

选择器名{

    属性:;

}

提问:样式规则可以分为哪几类?

答案:HTML选择器,class选择器,id选择器。

出示静夜思案例:

首先让学员猜测使用了什么标签使字体变成了红色?之后让学员看到HTML代码,里面并没有什么特殊的标签,只是p,那字体为什么会是红色的呢?指出是使用了HTML选择器,使p的样式发生了改变,并说明,所有的p都将受到样式表规则的影响。

问题:如果希望某几个p元素的样式不同于别的p,怎么办?

答案:类选择器。

<STYLE type="text/css">

            .red {

                     color:red; font-family:"隶书"; font-size:24px;

            }

                 ……

       </STYLE>

问题:如果希望某个p元素的样式独一无二,怎么办?

答案:ID选择器

<STYLE type="text/css">

            #red {

                     color:red; font-family:"隶书"; font-size:24px;

            }

                 ……

       </STYLE>

CSS三类应用方式:[20分钟]

引入:我们知道了样式表的写法,直接下来,我们怎么应用它们呢?

分类:

行内样式,内嵌样式,外部样式表

行内样式

问题:如果希望某段文字和其他段落文字显示风格不一样(并且这个样式不会再其他地方反复使用了),如何解决?

答案:行内样式

写法:使用style属性

<HTML>

<HEAD>

<TITLE>设置属性</TITLE>

</HEAD>

<BODY>

<P style = "color:red;font-size:30px;font-family:隶书;">

这个段落应用了样式

<P>

这个段落按默认样式显示

</BODY>

</HTML>

 

教员应说明:行内样式使用范围更小,只适用于某一个标签,对其他标签不起作用

内嵌样式:

问题:如果我们希望一个网页内的样式保持一种风格,如何解决?

答案:内嵌样式。

写法:使用<style>标签

<STYLE type="text/css">

P

{ font-family:"隶书";

  font-size:18px;

 color:#FF0000;

}

</STYLE>

</HEAD>

……

<P>床前明月光,</P>

<P>疑是地上霜。</P>

<P>我是郭德刚,</P>

<P>低头思故乡。</P>

……

教员应说明:所有的段落都采用 P 样式,保证样式统一

外部样式表:

问题:如果我们希望一个网站内的所有网页都保持一种风格,我们又应该怎么解决?

答案:外部样式表。

写法:首先需要一个外部样式表文件(通常使用.css后缀),外部样式表文件的写法与内嵌样式的写法没有大的区别,不需要写<style>标签。其次,我们需要在网页中导入外部样式表。

根据关联的方式可以分为两种:链接(<link>)和导入(@import)

链接的写法:

<HEAD>

<LINK href="newsyle.css" rel="stylesheet" type="text/css">

</HEAD>

 

教员应强调三个属性的作用和写法。

导入的写法

<HEAD>

<STYLE TYPE="text/css">

@ import newstyle.css;

</STYLE>

</HEAD>

教员应强调:@import的结尾后需要加分号(这是学生很容易犯的错误)

另外,教员应推荐学员使用@import,因为对于一些CSS支持不好的浏览器(主要指旧版本的浏览器)来说,它们会不支持@import,这样仅只是使外部样式表失效,而不至于把版面搞得很糟糕,甚至造成重要内容无法显示的情况。

CSS常用属性[50分钟]

引入:我们现在已经了解了样式表的语法,还有使用样式表的三种方式。通过前面的讲述,我们可以看出,写样式表,其实就是写它的各种属性。那样式表的常用属性有哪些?它们又有什么用处?我们一起来看一下。

文本属性

属性

说明

font-size

字体大小

font-family

字体类型

font-style

字体样式

color

字体颜色

text-align

文本对齐

<STYLE type="text/css">

P  {  font-size: 12px;

       font-family: "宋体";

       text-align:left;  }

.focus

{     font-size: 16px;

        color:red;    }

</STYLE>

</HEAD>

<BODY>

【新闻】[设搜狐为首页] 91

<P class=focus">·世锦赛刘翔1295夺冠成就大满贯</P>

<P>·我国实施不安全食品召回制度 遏制非法出口</P>

..

教员应强调:P用作整体样式的定义,而class样式用作特别需要强调的样式定义。并且强调class样式的名称应该以这个样式的作用来命名,而不应该以这个样式是什么样子来命名(以功能来命名,而不是根据颜色,位置等来命名)

小结1

编写如下图所示效果对应的HTML代码

<STYLE type="text/css">

/* 表格单元格大字体的样式*/

TD

{   font-size:20px;

       font-family:"黑体";

       color:red;

       text-align:center;

        }

/* 小字体的样式*/

.smallFont

{    font-size: 14px;

        color:blue;    }

</STYLE>

教员提供表格无样式的HTML,学员上机完成样式表。

背景属性:

属性

说明

background-image

背景图像

background-color

背景颜色

background-repeat

背景平铺方式:

repeat(默认,两个方向的平铺,即平铺满整个范围),

repeat-x(横向平铺,即在一行上平铺),

repeat-y(纵向平铺,即在一列上平铺),

no-repeat(不平铺)

<STYLE type="text/css">

       ……

    table

    {

       background-image: url(images/type_back1.jpg);

       background-repeat:no-repeat;

      }

</STYLE>

       ……

教员讲解上面的关键代码,并说明repeat各个取值的含义。

方框属性:

属性

说明

margin-top

左边距

margin-right

右边距

margin-bottom

底边距

margin-left

左边距

border-style

边框样式

none :  无边框。与任何指定的border-width值无关

hidden :  隐藏边框。IE不支持

dotted :  在MAC平台上IE4+WINDOWSUNIX平台上IE5.5+为点线。否则为实线

dashed :  在MAC平台上IE4+WINDOWSUNIX平台上IE5.5+为虚线。否则为实线

solid :  实线边框

double :  双线边框。两条单线与其间隔的和等于指定的border-width

groove :  根据border-color的值画3D凹槽

ridge :  根据border-color的值画菱形边框

inset :  根据border-color的值画3D凹边

outset :  根据border-color的值画3D凸边

border-width

边框宽度

dorder-color

边框颜色

padding-top

顶部填充

padding-right

右边填充

padding-bottom

底部填充

padding-left

左边填充

问题:要实现下图所示的效果,该如何编写样式规则?

关键代码:

<STYLE type="text/css">

.tableBorder

{    border-right-width: 3px;

       border-right-color:red;

       border-right-style:dashed;

       padding-top:20px;

       padding-left:10px;    }

TR     {  background:yellow;    }

<TABLE >

  <TR>

    <TD class="tableBorder">手机冲值</TD>

    <TD class="tableBorder">电子彩票</TD>

  </TR>

……

 

教员应重点讲解border各属性单词的意思及它们产生的效果,可以对应浏览器效果(例如注释部分代码)进行讲解。

细边框效果:

问题:要实现下图的效果,该如何编写代码?

关键代码:

<STYLE type="text/css">

.textBorder{

border-width:1px;

border-style:solid;  

 }

</STYLE>

<FORM name="form1" method="post" action="">

<P>名字:

  <INPUT name="fname" type="text" class="textBorder" ></P>

<P>密码:

  <INPUT name="pass" type="password" class="textBorder"   

   size="21"></P>

</FORM>

 

教员应重点说明border-widthborder-style的意思与用法,在这里可以对border-style进行一个小结(内容见前面边框属性的表格)

超链接特殊样式

伪类

说明

a:link

超链接的默认样式

a:visited

超点击过的超链接样式

a:hover

鼠标停在超链接上的样式

a:active

鼠标按下但尚未松开时的样式

问题:如何编写下图中的超链接样式。

关键代码:

<STYLE type="text/css">    

 A {     color: blue;

       text-decoration: none;       

        }      

  A:hover{     

       color: red;            

      }

</STYLE>

……

<TR>

    <TD><A href="#">诺基亚</A> | <A href="#">摩托罗拉</A></TD>

    <TD><A href="#">联想</A> | <A href="#">戴尔</A></TD>

  </TR>……

教员应重点说明超链接伪类的写法(ahover之间是冒号(),而不是逗号(,),也不是分号()更不是点(.))

小结2

编写如下图所示效果对应的HTML代码

教员应提供框架(HTML),请二至三位学员上机做(CSS),其他学员用纸做,教员应提示关键代码的写法。

<STYLE type="text/css">

 

/*细边框的文本输入框*/

.textBaroder

{

       border-width:1px;

       border-style:solid

}

 

A{   /*设置无下划线的超连接样式*/

       color: blue;

       text-decoration: none;

   }      

  A:hover{ /*鼠标在超链接上悬停时变为颜色*/

   color: red;

   text-decoration:underline

   }

</STYLE>

综合例子:要实现下图图片按钮的效果,该如何编写样式规则?

教员可以选择多个学员上机共同完成此案例。

本章总结   [10分钟]

方框属性有哪些常用属性?并分别说明其含义?

超链接样式有哪几种?

内嵌样式表、行内样式表、外部样式表文件分别适用什么场合?

考核点

CSS命名语法

CSS常用属性

扩展部分:

 border-style属性的常量值

学员问题汇总:

 暂无

作业:

 习题126页至27页选择题

 习题227页第1,2,3,4

  习题 3 :预习第二章,试做课后的选择题 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

默然说话

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值