收藏本站
 
设为主页
     您的位置:首页在线课堂高二级2017-2018学年度第二学期 》第五课
==※ 高二级 ※==
2017-2018学年第二学期






==※ 相关资源 ※==
 
太平洋电脑网
天极网
eNet网络学院
 
==※ 自由论坛  ※==
   
用户名:
密码:
 
忘记密码
游客请进
 
第五课 用CSS美化网页
 
学习目的:了解CSS样式的作用和基本语法,学会使用CSS美化网页。
学习重难点CSS样式的含义和类型,定义CSS规则和应用规则。
教学方式:老师讲解、演示;学生自主探究、动手实践。

学习内容:


一、什么是CSS?

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表
  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件
  • 多个样式定义可层叠为一

二、CSS实例

CSS实例 步骤 效果
利用CSS设置文字超链接效果
利用CSS更换背景图片
利用CSS设置细边框的表格
利用CSS实现鼠标移动到导航栏时对应栏目自动变色
利用CSS设置固定背景(即滚动内容时背景不动)
利用CSS实现固定广告效果

CSS实例素材下载


三、CSS语法

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
CSS声明总是以分号(;)结束,声明组以大括号({})括起来:

p {color:red; text-align:center;}
为了让CSS可读性更强,你可以每行只描述一个属性:

实例
p
{
color:red;
text-align:center;
}

 

CSS 注释
注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。

CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:

/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}


四、CSS选择器

CSS选择器的用途是决定所定义的样式规则会应用到哪些HTML标签中,根据选择器名称的不同,可以选择不同的HTML标签,常见的选择器类型有以下几种:

1、以英文点.)开头的的选择器名称,表示该样式规则应用于所有类属性值为选择器名称(不包含点)的 HTML标签。例如,以下CSS规则

.test {color:#000; font-size:16px;}

会应用到所有类名设为test的标签中,如下图所示:

2、以HTML标签名作为CSS选择器的名称,表示该样式规则对网页中的所有该标签有效。例如,以下CSS规则将所有的表格边框大小设为1,边框颜色设为红色:

table {border-width: 1px; border-color:#F00;}

3、以#号开头的选择器名称,表示该样式规则应用于所有ID属性为选择器名称(不包含#号)的标签。例如,以下CSS规则

#test {color:#000; font-size:16px;}

会应用到ID为test的标签中,如下图所示:

4、以:hover结尾的选择器名称,表示该样式规则对于所选择的的HTML标签只有在鼠标位于该标签上时才会有效。例如,以下CSS规则

a:hover {color:#F00;}

表示当鼠标放在超链接上时,文字会变成红色。

CSS选择器远比我们这里介绍的要复杂,关于CSS选择器的详细信息,可参考相关资源所提供的链接。

 


五、相关资源

  1. CSS教程:http://www.runoob.com/css/css-tutorial.html
  2. CSS选择器:http://www.runoob.com/cssref/css-selectors.html
  3. CSS参考手册:http://www.runoob.com/cssref/css-reference.html


六、课堂小结

  网页包括“内容”和“格式”,内容主要由HTML指定,而格式更多使用CSS来控制。

  同学们要重点掌握在Dreamweaver中通过新建CSS类来美化网页的技巧。



* 友情提示:本文档只供本校师生上课时辅助使用,不是正规的教学设计或教案。


 

 

Copyright © 东莞中学信息技术科 All Rights Reserved
IE4.0 or later / 800*600  For The Best View