模块5：HTML+CSS网页样式 （课件）-《网页设计与制作》同步教学（语文出版社）

模块5：HTML+CSS网页样式 学 习 导 入 本模块简单介绍HTML语言，着重介绍了CSS控制网页的方式，CSS文字样式、图片样式、背景样式、伪类别样式及CSS设置表格及表单的方法,熟练使用这些方法对制作网页起着至关重要的作用。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 学 习 目 标 技能目标： 1.能用HTML语言制作出简单的网页 2.使用不同的浏览器测试网页 知识目标： 1.了解HMTL语言 2.了解CSS样式的概念，区分不同CSS选择器的结构 3.掌握CSS设置文字样式、图片样式、背景样式、伪类别样式的方法 4.掌握CSS设置表格及表单的方法 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务1 任务1 我的第一张网页 ○任务描述 张芸已经能够设计网页了，但她想把自己的网页发布到网上去,怎么样做网页呢? ○任务目标 利用记事本编写简单的HTML代码，效果如图5-1所示 图5-1 ○任务分析 编写简单的HTML语言的结构，在<body>标签内输入相应的文字。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务1 任务实施 一、必备知识 1.网页与网站  浏览网页时在浏览器中看到的一个个页面就是网页，而多个相关的网页的集合就构成了一个网站。网址：用于定位某个网站某个页面的一串字符，如： http://sports.sohu.com/nba.shtml 主页：访问网站时，默认打开的第一个页面就是主页也叫首页。 举例：www.sohu.com(搜狐网)  www.baidu.com(百度网) www.youku.com(优酷网)等等。  2. 浏览网页的工具-浏览器  浏览器：用于打开显示网页的软件。最常见的是Windows系统自带的IE浏览器。 还有火狐Firefox、360安全浏览器、遨游、腾讯TT等等。 3.网页的组成元素如下图5-2所示。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务1 4. HTML语言及编写方法 HTML（Hyper Text Markup Language 超文本标识语言），是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档。 编写HTML语言可以用手工直接编写记事本等，存成.htm .html格式；使用可视化HTML编 辑 器Frontpage、Dreamweaver等由Web 服务器（ 或称HTTP 服务器） 一 方实时动态地生成。 图5-2 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务1 5.HTML文件结构。 <html> <head> <title></title> <meta></head> <body> 文件的正文 </body> </html> 标签：是HTML语言的基本部分。标签总是成对出现，每一对标签一般都有一个开始的标记（如<body>），也有一个结束的标记（如</body>）。标签的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。 <html>标签：每一个html文档都是从<html>开始，结束于 <./html>。 <head>标签：<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务1 <title>标签：定义HTML文档的标题。<title>与</title>之间的内容将显示在浏览器窗口的标题栏。 <body>标签：表明是HTML文档的主体部分。在<body>与</body>之间，通常都会有很多其它标签；这些标签和标签属性构成HTML文档的主体部分 6.网页文件命名规则 ①文件后缀名为*.htm或*.html； ②无空格； ③无特殊符号（例如&符号），只可以 有下划线“_”，只可以为英文、数字； ④区分大小写； ⑤首页文件名默认为：index.htm 或 index.html； ⑥用拼音、英文、数字命名，莫用中文命名。 图5-3 HTML文档结构 图5-3 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务1 二、我的第一张网页步骤 （1）点击“开始”→“程序” →“记事本”打开记事本。 （2）在记事本中录入以下HTML代码，如图5-4所示。 图5-4 图5-5 （3）将该文档保存为01.html，则该文档保存为网页形式，如图5-5所示。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务1 ○任务评价 学习任务名称：我的第一张网页 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 ○任务总结 本任务详细讲解使用HTML语言制作一张简单的网页过程，熟练掌握HTML语言的结构。在制作过程中，理解每个标签所起的作用，结合制作分析，明确这些步骤的制作目的。 模块5：HTML+CSS网页样式 任务1 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务2 任务2 传递二十大精神的页面 ○任务描述 党的二十大报告提出，“构建人类命运共同体是世界各国人民前途所在。”现要求将这部分报告的内容以网页形式显示出来，标题在网页中在标题栏中显示，标题在内容区中居中显示，每段文字以段落的形式显示出来，并显示水平线。。 ○任务目标 利用记事本编写简单的HTML代码，使用简单的HTML标签，效果如图5-8所示 ○任务分析 在记事本中写出HTML标签的结构，在标题标签处写上宽容，在body标签处写上文章的内容，使用标题标签、段落标记、回车换行标记做出效果。 图 5-8 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务2 ○任务实施 一、必备知识 常用的标签 H1~H6标题标签（H1最大，H6最小） <p> </p> 段落标签 <br> 回车换行标签，单独出现 <title> </title> 网页标题标签 <hr > 水平线，单独出现 <img> 图像标签 <a> </a> 超链接标签 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务2 二、制作传递二十大精神的页面 1.制作传递二十大精神的页面步骤 （1）点击“开始”→“程序” →“记事本”打开记事本。 （2）在记事本中录入以下HTML代码，如图5-9所示。 图5-9 （3）将该文档保存为04.htm，则该文档保存为网页形式，如图5-9所示。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务2 ○任务评价 学习任务名称：传递二十大精神的页面 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 ○任务总结 本任务详细讲解了HTML常见的标签，将一些标签的应用融入到实例中，如H1标签、P标签、br标签。在制作过程中，理解这些标签在网页中的作用，并能灵活应用。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务2 模块5：HTML+CSS网页样式 任务3 任务3 Dreamweaver CS5界面的认识 ○任务描述 小花学习了一段时间的HTML语言，发现代码很难记，希望能够学习一种可视化的网页开发工具减少她学习的难度。 ○任务目标 了解Dreamweaver CS5界面的构成，能在Dreamweaver CS5中输入一些简单的代码效果如图5-10所示。 图5-10 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务3 ○任务分析 启动DreamweaverCS5软件，能够切换代码、拆分、设计视图，在拆分视图环境中在相应的位置输入代码，触发语法提示功能输入代码。 ○必备知识 Dreamweaver是当前最流行、最方便的网页设计和网站开发工具软件。Dreamweaver：梦想编辑者。通过这个工具，实现编辑网页的梦。 早期是Macromedia公司推出的“网页三剑客”之一。“网页三剑客”指的是Dreamweaver、Flash、Fireworks这三个软件，它们这三个集合起来，就像江湖中最厉害的剑客一样，成为了网站开发中的专用利器。它集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的可视化网页开发工具。2005年Macromedia公司被Adobe公司收购。 Dreamweaver CS5界面的认识步骤 （1）点击“开始”→“程序” →“Adobe” →“Adobe Dreamweaver CS5”或直接双击桌面的 图标。 （2）启动后界面，如图5-11所示。 （3）点击“新建” →“HTML”，进入DreamweaverCS5编辑环境,如图5-12所示。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务3 图5-11 图5-12 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务3 （4）在DreamweaverCS5编辑环境的代码视图中输入如下图所示的代码，并将文件保存为07.htm。 从图5-13中看到，对于CSS代码默认情况下都采用粉红色进行语法用进行语法着色，而HTML代码中的标记是蓝色色，正文内容在默认情况下是黑色。而且对于每一行代码，前面都有行号进行标记，方便对代码的整体规划。 在编写具体的CSS代码时，按回车键或空格键都可以触发语法提示。例如在例5-14中，当光标移动到“color:red; ”一句的末尾时，按空格或者回画键，都可以触发语法提示的功能。 图5-13 图5-14 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务3 ○任务评价 学习任务名称：Dreamweaver CS5界面的认识 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务3 ○任务总结 本任务详细讲解了dreamweaverCS5启动的方法及如何在拆分视图中输入代码，在输入代码的过程中能够触发语法提示功能，提高编写代码的速度。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务4 任务4 使用CSS样式控制页面 ○任务描述 小花对CSS有了大致的了解，想使用CSS对网页进行全方位的控制，不知如何下手。 ○任务目标 学会使用CSS样式控制页面的三种方式：内嵌式、链接式和导入式，效果如图5-15所示。 图5-15控制页面的三种方式 (a)内嵌式、链接式 (b)导入式 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务4 ○任务分析 掌握内嵌式、链接式、导入式三种不同的写法，用不同的写法，可以制作出同样的网页效果， 但是链接式是当前使用频率最高，也是最为实用的方法。 ○任务实施 一、必备知识 1.CSS CSS(Cascading Style Sheet),中文译为层叠样式表，它是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。简单地说，CSS的引入就是为了使得HTML语言能够更好地适应页面的美工设计。CSS语言是一种标记语言，因此不需要编译以，可以直接由浏览器执行（属于浏览器解释语言）。CSS文件是一个文本文件，它包含了一些CSS标记，CSS文件必须使用CSS为文件名后缀。CSS对大小写不敏感，CSS与css是一样。 2.内嵌式 内嵌式样式表就是将CSS写在<head> 与</head>之间，并且用<style>和</style>标记进行声明。 3.链接式 链接式CSS样式表是使用频率最高，也是最为实用的方法。它将HTML页面本身与CSS样式风格分离为两个或者多个件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便，网站后台的技术人员与美工设计者也可以很好的分工合作。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务4 4.导入式 导入样式表与链接样式表的功能基本相同，只是语法和运作方式上略有区别。采用import方式导入的样式表，在HTML文件初使化时，会被导入到HTML文件内，作为文件的一部分，类似内嵌式的效果。而链接式样式表则是在HTML的标记需要格式时才以链接的方式导入。在HTML文件导入样式表，常用的有如下几种@import语句，可以选择任意一种放在<style>与</style>标记之间。 @import url(sheet1.css); @import url("sheet1.css" ); @import url('sheet1.css '); @import url sheet1.css ; @import url "sheet1.css"; @import url 'sheet1.css '; 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务4 二、使用CSS样式控制页面 (1). 内嵌式：在Dreamweaver的代码模式下输入以下代码，文件名保存为10.htm。 <html > <head> <title>页面标题</title> <style type="text/css"> h1{color:#F00;} p{color:#60C; text-decoration:underline;font-size:24px; } </style> </head> <body> <h1>css标题1</h1> <P>紫色、下划线、24px的效果1</P> <h1>css标题2</h1> <P>紫色、下划线、24px的效果2</P> </body> </html> 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务4 (2)．链接式：在Dreamweaver的代码模式下输入以下代码，文件名保存为11.htm。 <html > <head> <title>页面标题</title> <link href="1.css" type="text/css" rel="stylesheet" > </head> <body> <h1>css标题1</h1> <P>紫色、下划线、24px的效果1</P> <h1>css标题2</h1> <P>紫色、下划线、24px的效果2</P> </body> </html> 创建文件1.css，输入以下代码。 h1{ color:#F00; } p{ color:#60C; text-decoration:underline; font-size:24px; } 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务4 从上面的例子可以看出，文件1.css将所有的CSS代码从HTML文件11.htm中分离出来,然后在文件11.htm的<head></head>标记之间加上“<link href=”1.css“ type=”text/css“ rel=”stylesheet“ >”语句，将CSS文件链接到页面中，对其中的标记进行样式控制。 (3)．导入式：在Dreamweaver的代码模式下输入以下代码，文件名保存为12.htm。 <html > <head> <title>页面标题</title> <style type="text/css"> <!-- @import url(1.css); --> </style> </head> <body> <h2>CSS标题1</h2> <p>紫色、下划线、24px的效果1</p> <h2>CSS标题2</h2> <p>紫色、下划线、24px的效果2</p> <h2>CSS标题3</h2> <p>紫色、下划线、24px的效果3</p> </body> </html> 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务4 该例子在链接式例子的基础上进行了修改，加入了<h3>标题，前两行的效果与例11.htm 的效果是一样的。由于新引入的<h3>标记由于没有设置样式，因此保持着默认的风格。 如图5-16所示。 图5-16导入式，未对<h2>修改 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务4 HTML文件导入很多的样式表，以例12.htm为基础进行修改，创建文件2.css，同时使用 两个@import 语句将1.css和2.css同时导入到HTML中，具体如下。 <html> <head> <title>页面标题</title> <style type="text/css"> <!-- @import url(1.css); @import url(2.css); --> </style> </head> <body> <h2>CSS标题1</h2> <p>紫色、下划线、24px的效果1</p> <h2>CSS标题2</h2> <p>紫色、下划线、24px的效果2</p> <h3>CSS标题3</h3> <p>紫色、下划线、24px的效果3</p> </body> </html> 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务4 然后创建文件2.css，将<h2>设置为斜体，颜色为青色，大小为36px。最终效果如图5-15(b)所示 。 h2{color:#3CF; font-style:italic; font-size:36px;} 由图5-15（b）所示新导入的2.css中设置的<h2>风格样式也被运用到了页面效果中，而原有的1.css效果保持不变。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务4 ○任务评价 学习任务名称：使用CSS样式控制页面 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务4 ○任务总结 本任务详细讲解了CSS控制页面的三种方法：内嵌式、链接式和导入式，通过三种例子分别介绍它们的控制页面的方法。重点掌握链接式的写法，这种方法在网页制作过程使用较多,在学习过程中，多写多练则能达到熟能生巧的目的。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务5 任务5 使用不同的选择器控制网页 ○任务描述 HTML语言有很多的标记，CSS是如何控制页面中的各种标记的。 ○任务目标 能够区分、使用不同的CSS选择器控制页面中的各种标记。 使用标签选择器、类别选择器、ID选择器、全局选择器、群组选择器、后代选择器、伪类选择器7种不同类型的选择器控制网页的标记。区分这7种选择的编写方式及使用方法。 ○任务分析 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务5 ○任务实施 一、必备知识 1.选择器 每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素 2.选择器的分类 ①标签选择器(如：body,div,p,ul,li) ②类别选择器(如：class="head"，class="head_logo") ③ID选择器(如：id="name"，id="name_txt") ④全局选择器(如：*号) ⑤群组选择器（如：p,td,li{ line-height:20px; color:#c00; } ⑥后代选择器(如：div p,注意两个选择器用空格键分开) ⑦伪类选择器(就是链接样式,a元素的伪类,4种不同的状态，link、visited、active、hover。) 3.标签选择器： 标签选择器是直接将HTML标签作为CSS选择器，可以是p、h1、dl、strong等HTML标签。如： p{font:12px;} em{color:blue;} dl{float:left;margin-top:10px;} 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务5 一个HTML页面由很多不同的标签组成，而CSS标签选择器就是声明哪些标签采用哪种CSS样式。例如P选择器，就是用于声明页面中所有的<p>标记的样式风格。同样可以通过h1选择器来声明页面中所有的<h1>标记的CSS风格，如下所示： 以上这段CSS代码声明了HTML页面中所有的<h1>标记，文字的颜色都采用红色，大小都为25字。每个CSS选择器都包含选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一个标记，声明多种样式风格,如图5-17所示。 图5-17 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务5 4.类别选择器： 在标记选择器中一旦声明，那么页面中所有的该标记都会相应地产生变化。例如当声明<p>标记为红色时，页面中所有的<p>标记都将显示为红色。如果希望其中的某一个<p>标记不是红色，而是蓝色，这时仅依靠标记选择器是不够的，还需要引入类别(class)选择器。类别选择器的名称可以由用户自定义，属性和值跟标记选择器一样，也必须符合CSS规范，如图5-18所示。 类别名称 声明 声明 类别选择器 属性 值 属性 值 图5-18 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务5 5.ID选择器 ID选择器的使用方法跟class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此其针对性更强。在HTML的标记中只需要利用id属性，就可以直接调用CSS中的选择器，其格式如图5-19所示。 声明 声明 ID选择器 属性 值 属性 值 图5-19 id选择器与class选择器区别在于在W3C标准这样规定的：在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。这样，一般网站分为头，体，脚部分，因为考虑到它们在同一个页面只会出现一次，所以用id，其他的，比如说你定义了一个颜色为red的class，在同一个页面也许要多次用到，就用class定义。另外，当页面中用到js或者要动态调用对象的时候，要用到id，所以要根据自己的情况运用。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务5 6.全局选择器 全局选择器是一个星号。它能作用于HTML文档中所有元素，即用全局选择器声明的CSS样式可以应用于整个HTML文档的任何标签。图5-20为全局选择器的结构。 7.群组选择器： 当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，这就是CSS选择器中的群组选择器。如： p,td,li{ line-height:20px; color:#c00; } #main p,#sider span{ color:#000; line-height:26px; } .www_52css_com,#mainp span{color:#f60; } 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务5 8.后代选择器： CSS选择器中的后代选择器也叫派生选择器。可以使用后代选择器给一个元素里的子元素定义样式，例如这样： li strong{ font-style:italic; font-weight:800; color:#f00; } #main p{ color:#000; line-height:26px; } #sider.con span{ color:#000; line-height:26px; } #siderul li.subnav1{ margin-top:5px; } 第一段，就是给li下面的子元素strong定义一个斜体加粗而且套红的样式。其他以此类推。后代选择器的使用是非常有益的，如果父元素内包括的HTML元素具有唯一性，则不必给内部元素再指定class或id，直接应用此选择器即可，例如下面的h3与ul就不必指定class或id。 ＜divid="sider"> ＜h3>＜/h3> ＜ul> ＜li>...＜/li> ＜li>...＜/li> ＜li>...＜/li> ＜/ul> ＜/div> 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务5 在这里CSS就可以及样写： #sider h3{...} #sider ul{...} #sider ul li{...} 结合使用上面的六种CSS选择器，基本满足了CSS布局的需要，主要在于灵活的使用，特别是后代选择器的使用能大大的简化HTML文档，使HTML做到结构化明确，最小的代码实现同样的效果。 iderh3,.art_titleh2{ font-weight:100; } 9.伪类选择器 伪类选择器也是选择器的一种，但是用伪类定义的CSS样式并不是作用在标签上而是作用在标签的状态上。由于很多浏览器支持不同的伪类，没有一个统一的标准，所以很多伪类都不常被用到。但用一组伪类是主流浏览器都支持的，就是超链的伪类，包括link,visited,hover,active。CSS伪类的语法有两种。 第一种： selector:pseudo-class {property: value} 例句： a:link {color:red} 第二种： selector.class:pseudo-class {property: value}例句： a.c1:link {color:red} 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务5 锚(a)伪类 锚(a)伪类是最常用的伪类。 例句如下：a:link {color: #FF0000} /* 未被访问的链接 红色 */ a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */ a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */ a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */ 也可以用HTML的class属性来设定伪类。例句如下： a.c1:link {color: #FF0000} /* 未被访问的链接 红色 */ a.c1:visited {color: #00FF00} /* 已被访问过的链接 绿色 */ a.c1:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */ a.c1:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */ 说明：由于CSS优先级的关系(后面比前面的优先级高)，在写a的CSS时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。 10.选择器的优先级 选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。通常我们用1表示标签名选择器的优先级，用10表示类选择器的优先级，用100标示ID选择器的优先级。行内的样式的优先级高于ID选择器，而ID选择器又高于类别选择器，类别选择器又高于标记样式。总结如下：行内样式>ID样式>类别样式>标记样；范围越小，权限越高。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务5 二、使用不同的选择器控制网页 1.使用标签选择器控制页面 在Dreamweaver的代码模式下输入以下代码，文件名为15.htm，效果如图5-21所示。 <html> <head> <title>标签选择器</title> <style> p{color:#060; font-size:20px;} h1{color:#00F; font-size:24px;} </style> </head> </head> <body> <p>这是P标签</p> <h1>这是h1标签</h1> </body> </html> P 是段落标签，h1是标题标签，这两个标签已有自身的样式，但也可以通过声明改变它们 的样式风格。 图5-21 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务5 2.使用类别选择器控制页面步骤 在Dreamweaver的代码模式下输入以下代码，文件名保存为16.htm。效果如图5-17 类别选择器所示。 <html> <head> <title>class选择器</title> <style type="text/css"> <!-- .one{color:red;/* 红色 */ font-size:18px;/* 文字大小 */} .two{color:green; /* 绿色 */ font-size:20px; /* 文字大小 */} .three{ color:cyan; /* 青色 */ font-size:22px; /* 文字大小 */} --> </style> </head> <body> <p class="one">class选择器1</p> <p class="two">class选择器2</p> <p class="three">class选择器3</p> <h3 class="two">h3同样适用</h3> </body> <html> 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务5 图5-22 类别选择器 3个<p>标签分别呈现出了不同的颜色以及字体大小。而且任何一个class选择器都适用于所有HTML标签，只需要用HTML标签的class属性声明即可。最后一行的<h3>标记显示效果为粗体字，而也使用了.two选择器的第2个<p>标签却没有变成粗体。这是因为在.two类别中没有定义字体的粗细属性，因此各个HTML标签都采用了其自身默认的显示方式，<p>默认为正常粗细，而<h3>默认为粗体字。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务5 3、使用ID选择器控制页面 在Dreamweaver的代码模式下输入以下代码，文件名保存为17.htm,效果如图5-23 所示。 <html> <head> <title>ID选择器</title> <style type="text/css"> <!-- #one{ font-weight:bold; /* 粗体 */ } #two{ font-size:30px; /* 字体大小 */ color:#009900; /* 颜色 */ } --> </style> </head> <body> <p id="one">ID选择器1</p> <p id="two">ID选择器2</p> <p id="two">ID选择器3</p> <p id="one two">ID选择器3</p> </body> </html> 图5-23 ID选择器 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务5 4、使用全局选择器控制页面 在Dreamweaver的代码模式下输入以下代码，文件名保存为18.htm,效果如图5-24 所示。 <html> <head> <title>全局声明</title> <style type="text/css"> <!-- *{ /* 全局声明 */ color: purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.special, .special, #one{ /* 集体声明 */ text-decoration:underline; /* 下划线 */ } --> </style> </head> <body> <h1>全局声明h1</h1> <h2 class="special">全局声明h2</h2> <h3>全局声明h3</h3> <h4>全局声明h4</h4> <h5>全局声明h5</h5> <p>全局声明p1</p> <p class="special">全局声明p2</p> <p id="one">全局声明p3</p> </body> </html> 对于实际网站中的一些小型页面，例如弹出的小对话框和上传附件的小窗口等，希望这些页面中所有的标记都使用同一种CSS样式，但又不希望逐个来加入群组选择器列表。这时可以利用全局声明符号“*” 图5-24 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务5 5、使用群组选择器控页面 在Dreamweaver的代码模式下输入以下代码，文件名保存为19.htm，如图5-25 群组选择器选择器所示。 <html> <head> <title>群组选择器使用</title> <style type="text/css"> <!-- h1, h2, h3, h4, h5, p{ /* 群组选择器使用方法 */ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.special, .special, #one{ /* 群组选择器使用方法 */ text-decoration:underline; /* 下划线 */ } --> </style> </head> 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务5 <body> <h1>群组选择器h1</h1> <h2 class="special">群组选择器h2</h2> <h3>群组选择器h3</h3> <h4>群组选择器h4</h4> <h5>群组选择器h5</h5> <p>群组选择器p1</p> <p class="special">群组选择器方法p2</p> <p id="one">群组选择器p3</p> </body> </html> <body> <h1>群组选择器h1</h1> <h2 class="special">群组选择器h2</h2> <h3>群组选择器h3</h3> <h4>群组选择器h4</h4> <h5>群组选择器h5</h5> <p>群组选择器p1</p> <p class="special">群组选择器方法p2</p> <p id="one">群组选择器p3</p> </body> </html> 图5-20群组选择器 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务5 6、使用后代选择器控制页面的步骤 在Dreamweaver的代码模式下输入以下代码，文件名保存为20.htm,效果如图5-26所示。 <html> <head> <title>后代选择器</title> <style type="text/css"> <!-- p b{ /* 后代选择器 */ color:maroon; /* 颜色 */ text-decoration:underline; /* 下划线 */ } --> </style> </head> <body> <p>嵌套使<b>用CSS</b>标记的方法</p> 嵌套之外的<b>标记</b>不生效 </body> </html> 通过将b选择器嵌套在P选择器中进行声明，显示效果只适用于<p>和</p>之间的<b>标记，而其外的<b>标记并不产生任何效果。如图5-26后代选择器所示，只有第1行的粗体字变成深红色并加上了下划线，而第2行除了文字变成了粗体，其他地方没有任何变化。 图5-26 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务5 7.使用伪类选择器控制页面 在Dreamweaver的代码模式下输入以下两段代码，文件名分别为21.html，22.hmtl，效果如图5-27所示。 <html > <head> <title>使用CSS属性修改文本链接颜色</title> <style> a{color:#900;text-decoration:none;} a:visited{color:#0C0;text-decoration:none;} a:hover{color:#300; text-decoration:none;} </style> </head> <body> <h3>使用CSS属性修改文本链接颜色</h3> <a href="后退.html">注意颜色前后变化</a> </body> </html> 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务5 <html> <head> <title>后退</title> <style> a{color:#F0F; text-decoration:none;} a:visited{color:#C03; text-decoration:none;} a:hover{color:#00F; text-decoration:none;} </style> </head> <body> <P><a href="link.html">前进页面</a></P> <p><a href="后退.html">后退页面</a></p> </body> </html> 图5-27 伪类选择器 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务5 ○任务评价 学习任务名称：使用不同的选择器控制网页 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务5 ○任务总结 本任务详细讲解CSS的7种选择器，能区分这7种选择器，在制作过程中，理解这些选择器的作用，结合实际，使用不同的选择器控制网页样式。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务6 任务6 CSS文字样式 ○任务描述 制作Google公司Logo。 ○任务目标 利用span标签进行行控制，利用文本样式属性设置文字样式,效果如图5-28所示。 图5-28 效果图 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务6 ○任务分析 在HTML代码相应的标签内输入Google，每个字母加入相应的span标签，再使用类别选择器控制每个字母的效果。 ○任务实施 一、必备知识 CSS所支持的字体样式主要包含字体、字号、颜色等基本属性，以及其他字体的微调控方式，在了解这些属性之前，先来看一下CSS所支持的字体属性。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务6 Span标签的作用：Span标记有一个重要的而实用的特性，即它什么事也不会做，它唯一的目的就是围绕HTML代码中的其它元素，这样你就可以为它们指定样式了，span前后不会换行，在网页中表现是一个矩形区域。而span元素的默认display属性值为“inline”，称为“行内”元素。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务6 二、制作Google公司Logo过程 (1)首先建立简单的页面框架，将“Google”显示在页面中，如下所示 <html> <head> <title>Google</title> </head> <body> <p> Google </p> </body> </html> (2)对<p>标记整体加入字体大小控制，加入CSS语句“font-size:80px;”,此时的显示效果如上图所示 <style> <!-- p{ font-size:80px; letter-spacing:-2px; /* 字母间距 */ font-family:Arial, Helvetica, sans-serif; } --> </style> 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务6 （3）在Google标志中最醒目的是个字母的颜色，因此需要对各个字母分别设定CSS风格样式，因此加入<span>标记进行控制，并且利用CSS分别控制各个字母的颜色，如下: <style> <!-- .g1, .g2{ color:#184dc6; } .o1, .e{ color:#c61800; } .o2{ color:#efba00; } .l{ color:#42c34a; } --> </style> （4）完整的代码结果 23.html <html> <head> <title>Google</title> <style> <!-- p{font-size:80px;letter-spacing:-2px; /* 字母间距 */ font-family:Arial, Helvetica, sans-serif;} .g1, .g2{ color:#184dc6; } .o1, .e{ color:#c61800; } .o2{ color:#efba00; } .l{ color:#42c34a; } --> </style> </head> 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务6 <body> <p><span class="g1">G</span><span class="o1">o</span><span class="o2">o</span><span class="g2">g</span><span class="l">l</span><span class="e">e</span></p> </body> </html> 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务6 ○任务评价 学习任务名称： 制作Google公司Logo 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 ○任务总结 本任务详细讲解了Google公司Logo制作方法，在制作过程中用到了字体的属性，使用类别选择器控制每个字体的风格。在制作过程中，理解操作步骤中各关键标签到的作用及它们所展现出来的效果，结合制作分析，明确这些步骤的制作目的。 模块5：HTML+CSS网页样式 任务6 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务7 任务7 CSS段落文字 ○任务描述 将《中秋节由来》由来这篇文章发布到网页上。 ○任务目标 效果图如图5-35 图5-35 ○任务分析 使用HTML语言建立简单的页面框架，使用CSS样式为 网页添加上黑色的背景；对<p>标签进行字体大小、颜色的控制；文章的第一段加入span标签，用span控制首字下沉，设置span标签的字体大小颜色间距等属性；设置标题的居中、字间距、颜色等效果；设置第二段的缩进使用text-indent属性。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务7 一、必备知识 CSS所支持的段落样式主要包含段落对齐、段落缩进、行间距和字间距等基本属性。 属性 描述 可用值 注释 text-align 设置段落的水平对齐 left right center justify 左对齐 右对齐 居中对齐 两端对齐 text-indent 规定文本块中首行文本的缩进。 用数值 inherit 允许使用负值。如果使用负值，那么首行会被缩进到左边。 从父元素继承 text-indent 属性的值 line-height 设置行高。 normal 用数值 默认行高 数字和单位标识符组成的长度值，允许为负值。 letter-spacing 定义文本中字母的间距 用数值 normal 数字和单位标识符组成的长度值,正值为增大距离,负值为缩小距离. 正常 ○任务实施 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务7 二、制作中秋节由来网页过程 (1)首先建立简单的页面框架，将《中秋节由来》显示在页面中，如下所示 <html> <head> <title>首字放大</title> </head> <body> <p>中秋节由来</p> <p><span>中</span>秋节是远古天象崇拜——敬月习俗的遗痕。据《周礼·春官》记载，周代已有“中秋夜迎寒”、“中秋献良裘”、“秋分夕月（拜月）”的活动；汉代，又在中秋或立秋之日敬老、养老，赐以雄粗饼。晋时亦有中秋赏月之举，不过不太普遍；直到唐代将中秋与储娥奔月、吴刚伐桂、玉兔捣药、杨贵妃变月神、唐明皇游月宫等神话故事结合起，使之充满浪漫色彩，玩月之风方才大兴。</p> <p>北宋，正式定八月十五为中秋节，并出现“小饼如嚼月，中有酥和饴”的节令食品。孟元老《东京梦华录》说：“中秋夜，贵家结饰台榭，民间争占酒楼玩月”；而且“弦重鼎沸，近内延居民，深夜逢闻笙芋之声，宛如云外。间里儿童，连宵婚戏；夜市骈阗，至于通晓。”吴自牧《梦梁录》说：“此际金凤荐爽，玉露生凉，丹桂香飘，银蟾光满。王孙公子，富家巨室，莫不登危楼，临轩玩月，或开广榭，玳筵罗列，琴瑟铿锵，酌酒高歌，以卜竟夕之欢。</p> </body> </html> (2)加上背景色，加入CSS语句body{ background-color:black;/* 背景色 */}为网页添加黑色背景。 <style> <!-- body{ background-color:black; /* 背景色 */} --> </style> 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务7 (3)在添加背景的基础上，对<p>标签加入加入控制字体大小颜色的CSS语句“font-size:15px; color:white;”。 <style> <!-- p{ font-size:15px; /* 文字大小 */ color:white; /* 文字颜色 */ } --> </style> （4）设置首字下沉效果,添加了背景，对<p>标签进行声明后, 对<p>标签下的span标签进行声明。 <style> <!— p span{ font-size:60px; /* 首字大小 */ float:left; /* 首字下沉 */ padding-right:5px; /* 与右边的间隔 */ font-weight:bold; /* 粗体字 */ font-family:黑体; /* 黑体字 */ color:yellow; /* 字体颜色 */ } --> </style> 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务7 (5）设置标题的居中、字间距、颜色等效果。 <style> <!-- .center{text-align:center; /*段落对齐居中*/ letter-spacing:20px; /*字间距*/ font-size:36px; font-family:"黑体"; color:#FF0;} --> </style> (6)设置第二段的缩进 <!-- body{ .sj{text-indent:28px;} /*设置段落缩进*/ --> </style> （7）将完整的代码保存为29.html。完整代码码参看书本145页。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务7 ○任务评价 学习任务名称：制作《中秋节由来》网页 班级： 学号： 姓名： 指导教师： 评价项目 评价标准 评价依据（指信息、佐证） 评价方式 权重 得分小计 总分 自我评价 小组评价 教师（企业）评价 10% 20% 70% 关键能力 1.计算机操作的规范性； 2.能参与小组讨论，相互交流； 3.能积极主动、勤学好问； 4.能清晰、准确表达。 1.课堂表现2.学习任务的完成 40% 专业能力 1.网页背景的设置 2.首字下沉效果的设置 3.段落对齐、文本块首行文本缩进、行高、字间距的属性的理解 4.效果图制作是否和教师讲解的一致。 1.课堂表现2.学习任务的完成3.效果图质量 60% 指导教师综合评价 指导教师签名： 日期： 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务7 ○任务总结 本任务详细讲解了《中秋节由来》网页的制作，在制作过程中使用到了段落的对齐、文本块首行文本的缩进、行高、字间距等属性，理解这些属性在操作步骤中的作用及展示出来效果，结合制作分析，明确这些属性的作用。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务8 任务8 用CSS设置图片效果 ○任务描述 将《春节由来》这篇文章发布到网页上。 ○任务目标 通过使用CSS所支持的图片样式属性，设置如图所示的网页。 图5-36 ○任务分析 首先建立简单的页面框架，将《春节由来》显示在页面中,加上背景色，为网页添加红色背景,设置图片的浮动方式,及图片的边框效果,设置首字下沉效果。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务8 属性 描述 可用值 注释 border-width 用于设置元素边框的粗细 thin medium thick length 定义细边框 定义中等边框（默认粗细） 定义粗边框 自定义边框宽度（如1px） border-style 用于设置元素边框的样式 none hidden dotted dashed soild double groove 定义无边 与none相同，对于表，用于解决边框冲突 定义点状边框，在大多数浏览器中显示为实线 定义虚线，在大多数浏览器中显示为实线 定义实线 定义双线，双线的宽等于border-width的值 定义3D凹槽边框，其效果取决于border-color的值 border-color 用于设置元素边框的颜色 transparent 输入颜色值 默认值，边框为透明 定义颜色值 ○任务实施 一、必备知识 CSS所支持的图片样式主要包含边框颜色、边框粗细、边框样式等基本属性，如下表示。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务8 二、制作春节由来网页过程 (1)首先建立简单的页面框架，将《春节由来》显示在页面中，如下所示 <html> <head> <title>春节由来</title> </head> <body> <img src="chunjie.jpg" > <p><span>春</span>节古时叫“元旦”。“元”者始也，“旦”者晨也，“元旦”即一年的第一个早晨。《尔雅》，对“年”的注解是：“夏曰岁，商曰祀，周曰年。”自殷商起，把月圆缺一次为一月，初一为朔，十五为望。每年的开始从正月朔日子夜算起，叫“元旦”或“元日”。到了汉武帝时，由于“观象授时”的经验越来越丰富，司马迁创造了《太初历》，确定了正月为岁首，正月初一为新年。此后，农历年的习俗就一直流传下来。</p> <p>据《诗经》记载，每到农历新年，农民喝“春酒”，祝“改岁”，尽情欢乐，庆祝一年的丰收。到了晋朝，还增添了放爆竹的节目，即燃起堆堆烈火，将竹子放在火里烧，发出噼噼啪啪的爆竹声，使节日气氛更浓。到了清朝，放爆竹，张灯结彩，送旧迎新的活动更加热闹了。清代潘荣升《帝京岁时记胜》中记载：“除夕之次，夜子初交，门外宝炬争辉，玉珂竞响。……闻爆竹声如击浪轰雷，遍于朝野，彻夜无停。”</p> <p>在我国古代的不同历史时期，春节，有着不同的含义。在汉代，人们把二十四节气中的“立春”这一天定为春节。南北朝时，人们则将整个春季称为春节。1911年，辛亥革命推翻了清朝统治，为了“行夏历，所以顺农时，从西历，所以便统计”，各省都督府代表在南京召开会议，决定使用公历。这样就把农历正月初一定为春节。至今，人们仍沿用春节这一习惯称呼。</p> </body> </html> 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务8 (2)加上背景色，为网页添加红色背景。 <style> <!-- body{ background-color:#bb0102; /* 页面背景颜色 */ margin:0px; padding:0px; } --> </style> (3)在添加背景的基础上，设置图片的浮动方式,及图片的边框效果。 <style> <!-- img{ float:left; /* 文字环绕图片 */ border:#FCF dashed 1px; /*图片的边框效果*/ } --> </style> 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务8 (4)在添加背景的基础上，设置图片的浮动方式后，对<p>标签整体加入CSS语句控制。 <style> <!— p{ color:#FFFF00; /* 文字颜色 */ margin:0px; padding-top:10px; padding-left:5px; padding-right:5px; } --> </style> （5）设置首字下沉效果。 <style> <!— span{ float:left; /* 首字放大 */ font-size:85px; font-family:黑体; margin:0px; padding-right:5px; } --> </style> (6)将完整的代码保存为31.html。完整的代码参看书152页-153页。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务8 ○任务评价 学习任务名称： 制作《春节由来》网页 班级： 学号： 姓名： 指导教师： 评价项目 评价标准 评价依据（指信息、佐证） 评价方式 权重 得分小计 总分 自我评价 小组评价 教师（企业）评价 10% 20% 70% 关键能力 1.计算机操作的规范性； 2.能参与小组讨论，相互交流； 3.能积极主动、勤学好问； 4.能清晰、准确表达。 1.课堂表现2.学习任务的完成 40% 专业能力 1.图片浮动设置的方法 2．图片样式的边框颜色、边框粗细、边框样式等基本属性的使用 3.效果图制作是否和教师讲解的一致。 1.课堂表现2.学习任务的完成3.效果图质量 60% 指导教师综合评价 指导教师签名： 日期： 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务8 ○任务总结 本任务详细讲解了《春节由来》网页的制作，在制作过程中使用到了首字下沉效果的制作方法，图片的边框颜色、边框粗细、边框样式等属性的使用，掌握设置图片浮动设置的方法，理解这些属性在操作步骤中的作用及展示出来效果，结合制作分析，明确这些属性的作用。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务9 任务9 用CSS设置网页背景 ○任务描述 将《雪》这篇文章发布到网页上。 ○任务目标 通过使用CSS所支持的背景样式，设计如图5-39所示的网页。 首先建立简单的页面框架，将《雪》显示在页 面中,为网页添加背景图片,设置 字体首 字下沉的效果，<p>标签整体加入CSS语句控制。 ○任务分析 ○任务实施 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务9 一、必备知识 CSS所支持的背景样式主要包含背景颜色、背景图片、背景重复、背景位置等基本属性。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务9 与border和font属性一样，background也可以将各种关于背景的设置集成到一个语句上，这样不仅可以节省大量的代码，而且加快了网络下载页面的速度。 background-color:blue; background-image:url(bg7.jpg); background-repeat:no-repeat; background-attachment:fixed; background-position:5px 10px; 以上代码可以统一用一句background属性代替，如下： background：blue url(bg7.jpg) no-repeat fixed 5px 10px； 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务9 二、制作《雪》网页过程 (1)首先建立简单的页面框架，将《雪》显示在页面中，如下所示 <html> <head> <title>雪</title> </head> <body> <p><span>雪</span>是大气固态降水中的一种最广泛、最普遍、最主要的形式。大气固态降水是多种多样的，除了美丽的雪花以外，还包括能造成很大危害的冰雹，还有我们不经常见到的雪霰和冰粒。</p> <p>由于天空中气象条件和生长环境的差异，造成了形形色色的大气固态降水。这些大气固态降水的叫法因地而异，因人而异，名目繁多，极不统一。为了方便起见，国际水文协会所属的国际雪冰委员会，在征求各国专家意见的基础上，于1949年召开了一个专门性的国际会议，会上通过了关于大气固态降水简明分类的提案。这个简明分类，把大气固态降水分为十种：雪片、星形雪花、柱状雪晶、针状雪晶、多枝状雪晶、轴状雪晶、不规则雪晶、霰、冰粒和雹。前面的七种统称为雪。</p> <p> 立冬 太阳位于黄经225°，11月7～8日交节<br> 小雪 太阳位于黄经240°，11月22～23日交节<br> 大雪 太阳位于黄经255°，12月6～8日交节<br> 冬至 太阳位于黄经270°，12月21～23日交节<br> 小寒 太阳位于黄经285°，1月5～7日交节<br> 大寒 太阳位于黄经300°，1月20～21日交节</p> </body> </html> 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务9 (2)加为网页添加背景图片。 <style> <!— body{ padding:0px; margin:0px; background-image:url(bg4.jpg); /* 背景图片 */ background-repeat:no-repeat; /* 不重复 */ background-position:bottom right; /* 背景位置，右下 */ background-color:#eeeee8; } --> </style> (3)在添加背景图片的基础上，对span标签进行声明。 <style> <!-- span{ /* 首字放大 */ font-size:70px; float:left; font-family:黑体; font-weight:bold; } --> </style> 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务9 (4)最后对<p>标签整体加入CSS语句控制。 <style> <!— p{ margin:0px; font-size:14px; padding-top:10px; padding-left:6px; padding-right:8px; } --> </style> (5）完整的代码保存为34.html。完整的代码参看课本159-160页。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务9 ○任务评价 学习任务名称： 制作《雪》网页过程 班级： 学号： 姓名： 指导教师： 评价项目 评价标准 评价依据（指信息、佐证） 评价方式 权重 得分小计 总分 自我评价 小组评价 教师（企业）评价 10% 20% 70% 关键能力 1.计算机操作的规范性；2.能参与小组讨论，相互交流；3.能积极主动、勤学好问；4.能清晰、准确表达。 1.课堂表现2.学习任务的完成 40% 专业能力 1.背景样式属性的使用；2．首字下沉效果的制作；3.效果图制作是否和教师讲解的一致。 1.课堂表现2.学习任务的完成3.效果图质量 60% 指导教师综合评价 指导教师签名： 日期： 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务9 ○任务总结 本任务详细讲解了《雪》网页的制作，在制作过程中使用到了背景样式的背景图片、背景重复、背景颜色属性，理解这些属性在操作步骤中的作用及展示出来效果，结合制作分析，明确这些属性的作用。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务10 任务10 用CSS设置表格 ○任务描述 将表《年度收入2004-2007》发布到网页上。 ○任务目标 用CSS所支持的表格格式，设计如图所示的表格。 首先建立简单的页面框架，将《年度收入2004-2007》表显示在页面中,表格添加边框效果,设置表格标题属性,对表格的行、列属性进行声明,添加边框效果,设置表格标题属性,对表格的行、列属性进行声明,表格的单元格属性进行声明. ○任务分析 ○任务实施 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务10 一、必备知识 在网页中创建表格了解以下表格的属性： 属性 描述 table 表格 caption 表格标题 tr 行 th 列 td 单元格 colspan 设置单元格可横跨的列数 rowspan 设置单元格可横跨的行数 cellpadding 设置单元格边沿与其内容之间的空白 cellspacing 设置单元格之间的空间 border-collapse 设置是否把表格边框合并为单一的边框。 border-spacing 设置分隔单元格边框的距离。 caption-side 设置表格标题的位置。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务10 二、制作《年度收入2004-2007》表 (1)首先建立简单的页面框架，将《年度收入2004-2007》表显示在页面中，如下所示,效果图为5-43。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务10 <html> <head> <title>年度收入</title> </head> <body> <table border="1"> <caption>年度收入 2004 - 2007</caption> <tr> <th></th> <th scope="col">2004</th> <th scope="col">2005</th> <th scope="col">2006</th> <th scope="col">2007</th> </tr> <tr> <th scope="row">拨款</th> <td>11,980</td> <td>12,650</td> <td>9,700</td> <td>10,600</td> </tr> <tr> <th scope="row">捐款</th> <td>4,780</td> <td>4,989</td> <td>6,700</td> <td>6,590</td> </tr> <tr> <th scope="row">投资</th> <td>8,000</td> <td>8,100</td> <td>8,760</td> <td>8,490</td> </tr> <tr> <th scope="row">募捐</th> <td>3,200</td> <td>3,120</td> <td>3,700</td> <td>4,210</td> </tr> <tr> <th scope="row">销售</th> <td>28,400</td> <td>27,100</td> <td>27,950</td> <td>29,050</td> </tr> <tr> <th scope="row">杂费</th> <td>2,100</td> <td>1,900</td> <td>1,300</td> <td>1,760</td> </tr> <tr> <th scope="row">总计</th> <td>58,460</td> <td>57,859</td> <td>58,110</td> <td>60,700</td> </tr> </table> </body> </html> 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务10 图5-43 (2)表格添加边框效果,将<table border="1">这代码改为<table class="datalist"> <style> <!— .datalist{ border:1px solid #429fff; /* 表格边框 */ font-family:Arial; border-collapse:collapse; /* 边框重叠 */ } --> </style> (3)设置表格标题属性。效果图为5-44。 <style> <!-- .datalist caption{ padding-top:3px; padding-bottom:2px; font:bold 1.1em; background-color:#f0f7ff; border:1px solid #429fff; /* 表格标题边框 */ } --> </style> 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务10 (4)对表格的行、列属性进行声明。 (效果图5-45) <style> <!— .datalist th{ border:1px solid #429fff; /* 行、列名称边框 */ background-color:#d2e8ff; font-weight:bold; padding-top:4px; padding-bottom:4px; padding-left:10px; padding-right:10px; text-align:center; } --> </style> 图5-44 图5-45 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务10 (5)对表格的单元格属性进行声明。 <style> <!— .datalist td{ border:1px solid #429fff; /* 单元格边框 */ text-align:right; padding:4px; } --> </style> 图5-46 (6）完整的代码保存为37.html。完整的代码参看课本169-171页。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务10 ○任务评价 学习任务名称： 制作《年度收入2004-2007》表 班级： 学号： 姓名： 指导教师： 评价项目 评价标准 评价依据（指信息、佐证） 评价方式 权重 得分小计 总分 自我评价 小组评价 教师（企业）评价 10% 20% 70% 关键能力 1.计算机操作的规范性； 2.能参与小组讨论，相互交流； 3.能积极主动、勤学好问； 4.能清晰、准确表达。 1.课堂表现 2.学习任务的完成 40% 专业能力 1.表格边框、表格标题属性的使用； 2．表格的行、列属性，表格的单元格属性的使用方法； 3.效果图制作是否和教师讲解的一致。 1.课堂表现 2.学习任务的完成 3.效果图质量 60% 指导教师综合评价 指导教师签名： 日期： 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务10 ○任务总结 本任务详细讲解了《年度收入2004-2007》表制作过程,在制作过程中用到了表格边框，表格标题属性,表格的行、列属性，表格的单元格属性的使用方法，在制作过程中，理解这些属性所起的作用及展示出来的效果，结合制作分析，明确这些属性的目的。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务11 任务11 用CSS设置表单样式 ○任务描述 将一份问卷调查表发布到网上。 ○任务目标 使用CSS支持的表单样式，设计如图5-48所示。 ○任务分析 首先建立简单的页面框架，将问卷调查表显示在页面中，为整个表单的边框和字体进行声明，设置input标签的属性，对文本框单独声明，对提交按钮属性进行声明，对下拉列表属性进行声明，最后定义多行的文本输入 ○任务实施 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务11 一、必备知识 1、同一信息提交区域表单需要包含在<form>和</form>标签之间 2、input元素标签，通过“type”属性可以创建多种类型的表单元素，格式为：<input type="..."/>,type的类型如下： 值 描述 text 定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。 button 定义可点击按钮 （多数情况下，用于通过JavaScript启动脚本）。 image 定义图像形式的提交按钮。 password 定义密码字段。该字段字符被掩码。 checkbox 定义复选框。 radio 定义单选按钮。 reset 定义重置按钮。重置按钮会清除表单中所有数据。 submit 定义提交按钮。提交按钮会把表单数据发送到服务器。 hidden 定义隐藏的输入字段。 file 定义输入字段和“浏览”按钮，供文件上传。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务11 3、<select>...</select>:创建下拉列表。与<option>配合使用，<option>定义选项。 4、<textarea>..</textarea>:定义多行的文本输入。 5、<label>..</label>：为input元素定义标注(标记)。 二、制作问卷调查表 在网页中制作问卷调查表过程 (1)首先建立简单的页面框架，将问卷调查表显示在页面中，如图所示 图5-48 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务11 <html> <head> <title>表单</title> </head> <body> <form method="post"> <p>请输入您的姓名:<br><input type="text" name="name" id="name" class="txt"></p> <p>请选择你最喜欢的颜色:<br> <select name="color" id="color"> <option value="red">红</option> <option value="green">绿</option> <option value="blue">蓝</option> <option value="yellow">黄</option> <option value="cyan">青</option> <option value="purple">紫</option> </select></p> <p>请问你的性别:<br> <input type="radio" name="sex" id="male" value="male" class="rad">男<br> <input type="radio" name="sex" id="female" value="female" class="rad">女</p> <p>你喜欢做些什么:<br> <input type="checkbox" name="hobby" id="book" value="book" class="check">看书 <input type="checkbox" name="hobby" id="net" value="net" class="check">上网 <input type="checkbox" name="hobby" id="sleep" value="sleep" class="check">睡觉</p> <p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4" class="txtarea"></textarea></p> <p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn"></p> </form> </body> </html> 图5-49 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务11 (2)为整个表单的边框和字体进行声明。图5-50 <style> <!— form{ border: 1px dotted #AAAAAA; padding: 1px 6px 1px 6px; margin:0px; font:14px Arial; } --> </style> (3)设置input标签的属性。“submit”字体颜色变为#00008B <style> <!-- input{ /* 所有input标记 */ color: #00008B; } --> </style> 图5-50 图5-51 图5-51 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务11 (4)对文本框单独声明。图5-52 <style> <!— input.txt{ /* 文本框单独设置 */ border: 1px inset #00008B; background-color: #ADD8E6; } --> </style> (5)对提交按钮属性进行声明。 <style> <!— input.btn{ /* 按钮单独设置 */ color: #00008B; background-color: #ADD8E6; border: 1px outset #00008B; padding: 1px 2px 1px 2px; } --> </style> 图5-52 图5-53 图5-53 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务11 (7)定义多行的文本输入。（图5-55） <style> <!— textarea{ width: 200px; height: 40px; color: #00008B; background-color: #ADD8E6; border: 1px inset #00008B; } --> </style> (6)对下拉列表属性进行声明。（图5-54） <style> <!— select{ width: 80px; color: #00008B; background-color: #ADD8E6; border: 1px solid #00008B; } --> </style> 图5-55 图5-54 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务11 （7）完整的代码结果 38.html。参看书本第182-184页。 ○任务评价 学习任务名称： 制作问卷调查表 班级： 学号： 姓名： 指导教师： 评价项目 评价标准 评价依据（指信息、佐证） 评价方式 权重 得分小计 总分 自我评价 小组评价 教师（企业）评价 10% 20% 70% 关键能力 1.计算机操作的规范性； 2.能参与小组讨论，相互交流； 3.能积极主动、勤学好问； 4.能清晰、准确表达。 1.课堂表现 2.学习任务的完成 40% 专业能力 1.表单及表单无素的使用 2.效果图制作是否和教师讲解的一致。 1.课堂表现 2.学习任务的完成3.效果图质量 60% 指导教师综合评价 指导教师签名： 日期： 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务11 ○任务总结 本任务详细介绍了制作问卷调查表过程，在制作过程中用涉及到了表单及表单元素的使用，表单的元素有文本框，复选框，单选按钮，提交按钮，下拉列、多行的文本等，掌握对这些表单元素属性进行声明的方法。在制作过程中，理解这些属性所起的作用及展示出的效果，结合制作分析，明确这些步骤的制作目的。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务12 任务12 用CSS制作实用菜单 ○任务描述 制作导航条 ○任务目标 利用列表相关代码，设计如图5-57所示的导航。 图5-57 ○任务分析 首先建立简单的页面框架，将导航条显示在页面中，设置背景颜色，整个div块的宽度为固定像素，并设置文字的字体。设置项目列表<ul>的属性，将项目符号设置为不显示。设置<li>的float属性，使得各个项目都水平显示，最后设置超链接的3个伪属性，以实现动态菜单的效果。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 ○任务实施 模块5：HTML+CSS网页样式 任务12 一、必备知识 列表的类型及使用 1、无序列表<ul> 用于将一组相关的列表项目排列在一起，列表中的项目没有特别的先后顺序。无序列表使用一组<ul></ul>标签，标签中包裹有很多组<li></li>其中每一组均为 一条列表。写法： <ul> <li>……</li> <li>……</li> </ul> 如：在网页中实现下面的效果 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务12 <html> <head> <title>项目列表</title> <style> <!-- body{ background-color:#c1daff; } ul{ font-size:0.9em; color:#00458c; list-style-type:decimal; /* 项目编号 */ } --> </style> </head> <body> <p>水上运动</p> <ul> <li>freestyle 自由泳</li> <li>backstroke 仰泳</li> <li>breaststroke 蛙泳</li> <li>butterfly 蝶泳</li> <li>individual medley 个人混合泳</li> <li>freestyle relay 自由泳接力</li> </ul> </body> </html> 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务12 2、有序列表<ol> 有序列有与无序列表相反，其列表的每一个元素都会有序列之分，从上至下可以为数字、字母等多种不同形式显示。 有序列表使用一组<ol></ol>标签，标签中包含有很多组<li></li>标签，其中每一组均为 一条列表。 <ol> <li>……</li> <li>……</li> </ol> 3、定义列表 定义列表是一种缩进样式的列表，设计的本意是要用于定义术语。代码中使用<dl>来创建定义列表。在列表中使用<dt>来定义页面中的每一行。用<dd>来定义缩进行。 <dl> <dt>…</dt> <dd>……</dd> </dl> 如：在网页中实现右图的效果 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务12 <html > <head> <title>定义列表</title> </head> <body> <h3>镜头画面的剪辑</h3> <dl> <dt>分剪</dt> <dd>一个镜头分成两个或两个以上的镜头使用。</dd> <dt>挖剪</dt> <dd>将一个完整镜头中的动作、人和物运动镜头在运动中的某一部位上多余的部分挖剪去。</dd> <dt>拼剪</dt> <dd>将一个镜重复拼接。</dd> </dl> </body> </html> 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务12 list-style-type属性值及其显示效果 关键字 显示效果 dic 实心圆 circle 空心圆 square 正方形 decimal 1、2、3、4、5、6、…、2、3、4、5、6、… Upper-alpha A、B、C、D、E、F，…、B、C、D、E、F，… Lower-alpha a,b,c,d,e,f, …… Upper-romman Ⅰ,Ⅱ,Ⅲ,Ⅳ,Ⅴ,Ⅳ,Ⅶ, …,Ⅱ,Ⅲ,Ⅳ,Ⅴ,Ⅳ,Ⅶ, … Lower- romman ⅰ,ⅱ,ⅲ,ⅳ,ⅴ,ⅵ, … none 不显示任何符号 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务12 4、超链接 超链接是通过标记<a>来实现的，链接的具体地址则是利用<a>标记的href属性，如下所示： <a href="http://isaac,thuee.net">isaac的博客</a>,#表示的是空链，如：<a href="#">isaac的博客</a>。 5、动态效果的CSS伪类别属性 属 性 说 明 a:link 超链接的普通样式，即正常浏览状态的样式 a:visited 被点击过的超链接的样式 a:hover 鼠标指针经过超链接上时的样子 a:active 在超链接上单击时，即“当前激活”时，超链接的样式。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务12 二、制作问卷调查表 在制作导航条过程 （1）首先建立简单的页面框架，将导航条显示在页面中，如下所示 <html> <head> <title>菜单的横竖转换</title> </head> <body> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">My Blog</a></li> <li><a href="#">Friends</a></li> <li><a href="#">Next Station</a></li> <li><a href="#">Contact Me</a></li> </ul> </div> </body> </html> 图5-60 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务12 (2)设置背景颜色，整个div块的宽度为固定像素，并设置文字的字体。设置项目列表<ul>的属性，将项目符号设置为不显示。 <style> <!— body{ background-color:#ffdee0; } #navigation { font-family:Arial; } #navigation ul { list-style-type:none; /* 不显示项目符号 */ margin:0px; padding:0px; } --> </style> 图5-61 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务12 (3)设置<li>的float属性，使得各个项目都水平显示，设置<a>的相关属性，如下所示。 <style> <!-- #navigation li { float:left; /* 水平显示各个项目 */ } #navigation li a{ display:block; /* 区块显示 */ padding:3px 6px 3px 6px; text-decoration:none; border:1px solid #711515; margin:2px; } --> </style> 图5-62 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务12 (4)最后设置超链接的3个伪属性，以实现动态菜单的效果，代码如下所示。 <style> <!— <style> <!-- #navigation li a:link, #navigation li a:visited{ background-color:#c11136; color:#FFFFFF; } #navigation li a:hover{ /* 鼠标经过时 */ background-color:#990020; /* 改变背景色 */ color:#ffff00; /* 改变文字颜色 */ } --> </style> --> </style> （5）完整的代码结果保存39.html。完整的代码参看课本195-196页。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务12 ○任务评价 学习任务名称：用CSS制作实用菜单 班级： 学号： 姓名： 指导教师： 评价项目 评价标准 评价依据（指信息、佐证） 评价方式 权重 得分小计 总分 自我评价 小组评价 教师（企业）评价 10% 20% 70% 关键能力 1.计算机操作的规范性； 2.能参与小组讨论，相互交流； 3.能积极主动、勤学好问； 4.能清晰、准确表达。 1.课堂表现2.学习任务的完成 40% 专业能力 1.熟练使用有序列表、定义列表 2．掌握链接及四个伪类别的使用 3.效果图制作是否和教师讲解的一致。 1.课堂表现2.学习任务的完成3.效果图质量 60% 指导教师综合评价 指导教师签名： 日期： 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务12 ○任务总结 本任务详细讲解了实用菜单的制作，在制过程中用到了无序列表的ul li属性的，超链接及动态效果的CSS伪类别属性。在制作过程中，理解这些属性所起的作用及展示出的效果，结合制作分析，明确这些步骤的制作目的。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 $$