网页设计与开发（HTML5+CSS3） 课件 项目3 利用CSS美化网页文字.pptx

项目3利用CSS3美化网页文本录行内式的应用内嵌式的应用链入式的应用导入式的应用录标签选择器和类选择器的应用ID选择器的应用通配符选择器的应用标签指定式选择器的应用

0910目录后代选择器的应用并集选择器的应用1112字体样式属性的应用@font-face的应用

1314目录文本外观属性的应用文本装饰与文本阴影属性的应用1516文本溢出属性的应用CSS3层叠性和继承性的应用

17目录CSS3优先级的应用

项目描述仅利用前面所学的HTML5知识无法满足网页设计的需求，网页字体、颜色及更加美观的网页布局、动画等都需要使用CSS3来实现，这样网页就可以实现HTML5结构与CSS3表现的分离，开发者在后期维护代码时也会更加便利。本项目主要利用HTML5搭建网页基本结构，利用CSS3样式相关字体属性美化网页文本内容，完成一个具有图文混排效果的“反诈小课堂”页面。

项目效果图

知识储备

知识目标掌握CSS3样式的书写规则及用法及CSS3基础选择器的用法理解CSS3优先级的概念熟悉并掌握CSS3文本样式属性的用法及意义010203

行内式的应用01

任务描述使用CSS3行内式样式对网页中的文本内容进行修饰，效果如右图所示。

知识点拨?认识CSS01CSS（串联样式表）是美化网页的一种表现形式。它非常灵活，既可以嵌入HTML文档中，也可以是一个单独的外部文件，如果是单独的文件，则必须以.css为后缀。目前，CSS的必威体育精装版版本是CSS3，其通过浏览器进行解析执行，并完全兼容CSS样式规则。CSS3不仅可以设计美观的网页，还能提高网页的性能，最大的优势主要体现在节约成本和提高性能两方面。

知识点拨?CSS3样式规则02设置CSS3样式的具体语法规则如下。选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}除了遵循以上规则，还必须注意CSS代码结构的一些特点，具体如下。CSS3样式中的选择器严格区分字母大小写，按照书写习惯，一般选择器、声明（属性:属性值）都采用小写字母的形式。多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是为了便于增加新样式最好保留。如果属性值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。例如：p{font-family:TimesNewRoman}

知识点拨?引入CSS3样式表03引入CSS3样式表包括4种方式，分别是行内式、内嵌式、链入式、导入式。需要注意的是，CSS3的样式表文件是纯文本文件。任务1～任务4分别对引入CSS3样式表的几种方式进行介绍。行内式的语法规则如下。标签名style=属性1:属性值1;属性2:属性值2;属性3:属性值3;...}在“color:blue;font-size:20px;”中，color（字体颜色）和font-size（字体大小）为属性，冒号后的blue和20px为属性值。color和font-size都是与字体相关的属性，后面将详细讲解。

内嵌式的应用02

任务描述使用CSS3内嵌式样式对网页中的文本内容进行修饰，效果如右图所示。

知识点拨内嵌式01使用style标签在HTML文档头部（head和/head之间）定义CSS3样式的格式如下。headstyletype=text/css选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}/style/head内嵌式将网页结构与样式进行了不完全分离，如果要制作一个较小的网页，则内嵌式是很好的选择；如果要制作一个网站，则不建议使用内嵌式。

知识点拨CSS3注释02位于style标签内的CSS3注释，以/*开始，以*/结束，注释不会在浏览器中显示。例如：/*这是一条单行注释*/p{color:red;}/*将文本颜色设置为红色*/CSS3注释能横跨多行。例如：/*这是一条多行的注释*/

链入式的应用03

任务描述使用CSS3链入式样式引入外部样式表文件，对网页中的文本内容进行修饰，效果如右图所示。

知识点拨链入式是指将所有的样式放在一个或多个以.css为后缀的外部样式表文件中，并在HTML5中使用link标签引入外部样式表文件的方式。这是网站设计中应用最多的一种方式，也是最实用的方式。这种