HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件第3章运用CSS3美化页面

上传人：q*** IP属地：山东上传时间：2026-07-28 格式：PPTX 页数：179 大小：3.16MB 积分：15 举报 版权申诉

HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件第3章运用CSS3美化页面_第2页

HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件第3章运用CSS3美化页面_第3页

HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件第3章运用CSS3美化页面_第4页

HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件第3章运用CSS3美化页面_第5页

已阅读5页，还剩174页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第3章运用CSS3美化页面《HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）》学习目标/Target了解CSS基本概念，能够说出CSS的作用和优势。知识目标技能目标掌握CSS样式规则，能够按照CSS样式规则正确编写CSS代码。熟悉CSS代码书写方式，能够在文档中正确书写CSS代码。掌握CSS基础选择器的用法，能够使用基础选择器准确控制HTML元素。熟悉字体样式属性的用法，能够给网页中的字体设置不同的样式。学习目标/Target熟悉文本外观属性的用法，能够给网页中的文本设置不同的样式。掌握CSS复合选择器的用法，能够快捷选择页面中的元素。熟悉CSS层叠性和继承性，能够优化CSS代码结构。掌握CSS优先级，能够选择合适的选择器来设置样式。技能目标素养目标通过学习CSS，培养对页面布局、颜色搭配、字体选择等方面的敏感度，提升审美能力。章节概述/Summary在第2章，我们深入学习了HTML技术的相关知识。然而，网页技术日新月异，单纯依靠HTML标签属性来设置样式，已难以契合当今网页设计的多样化需求。如今的网页开发者渴望拥有更多元化的字体选择、更易实现的样式效果，以及更绚丽多彩的图形、动画，以打造出独具魅力的网页。CSS应运而生，在不改变原有网页结构的基础上，CSS能够精准且有效地控制网页的外观和布局，从而显著提升用户体验。本章将对CSS的基础应用进行详细讲解。目录/Contents010203案例3-1变色文字案例3-2鲜花专题栏目案例3-3搜索页面变色文字案例3-1案例描述变色文字一般可以用于社交媒体的文本发布、网络文章的编辑等多种场景，满足用户的个性化定制需求。本案例将引入CSS样式，通过CSS实现变色文字效果，如图。知识引入了解CSS基本概念，能够说出CSS的作用和优势。学习目标1.认识CSS知识引入1.认识CSSCSS可以实现结构与表现的分离。结构与表现相分离是指在网页设计中，HTML标签只用于搭建网页的基本结构，不使用标签属性设置显示样式，所有的样式交由CSS来设置。大多数网页都是遵循Web标准开发的，即用HTML编写网页结构和内容，而相关版面布局、文本或图片的显示样式都使用CSS控制。HTML与CSS的关系就像人的身体与衣服，通过更改CSS，可以轻松控制网页的样式效果。知识引入1.认识CSS节约成本提高性能CSS3最突出的优势主要体现在节约成本和提高性能这两个方面。知识引入掌握CSS样式规则，能够按照CSS样式规则正确编写CSS代码。学习目标2.CSS样式规则在使用HTML时，需要遵循HTML代码规范。要想熟练地使用CSS对网页进行修饰，也需要遵循CSS样式规则。设置CSS样式的具体语法规则。知识引入选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;…}2.CSS样式规则需要说明的是，在书写CSS样式时，除了要遵循CSS样式规则，还必须注意CSS代码结构的特点。知识引入2.CSS样式规则1CSS样式中的选择器严格区分大小写，而声明不区分大小写。按照书写习惯，一般选择器、声明都采用小写的方式。2多个属性之间必须用英文分号隔开，最后一个属性后的分号可以省略，但是为了便于增加新样式最好保留分号。需要说明的是，在书写CSS样式时，除了要遵循CSS样式规则，还必须注意CSS代码结构的特点。知识引入2.CSS样式规则3如果属性值由多个单词组成且中间包含空格，则必须为这个属性值添加英文状态下的引号。例如。p{font-family:"TimesNewRoman";}需要说明的是，在书写CSS样式时，除了要遵循CSS样式规则，还必须注意CSS代码结构的特点。知识引入2.CSS样式规则4在编写CSS代码时，为了提高代码的可读性，可使用“/*注释语句*/”来进行注释，例如，上面的CSS代码可添加如下注释。p{font-family:"TimesNewRoman";}/*这是CSS注释文本，便于查找代码，此文本不会显示在浏览器窗口中*/需要说明的是，在书写CSS样式时，除了要遵循CSS样式规则，还必须注意CSS代码结构的特点。知识引入2.CSS样式规则5在CSS代码中空格是不被解析的，大括号和分号前后的空格可有可无。因此可以使用“Space”键、“Tab”键、“Enter”键等对CSS代码进行排版，即所谓的格式化CSS代码，这样可以提高代码的可读性，示例如下。代码段1：h1{color:green;font-size:14px;}需要说明的是，在书写CSS样式时，除了要遵循CSS样式规则，还必须注意CSS代码结构的特点。知识引入2.CSS样式规则5代码段2：h1{color:green;/*定义颜色属性*/font-size:14px;/*定义字号大小属性*/}上述两个代码段所呈现的效果是一样的，但是代码段2的可读性更高。需要说明的是，在书写CSS样式时，除了要遵循CSS样式规则，还必须注意CSS代码结构的特点。知识引入2.CSS样式规则注意：属性值和单位之间是不允许出现空格的，否则浏览器解析时会出错。例如下面这行代码就是错误的。h1{font-size:14px;} /*14和px之间有空格，浏览器解析时会出错*/知识引入熟悉CSS代码书写方式，能够在文档中正确书写CSS代码。学习目标3.引入CSS样式知识引入3.引入CSS样式我们学习了CSS样式规则，那么CSS代码该写在哪呢知识引入3.引入CSS样式行内式内嵌式外部式书写方式常见的CSS代码书写方式分别为行内式、内嵌式、外部式。知识引入3.引入CSS样式行内式行内式也称为内联样式，是通过标签的style属性来设置标签的样式。01<标签名style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标签名>标签的属性例如下面的示例代码便使用了行内式。<h1style="font-size:20px;color:blue;">使用CSS行内式修饰1级标题的字体大小和颜色</h1>知识引入3.引入CSS样式内嵌式内嵌式是将CSS代码集中写在HTML文档的<head>标签中，并且使用<style>标签定义。02<head><style>

选择器

{属性1:

属性值1;

属性2:

属性值2;

属性3:

属性值3;…}</style></head>知识引入3.引入CSS样式内嵌式通过代码演示如何在HTML文档中使用内嵌式。02<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>内嵌式CSS样式</title>

/*定义段落标签样式*/

font-size:16px;

font-family:"楷体";

color:red;

text-decoration:underline;

}

</style></head>定义标题标签居中对齐知识引入3.引入CSS样式内嵌式通过代码演示如何在HTML文档中使用内嵌式。02<body><h2>内嵌式CSS样式</h2><p>内嵌式CSS样式中的style标签一般位于head标签中、title标签之后。</p></body></html>知识引入3.引入CSS样式内嵌式运行代码，内嵌式CSS样式效果。02知识引入3.引入CSS样式外部式外部式也称为链入式，它将网页所需的所有样式集中放在一个或多个以“.css”为扩展名的外部CSS文件中。通过这种方式，样式得以与HTML文档分离。03知识引入3.引入CSS样式外部式在实际应用时，借助HTML中的<link>标签，能够轻松地将这些外部CSS文件链接到HTML文档中。03<head><linkhref="CSS文件路径"rel="stylesheet"></head>定义所链接外部CSS文件的URL，可以是相对路径也可以是绝对路径定义当前文档与被链接文档之间的关系知识引入3.引入CSS样式外部式下面通过代码演示如何通过外部式方式引入CSS文件，具体步骤如下。03步骤一：新建一个HTML文档<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>外部式CSS样式</title></head>知识引入3.引入CSS样式外部式下面通过代码演示如何通过外部式方式引入CSS文件，具体步骤如下。03步骤一：新建一个HTML文档<body><h2>外部式CSS样式</h2><p>通过link标签可以将扩展名为.css的外部CSS文件链接到HTML文档中。</p></body></html>知识引入3.引入CSS样式外部式下面通过代码演示如何通过外部式方式引入CSS文件，具体步骤如下。03步骤二：新建一个CSS文件h2{text-align:

center;}

/*定义标题标签居中对齐*/p{

/*定义段落标签样式*/font-size:

16px;font-family:

"楷体";color:blue;text-decoration:

underline;}知识引入3.引入CSS样式外部式下面通过代码演示如何通过外部式方式引入CSS文件，具体步骤如下。03步骤三：在example02.html的<head>标签中添加<link>标签，将“style.css”外部CSS文件链接到HTML文档中。<linkhref="style.css"rel="stylesheet">知识引入3.引入CSS样式外部式下面通过代码演示如何通过外部式方式引入CSS文件，具体步骤如下。03步骤四：执行上述步骤之后，运行代码，外部式CSS样式效果如图。知识引入掌握CSS基础选择器的用法，能够使用基础选择器准确控制HTML元素。学习目标4.CSS基础选择器知识引入CSS中的基础选择器有标签选择器、类选择器、id选择器和通配符选择器4种。4.CSS基础选择器标签选择器类选择器id选择器通配符选择器基础选择器知识引入标签选择器是指用HTML标签名进行标识，按照标签名分类，为页面中相同类型的标签指定统一的CSS样式。4.CSS基础选择器01标签选择器标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;…}例如可以使用p选择器定义HTML页面中所有段落的样式。p{font-size:15px;color:red;font-family:"微软雅黑";}知识引入类选择器使用“.”（英文点号）进行标识，后面紧跟HTML标签的类名。4.CSS基础选择器02类选择器.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;…}知识引入通过代码演示类选择器的使用。4.CSS基础选择器02类选择器<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>类选择器</title>知识引入通过代码演示类选择器的使用。4.CSS基础选择器02类选择器<style>.red{color:red;}.green{color:green;}.font22{font-size:22px;}p{

text-decoration:underline;

font-family:"微软雅黑";

}

</style></head>知识引入通过代码演示类选择器的使用。4.CSS基础选择器02类选择器<body>

<h2class="red">二级标题文本</h2>

<pclass="greenfont22">段落第1段文本内容</p>

<pclass="redfont22">段落第2段文本内容</p>

<p>段落第3段文本内容</p></body></html>知识引入运行代码，效果如图。4.CSS基础选择器02类选择器知识引入注意类名的第1个字符不能使用数字，并且应严格区分大小写，一般采用小写的英文字符。4.CSS基础选择器02类选择器知识引入id选择器使用“#”进行标识，后面紧跟id。4.CSS基础选择器03id选择器#id{属性1:属性值1;属性2:属性值2;属性3:属性值3;…}知识引入通过代码演示id选择器的使用。4.CSS基础选择器03id选择器<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>id选择器</title>

<style>

#bold{font-weight:bold;}

#font24{font-size:24px;}

</style>知识引入通过代码演示id选择器的使用。4.CSS基础选择器03id选择器</head><body>

<pid="bold">段落1设置粗体文字。</p>

<pid="font24">段落2设置文字大小为24px。</p></body></html>知识引入运行代码，效果如图。4.CSS基础选择器03id选择器知识引入通配符选择器使用“*”标识，它是所有选择器里作用范围最广的，能匹配页面中所有的标签。4.CSS基础选择器04通配符选择器*{属性1:属性值1;属性2:属性值2;属性3:属性值3;…}知识引入例如，下面的代码使用通配符选择器定义CSS样式，并且清除所有HTML标签的默认边距。4.CSS基础选择器04通配符选择器*{margin:0; /*定义外边距*/padding:0; /*定义内边距*/}项目实现掌握引入CSS样式，能够通过CSS实现变色文字效果。学习目标项目实现鲜花专题栏目案例3-2案例描述专题栏目是网页信息的一种重要表现形式，它通常围绕某一个特定的主题展开，以全面且深入的报道方式，为用户提供丰富且集中的信息资源。本案例将使用CSS字体样式属性和CSS文本外观属性制作一个鲜花专题栏目，其效果如图。知识引入了解CSS基本概念，能够说出CSS的作用和优势。学习目标1.字体样式属性知识引入1.字体样式属性为了给网页中的字体设置各种各样的样式，CSS提供了一系列的字体样式属性。font-size：字号font-family：字体font-weight：字体粗细font-variant：变体font-style：字体风格font：综合设置字体样式知识引入1.字体样式属性font-size属性用于设置字号，属性值可以为像素值、百分比数值、倍率值等。表列举了font-size属性常用的属性值单位。01font-size：字号属性值单位描述em倍率单位，相对于当前元素内文本的大小rem倍率单位，相对于根元素内文本的大小px像素单位，是网页中常用的单位%百分比数值单位，指相对于当前文本的大小百分比知识引入1.字体样式属性将网页中所有段落文本的字号设置成12px，可以使用下面的CSS代码。01font-size：字号p{font-size:12px;}知识引入1.字体样式属性font-family用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。例如，将网页中所有段落文本的字体设置成微软雅黑，可以使用下面的CSS代码。02font-family：字体p{font-family:"微软雅黑";}例如，下面的示例代码同时设置了3种字体。body{font-family:"华文彩云","宋体","黑体";}知识引入1.字体样式属性各种字体之间必须使用英文逗号“,”分隔。02font-family：字体1中文字体需要加英文引号“""”，但英文字体不需要加英文引号。当英文内容需要设置英文字体时，英文字体必须写在中文字体之前。2body{font-family:Arial,"宋体","黑体";}body{font-family:"宋体","黑体",Arial;}正确的书写方式错误的书写方式知识引入1.字体样式属性如果字体名字中包含空格、#、$等符号，则该字体必须加英文引号“""”，例如“font-family:"TimesNewRoman";”。02font-family：字体3尽量使用计算机默认字体或自定义字体，保证网页中的文字在不同用户的浏览器中都能被正确显示。4知识引入1.字体样式属性font-weight属性用于定义字体粗细，具体的属性值如表。03font-weight：字体粗细属性值描述normal默认属性值。定义正常显示的字体bold定义粗体bolder定义更粗的字体lighter定义更细的字体100～900（100的整数倍）定义由细到粗的字体。其中400等同于normal，700等同于bold，数值越大表示字体越粗知识引入1.字体样式属性font-variant属性用于设置字体的变体效果，该属性仅对英文字符有效。font-variant属性的常用属性值如下。04font-variant：变体用于使浏览器显示“小型大写”的字体，即将所有的小写字母均转换为大写字母，但是转换后的字母比原字母更小。normalsmall-caps默认值，浏览器显示标准的字体。知识引入1.字体样式属性下图中由线框标识的字母，就是使用font-variant属性设置的小型大写字母。04font-variant：变体知识引入1.字体样式属性font-style属性用于定义字体风格，下面将对font-style属性值进行详细讲解。05font-style：字体风格浏览器会显示斜体的字体样式。normalitalic默认值，浏览器显示标准的字体样式。oblique浏览器会显示倾斜的字体样式。知识引入1.字体样式属性注意：使用italic和oblique设置的文字，在显示效果上并没有本质区别，但italic使用了文字本身的倾斜属性，而oblique是对没有倾斜属性的文字进行倾斜处理，实际工作中常使用italic。05font-style：字体风格知识引入1.字体样式属性font属性用于对字体样式进行综合设置，其基本语法格式如下。06font：综合设置字体样式选择器{font:font-stylefont-variantfont-weightfont-size/line-heightfont-family;}知识引入1.字体样式属性在使用font属性时，各个属性必须按上面语法格式的顺序书写，以空格隔开。line-height用于设置行间距，在后面内容中会介绍。例如，下面是单独设置字体样式的代码。06font：综合设置字体样式p{

font-style:italic;

font-variant:small-caps;

font-weight:300;

font-size:15px;

line-height:40px;

font-family:Arial,"宋体";}分离面板p{font:italicsmall-caps30015px40pxArial,"宋体";}知识引入1.字体样式属性@font-face的语法格式如下。06font：综合设置字体样式@font-face{font-family:字体名称;src:字体文件路径;}指定字体名称指定字体文件路径知识引入1.字体样式属性通过代码演示@font-face规则的使用。06font：综合设置字体样式<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>@font-face规则</title>

<style>

@font-face{

font-family:mycontent;

src:url(font/FZJZJW.TTF);

}知识引入1.字体样式属性通过代码演示@font-face规则的使用。06font：综合设置字体样式p{

/*给<p>标签设置字体样式*/

font-family:mycontent;

font-size:29px;

}

</style></head><body>

<p>谦虚使人进步</p>

<p>骄傲使人落后</p></body></html>知识引入1.字体样式属性运行代码，效果如图。06font：综合设置字体样式知识引入熟悉文本外观属性的用法，能够给网页中的文本设置不同的样式。学习目标2.文本外观属性知识引入使用HTML对文本外观进行简单的控制，不但效果不完美，而且可能会造成代码结构混乱。为此，CSS提供了一系列的文本外观属性。2.文本外观属性01color：文本颜色color属性主要用于改变文本颜色。选择器{color:颜色值;}知识引入2.文本外观属性01color：文本颜色语法中颜色值可以采用多种方式表示，网页开发者应根据需要选择最合适的方式。常用的方式有3种，具体如下十六进制颜色值。规定颜色值由6位十六进制数值表示，比如#ff0000。12颜色名称。规定颜色值为颜色名称（使用英文），比如red、green。3RGB颜色值。规定颜色值由rgb代码表示，比如rgb(225,0,0)。知识引入2.文本外观属性十六进制颜色值是由以#开头的6位十六进制数值组成的，每两位数值为一个颜色分量，分别表示红、绿、蓝3个颜色分量。当3个颜色分量的两位十六进制数值都相同时，可使用缩写。例如，#FF6600可缩写为#F60#FF0000可缩写为#F00#FFFFFF可缩写为#FFF颜色值的缩写知识引入2.文本外观属性02letter-spacing：字间距letter-spacing属性用于设置字间距。letter-spacing会影响中文字符的间距，以及英文字符的间距。letter-spacing的属性值可为使用不同单位（如px、em）的数值。letter-spacing属性的语法格式如下。选择器{letter-spacing:length值;}知识引入2.文本外观属性02letter-spacing：字间距例如，分别为<h2>标签和<h3>标签设置不同的字间距，示例代码。h2{letter-spacing:10px;}h3{letter-spacing:2em;}知识引入2.文本外观属性word-spacing属性用于设置英文单词的间距，对中文字符无效。与letter-spacing一样，其属性值可为具有不同单位的数值，允许使用负值，默认值为normal。对英文进行设置设置英文字母的间距letter-spacing属性letter-spacing属性对英文进行设置设置英文单词的间距03word-spacing：单词间距知识引入2.文本外观属性03word-spacing：单词间距通过代码演示word-spacing属性和letter-spacing属性的区别。<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>word-spacing属性和letter-spacing属性</title>知识引入2.文本外观属性03word-spacing：单词间距<style>

.letter{

letter-spacing:30px;

}

.word{

word-spacing:30px;

}</style></head>知识引入2.文本外观属性03word-spacing：单词间距<body>

<pclass="letter">letterspacing（字母间距）</p>

<pclass="word">wordspacing（单词间距）</p></body></html>

知识引入2.文本外观属性03word-spacing：单词间距运行代码，效果如图。知识引入2.文本外观属性04line-height：行间距line-height属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距。line-height常用的属性值单位有3种。pxem%需要注意的是，line-height属性值不允许使用负值。知识引入2.文本外观属性04line-height：行间距通过代码演示line-height属性的使用。<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>line-height属性</title>知识引入2.文本外观属性04line-height：行间距<style>

.one{

font-size:16px;

line-height:18px;

}

.two{

font-size:12px;

line-height:2em;

}

知识引入2.文本外观属性04line-height：行间距

.three{

font-size:14px;

line-height:150%;

}

</style></head>

知识引入2.文本外观属性04line-height：行间距<body><pclass="one">岂曰无衣？与子同袍。王于兴师，修我戈矛，与子同仇！</p><pclass="two">岂曰无衣？与子同泽。王于兴师，修我矛戟，与子偕作！</p><pclass="three">岂曰无衣？与子同裳。王于兴师，修我甲兵，与子偕行！</p></body></html>知识引入2.文本外观属性04line-height：行间距运行代码，效果如图。知识引入2.文本外观属性05text-transform：文本转换text-transform属性用于转换英文字符的大小写，其可用属性值如下。nonecapitalizeuppercaselowercase默认值，不进行转换。将每个单词的首字母转换为大写。全部字符转换为大写。全部字符转换为小写。知识引入2.文本外观属性06text-decoration：文本装饰text-decoration属性用于设置文本装饰效果，比如下划线、删除线、上划线等。text-decoration属性有以下值可选。noneunderlineoverlineline-through默认值，没有任何文本装饰效果。设置下划线。设置下划线。设置删除线。知识引入2.文本外观属性06text-decoration：文本装饰text-decoration属性可以有多个属性值，属性值之间用空格进行分隔，用于给文本设置多种文本装饰效果。希望文字同时有上划线和删除线，可以将overline属性值和line-through属性值同时赋给text-decoration属性。例知识引入2.文本外观属性通过代码演示text-decoration属性的使用。<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>text-decoration属性</title>06text-decoration：文本装饰知识引入2.文本外观属性<style>

.overline{text-decoration:overline;}

.underline{text-decoration:underline;}

.lineThrough{text-decoration:line-through;}

.overline_lineThrough{text-decoration:overlineline-through;}

</style></head>06text-decoration：文本装饰知识引入2.文本外观属性<body>

<pclass="overline">设置上划线</p>

<pclass="underline">设置下划线</p>

<pclass="lineThrough">设置删除线</p>

<pclass="overline_lineThrough">设置上划线和删除线</p></body></html>06text-decoration：文本装饰知识引入2.文本外观属性text-align属性用于设置文本的水平对齐方式，和HTML中的align属性类似。text-align属性有以下属性值可选。07text-align：水平对齐方式leftrightstartend左对齐。默认值。右对齐。左对齐，效果等同于left。右对齐，效果等同于right。center居中对齐。知识引入2.文本外观属性例如，设置2级标题水平居中对齐，可使用如下CSS代码。07text-align：水平对齐方式h2{text-align:center;}用于块元素，对行内元素无效知识引入2.文本外观属性text-indent属性用于设置首行文本的缩进，其属性值的单位有px、em、%，通常使用em。text-indent属性值可以是负值。如果使用负值，就会产生“悬挂缩进”的效果，即首行文本向左缩进。08text-indent：首行缩进知识引入2.文本外观属性通过代码演示text-indent属性的使用。<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>text-indent属性</title>08text-indent：首行缩进知识引入2.文本外观属性

<style>

p{font-size:15px;}

.one{text-indent:2em;}

.two{text-indent:50px;}

</style></head>08text-indent：首行缩进首行文本会缩进两个字符首行文本将缩进50px知识引入2.文本外观属性<body>

<pclass="one">段落1：真正有价值的一生，总是需要你行动，去做无数件别人不屑尝试的小事。那些一直在一步一步往前走的人，终会收获更好的人生。</p>

<pclass="two">段落2：真正有价值的一生，总是需要你行动，去做无数件别人不屑尝试的小事。那些一直在一步一步往前走的人，终会收获更好的人生。</p></body></html>08text-indent：首行缩进知识引入2.文本外观属性运行代码，效果如图。08text-indent：首行缩进知识引入2.文本外观属性在使用HTML制作网页时，不论源代码中有多少个空白字符，在浏览器中都只会显示一个空白字符。在CSS中，使用white-space可以设置文本内空白字符的处理方式。white-space属性可以设置为以下属性值。09white-space：空白字符处理按文本的书写格式保留空格、换行，但不允许自动换行，文本将按照原格式显示。normalpre默认值。文本中的空格符、换行符无效，只显示一个空白字符，文本满行后自动换行。nowrap空格、换行无效，强制文本不能换行，除非使用</br>标签。若文本会超出浏览器窗口边界，浏览器会自动增加滚动条。知识引入2.文本外观属性通过代码演示white-space属性的使用。<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>white-space属性</title>09white-space：空白字符处理知识引入2.文本外观属性<style>

.one{white-space:normal;}

.two{white-space:pre;}

.three{white-space:nowrap;}

</style>09white-space：空白字符处理知识引入2.文本外观属性</head><body><pclass="one">老夫聊发少年狂，

左牵黄，

右擎苍，

锦帽貂裘，

千骑卷平冈。

为报倾城随太守，

亲射虎，

看孙郎。</p><pclass="two">酒酣胸胆尚开张，

鬓微霜，

又何妨！

持节云中，

何日遣冯唐？

会挽雕弓如满月，

西北望，

射天狼。</p><pclass="three">老夫聊发少年狂，左牵黄，右擎苍，锦帽貂裘，千骑卷平冈。为报倾城随太守，亲射虎，看孙郎。酒酣胸胆尚开张，鬓微霜，又何妨！持节云中，何日遣冯唐？会挽雕弓如满月，西北望，射天狼。</p></body></html>09white-space：空白字符处理知识引入2.文本外观属性运行代码，效果如图。09white-space：空白字符处理知识引入2.文本外观属性text-shadow是CSS3新增的属性，使用该属性可以为页面中的文本添加阴影效果。text-shadow属性的基本语法格式如下。10text-align：水平对齐方式text-shadow:h-shadowv-shadowblur-radiuscolor;设置阴影的水平偏移距离设置阴影的垂直偏移距离设置模糊半径设置阴影颜色知识引入2.文本外观属性通过代码演示text-shadow属性的使用。10text-align：水平对齐方式<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>text-shadow属性</title>知识引入2.文本外观属性10text-align：水平对齐方式<style>

font-size:50px;

text-shadow:10px10px10pxpink;

/*设置文字阴影的偏移距离、模糊半径和颜色*/

}

</style>知识引入2.文本外观属性10text-align：水平对齐方式</head><body>

<p>Hellotext-shadow</p></body></html>知识引入2.文本外观属性运行代码，效果如图。10text-align：水平对齐方式知识引入2.文本外观属性注意：阴影的水平偏移距离或垂直偏移距离可以设为负值，但阴影的模糊半径只能设为正值，并且数值越大阴影向外模糊的范围也就越大。10text-align：水平对齐方式知识引入2.文本外观属性设置阴影叠加效果可以使用text-shadow属性给文字添加多个阴影，从而实现阴影叠加效果。方法是设置多个阴影，中间用逗号隔开。例如为text-shadow属性代码中的段落设置粉色和天蓝色阴影叠加的效果，可以将<p>标签的CSS代码更改为。p{font-size:50px;text-shadow:10px10px10pxpink,20px20px20pxskyblue;}粉色和天蓝色阴影叠加知识引入2.文本外观属性设置阴影叠加效果重新运行代码，阴影叠加效果如图。知识引入2.文本外观属性text-overflow属性同样为CSS3新增的属性，该属性用于标识溢出文本，其基本语法格如下。11text-overflow：标识溢出文本选择器{text-overflow:属性值;}知识引入2.文本外观属性语法格式中，text-overflow属性常用的属性值有3种。11text-overflow：标识溢出文本在文本被隐藏的位置显示省略号“…”，以表示还有部分文本未显示。clipellipsis默认值，隐藏文本，不显示省略号“…”。string允许开发者使用自定义字符串来表示被隐藏的文本。知识引入2.文本外观属性设置省略号标示文本的具体步骤如下。11text-overflow：标识溢出文本应用“white-space:nowrap;”样式强制文本不能换行。12为包含文本元素定义宽度。3应用“overflow:hidden;”样式隐藏溢出文本。4应用“text-overflow:ellipsis;”样式显示省略号。知识引入2.文本外观属性通过代码演示text-overflow属性的使用。<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>text-overflow属性</title>11text-overflow：标识溢出文本知识引入2.文本外观属性<style>

width:200px;

height:100px;

border:1pxsolid#000;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

</style>11text-overflow：标识溢出文本强制文本不能换行隐藏溢出文本用省略号标识溢出文本知识引入2.文本外观属性</head><body>

<p>这是一段很长的文本，隐藏文本中溢出的内容，显示省略号</p></body></html>11text-overflow：标识溢出文本知识引入2.文本外观属性运行代码，效果如图。11text-overflow：标识溢出文本知识引入2.文本外观属性word-wrap是CSS3新增的属性，该属性用于控制长单词或URL溢出时是否允许换行，其常用属性值为break-word，表示允许在长单词或URL内部进行换行。12word-wrap属性：控制换行知识引入2.文本外观属性通过一个URL换行的案例演示word-wrap属性的使用。<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>word-wrap属性</title>12word-wrap属性：控制换行知识引入2.文本外观属性<style>

width:100px;

height:100px;

border:1pxsolid#000;

}

.break_word{

word-wrap:break-word;

}

</style>12word-wrap属性：控制换行知识引入2.文本外观属性</head><body>

<span>word-wrap:normal;</span>

<p>网页设计与制作学院http://icd.XXXXXXXXX.cn/</p>

<span>word-wrap:break-word;</span>

<pclass="break_word">网页设计与制作学院http://icd.XXXXXXXXX.cn/</p></body></html>12word-wrap属性：控制换行知识引入2.文本外观属性运行代码，效果如图。12word-wrap属性：控制换行项目实现掌握CSS字体样式属性和CSS文本，能够使用CSS字体样式属性和CSS文本外观属性制作一个鲜花专题栏目。学习目标项目实现搜索页面案例3-3案例描述除了前面学习的CSS基础选择器外，在CSS中还有复合选择器。复合选择器配合CSS的层叠性和继承性、优先级可以实现更复杂的网页效果。本案例将制作一个搜索页面，其效果如图。知识引入掌握CSS复合选择器的用法，能够快捷选择页面中的元素。学习目标1.CSS复合选择器知识引入复合选择器是一种由两个或多个基础选择器按照不同方式组合而成的选择器，常用的CSS复合选择器包括交集选择器、后代选择器、并集选择器。1.CSS复合选择器交集选择器后代选择器并集选择器CSS复合选择器知识引入交集选择器，由两个选择器构成，其中第一个选择器为标签选择器，第二个选择器为类选择器或id选择器，两个选择器之间不能有空格，例如“h3.special”或“p#one”。1.CSS复合选择器01交集选择器知识引入下面通过代码演示交集选择器的使用。<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>交集选择器</title>1.CSS复合选择器01交集选择器知识引入<style>

p{color:blue;}

.special{color:green;}

p.special{color:red;}

/*交集选择器*/

</style></head>1.CSS复合选择器01交集选择器知识引入<body>

<p>普通段落文本（蓝色）</p>

<pclass="special">指定了special类的段落文本（红色）</p>

<h3class="special">指定了special类的标题文本（绿色）</h3></body></html>1.CSS复合选择器01交集选择器知识引入运行代码，效果如图。1.CSS复合选择器01交集选择器知识引入后代选择器用于选择某个元素的后代元素。使用后代选择器时，需要将外层标签写在前面，内层标签写在后面，两者之间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。后代选择器的独特之处在于，它仅会选择在指定的祖先元素下的后代元素，从而实现对特定元素层次结构内的后代元素进行精确的样式控制。1.CSS复合选择器02后代选择器当<p>标签内嵌套<strong>标签时，就可以使用后代选择器对其中的<strong>标签进行精确控制。例知识引入下面通过代码演示交集选择器的使用。<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>后代选择器</title>1.CSS复合选择器02后代选择器知识引入<style>

pstrong{color:red;}

/*后代选择器*/

strong{color:blue;}</style></head>1.CSS复合选择器02后代选择器知识引入<body><p>励志名言：<strong>虽叹行路难，亦作逍遥游。</strong></p><strong>实现梦想的路上注定不会一帆风顺，但我们要学会笑对困难，砥砺前行。</strong></body></html>1.CSS复合选择器02后代选择器知识引入运行代码，效果如图。1.CSS复合选择器02后代选择器知识引入并集选择器可同时选中多组标签，为它们统一设置相同样式。各选择器通过英文逗号“,”连接，任何类型的选择器都能成为并集选择器的一部分。当多个选择器所需定义的样式存在完全相同或部分相同的情况时，借助并集选择器可以为它们定义相同的CSS样式，这样不仅能减少代码量，还可让代码结构更清晰，提升代码的可维护性。1.CSS复合选择器03并集选择器在页面中有2个标题和3个段落，它们的字号和颜色相同。同时其中一个标题和两个段落文本有下划线效果，这时就可以使用并集选择器定义CSS样式。例知识引入下面通过代码演示并集选择器的使用。<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>并集选择器</title>1.CSS复合选择器03并集选择器知识引入<style>

h2,

h3,

p{/*不同标签选择器组成的并集选择器*/

color:blue;

font-size:15px;

}1.CSS复合选择器03并集选择器知识引入

h3,

.special,

#one{

/*标签选择器、类选择器、id选择器组成的并集选择器*/

text-decoration:underline;

}

</style></head>1.CSS复合选择器03并集选择器知识引入<body>

<h2>2级标题文本</h2>

<h3>3级标题，加下划线</h3><pclass="special">段落文本1，加下划线</p><p>段落文本2，普通文本</p><pid="one">段落文本3，加下划线</p></body></html>1.CSS复合选择器03并集选择器知识引入运行代码，效果如图。1.CSS复合选择器03并集选择器知识引入熟悉CSS层叠性和继承性，能够优化CSS代码结构。学习目标2.CSS层叠性和继承性知识引入CSS的层叠性和继承性是非常重要的两个概念。在网页制作中，层叠性和继承性确保了CSS的强大功能和灵活性，使网页开发者可以创建出既复杂又具有一致性的网页布局和样式。2.CSS层叠性和继承性层叠性继承性知识引入层叠性是指多种CSS样式的叠加。例如，如果使用内嵌式CSS样式定义<p>标签的字号为12px，使用外部式CSS样式定义<p>标签的颜色为红色，那么段落文本将显示为12px和红色，即两种样式产生了叠加。2.CSS层叠性和继承性01层叠性知识引入通过代码演示以使读者更好地理解CSS的层叠性。<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>CSS的层叠性</title>

font-size:18px;

font-family:"楷体";

}

.special{font-size:25px;}

#one{color:red;}

</style></head>2.CSS层叠性和继承性01层叠性知识引入<body>

<pclass="special"id="one">段落文本1</p>

<p>段落文本3</p></body></html>2.CSS层叠性和继承性01层叠性知识引入运行代码，效果如图。2.CSS层叠性和继承性01层叠性知识引入需要注意的是，标签选择器p和类选择器.special都对段落文本1设置了字号，但最终段落文本1的字号为25px，这是因为类选择器的优先级高于标签选择器的。2.CSS层叠性和继承性01层叠性知识引入继承性是指子标签会继承父标签的某些样式。例如，一个<p>标签内有一个<strong>标签，若给<p>标签定义字号为20px，则<strong>标签内文本的字号也为20px。2.CSS层叠性和继承性02继承性知识引入下面通过代码详细讲解CSS的继承性。<!DOCTYPEhtml><html><head>

<title>CSS的继承性</title>2.CSS层叠性和继承性02继承性知识引入<style>

font-size:20px;

color:blue;

font-family:"楷体";

}</style></head>2.CSS层叠性和继承性02继承性知识引入<body>

<p>这是父元素样式。<strong>这是子元素样式</strong></p></body></html>2.CSS层叠性和继承性02继承性知识引入2.CSS层叠性和继承性02继承性恰当地使用继承可以简化代码、降低CSS样式的复杂性。但是，如果网页中大量的元素都继承样式，那么判断样式的来源就会很困难。通常，字体样式、文本外观等网页中通用的样式会使用继承。字体、字号、颜色、行间距等可以在body元素中统一设置，然后通过继承影响文档中的所有文本。例知识引入2.CSS层叠性和继承性02继承性并不是所有的CSS属性都可以继承，例如，以下属性就不具有继承性。边框属性。外边距属性。内边距属性。背景属性。定位属性。布局属性。宽度和高度属性。知识引入2.CSS层叠性和继承性02继承性注意当为body元素设置字号属性时，标题不会采用对应样式，读者可能会认为标题没有继承字号，这种想法是不正确的。标题之所以不采用为body元素设置的字号，是因为标题标签<h1>～<h6>有默认字号，这时默认字号会覆盖继承的字号。知识引入掌握CSS优先级，能够选择合适的选择器来设置样式。学习目标3.CSS优先级知识引入CSS优先级就是CSS样式规则的权重，即样式规则在浏览器中被解析的先后顺序。在复杂的网页布局中，不同的样式规则可能会产生冲突，通过比较优先级，可以确定哪些样式规则具有更大的权重，从而控制样式规则应用顺序、解决样式冲突。样式规则的权重与选择器的优先级有关。选择器的优先级为：id选择器>类选择器>标签选择器>通配符选择器。3.CSS优先级知识引入为了深入了解CSS优先级，通过下述示例代码进行分析。3.CSS优先级p{color:red;}.blue{color:blue;}#header{color:green;}标签选择器定义样式用省略号标识溢出文本用省略号标识溢出文

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件第3章运用CSS3美化页面

文档简介

温馨提示

最新文档

评论

HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第3章 运用CSS3美化页面

文档简介

温馨提示

最新文档

评论

相关文档

HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件第3章运用CSS3美化页面