《HTML5+CSS3网页制作》课件-模块四 CSS3基础

模块四CSS3基础任务1元素选择器和类选择器网页制作CSSHTML知识准备——元素选择器和类选择器实战演练——制作“宋词满江赏析”网页元素选择器和类选择器0201进阶训练——制作“端午节的由来”网页03动手实践——“李大钊人物介绍”的网页041.了解CSS2.熟悉CSS样式规则3.掌握元素选择器的使用4.掌握类选择器的使用学习目标：元素选择器和类选择器1.结合中国传统文化元素和现代设计理念，培养学生的文化自信和创新意识，鼓励他们在网页设计中融入中国特色，展现创新能力。2.通过实际的网页设计项目，培养学生的社会责任感和团队协作精神，使他们意识到设计工作对社会的服务价值。3.强化学生的审美素养，提升他们的艺术鉴赏力和设计能力。同时，激发学生的终身学习意识，鼓励他们不断更新知识和技能，以适应快速变化的信息技术领域。思政目标：元素选择器和类选择器

知识准备--课程引入1哈肯·维姆·莱（HåkonWiumLie）在1994年提出了CSS的最初想法，并与当时正在设计Argo浏览器的伯特·波斯（BertBos）合作，共同创造了CSS的最初版本。CSS的发展过程中，W3C组织对CSS的发展和标准化起到了关键作用，1996年12月，W3C推出了CSS规范的第一版本，1997年颁布了CSS1.0版本，而1998年发布了CSS2版本。哈肯·维姆·莱（HåkonWiumLie）

1

张鑫旭中国前端开发社区中的重要人物之一，以其深厚的专业知识和对CSS的深刻理解而闻名。他所著的《CSS世界》一书，不仅系统性地介绍了CSS的基础概念和应用方法，还深入探讨了CSS在现代网页设计中的核心作用和高级技巧。这本书成为了许多前端开发者学习和掌握CSS不可或缺的资源。知识准备--课程引入张鑫旭

2CSS层叠样式表(CascadingStyleSheets)

一种样式语言，通过选择器来指定网页元素，并为这些元素定义一系列的属性和值，从而改变它们的外观。CSS的特点丰富的样式定义易于使用和修改多页面应用层叠页面压缩知识准备—CSS简介1

2知识准备—CSS样式规则1CSS都通过一系列规则来指定样式应用于网页的特定元素CSS是一种用于描述网页元素如何显示的语言，它涵盖了字

体、颜色、布局等样式属性。CSS样式规则由选择器和声明块组成声明块包括一个或多个属性及其值。当多个样式规则适用于同一元素时，CSS的层叠特性决定了哪个规则将被优先应用。

2知识准备—CSS样式的引入1网页是由内容、表现和行为三个要素共同构成的复合体声明块包括一个或多个属性及其值。当多个样式规则适用于同一元素时，CSS的层叠特性决定了哪个规则将被优先应用。四种方法引入CSS：行内式、内嵌式、导入式和链接式通过两种方式实现：直接在HTML文档中定义（内部样式），或者存储在独立的.css文件中并通过HTML文档链接（外部样式）。

2知识准备—CSS样式的引入1行内样式：使用HTML元素的style属性定义CSS样式行内式的基本语法格式为:<元素名style="属性1:属性值1;属性2:属性值2;...">内容</元素名>

2知识准备—CSS样式的引入1案例4-1

ＣＳＳ行内样式的用法

2知识准备—CSS样式的引入1内嵌样式：使用style元素在HTML文档头部定义CSS样式内嵌式的基本语法格式为:<style>选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3}</style>

2知识准备—CSS样式的引入1案例4-2

ＣＳＳ内嵌式样式的用法

2知识准备—CSS样式的引入1导入式：使用@import命令导入外部CSS样式表文件导入式的基本语法格式为:@import"filename.css"[mediatypes];

2知识准备—CSS样式的引入1链接式：通过<link>标签来引用外部CSS文件的方法链接式的基本语法格式为:<linkhref="CSS文件的路径"type="text/css"rel="stylesheet">

2知识准备—CSS样式的优先级1CSS优先级规则及计算为：ID选择器权重>类选择器权重>元素选择器权重例如下面代码中的CSS权重的用法，针对不同的选择器分别计算其可权值。编写的CSS代码如下：h1{color:blue;}权值为1pem{color:yellow;}权值为2.font01{color:red}权值为10.noteulli{color:gray;}权值为12#main{color:black;}权值为100

2知识准备—元素选择器1元素选择器通过元素的标签名来标识元素选择器的语法规则：元素名{属性：属性值}其中包含一个或多个属性和属性值对。每个属性和属性值对之间用分号;分隔。例如针对h2元素应用CSS样式：h2{font-size:34px;color:#bc7400;background-color:#ccc;text-align:center;}

2知识准备—类选择器1类选择器通过class类名来标识类选择器语法规则：.类名称{属性：属性值}类选择器的名称由开发者自定义，可以包含字母、数字、下划线或破折号，但不能以数字开头。

2知识准备—类选择器1案例4-3

类选择器的用法

实战演练—制作“宋词满江红赏析”网页2【需求说明】

本次任务主要是利用HTML的h2元素、p元素、ul列表元素、a元素等、CSS内嵌式等知识点完成"宋词满江红赏析"网页的制作。通过HTML定义网页结构，使用CSS设置页面背景色、文字大小、颜色等样式，以及列表项的图标和链接样式。保存后浏览网页，效果如图所示：

实战演练—制作“宋词满江红赏析”网页2【制作思路】

"宋词满江红赏析"网页的制作思路是使用h2元素定义了宋词的标题，h3元素定义了作者岳飞及其时代背景，宋代。接下来的三个p元素分别包含了宋词的三段内容。最后的ul无序列表包含一个li列表项，其中包含四个a超链接，每个链接都配有一个img图像，分别代表不同的功能：收藏、下载、复制和播放。alt属性为图像提供了替代文本，有助于搜索引擎优化和视觉障碍用户的理解。可以分成2步来完成：首先制作页面HTML结构代码，定义网页的基本框架和内容布局；其次编写基础CSS代码，设置页面的背景色、字体大小和行间距；为页面元素添加样式，如标题的字色和列表项的图标样式。

实战演练—制作“宋词满江红赏析”网页2【制作过程】

1."宋词满江红赏析"网页的HTML结构代码

实战演练—制作“宋词满江红赏析”网页2【制作过程】

2.编写基础的CSS代码body定义了背景颜色。h2和h3分别设置了二级和三级标题的字体大小和颜色。p规定了段落的字体大小和行高，增强了文本的可读性。li移除了列表项的标记并调整了行高。.tubiaoimg统一了图标的尺寸。.tubiaoa使链接在一行内水平排列。

进阶训练—制作“端午节的由来”网页3【拓展学习指导】

1.图片居中的处理图片元素img是内联元素，无法用text-align:center来设置居中。因此可以通过对body设置居中，来将页面内容元素居中。其它页面内容元素通过text-align:left来设置左对齐。2.标题加下边框标题元素是块级元素，是具有宽度、高度、边框，且可以设置内、外边距。边框是：border，可以分为上（top）、下（bottom）、左（left）、右（right）。这里需要加下边框：border-bottom。

进阶训练—制作“端午节的由来”网页3【需求说明】

本次任务主要是利用HTML和CSS等知识点完成“端午节的由来”网页的制作。网页的效果是中心对齐的布局，配有标题下划线、图文混排以及列表项的详细解释。通过设置背景图像、调整段落首行缩进、行高和文字对齐方式，增强了页面的可读性和美观性。同时，通过CSS伪类:hover实现了链接鼠标悬停时的视觉效果，提升了用户交互体验。保存并浏览网页，预览效果如图所示：

进阶训练—制作“端午节的由来”网页3【制作思路】

"端午节的由来"网页制作思路是以h1元素开始，定义了页面的主标题。紧接着是一个span元素，标注了内容的来源。p元素包含了端午节名称含义和历史背景的详细解释。还包含了一个img元素，用于插入一张与端午节相关的图片，alt属性提供了图片的替代文本。定义列表dl由dt（定义项）和dd（定义描述）组成，提供了端午节不同名称的解释和历史背景。每个dt元素内都包含一个指向外部链接的<a>标签。可以分成3步来完成：首先制作页面HTML结构代码，定义网页的基本框架和内容布局；其次编写基础CSS代码，设置页面的宽度、背景图像和基础文本样式；接着为定义列表样式和调整链接样式，如列表项格式化；设置链接正常状态和鼠标悬停时的视觉效果，以增强页面的交互性。

进阶训练—制作“端午节的由来”网页3【制作过程】

1."端午节的由来"网页的HTML结构代码

进阶训练—制作“端午节的由来”网页3【制作过程】

2.编写基础的CSS代码 body选择器设置了页面宽度为680像素，文本居中对齐，字体大小为14像素，并添加了背景图像。h1选择器为标题添加了底部3像素的虚线边框。img选择器统一了页面中所有图片的宽度为200像素。p选择器设置了段落首行缩进24像素，行高24像素，并使文本左对齐。

进阶训练—制作“端午节的由来”网页3【制作过程】

3.定义列表和链接样式 dl选择器设置了列表的文本左对齐、行高为1.4倍，以及文本颜色为黑色。dla选择器移除了链接的下划线并设置链接颜色为黑色。dla:hover选择器为鼠标悬停在链接上时的样式添加了蓝色和下划线，增强了交互性。设计并制作如图所示的“李大钊人物介绍”网页。页面使用header、div、img、p等元素制作“李大钊人物介绍”网页。页面的头部通过header定义，包含h1元素，明确了页面的主题。在页面内容中展示李大钊的图片，提供了详细的人物介绍，包括他的生平、教育背景和对中国共产主义运动的贡献4动手实践—制作“李大钊人物介绍”网页4小结知识准备——标记选择器和类选择器实战演练——制作“宋词满江赏析”网页进阶训练——制作“端午节的由来”网页动手实践——“李大钊人物介绍”的网页模块四CSS3基础任务2链接伪类网页制作CSSHTML知识准备——链接伪类实战演练——制作“音乐导航栏”网页链接伪类0201进阶训练——制作“中国四大名瓷介绍专栏”网页03动手实践——“侧边导航栏布局”网页041.掌握链接伪类的使用2.熟悉链接伪类制作导航的方法学习目标：链接伪类1.结合中国传统文化元素和现代设计理念，培养学生的文化自信和创新意识，鼓励他们在网页设计中融入中国特色，展现创新能力。2.通过实际的网页设计项目，培养学生的社会责任感和团队协作精神，使他们意识到设计工作对社会的服务价值。3.强化学生的审美素养，提升他们的艺术鉴赏力和设计能力。同时，激发学生的终身学习意识，鼓励他们不断更新知识和技能，以适应快速变化的信息技术领域。思政目标：链接伪类

知识准备--课程引入1哈肯·维姆·莱（HåkonWiumLie）在1994年提出了CSS的最初想法，并与当时正在设计Argo浏览器的伯特·波斯（BertBos）合作，共同创造了CSS的最初版本。CSS的发展过程中，W3C组织对CSS的发展和标准化起到了关键作用，1996年12月，W3C推出了CSS规范的第一版本，1997年颁布了CSS1.0版本，而1998年发布了CSS2版本。蒂姆·伯纳斯·李（TimBerners-Lee）

1

张鑫旭中国前端开发社区中的重要人物之一，以其深厚的专业知识和对CSS的深刻理解而闻名。他所著的《CSS世界》一书，不仅系统性地介绍了CSS的基础概念和应用方法，还深入探讨了CSS在现代网页设计中的核心作用和高级技巧。这本书成为了许多前端开发者学习和掌握CSS不可或缺的资源。知识准备--课程引入张鑫旭

2伪类

伪类是一种CSS选择器，它允许开发者根据元素的特定状态或属性来选择和样式化元素。伪类用冒号“：”来表示。其语法规则为：标签名:伪类名{声明;}知识准备—链接伪类1

2静态伪类

静态伪类是一些特定于HTML元素的伪类，它们不随用户交互而改变。静态伪类通常指的是:link和:visited。动态伪类动态伪类是基于用户的交互行为，如鼠标悬停、点击等。在链接伪类的上下文中。动态伪类主要包括:hover、:active和:focus。知识准备—链接伪类1

2链接伪类

链接伪类是用于给<a>标签（即超链接）添加特殊效果的一种选择器。基本格式：a:link{样式声明;}a:visited{样式声明;}a:hover{样式声明;}a:active{样式声明}a:focus{样式声明;}知识准备—链接伪类1

2知识准备—链接伪类1案例4-4

包含所有链接伪类的样式的用法

2链接伪类之间的优先级和顺序

当多个伪类同时应用于同一个链接时，它们的优先级和顺序非常重要。按照CSS规范，链接伪类的优先级和顺序是:link->:visited->:hover（鼠标悬停时）->:active（点击时）。知识准备—链接伪类1

实战演练—制作“音乐导航栏”网页2【需求说明】

本次任务主要是利用HTML和CSS等知识点完成"音乐导航"网页的制作。通过HTML定义网页结构，使用使用float属性实现列表项的横向排列，:hover伪类实现鼠标悬停效果，:active伪类设置点击时的字体颜色变化，以及去除链接的下划线和设置默认字体颜色，增强用户体验。保存后浏览网页，效果如图所示：

实战演练—制作“音乐导航栏”网页2【制作思路】

"音乐导航"网页制作思路为用一个div元素作为容器，该div元素被赋予了"nav"这个类名，通常用于表示导航栏的容器。在div内部，有一个ul无序列表，它包含了六个li列表项，每个列表项代表导航栏中的一个链接选项。可以分成4步来完成：首先制作页面HTML结构代码，定义了导航栏的容器div，并在其中嵌套了一个无序列表ul，每个列表项li代表一个导航链接。其次编写基础CSS代码，设置了导航栏的宽度、高度和背景颜色，以及列表的基本样式。接着定义导航栏中链接的样式和交互效果。为列表项设置浮动属性，实现横向排列，并定义了鼠标悬停和点击时的交互效果，调整了链接的默认样式，包括字体颜色和去除下划线，以提升页面的视觉效果和用户交互体验。

实战演练—制作“音乐导航栏”网页2【制作过程】

1."音乐导航"网页的HTML结构代码

实战演练—制作“音乐导航栏”网页2【制作过程】

2.编写基础的CSS代码定义网页中导航栏的基本样式。.nav类设置了导航栏的宽度为800像素，高度为50像素，上边距为5像素，背景颜色为深灰色。ul选择器移除了列表的上边距和内联填充的起始值。.nav>ul>li选择器为导航栏中的列表项设置了浮动到左边，移除了列表项的默认样式，居中对齐文本，设置了固定的高度、行高、宽度，字体大小和字体族。这些样式共同作用于导航栏，使其具有整齐划一的外观和布局。

实战演练—制作“音乐导航栏”网页2【制作过程】

3.定义导航栏中链接的样式和交互效果a选择器设置链接的默认颜色为黑色，并移除了下划线，使得链接看起来更简洁。ul>li>a:active选择器定义了链接在被点击时的字体颜色变为橙色，增加了视觉反馈。ul>li:hover选择器则设置了当鼠标悬停在列表项上时，背景颜色变为金色。

进阶训练—制作“中国四大名瓷介绍专栏”网页3【拓展学习指导】

导航栏是网站和应用程序中的核心组件，它帮助用户快速找到他们想要的信息或功能。导航栏通常使用无序列表ul元素和列表项li元素来构建，每个列表项包含一个链接a元素。常见的导航栏类型有：顶部导航栏、侧边导航栏、底部导航栏、下拉导航栏、标签页导航、多层次导航栏等。

23案例4-5

顶部导航栏这是最常见的导航栏类型，通常位于页面的顶部。进阶训练—制作“中国四大名瓷介绍专栏”网页

23案例4-6侧边导航栏侧边导航栏垂直排列在页面的一侧，常见于博客、文档或具有大量分类的网站。进阶训练—制作“中国四大名瓷介绍专栏”网页

23案例4-7底部导航栏底部导航栏位于页面底部，通常包含网站的基本信息和链接。进阶训练—制作“中国四大名瓷介绍专栏”网页

23案例4-8下拉导航栏下拉导航栏允许用户通过点击主导航项来展开更多的子菜单项。进阶训练—制作“中国四大名瓷介绍专栏”网页

23案例4-10多层次导航栏多层次导航指的是一种导航结构，其中包含一个或多个级别的菜单项，每个菜单项可能进一步包含子菜单项。进阶训练—制作“中国四大名瓷介绍专栏”网页

进阶训练—制作“中国四大名瓷介绍专栏”网页3【需求说明】

本次任务主要是利用HTML、CSS和层级列表等知识点完成"中国四大名瓷介绍专栏"网页的制作。通过HTML构建了页面的基本结构，包括主导航和子导航的层级关系。CSS用于设置页面的布局和样式，如导航栏的宽度、高度、背景色，以及列表项的浮动、对齐和交互效果。特别地，利用CSS的:hover伪类和display属性实现了鼠标悬停时显示下级菜单的动态效果。保存并浏览网页，预览效果如图所示：

进阶训练—制作“中国四大名瓷介绍专栏”网页3【制作思路】

"中国四大名瓷介绍专栏"网页制作思路为用一个div元素作为容器，添加了一个具有层级结构的导航菜单，用于展示“中国四大名瓷”专栏的主要内容和子主题。内部的ul元素定义了一个无序列表，其中包含了几个li列表项，每个列表项代表一个导航选项。可以分成4步来完成：首先制作页面HTML结构代码，定义了主导航和嵌套的子导航，以及对应的链接。其次添加基础CSS，设置了导航栏的尺寸、背景色和列表项的样式。接着为导航链接添加样式，如鼠标悬停时改变背景色和链接颜色，以及去除下划线。最后，实现了下拉菜单的显示逻辑，通过CSS的:hover伪类控制子菜单的显示与隐藏，增强了导航的动态交互性。

进阶训练—制作“中国四大名瓷介绍专栏”网页3【制作过程】

1."中国四大名瓷介绍专栏"网页的HTML结构代码

进阶训练—制作“中国四大名瓷介绍专栏”网页3【制作过程】

2.编写基础CSS代码、.nav类设置了导航栏的宽度为800像素，高度为50像素，上边距为20像素，背景颜色为深灰色。ul选择器移除了列表的上边距和内联填充的起始值。.nav>ul>li选择器为导航栏中的列表项设置了浮动到左边，移除了列表项的默认样式，使文本居中对齐，设置了固定的高度、行高、宽度，字体大小和字体族。这些样式共同作用于导航栏，使其具有整齐划一的外观和布局。

进阶训练—制作“中国四大名瓷介绍专栏”网页3【制作过程】

3.为导航链接添加样式a选择器定义了链接的默认颜色为黑色，并移除了下划线，使得链接在页面上看起来更整洁。ul>li>a:active选择器指定了当链接被激活（即用户点击时）的颜色变为橙色，提供了视觉反馈。ul>li:hover选择器则定义了当鼠标悬停在列表项上时，该列表项的背景颜色变为金色，增强了用户与导航栏的交互体验。设计并制作如图所示的“侧边导航栏布局”网页。页面使用div、ul、li、a等元素制作“侧边导航栏布局”网页。由一个侧边导航栏和一个横幅广告区域组成，具有层级分明的导航菜单和视觉吸引的横幅图像，满足用户快速浏览和选择不同商品类别的需求。在banner图片的左侧布局导航栏，当鼠标指针移动到侧边菜单项上时，出现相应的二级菜单项。4动手实践—制作“侧边导航栏布局”网页4小结知识准备——链接伪类实战演练——制作“音乐导航栏”网页进阶训练——制作“中国四大名瓷介绍专栏”网页动手实践——“侧边导航栏布局”的网页模块四CSS3基础任务3id选择器、伪元素选择器和表格样式网页制作CSSHTML知识准备——id选择器、伪元素选择器和表格样式实战演练——制作“BMI中国标准”网页id选择器、伪元素选择器和表格样式0201进阶训练——制作“课程表”网页03动手实践——制作“经典汽车”的网页041.熟悉id选择器2.熟悉伪选择器3.熟悉表格样式的应用学习目标：id选择器、伪元素选择器和表格样式1.结合中国传统文化元素和现代设计理念，培养学生的文化自信和创新意识，鼓励他们在网页设计中融入中国特色，展现创新能力。2.通过实际的网页设计项目，培养学生的社会责任感和团队协作精神，使他们意识到设计工作对社会的服务价值。3.强化学生的审美素养，提升他们的艺术鉴赏力和设计能力。同时，激发学生的终身学习意识，鼓励他们不断更新知识和技能，以适应快速变化的信息技术领域。思政目标：id选择器、伪元素选择器和表格样式

知识准备--课程引入1哈肯·维姆·莱（HåkonWiumLie）在1994年提出了CSS的最初想法，并与当时正在设计Argo浏览器的伯特·波斯（BertBos）合作，共同创造了CSS的最初版本。CSS的发展过程中，W3C组织对CSS的发展和标准化起到了关键作用，1996年12月，W3C推出了CSS规范的第一版本，1997年颁布了CSS1.0版本，而1998年发布了CSS2版本。蒂姆·伯纳斯·李（TimBerners-Lee）

1

张鑫旭中国前端开发社区中的重要人物之一，以其深厚的专业知识和对CSS的深刻理解而闻名。他所著的《CSS世界》一书，不仅系统性地介绍了CSS的基础概念和应用方法，还深入探讨了CSS在现代网页设计中的核心作用和高级技巧。这本书成为了许多前端开发者学习和掌握CSS不可或缺的资源。知识准备--课程引入张鑫旭

2id选择器

ID选择器是CSS中用于选择具有特定ID属性的HTML元素的一种选择器。每个ID在页面中应该是唯一的。

ID选择器的基本语法格式如下：

#elementId{/*CSS样式规则*/}

这里：#符号表示这是一个ID选择器；elementId是HTML元素的ID属性值。知识准备—id选择器、伪元素选择器和表格样式1

2伪元素选择器

伪元素选择器是CSS中用来选择和样式化元素的特定部分或创建与元素相关的虚拟内容的一种选择器。它们以两个冒号::开头。

伪元素选择器的基本语法格式如下：

selector::pseudo-element{

/*CSS样式规则*/

}

这里：selector是基本选择器，可以是元素选择器、类选择器或ID选择器等；pseudo-element是伪元素选择器的名称。知识准备—id选择器、伪元素选择器和表格样式1

2常见的伪元素选择器

::before 在元素的内容前面插入新内容 ::after 在元素的内容后面插入新内容 ::first-letter选择元素内文本的第一个字母 ::selection 选择用户选中的文本部分知识准备—id选择器、伪元素选择器和表格样式1

2表格

表格是网页中展示数据的一种重要方式。CSS提供了多种属性来增强表格的可读性和美观性，包括设置边框、背景、列宽、行高以及单元格间距等。知识准备—id选择器、伪元素选择器和表格样式1

2表格元素选择器

table

应用于整个表格元素

thead

用于设置表格头部（thead元素）的样式 tbody用于设置表格主体（tbody元素）的样式 tfoot针对表格底部（tfoot元素）的样式设置 tr 用于设置表格中行（tr元素）的样式 th 用于表头单元格 td 用于普通单元格知识准备—id选择器、伪元素选择器和表格样式1

2基本表格样式属性

border

用于定义表格的边框样式，包括边框的宽度、样式和颜色border-collapse

控制表格的边框是合并为单一线条还是保持分离width

指定表格的总宽度height

指定表格的高度background-color

用于设置表格或单元格的背景颜色border-collapse决定表格的边框是合并为单一线条还是保持分离colspan 在td或th元素上使用，指定一个单元格横跨的列数。rowspan 在td或th元素上使用，指定一个单元格纵跨的行数知识准备—id选择器、伪元素选择器和表格样式1

2知识准备—id选择器、伪元素选择器和表格样式1案例4-11

表格边框的合并与分离

2知识准备—id选择器、伪元素选择器和表格样式1案例4-12

合并单元格

实战演练—制作“BMI中国标准”网页2【需求说明】

本次任务主要是利用HTML结构设计、CSS样式布局、ID选择器和伪元素选择器等知识点完成“BMI中国标准”网页的制作。保存后浏览网页，效果如图所示：

实战演练—制作“BMI中国标准”网页2【制作思路】

"BMI中国标准"网页制作思路可以分成4步来完成：首先制作页面HTML结构代码：定义了网页的基本骨架。其次编写基础CSS代码，为网页的body和header元素设置了基础样式。接着为页面的各个部分添加样式，包括字体、背景色、边距和内边距等，确保了页面的可读性和美观性。最后使用ID选择器和伪元素选择器增强页面效果：通过ID选择器为特定元素，如标题和表格，应用了定制化的样式。同时，利用伪元素::before和::after在标题前添加了特殊标记。

实战演练—制作“BMI中国标准”网页2【制作过程】

1."BMI中国标准"网页的HTML结构代码

实战演练—制作“BMI中国标准”网页2【制作过程】

2.编写基础的CSS代码为网页的body和header元素设置了基础样式。body采用Arial字体，行高1.6倍，确保文本易读；移除外边距和内边距，使内容填充整个页面宽度；文本颜色设为深灰，提高可读性。header则采用鲜明蓝色背景，白色文字，以增强视觉冲击力，确保标题醒目突出。通过在上下添加内边距，header与其他内容分隔，并通过文本居中对齐，实现页面的对称美观。

实战演练—制作“BMI中国标准”网页2【制作过程】

3.为页面的各个部分添加样式为网页中的特定元素定义了清晰的样式，增强了页面的视觉效果和用户体验。#main-title移除了标题的外边距，使其紧密贴合页面顶部。#bmi-intro通过添加内边距和浅灰色背景，为BMI介绍提供了清晰的信息框。#bmi-table设置了100%宽度和边框合并，确保表格充满容器且外观整洁，其th和td通过统一的边框、内边距和左对齐文本，提升了数据的可读性，表头背景则用浅灰色区分。最后，#footer通过居中对齐文本、添加内边距和使用深色背景与白色文字，创造了一个突出的页脚区域。

实战演练—制作“BMI中国标准”网页2【制作过程】

4.使用ID选择器和伪元素选择器增强页面效果利用伪元素::before和::after为网页添加了视觉和法律声明的增强。#main-title::before在主标题前插入了黄色加粗的“【BMI】”标记，通过content属性实现，增加了标题的吸引力。#footer::after在页脚后添加了版权符号和书籍名称，同样使用content属性，并以5像素的左边距分隔，确保版权信息清晰可见。

进阶训练—制作“课程表”网页3【拓展学习指导】

网格布局（GridLayout）是CSS3的一部分，提供了一种在网页上创建复杂二维布局的方法。容器：当一个元素的display属性被设置为grid时，这个元素就成为了一个网格容器。它定义了网格的行和列，形成了一个网格定义context。项目：在网格容器内，直接子元素自动成为网格项目。这些项目可以被放置在容器的网格单元格中，它们可以占据一个或多个网格单元格。

23案例4-13

网格系统基础布局进阶训练—制作“课程表”网页

进阶训练—制作“课程表”网页3【需求说明】

本次任务利用CSSGridLayout和媒体查询等知识点，完成了一个响应式的“课程表”网页制作。网页展示了一个5行6列的布局，顶部是跨列的标题“时间/星期”，下方是一周五天的课程安排。通过CSSGrid的auto和repeat功能，实现了列的自适应设计，同时gap属性在项之间提供了间隔。响应式设计确保了在宽度小于768px的屏幕上，课程表能够智能调整为单列布局，优化了移动设备上的显示效果。整个课程表以整洁、清晰的格式呈现，便于用户快速查找每天的课程信息。保存并浏览网页，预览效果如图所示：

进阶训练—制作“课程表”网页3【制作思路】

"课程表"网页制作思路是定义了一个名为course-schedule的课程表布局，使用CSSGridLayout来组织内容。div元素被用作网格容器，其中包含多个子div元素，这些子元素代表课程表的不同部分。.header类定义了头部单元格，其中.time用于显示时间或星期，而.day用于表示周一至周五的每一天。.course-item类用于课程内容的单元格，展示了具体的课程安排和时间。例如，时间段“8:00-9:40”后紧跟着是该时段的课程名称，如“高等数学”、“英语”等。每个.course-item都直接放置在.course-schedule容器内。

进阶训练—制作“课程表”网页3【制作过程】

1."课程表"网页的HTML结构代码

进阶训练—制作“课程表”网页3【制作过程】

2.编写基础的CSS代码将网格容器.course-schedule的display设置为grid，激活网格布局。grid-template-columns:autorepeat(5,1fr);创建六列，第一列为自动大小，其余五列为等宽。gap:10px;设置列与行之间的间隙。max-width:1200px;限制容器最大宽度并水平居中。padding和background设置内边距和背景色。box-shadow添加阴影效果。font-family指定默认字体。

进阶训练—制作“课程表”网页3【制作过程】

3.细化网格内各个项的样式设置了课程表中不同部分的样式。.header类为头部元素设置了蓝色背景、白色文字、内边距以及居中对齐。.time和.day类添加了边框和粗体文字，以区分不同的时间/星期单元格。.course-item类为课程内容单元格设置了内边距、浅灰色背景和边框，同样居中对齐。.title类通过grid-column属性使标题跨满六列，并设置了深蓝色背景。

进阶训练—制作“课程表”网页3【制作过程】

4.媒体查询实现响应式设计定义了一个媒体查询，用于在屏幕宽度小于或等于768px时调整课程表的布局。.course-schedule的列布局由原来的六列改为单列布局，即grid-template-columns:1fr;，使所有内容在一列内垂直堆叠。.header和.course-item的grid-column属性设置为1，意味着这些元素也将在小屏幕上占据整行，从而优化移动端的显示效果。设计并制作如图4-38所示的“经典汽车”栏目网页。页面使用div、h2、em、a、ul、li、img等元素制作“经典汽车展示”网页。页面采用两列布局，展示多款车型图片。页面顶部设有搜索栏，底部文字提及了车型评价和用户心得。浅绿色背景赋予清新自然感。整体设计简洁，突出车型特色，为用户提供了直观的汽车浏览体验。这种布局设计不仅美观，而且方便用户快速浏览和选择感兴趣的汽车型号。4动手实践—制作“经典汽车”网页4小结知识准备——id选择器、伪元素选择器和表格样式实战演练——制作“BMI中国标准”网页进阶训练——制作“课程表”网页动手实践——“经典汽车”的网页模块四CSS3基础任务4文本样式网页制作CSSHTML知识准备——文本样式实战演练——制作“散文欣赏”网页文本样式0201进阶训练——制作“中华剪纸”网页03动手实践——制作“大学生专属教程”的网页041.掌握字体样式属性的使用2.掌握文本外观属性的使用3.掌握文本对齐属性的使用4.掌握文本装饰属性的使用5.掌握文本缩进属性的使用6.熟练文本样式的应用学习目标：文本样式1.结合中国传统文化元素和现代设计理念，培养学生的文化自信和创新意识，鼓励他们在网页设计中融入中国特色，展现创新能力。2.通过实际的网页设计项目，培养学生的社会责任感和团队协作精神，使他们意识到设计工作对社会的服务价值。3.强化学生的审美素养，提升他们的艺术鉴赏力和设计能力。同时，激发学生的终身学习意识，鼓励他们不断更新知识和技能，以适应快速变化的信息技术领域。思政目标：文本样式

知识准备--课程引入1哈肯·维姆·莱（HåkonWiumLie）在1994年提出了CSS的最初想法，并与当时正在设计Argo浏览器的伯特·波斯（BertBos）合作，共同创造了CSS的最初版本。CSS的发展过程中，W3C组织对CSS的发展和标准化起到了关键作用，1996年12月，W3C推出了CSS规范的第一版本，1997年颁布了CSS1.0版本，而1998年发布了CSS2版本。蒂姆·伯纳斯·李（TimBerners-Lee）

1

张鑫旭中国前端开发社区中的重要人物之一，以其深厚的专业知识和对CSS的深刻理解而闻名。他所著的《CSS世界》一书，不仅系统性地介绍了CSS的基础概念和应用方法，还深入探讨了CSS在现代网页设计中的核心作用和高级技巧。这本书成为了许多前端开发者学习和掌握CSS不可或缺的资源。知识准备--课程引入张鑫旭

2字体样式属性

字体样式属性是CSS中用于定义网页文本显示方式的一系列属性。这些属性可以改变文本的字体大小、字体族、粗细、样式等。字体大小（font-size）用于设置文本的字体大小字体族（font-family）用于指定元素的字体族字体粗细（font-weight）用于设置文本的粗细字体样式（font-style）用于设置文本的斜体样式字体变体（font-variant）用于设置小型大写字母的显示方式简写属性（font）允许你在一个声明中设置多个字体属性知识准备—文本样式1

2文本外观属性

文本外观属性是CSS中用于定义文本元素外观的一系列属性。文本颜色（color）用于设置文本的颜色文本间距（letter-spacing和word-spacing）用于设置字符之间的间距文本对齐（text-align）用于设置文本的水平对齐方式文本装饰（text-decoration）用于为文本添加装饰效果文本转换（text-transform）用于控制文本的大小写行高（line-height）用于设置文本的行间距文本缩进（text-indent）用于设置首行文本的缩进知识准备—文本样式1

实战演练—制作“散文欣赏”网页2【需求说明】

本次任务主要是利用HTML和CSS等知识点完成散文欣赏网页的制作。页面采用居中对齐的布局，具有背景图和适当的文本缩进、行高设置，以增强阅读体验。保存后浏览网页，效果如图所示：

实战演练—制作“散文欣赏”网页2【制作思路】

“散文欣赏”网页制作思路是用一个div元素作为容器，该div元素被赋予了"box"这个类名，包含散文标题、作者信息、散文内容和图片信息等。h1元素定义了页面的主标题，这里是"故乡"。span元素用来展示附加信息，如作者名"鲁迅"。p元素包含两个段落，第一个段落是散文的开头，描述了一个生动的场景；第二个段落则是作者对过去的回忆。img元素用于插入图片，src属性指定图片的路径，但这里使用的是相对路径"timg.jpg"。ul元素定义了一个无序列表，其中包含散文中提到的关键元素作为列表项li，每个列表项包含一个a元素。

实战演练—制作“散文欣赏”网页2【制作过程】

1.“散文欣赏”网页的HTML结构代码

实战演练—制作“散文欣赏”网页2【制作过程】

2.编写基础CSS代码为box类的div元素的设置样式。宽度为600像素，为内容提供固定宽度的容器。将.box内所有文本水平居中对齐，适用于标题和段落等。设置.box内所有文本的默认字体大小为14像素，影响可读性。为.box设置背景图像为"bg.jpg"，图像水平重复铺满整个元素宽度，起始位置在元素的左下角。

实战演练—制作“散文欣赏”网页2【制作过程】

3.为各个子元素添加细节样式为.box类中的<h1>元素设置背景颜色为浅灰色(#ddd)。为.box类中的p元素设置首行缩进24像素，行高为24像素，文本对齐方式为左对齐。为.box类中的ul元素设置文本对齐方式为左对齐，行高为1.4，适用于列表项的垂直间距。为.box类中的ul元素内的<a>标签设置默认文本颜色为深灰色(#666)，移除下划线。为.box类中的ul元素内的a元素在鼠标悬停时改变文本颜色为蓝色(#0000ff)，并添加下划线，增强交互性。

进阶训练—制作“中华剪纸”网页3【拓展学习指导】

CSS中用于增强文本视觉效果的高级属性，包括文本阴影、文本溢出处理和自定义字体的使用。文本阴影：用于为网页上的文本添加阴影效果，增强视觉层次感和吸引力。text-shadow属性的基本语法如下：text-shadow:[horizontal-offset][vertical-offset][blur-radius][spread-radius][color];horizontal-offset:水平偏移量，表示阴影相对于文本的水平位置。vertical-offset:垂直偏移量，表示阴影相对于文本的垂直位置。blur-radius:模糊半径，表示阴影的模糊程度。spread-radius:扩展半径，表示阴影的扩散大小（可选）。color:阴影的颜色。

进阶训练—制作“中华剪纸”网页3【拓展学习指导】

文本溢出处理：在网页设计中，经常会遇到文本内容超出其容器宽度的情况。有效的文本溢出处理可以提升用户体验，确保信息的可读性，同时保持页面布局的整洁。overflow-wrap：控制长单词或无法在容器内完整显示的URL的换行行为。overflow-wrap属性的基本语法如下：overflow-wrap:normal|break-word;

进阶训练—制作“中华剪纸”网页3【拓展学习指导】

text-overflow：控制当文本溢出时如何显示，例如使用省略号或自定义字符串。text-overflow属性的基本语法如下：text-overflow:clip|ellipsis|string;ellipsis:会在文本溢出时显示省略号（...）。clip：直接裁剪超出部分。

进阶训练—制作“中华剪纸”网页3【拓展学习指导】

white-space：控制元素内的空白如何处理。white-space属性的基本语法如下：white-space:normal|nowrap|pre|pre-wrap|pre-line;。

进阶训练—制作“中华剪纸”网页3【拓展学习指导】

自定义字体是指在网页上使用非浏览器默认字体，以提供独特的视觉体验。通过CSS的@font-face规则，开发者可以加载并应用在线字体或本地字体文件。@font-face规则语法：@font-face{font-family:'FontName';/*定义字体名，用于CSS中引用*/src:url('font-file-path.woff2')format('woff2'),/*指定字体文件路径和格式*/url('font-file-path.woff')format('woff'),url('font-file-path.ttf')format('truetype');/*可以包含多个格式以增加兼容性*/ font-weight:normal;/*字体粗细*/ font-style:normal;/*字体风格*/}

进阶训练—制作“中华剪纸”网页3【需求说明】

本次任务主要是利用CSS样式表、自定义字体、文本阴影、背景渐变等知识点完成“中华剪纸”网页的制作。网页的效果是展示具有中国传统文化特色的剪纸艺术，通过自定义字体和文本阴影增强标题和段落的视觉效果，同时使用背景渐变技术为特定文本添加色彩丰富的背景效果。保存并浏览网页，预览效果如图所示：

进阶训练—制作“中华剪纸”网页3【制作思路】

"中华剪纸"网页制作思路是布局两个具有web类的div容器，每个容器代表页面中的一个主要内容区块。第一个div包含一个h3标题和一个p段落，分别介绍了中华剪纸的起源和它在中国文化中的意义。第二个div包含一个带有额外icon类的h3标题，一个span元素显示日期，以及一个img元素和另一个具有chinese-papercutting类的div。可以分成4步来完成：首先制作页面HTML结构代码，定义了页面的主要内容和布局框架；其次编写基础CSS代码，设置页面的字体、颜色、边距和内边距等，为页面提供基本的样式；接着为页面添加自定义字体和文本效果，如@font-face规则引入特色字体，text-shadow属性为文本添加阴影，增强视觉效果；最后通过CSS样式增强页面细节，如利用background-clip和linear-gradient为特定文本创建彩色渐变背景效果。

进阶训练—制作“中华剪纸”网页3【制作过程】

1.“中华剪纸”网页的HTML结构代码

进阶训练—制作“中华剪纸”网页3【制作过程】

2.编写基础CSS代码定义了整个页面和特定.web类的基本样式。通用选择器*将内边距和外边距设置为0，消除了浏览器默认的样式差异。body选择器设置了页面的默认字体大小和颜色。.web类定义了一个宽度为600px的容器，带有1px的蓝色边框，内边距为15px，左边距和上边距分别为20px和5px。该容器隐藏了溢出内容，行高和首行缩进设置为2em，增加了文本的可读性。

进阶训练—制作“中华剪纸”网页3【制作过程】

3.为页面添加自定义字体和文本效果@font-face规则引入了一个自定义字体myFonts，并指定了字体文件的路径和样式属性，但font-size在@font-face中是无效的。.webh3选择器为.web类中的h3标签设置了下边框和内边距，并应用了自定义字体。.webp选择器为段落文本添加了文本阴影效果。.web.icon选择器为带有icon类的元素设置了背景图像和文本缩进。.webspan选择器定义了日期的字体样式和外边距。.webimg选择器为图片设置了宽度、内边距、背景色、边框，并使其浮动到左侧。

进阶训练—制作“中华剪纸”网页3【制作过程】

4.通过CSS样式增强页面细节定义了一个类.chinese-papercutting的样式。它将字体族设置为微软雅黑，作为首选字体，并指定了一个通用的无衬线字体sans-serif作为备选。颜色被设置为透明，这样文字本身不会有颜色显示。背景是一个从左到右的线性渐变，颜色从#e62b1e渐变到#eca3ee。background-clip属性设置为text，意味着渐变背景将仅覆盖文本，而不是整个元素的背景区域，从而创建一个文字颜色随背景渐变变化的效果。设计并制作如图4-46所示的“大学生专属教程”栏目网页。页面使用div、h1、img、p、ul、li、a等元素制作了“大学生专属教程”网页。页面结构由一个新闻或教程的标题、一个示例图片、一段引导性文字和四个社团海报排版技巧的列表组成，具有视觉吸引力和信息指导性，满足用户获取社团海报设计灵感和技巧的需求。4动手实践—制作“大学生专属教程”网页4小结知识准备——文本样式实战演练——制作“散文欣赏”网页进阶训练——制作“中华剪纸”网页动手实践——“大学生专属教程”的网页模块四CSS3基础任务5复合选择器、通配符选择器网页制作CSSHTML知识准备——复合选择器、通配符选择器实战演练——制作“寓言故事”网页复合选择器、通配符选择器0201进阶训练——制作“中华武术”网页03动手实践——制作“网页页面设计思路”的网页041.掌握复合选择器的使用2.掌握通配符选择器的使用学习目标：复合选择器、通配符选择器1.结合中国传统文化元素和现代设计理念，培养学生的文化自信和创新意识，鼓励他们在网页设计中融入中国特色，展现创新能力。2.通过实际的网页设计项目，培养学生的社会责任感和团队协作精神，使他们意识到设计工作对社会的服务价值。3.强化学生的审美素养，提升他们的艺术鉴赏力和设计能力。同时，激发学生的终身学习意识，鼓励他们不断更新知识和技能，以适应快速变化的信息技术领域。思政目标：复合选择器、通配符选择器

知识准备--课程引入1哈肯·维姆·莱（HåkonWiumLie）在1994年提出了CSS的最初想法，并与当时正在设计Argo浏览器的伯特·波斯（BertBos）合作，共同创造了CSS的最初版本。CSS的发展过程中，W3C组织对CSS的发展和标准化起到了关键作用，1996年12月，W3C推出了CSS规范的第一版本，1997年颁布了CSS1.0版本，而1998年发布了CSS2版本。蒂姆·伯纳斯·李（TimBerners-Lee）

1

张鑫旭中国前端开发社区中的重要人物之一，以其深厚的专业知识和对CSS的深刻理解而闻名。他所著的《CSS世界》一书，不仅系统性地介绍了CSS的基础概念和应用方法，还深入探讨了CSS在现代网页设计中的核心作用和高级技巧。这本书成为了许多前端开发者学习和掌握CSS不可或缺的资源。知识准备--课程引入张鑫旭

2复合选择器

复合选择器是一种特殊的选择器，它允许你将多个简单选择器组合在一起，以选择特定的HTML元素。后代选择器使用空格分隔两个选择器，表示后代元素的选择基本语法格式：选择器A选择器B{样式属性:属性值;}知识准备—复合选择器、通配符选择器1

2复合选择器

子选择器使用>符号，用来选择作为另一个元素直接子元素的元素。基本语法格式：选择器A>选择器B{样式属性:属性值;}知识准备—复合选择器、通配符选择器1

2复合选择器

相邻兄弟选择器使用+符号，用来选择紧接在另一个元素后的兄弟元素。基本语法格式：选择器A+选择器B{ 样式属性:属性值;}知识准备—复合选择器、通配符选择器1

2复合选择器

通用兄弟选择器使用~符号，用来选择所有跟在另一个元素后的兄弟元素。基本语法格式：选择器A~选择器B{样式属性:属性值;}知识准备—复合选择器、通配符选择器1

2复合选择器

属性选择器允许你根据元素的属性或属性值来选择元素。基本语法格式：选择器[属性名]{样式属性:属性值;}知识准备—复合选择器、通配符选择器1

2通配符选择器

通配符选择器是一种非常强大的工具，它能够匹配文档中的所有元素。通配符选择器使用星号*表示基本语法格式：*{/*样式规则*/}知识准备—复合选择器、通配符选择器1

2同时应用多个样式

同时应用多个样式到页面元素时，CSS的继承和层叠机制确保了样式的一致性和优先级处理。CSS继承是指某些CSS属性值从父元素传递到子元素的过程。CSS层叠是指当多个规则应用于同一元素时，如何确定最终样式的过程。知识准备—复合选择器、通配符选择器1

实战演练—制作“寓言故事”网页2【需求说明】

本次任务主要是利用HTML、CSS等知识点完成“寓言故事”网页的制作。网页的效果是在居中的页面布局中展示寓言故事集的标题和导航菜单，每个寓言故事作为一个独立的章节，配有背景图片和文本内容。保存后浏览网页，效果如图所示：

实战演练—制作“散文欣赏”网页2【制作思路】

"寓言故事集"网页制作思路是由header、nav、section、footer等语义化元素组成，header元素包含了网站的标题h1和导航栏nav，导航栏中有一个无序列表ul，列出了两个故事的链接，指向页面内的不同部分，即#story1和#story2。section元素定义了页面的主要内容区域，每个section代表一个独立的寓言故事。

实战演练—制作“散文欣赏”网页2【制作过程】

1.“寓言故事”网页的HTML结构代码

实战演练—制作“散文欣赏”网页2【制作过程】

2.定义页面基本样式和头部样式body选择器设置了页面字体、行间距、颜色，并规定了页面的宽度和居中显示，同时添加了边框。header选择器为页眉设置了背景和文字颜色，以及文本居中对齐。headerh1移除了标题的外边距。navul和navulli定义了导航列表的样式，去除默认的列表项目符号和内边距，将列表项显示为行内元素，并在项目之间添加了间隔。nava为导航链接设置了颜色和去除了下划线。这些样式共同作用，创建了一个简洁、清晰的页面头部和导航菜单。

实战演练—制作“散文欣赏”网页2【制作过程】

3.为section元素设置样式定义了.story类选择器的样式，用于设置故事内容区域的外观和布局。margin属性为故事区域上下外边距20px，无左右外边距，确保页面元素间有足够的空间。padding属性为故事文本内边距20px，创建舒适的阅读空间。border属性添加了1像素的灰色边框。background属性设置了背景图片，background-size:cover;确保图片覆盖整个元素，而background-position-x:center;保证图片在水平方向上居中。.storyp选择器为段落设置了字体大小、行高和首行缩进，增强了文本的可读性。

实战演练—制作“散文欣赏”网页2【制作过程】

4.添加交互效果.story:hover规则为故事内容区域添加了悬停效果，当鼠标悬停时文本会加粗，增强视觉反馈。button选择器定义了按钮的样式，包括背景颜色、文字颜色、内边距和光标形状，以提供清晰的按钮视觉效果和交互提示。button:hover规则为按钮添加悬停效果，改变背景颜色，以提供更明显的交互反馈。.moral类设置了寓意段落的默认不显示和样式，使用display:none;隐藏内容，margin-top和font-style提供间距和字体样式。footer选择器将页脚文本居中对齐，以保持页面设计的整洁和一致性。

进阶训练—制作“中华武术”网页3【拓展学习指导】

网页布局是构建用户界面的基础，它决定了网页内容的组织和呈现方式。一个标准的网页布局通常由以下几个关键部分组成：（1）顶部区域：主要提供品牌识别和导航功能