项目3 CSS样式（教案）《网页设计》（劳动保障出版社）

《网页设计与制作》 教学设计 课程名称： 网页设计与制作 授课年级： 20 年级 授课学期： 20 学年第一学期 教师姓名： 老师 20 年 月 日 课题名称 项目三 CSS样式 计划课时 课时 内容分析 设计出美观、大方、简洁和高访问量的网站仅通过HTML5实现是非常困难的，HTML5仅定义了网页结构，对于文本样式没有过多涉及。这就需要一种能有效控制网页布局、字体、颜色、背景和其他图文效果的技术。采用CSS技术制作网页，能对网页的页面布局、字体、颜色、背景等实现精准的控制。本项目将通过实例介绍使用CSS样式美化网页的方法。 教学目标 · 掌握CSS样式的使用方法。 · 掌握CSS语法。 · 掌握CSS选择器的使用。 重点及措施 教学重点：使用CSS美化文本；使用CSS美化页面 措施：通过上机操作加强学习和补充案例进行巩固。 难点及措施 教学难点：CSS样式的优点，CSS常用选择器 措施：通过上机操作加强学习和补充案例进行巩固。 教学方式 教学采用教师课堂讲授为主，使用教学PPT讲解。 教 学 过 程 任务3.1 CSS基础知识 3.1.1初识CSS样式 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 为什么要用CSS样式修饰网页？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： CSS的语法简单，编写较容易。应用CSS技术，可以减少程序代码数量、提高网页加载速度。熟练掌握CSS技术，可统一网站风格，让网页更容易维护。 CSS文件是文本文件，它包含了一些CSS标签，CSS文件必须使用CSS为文件名后缀。通过简单地更改CSS文件，可以改变网页的整体表现形式，降低网页设计的难度。 · 知识点讲解 · 讲解使用CSS修饰段落 （1）教师展示PPT，对使用CSS修饰段落进行具体讲解。 CSS可以给网页文字设置不同的字体样式，即建立一个CSS规则。如果想改变整个网页上所有出现的颜色、尺寸、字体，只需要修改一些CSS规则即可。CSS文件是纯文本格式文件。 （2）学生自主提问，教师对疑难问题进行解答。 3.1.2HTML和CSS的对比 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 同样是排版网页，对比HTML和CSS有何不同？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： CSS样式具有很多优点，如可以大大缩减页面代码，提高页面浏览速度。CSS结构清晰，容易被搜索引擎抓取到内容。 · 知识点讲解 · 讲解动态网页 （1）教师展示PPT，对静态网页进行具体讲解。 1. HTML的缺点 　　在网页设计与制作中，只依赖HTML标签样式已经不能满足网页设计者的需求，HTML的缺点表现在以下4个方面。 　　（1）维护困难： 修改某个特殊标签格式耗时较长，尤其对整个网站而言，后期修改和维护成本较高。 　　（2）标签不足： HTML本身标签非常少，很多标签都是为网页内容服务的，而关于内容样式标签，如文字间距、段落缩进，很难在HTML中找到。 　　（3）网页体积大： 由于没有对各种风格样式进行控制，HTML页面往往体积过大，占用宽度。 　　（4）定位困难： 在整体布局页面时，HTML对各个模块的位置调整缺乏灵活，过多的<table>标签将会导致页面的复杂和后期维护的困难。 　　　2. CSS样式的优点 　　CSS样式具有很多优点，如可以大大缩减页面代码，提高页面浏览速度。CSS结构清晰，容易被搜索引擎抓取到内容。其优点表现在以下5个方面。 　　（1）丰富的样式定义： CSS提供了丰富的文档样式外观，可以设置文本和背景属性；允许为任何元素创建边框，设置元素边框与其他元素间的距离；允许随意改变文本的大写和小写方式、修饰方式等效果。 　　（2）易于使用和修改： CSS可以将样式定义在HTML元素的style属性中，也可以定义在header 部分，还可以写在一个专门的CSS文件中(即CSS样式表)，将所有的样式声明统一存放，进行统一管理。如果要修改样式，只需在样式列表中修改。 　　（3）多页面应用： CSS样式表可以单独存放在一个CSS文件中，这样可以在多个页面中使用同一个CSS样式表。CSS样式表不属于任何页面文件，在任何页面文件中都可以引用，这样可以实现多个页面风格的统一。 　　（4）层叠： 对一个元素多次设置同一个样式，最后一次设置的属性值有效。在浏览器中看到的将是最后一次设置的样式效果。 　　（5）页面压缩： 在使用HTML定义页面时需要大量或重复的表格和各种规格的文字样式，这样会产生大量的HTML标签，从而使页面文件的大小增加，而使用CSS可以减少页面文件体积，加载页面时可提升速度。 （2）学生自主提问，教师对疑难问题进行解答。 3.1.4CSS语法和样式表分类 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： CSS样式表分类分为几类？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 行内样式表，内部样式表，外部样式表。 · 知识点讲解 · 讲解CSS语法 （1）教师展示PPT，对CSS语法进行具体讲解。 CSS语法格式由若干样式规则组成，这些样式规则可以应用到不同的元素或文档中来定义它们显示的外观。每一条样式规则都由选择器（selector）、属性（property）和属性值（value）三部分组成。selector有多种形式，既可以是文档中的HTML标签，如<body><table><p>标签等，也可以是XML文档中的标签。property是选择器制定的标签所包含的属性。value是选择器的多个属性，属性和属性值为一组，组与组之间需要用分号隔开。 CSS语法格式为： selector{propertyl：valuel；property2：value2；} 2. CSS样式规则 　　下面给出一条样式规则，如p{color：red}。该样式规则的选择器为p，为段落标签<p>提供样式，color为段落文字的颜色属性，red为属性值。此样式表示标签<p>指定的段落文字为红色。如果要为段落设置多种样式，则可以使用下列语句： p{font-family： "隶书"；color：red；font-size：40px；font-weight：bold} 　　　3. 样式表分类 　　CSS的应用样式有行内样式表、内部样式表（内嵌样式表）和外部样式表3类。 　　（1）行内样式表 　　当需要对某个特定标签进行单独设置时使用行内样式表，应用到各个页面。在所修饰的标签内加<style>属性，如果后续为多条样式规则，多条样式规则用分号分开。 　　（2）内部样式表 　　内部样式表与网页内容位于同一个文件中，在<head>标签中的<style>标签中。这种方式便于在同一页面中修改样式，但是不能彻底实现页面内容与样式的分离，不利于在多页面间共享复用代码。 　　（3）外部样式表 　　外部样式表是指CSS代码单独写在一个或多个CSS文件中，需要时在<head>中通过<link/>标签引用，加载页面时没有加载样式表，需要用到样式表时才去寻找相应的样式。 （2）学生自主提问，教师对疑难问题进行解答。 任务3.2CSS样式代码 3.2.1CSS常用选择器 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： CSS中选择器有什么用？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： HTML5中的所有标签都是通过不同的CSS选择器进行控制的。根据CSS选择器用途可把选择器分为标签选择器、类选择器和ID选择器。每个选择器代码可以一次声明多个，也可以将选择器声明多个。。 · 知识点讲解 · 讲解动态网页 （1）教师展示PPT，对标签选择器进行具体讲解。 　HTML5文档是由多个不同标签组成的，而CSS选择器就是声明这些标签所用的样式，例如，p选择器用于声明页面中所有<p>标签的样式风格，同样也可以通过h1选择器来声明页面中所有<h1>标签的风格。标签选择器的规则自动应用于文档中对应的标签，能够对其属性进行重新定义，同时会影响到网页中所有此类标签元素。标签选择器使用简单、明确且通用性强，但针对性较差。 　　1）格式 TagName{property：value} 　　其中，TagName表示标签名称，如<p><h1>等标签；property表示CSS属性；value表示CSS属性值。 2）用途 通过一个具体标签来命名，可以对文档中每一个出现该标签的地方应用样式定义。这种做法通常用于设置整个网站中都会出现的基本样式。 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解类选择器 （1）教师展示PPT，对类选择器进行具体讲解。 在一个页面中，使用标签选择器会控制该页面中所有此标签的显示样式，如果需要将此类标签中的其中一个标签重新设定，此时仅使用标签选择器是无法达到效果的，还需要使用类选择器。通过类选择器设置样式，可以将同一种样式定义为一个类，在CSS中，类选择器使用符号“.”开头。类选择器有别于ID选择器，属性值可以重复在多个元素中使用，例如，class属性可以在<div>和<p>标签中使用。 　　1）格式 . classValue{property：value} 其中，classValue是选择器的名称，具体名称由CSS制定者命名。如果一个标签具有class属性且class属性值为classValue，那么该标签的呈现样式由该选择器指定。在定义类选择器时，需要在classValue前面加一个句点“.”表示标签名称，如<p><h1>等HTML标签；property表示CSS属性；value表示CSS属性值。 　　说明： 定义选择器时需要使用英文的“.”符号加在选择器的前面。 　　2）用途 　　下面定义了两个类选择器，分别为rd和se。类的名称可以是任意英文字符串或是英文开头与数字的结合，一般情况下，其使用功能及效果的简要缩写语法格式为： . rd{color：red} . se{font-size：3px} （2）学生自主提问，教师对疑难问题进行解答。 · 讲解ID选择器 （1）教师展示PPT，对ID选择器进行具体讲解。 ID选择器与类选择器类似，都是针对特定属性的属性值匹配。ID选择器是使用HTML标签的ID属性值作为选择器名，并以“#”开头进行标识。ID属性类似于身份证，是HTML元素的唯一标识，页面内不能有重复的ID标识属性。对应的ID选择器一般用于修饰对应ID标识的HTML标签内容，实际应用中常和<div>标签配合使用，表示修饰对应ID标识的某个<div>区块。 　　1）格式 #idValue{property：value} 　　　　其中，#idValue是选择器的名称，可以由CSS定义者自己命名。如果某标签具有ID属性，并且该属性值为idValue，那么该标签的呈现样式可以由该ID选择器制定。正常情况下，ID属性值在文档中具有唯一性。 　　2）用途 　　在页面中具有ID属性的标签才能够使用ID选择器定义样式，所以与类选择器相比，使用ID选择器具有一定的局限性。类选择器与ID选择器的主要区别有： 类选择器可以给任意数量的标签定义样式，而ID选择器在页面的标签中只能使用一次；ID选择器比类选择器具有更高的优先级，即当ID选择器与类选择器发生冲突时，优先使用ID选择器。 （2）学生自主提问，教师对疑难问题进行解答。 3.2.2CSS选择器声明 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： CSS选择器声明有哪些方式？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 集体声明，多重嵌套声明。 · 知识点讲解 · 讲解集体声明 （1）教师展示PPT，对集体声明进行具体讲解。 在一个页面中，有时不同种类的标签样式要保持一致。例如，<p>标签和<h1>标签要保持一致，此时可以共同使用类选择器，还可以使用集体声明。集体声明就是在声明各种CSS选择器时，风格相同的CSS选择器同时声明。 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解多重嵌套声明 （1）教师展示PPT，对多重嵌套声明进行具体讲解。 在CSS控制HTML标签样式时，可以使用多重嵌套声明，对指定位置的HTML标签进行修饰，表示嵌套的选择器间用空格隔开。例如，当<p>与</p>之间包含<a>和</a>标签时，可以使用多重嵌套声明。 超链接显示为红色字体，大小为30 px，其原因是使用了多重嵌套声明。 当<p>与</p>之间包含<a>和</a>标签时，就可以使用嵌套标签进行声明，表示<p>标签下面的<a>标签的CSS属性样式。同样的道理，不仅可以嵌套标签本身，类选择器和ID选择器都可以进行嵌套。 （2）学生自主提问，教师对疑难问题进行解答。 3.2.3CSS属性单位 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： CSS属性单位有哪些？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： CSS颜色单位，CSS长度单位。 · 知识点讲解 · 讲解CSS颜色单位 （1）教师展示PPT，对CSS颜色单位进行具体讲解。 CSS有很多设置字体与背景颜色参数的样式，包括命名颜色、RGB颜色及十六进制颜色等。 　　1）命名颜色 　　CSS中可以直接用英文单词命名与之相对应的颜色，这种方法的优点是简单、直接、容易掌握。此处预设了16种颜色及其衍生色，这16种颜色是CSS规范推荐的，主流的浏览器能够识别它们。 　　2）RGB颜色 　　如果要使用十进制表示颜色，则需要使用RGB颜色。用十进制表示颜色，最大值为255，最小值为0。要使用RGB颜色，必须使用rgb(R，G，B)，其中R、G、B分别表示红、绿、蓝的十进制值，通过这3个值的组合便可以形成不同的颜色，例如，rgb(255，0，0)表示红色，rgb(0，255，0)表示绿色，rgb(0，0，0)表示黑色，rgb(255，255，255)表示白色。 　　RGB设置方法一般分为两种： 百分比设置和直接用数值设置。例如，为<p>标签设置颜色，两种语法格式为： p{color：rgb(123，0，25)} p{color：rgb(45%，0%，25%)} 　　3）十六进制颜色 　　十六进制颜色是常用的定义方式，是由0~9和A~F组成的。十六进制颜色的基本语法格式为： #RRGGBB 　　其中，R表示红色，G表示绿色，B表示蓝色。而RR、GG、BB最大值为FF，表示十进制中的255；最小值为00，表示十进制中的0，例如，#FF0000表示红色，#00FF00表示绿色，#0000FF表示蓝色，#000000表示黑色，#FFFFFF表示白色。其他颜色是通过红、绿、蓝三种基本颜色组合而成的。 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解CSS长度单位 （1）教师展示PPT，对CSS长度单位进行具体讲解。 为保证页面元素能够在浏览器中完全显示并且布局合理，就需要设定元素间的间距和元素本身的边界等，这就离不开长度单位的使用。CSS中长度单位分为绝对单位和相对单位两类。 　　绝对单位： 用于设定绝对位置，主要有英寸(in)、厘米(cm)、毫米(mm)、磅(pt)和pica(pc)。其中，英寸是国外常用的度量单位；厘米用于设定距离比较大的页面元素框；毫米用于设定比较精确的元素距离和大小；磅一般用于设定文字的大小。 　　相对单位： 指在度量时需要参照其他页面元素的单位值。使用相对单位所度量的实际距离可能会随着这些单位值的改变而改变。CSS提供了三种相对单位：em、ex和px。其中px也叫像素，是目前广泛使用的一种单位。 （2）学生自主提问，教师对疑难问题进行解答。 任务3.3使用CSS样式美化文本 3.3.1设置字体属性 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 字体有哪些属性？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 字体，字体大小，字体风格。 · 知识点讲解 · 讲解字体 （1）教师展示PPT，对字体进行具体讲解。 字体 　　font-family属性用于制定文字字体类型，如宋体、黑体、隶书等，即在网页中展示不同的字体。 　　1）格式 {font-family：name} {font-family：cursive|fantasy|monospace|serif|sans-serif} 从语法格式上可以看出，font-family有两种声明方式。第一种方式是使用name字体名称，按优先顺序排列，以逗号隔开，如果字体名称包含空格，则应使用引号括起，这种声明方式比较常用；第二种方式是使用所列出的字体序列名称，如果使用fantasy序列，则将提供默认字体序列。 　　font-family属性值可以是一组值，即一次定义多个字体，当浏览器读取字体时，会按照字体排列的先后顺序来决定使用哪种字体。若浏览器在计算机上找不到第一种字体，则自动读取第二种字体；若第二种字体也找不到，则自动读取第三种字体，依此类推。当定义的所有字体都找不到时，会选用计算机系统的默认字体。 2）说明 在字体显示时，如果指定了一种特殊字体类型，而在浏览器或者操作系统中该类型不能正确获取，则可以通过font-family属性预设多种字体类型。font-family属性预设字体类型时，每种字体之间使用逗号隔开。当前面的字体类型不能正确显示时，系统将自动选择后一种字体类型，依此类推。 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解字体大小 （1）教师展示PPT，对字体大小进行具体讲解。 网页中的标题通常使用突出的字体显示，用于引人注意。多种字体合理搭配形成的网页，既吸引眼球，又能提高阅读速度。CSS中通常使用font-size设置文字大小。 1）格式 {font-size：数值|inherit|xx-small|x-small|small|medium|large|...} 　　从语法格式上可以看出，font-size可以通过数值来定义字体大小，如font-size：10 px表示定义的字体大小为10 px，还可以通过medium等参数定义字体的大小。 　　对于font-size的属性值，当使用绝对值时要注意加上单位，当没有单位时浏览器会默认以px为单位。这里的取值除使用px以外，还可以使用in(英寸)、cm(厘米)、mm(毫米)、pt(点)、pc(皮卡)。另外，字号大小的取值还有一些关键字，分别为xx-small(极小)、x-small(较小)、small(小)、medium(标准大小)、large(大)、x-large(较大)、xx-large(极大)。 网页中文字被设置成不同的大小，其设置采用了绝对值、关键字和百分比等形式。 font-size字体大小为200%时，其比较对象是上一级标签中的10 pt。同样，还可以使用inherit值，直接继承上一级标签的字体大小。 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解字体风格 （1）教师展示PPT，对字体风格进行具体讲解。 　CSS通常使用font-style定义字体风格，即字体的显示样式，如斜体，其语法格式为： {font-style：normal|italic|oblique|inherit} （2）学生自主提问，教师对疑难问题进行解答。 · 讲解字体加粗 （1）教师展示PPT，对字体加粗进行具体讲解。 通过设置字体粗细，可以使文字显示不同的外观。CSS中通常使用font-weight定义字体的粗细程度，其语法格式为： {font-weight：100-900|bold|bolder|lighter|normal；} font-weight属性有五个有效值，分别是100~900、bold、bolder、lighter、normal。如果没有设置该属性，则使用默认值normal。属性值设置为100~900，值越大，加粗的程度就越高。 （2）学生自主提问，教师对疑难问题进行解答。 3.3.2设置段落属性 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 段落属性有哪些？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 字符间隔，水平对齐，文本缩进，文本行高。 · 知识点讲解 · 讲解字符间隔 （1）教师展示PPT，对字符间隔进行具体讲解。 字符文本之间可以通过letter-spacing进行设置。在一个网页中，会涉及多个字符文本，设置文本之间的各字符间隔一致，进而保持页面的整体性，是网页设计者必须要考虑的。letter-spacing的语法如下： letter-spacing：normal|length CSS可以通过letter-spacing设置字符文本之间的距离，即在字符文本之间插入空间。这里允许使用负值，使字母之间更加紧凑。 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解水平对齐 （1）教师展示PPT，对水平对齐进行具体讲解。 一般情况下，居中对齐适用于标题类文本，其他对齐方式可以根据页面布局来选择使用。根据需要，可以设置多种对齐方式，如水平方向的居中、左对齐、右对齐和两端对齐等。在CSS中，可以通过text-align属性进行设置，语法格式为： text-align：start|end|left|right|center|justify|match-parent|inherit （2）学生自主提问，教师对疑难问题进行解答。 · 讲解文本缩进 （1）教师展示PPT，对文本缩进进行具体讲解。 在普通段落中，通常首行缩进两个字符，用来表示这是一个段落的开始。同样在网页的文本编辑中可以通过制定属性，来控制文本缩进。CSS中的text-indent属性用于设定文本块首行缩进，语法格式为： text-indent：length 其中，length 属性值表示由百分比数字或由浮点数和单位标识符组成的长度，允许为负值。 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解文本行高 （1）教师展示PPT，对文本行高进行具体讲解。 CSS中通常使用line-height设置行间距，即行高，语法格式为： line-height：normal|length （2）学生自主提问，教师对疑难问题进行解答。 任务3.4使用CSS样式美化页面 3.4.1设置图片样式 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 为什么要设置图片样式？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 使用CSS样式，可以轻松设置图片属性、页面背景、添加边框，使网页变得更加生动、活泼。 · 知识点讲解 · 讲解设置图片样式 （1）教师展示PPT，对设置图片样式进行具体讲解。 在网页中放置一张图片，可以使用<img/>标签。当图片显示之后，其边框是否显示，可以通过<img/>标签中的border属性来设定。通过HTML标签设置图片边框，其边框显示都是黑色，并且风格比较单一，唯一能够设定的就是边框的粗细，而无法对边框样式进行设定。这时可以采用CSS对边框样式进行美化，语法格式为： <img src=“图片位置” border=“值”/> 在CSS中，使用border-style属性定义边框样式，即边框风格，如可以设置风格为点线式边框(dotted)、破折线式边框(dashed)、直线式边框(solid)、双线式边框(double)等。 （2）学生自主提问，教师对疑难问题进行解答。 3.4.2设置背景与边框 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 为什么要设置背景和边框？如何设置？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 网页的背景对网页的整体效果有巨大影响，不同类型的网站有不同的背景和基调。网页中的背景设置对网页设计非常重要。对于单个HTML5元素，可以通过CSS属性设置元素边框样式，包括宽度、显示风格和颜色等。 · 知识点讲解 · 讲解背景相关属性 （1）教师展示PPT，对背景相关属性进行具体讲解。 1）背景颜色 　　background-color属性用于设定网页背景色，它接受任何有效的颜色值，而对于没有设定背景色的标签，默认背景色为透明，语法格式为： {background-color：transparent|color} 2）背景图片 　　网页背景既可以使用背景色来填充，也可以使用背景图片来填充。通过CSS属性可以对背景图片进行精确定位。background-image属性用于设定标签的背景图片。通常情况下，在<body>标签中应用，将图片用于整个主体中，语法格式为： {background-image：none|url(url)} 从语法结构上看，其默认属性为无背景图片，当需要使用背景图片时可以用url进行导入，url可以使用绝对路径，也可以使用相对路径。使用图片设置背景时，还需要考虑图片重复、图片显示、图片位置、图片大小、现实区域、裁剪区域等属性。 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解边框属性 （1）教师展示PPT，对边框属性进行具体讲解。 边框就是将元素内容及间隙包含在其中的边线，类似于表格的外边线。每一个页面元素的边框都可以从宽度、样式和颜色三个方面描述。这三个方面决定了边框所显示出来的外观。CSS中分别使用边框样式（border-style)、边框颜色（border-color)和边框线宽（border-width）属性设定边框。 　　1）边框样式 　　border-style属性用于设定边框的样式，即风格。设定边框样式是边框最重要的部分，语法格式为： {background-style：none|hidden|dotted|solid|…} 2）边框颜色 　　border-color属性用于设定与页面元素不同的边框颜色，语法格式为： border-color：color 其中，color表示设定的颜色，其颜色值通过十六进制和RGB等方式获取。与边框样式属性一样，border-color属性可以为边框设定一种颜色，也可以同时 设定四个边的颜色。 3）边框线宽 border-width属性用于设定边框宽度，语法格式为： border-width：medium|thin|thick|length 其中预设属性值有medium、 thin和thick。 （2）学生自主提问，教师对疑难问题进行解答。 项目小结 本项目主要介绍了HTML5的优势和标签的概念，具体内容如下。 　HTML5的优势： 介绍了HTML5的三个优势和新增标签。 　HTML5的结构： 介绍了XHTML文档和HTML5文档的不同。 　标签概述： 介绍了标签的分类、标签的关系、标签属性和头部相关标签。 　文本控制标签： 介绍了页面格式化标签、文本样式标签、文本格式化标签和文本语义标签。 　图像标签： 介绍了常见的图像格式、图像标签及常用属性、相对路径和绝对路径。 　通过本项目的学习，了解HTML5文档的优势和结构，掌握标签概念，熟练使用相关的标签为网页添加文本样式和图片效果。 项目实训 实训7 · 实训名称 标签选择器 · 实训目标 使用标签选择器给段落设置样式 · 实训实施 编写代码，使用标签选择器给段落设置样式，段落文字以蓝色字体显示，大小为20 px。 实训8 · 实训名称 类选择器 · 实训目标 使用类选择器设置段落样式 · 实训实施 编写代码，使用类选择器设置段落样式，显示三段文字，段落1以蓝色字体显示，大小为20 px；段落2以红色字体显示，大小为22 px；标题同样以红色字体显示，大小为22 px。 实训9 · 实训名称 ID选择器 · 实训目标 使用ID选择器设置段落样式 · 实训实施 编写代码，使用ID选择器设置段落样式，显示三段文字，段落1以红色字体显示；段落2以蓝色字体显示，大小为22 px；标题以红色字体显示，大小为22 px。 实训10 · 实训名称 CSS选择器声明 · 实训目标 集体声明 · 实训实施 编写代码，使用集体声明样式，显示三段文字，段落1、段落2和段落3都以红色字体加粗显示，并且大小为20 px。 （作品点评） 教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug的地方，并给与解答。 · 布置作业 · 完成教师布置的作业。 · 预习下章内容。 项目测评 1. 制作段落标题能够在<head>标签中间添加CSS样式 2.制作欢迎标题能够新建CSS规则，使用段落样式 3.CSS语法能够使用选择器、属性和属性值 4.CSS样式表分类能够区分三类样式表 5.标签选择器能够使用标签选择器 6.类选择器能够使用类选择器 7.ID选择器能够使用ID选择器 8.CSS选择器声明能够进行集体声明和多重嵌套声明 9.课后习题能够完成课后习题 10.课堂表现能够遵守纪律，完成学习任务 教 学 后 记 学科网（北京）股份有限公司 $$