响应式Web开发项目教程（HTML5+CSS3+Bootstrap）（第3版）课件 第2章 CSS页面样式美化.pptx

第2章CSS页面样式美化《响应式Web开发项目教程（HTML5+CSS3+Bootstrap）（第3版）》

学习目标/Target熟悉CSS的概念，能够归纳CSS的概念和优势了解CSS样式规则，能够说出其组成部分掌握CSS的引入方式，能够将CSS应用于HTML文档掌握基础选择器的使用方法，能够通过基础选择器选择要改变样式的元素掌握字体属性的使用方法，能够灵活运用字体属性设置网页中字体的样式

学习目标/Target掌握字体图标的使用方法，能够在网页中使用各种字体图标掌握文本外观属性的使用方法，能够灵活运用文本外观属性设置网页中文本的样式掌握CSS注释的使用方法，能够在CSS代码中添加注释掌握复合选择器的使用方法，能够根据需要选择具有特定关系的元素掌握伪类选择器的使用方法，能够根据元素的特定状态或位置选择元素

学习目标/Target掌握伪元素选择器的使用方法，能够在特定元素中插入新的内容或样式熟悉CSS的三大特性，能够归纳CSS的三大特性掌握列表样式属性的使用方法，能够通过列表样式属性设置列表的项目符号熟悉CSS标准盒模型，能够归纳CSS标准盒模型的组成部分掌握边框属性的使用方法，能够为图像、文本等添加边框

学习目标/Target掌握内边距属性的使用方法，能够为元素设置内边距掌握外边距属性的使用方法，能够为元素设置外边距掌握盒子的宽度和高度的计算方法，能够计算盒子的宽度和高度掌握box-sizing属性的使用方法，能够计算元素的总宽度和总高度掌握display属性的使用方法，能够更改元素的默认显示方式

学习目标/Target掌握背景属性的使用方法，能够设置背景颜色、背景图像等掌握渐变的使用方法，能够为元素设置渐变效果掌握object-fit属性的使用方法，能够设置元素的显示方式掌握浮动布局的使用方法，能够使用float属性实现浮动布局掌握清除浮动的方法，能够使用clear属性、额外标签法、伪元素法、overflow属性等清除浮动

学习目标/Target熟悉语义化标签，能够归纳常用的语义化标签掌握弹性盒布局的使用方法，能够使用弹性盒布局的相关属性创建响应式页面掌握元素的定位的使用方法，能够为元素设置相对定位、固定定位、绝对定位等掌握层叠等级属性的使用方法，能够调整堆叠元素的显示层级掌握阴影属性的使用方法，能够为元素设置阴影效果

学习目标/Target掌握文章详情页面的制作，能够完成文章详情页面的开发掌握下拉菜单页面的制作，能够完成下拉菜单页面的开发掌握商城首页的制作，能够完成商城首页的开发

章节概述/Summary一个好的网页应该具有良好的视觉效果，让用户在浏览网页时感到舒适。因此，学习如何使用CSS来美化页面样式是至关重要的。通过CSS可以轻松地定义各种样式，如字体、颜色、背景、边框等。本章将详细讲解如何使用CSS来美化页面样式。

目录/Contents2-12-2文章详情页面下拉菜单页面2-3商城首页

文章详情页面项目2-1

项目需求古诗作为传统文化的重要组成部分，具有极高的艺术价值和文化内涵。阅读古诗可以让我们深入地了解不同历史时期和文化背景下的文学特色和审美追求，丰富我们的文学知识，提高我们的文学素养。

项目需求本项目旨在开发一个包含古诗和古诗赏析两部分内容的文章详情页面，其效果如下图所示。

知识储备先定一个小目标！熟悉CSS的概念，能够归纳CSS的概念和优势1.CSS概述

知识储备1.CSS概述CSS（CascadingStyleSheets，串联样式表）是一种用于为HTML中的各种元素设置样式的语言，它可以定义字体、边距、背景等样式。

知识储备1.CSS概述CSS与HTML相结合可以实现样式与结构分离，有利于样式的重用以及网页的修改与维护。此外，CSS可以让多个页面共用一份样式代码，实现多个网页的样式同时更新。

知识储备1.CSS概述目前CSS的最新版本为3.0，即CSS3。CSS3的优势如下。①样式属性：CSS3引入了大量的样式属性，使开发者能够轻松实现各种复杂的效果，例如圆角、渐变、阴影等。②响应式设计：CSS3提供了媒体查询和弹性盒布局，使开发者能够更轻松地构建适用于各种移动设备的网页，以提供更好的用户体验。③字体和颜色控制：CSS3引入了@font-face规则，允许开发者使用自定义字体