W前端技术基础开发概述9_第1页
W前端技术基础开发概述9_第2页
W前端技术基础开发概述9_第3页
W前端技术基础开发概述9_第4页
W前端技术基础开发概述9_第5页
已阅读5页，还剩298页未读， 继续免费阅读

下载本文档

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

文档简介

Web前端开发技术基础任务1 红色资讯详情页制作

——使用CSS设置文字样式通关任务1制作红色资讯详情页1——认识CSS样式AIGC赋能版📑目录01.任务描述02.任务目标03.任务实施任务描述CSS是一种用于描述网页外观和格式的标记语言。它在Web开发中占据着十分重要的地位，通过样式设定，可以使网页具有可读性、易用性和视觉吸引力。通过本任务的实施，读者可学习CSS的基本语法，掌握多种CSS样式的应用方式，熟悉各种选择器的运用。红色资讯详情页1效果如图3-1-1所示。任务描述任务目标1.掌握CSS的基本语法。2.掌握引入CSS样式的方式。3.掌握常用选择器的定义与用法。图3-1-1红色资讯详情页1效果任务实施——HTML结构分析整个页面代码结构运用了HTML的<article>标签来搭建，页面主标题使用<h1>标签，副标题使用<h3>标签，文章正文分别使用4个<p>标签，布局结构如图3-1-2所示。图3-1-2布局结构任务实施——HTML结构搭建（1）创建站点并保存网页（1）创建项目并新建页面1）打开HBuilderX软件，选择菜单中的“文件”→“新建”→“目录”命令，或者选择页面中的“新建项目”选项，在弹出的“新建页面”对话框中，设置项目名称为“chapter3-1”，单击“浏览”按钮，选择项目存放路径，选择模板“基本HTML项目”，单击“创建”按钮。2）选择“chapter3-1”项目名称并单击鼠标右键，选择“新建”→“HTML文件”命令，将新建的HTML文件命名为“example01.html”。（

2）创建HTML结构图3-1-3在example01.html文件中输入内容并显示页面效果任务实施——构建HTML结构1）打开“example01.html”页面。2）编辑example01.html文件。在<title></title>标签对中输入标题“红色资讯详情页1”，在<body></body>标签对中插入用于定义独立内容的<article></article>标签对，在<article></article>标签对中分别插入<h1></h1>、<h3></h3>、<p></p>标签对，打开素材“example01.txt”，将文字复制到相应的标签对中，单击“浏览器运行”按钮预览页面，如图3-1-3所示。任务实施——CSS样式分析图3-1-4CSS样式分析页面的CSS样式表分别引用了<p>标签的行内样式和内部样式表。内部样式表定义了“article”“h1”“h3”三个标签选择器，“.text1”“.text2”两个类选择器，以及“#p1”一个id选择器。CSS样式分析如图3-1-4所示。任务实施——CSS样式定义1）创建内部样式。内部样式定义在<style></style>标签对中。在<title></title>标签对后按<Enter>键换行，输入“sty”字符，在自动出现的下拉列表中选择“style_type”选项后，按<Enter>键，即可完成标签属性的设置，如图3-1-5所示。图3-1-5快速补全<style></style>标签对中的代码任务实施——CSS样式定义2）定义标签选择器。在<styletype="text/css"></style>标签对中输入定义标签选择器的代码，本页面定义了article、h1、h3这3个标签选择器。使用article标签选择器定义HTML页面主体的宽度和边距样式，使用h1、h3标签选择器设置文字水平居中。任务实施——CSS样式定义3）定义类选择器。定义类名为.text1和.text2的类选择器，.text1设置文字水平居中，.text2设置文本首行缩进2字符。说明：h1、h3标签选择器和“.text1”类选择器都是设置文字的水平居中对齐，可使用并集选择器简化样式的代码，写为：h1,h3,.text1{text-align:center;/*设置文字水平居中*/}任务实施——CSS样式定义（4）定义id选择器。定义id选择器#p1，#p1选择器单独运用于第四个<p>标签，即正文第二段。任务实施——CSS样式引入（1）将标签选择器引入到页面中。标签选择器定义的样式能自动应用到网页中的相应元素上。所有的HTML标签都可以作为标签选择器，如<p>、<h3>、<strong>、<li>、<ul>等。（2）将类选择器引入到页面中。将“.text1”类选择器应用于页面中的第一个<p>标签中，使其中的文本居中对齐，将“.text2”应用于第二个<p>标签。在<p>标签的<>内按空格键输入字母“cl”选择“class”属性，在弹出的窗口中选择已定义的“.text1”类选择器，如图3-1-6所示。图3-1-6选择类选择器任务实施——CSS样式引入在<p>标签中使用类选择器后，标签中的文本居中对齐，代码及效果如图3-1-7所示。使用同样的方法，将.text2类选择器应用于正文的<p>标签中，代码如图3-1-8所示。图3-1-8将.text2类选择器应用于<p>标签中任务实施——CSS样式引入3）将id选择器引入页面中。上述样式中定义了一个名为p1的id选择器，#p1应用于第三个<p>标签的正文第二段。id选择器用于对某个元素定义单独的样式，只能对应一个元素，不能重复使用。使用标签的“id”属性，设置其值为id选择器的名称，id选择器定义的样式能自动应用到网页中具有该id名称的元素上，用法如图3-1-9所示。图3-1-9id选择器的用法任务实施——CSS样式引入4）引入行内样式。通过标签中的style属性设置元素的样式，代码为style="text-align:right;"，设置第四个<p>标签中的文本右对齐，用法如图3-1-10所示。如图3-3-6所示。图3-1-11样式应用和效果页面中的样式应用和效果如图3-1-11所示。知识宝典——什么是CSS样式CSS是一种用于描述网页的标签语言，能够将样式与内容分离，提高代码的可读性和可维护性；能够实现丰富多样的网页布局和排版效果，提供良好的用户体验；能够保证网页样式的统一性和可定制性，提升品牌认知和用户体验。CSS是一种不需要编译、可直接由浏览器执行的样式表语言，是格式化网页的标准方式。借助CSS，网页设置者能更高效地设置网页格式。CSS能将样式的定义和HTML文件结构分离。若要将所有的网页样式风格统一，则可以定义一个CSS样式文件，让所有网页调用这个样式文件。如果需要更改网页风格，则直接修改这个CSS样式文件即可。知识宝典——CSS的基本结构和注释（1）CSS的基本结构CSS是由若干条样式声明组成的，样式是CSS的最小语法单元。每个样式都包含3部分内容：选择器、样式属性和样式属性值，基本结构如下：知识宝典——CSS的基本结构和注释选择器是指需要设置样式的HTML元素或标签，即样式作用的页面对象，通常是HTML标签，也可以是已经定义的类名、id名。属性是CSS提供的样式选项，是选择器所包含的内容，如字体、行高、位置等。属性值是指样式属性的取值，包括数值和单位，或关键字。CSS的基本结构如图3-1-12所示。图3-1-12CSS的基本结构知识宝典——CSS的基本结构和注释（2）CSS的注释在CSS中使用注释可以帮助用户对自己编写的样式进行说明，有利于解释代码的用途或特定部分的功能，以便于后期维护和更新，也可帮助其他人员理解代码。CSS注释的语法格式如下：例如：知识宝典——CSS样式的语法规则CSS样式属性的书写顺序对网页加载代码是有影响的。正确的样式书写顺序易于查看，也是CSS样式的一种优化方式。（1）CSS书写顺序CSS的正确书写顺序如下。1）布局方式、位置相关属性：position、top、left、right、bottom、z-index、display、float、clear等。2）盒子模型相关属性：width、height、padding、margin、border等。3）文本排版相关属性：line-height、text-align、text-indent、letter-spacing等。4）文字属性：font、color、content等。5）其他属性：content、cursor、border-radius、box-shadow、text-shadow、background等。知识宝典——CSS样式的语法规则（2）CSS书写规范1）CSS缩写属性。CSS的有些属性是可以缩写的，如padding、margin、font等，这样既可以精简代码，又能提高用户的阅读体验，CSS缩写属性举例见表3-1-1。知识宝典——CSS样式的语法规则2）去掉小数点前的“0”。在CSS属性值中，当属性值为小数并且小数点前面为0时，小数点前面的0可省略，举例见表3-1-2。3）简写十六进制颜色代码。当颜色代码用十六进制来表示时，有重复位时可缩写，举例见表3-1-3。知识宝典——引入CSS样式要想使用CSS样式修饰网页，需要在HTML文档中引入样式。CSS主要提供了以下3种引入方式：行内样式、内部样式、外部样式。（1）行内样式行内样式也称内联样式，是通过标签的style属性设置的元素样式。其基本语法格式如下：<标签style="属性1:属性值;属性2:属性值;…">内容</标签>例如：<pstyle="color:#f00;font-style:italic;">。以上代码设置文本颜色为#f00（红色）、字体风格为倾斜。行内样式举例见表3-1-4。知识宝典——引入CSS样式（2）内部样式内部样式也称内嵌样式，是指将所有CSS样式代码写在HTML文档的<head>头部标签中，并用<style>标签定义，type类型为CSS文档。语法如下：知识宝典——引入CSS样式在HTML文档中引入内部样式，示例如下。1）创建名为nbys.html的HTML文档，使用内部样式表修饰网页的内容。在新建网页文件中输入代码，效果如图3-1-13所示。图3-1-13引入内部样式前的效果知识宝典——引入CSS样式2）在文档<head></head>标签对的<title></title>标签对的下方输入代码，代码及效果如图3-1-14所示。图3-1-14引入内部样式后的代码及效果知识宝典——引入CSS样式（3）外部样式外部样式可将所有的CSS样式代码编写并存储在一个以“.css”为扩展名的独立文件中，这个文件称为外部样式表文件。通常使用<link>标签将外部样式表文件链接到HTML文件中。语法如下：<linkhref="外部样式表文件的路径"rel="stylesheet"type="text/css">说明：<link>标签一般位于<head>标签中的<title>标签之后，并且必须指定以下3个属性。href：定义所链接的外部样式表文件的URL。rel：定义被链接的文件是样式表文件。type：定义所链接文档的类型为“text/css”，即CSS文档。知识宝典——引入CSS样式在HTML文档中引入外部样式，示例如下。1）创建名为wbys.html的HTML文档，输入如下代码，效果如图3-1-15所示。图3-1-15引入外部样式前的效果知识宝典——引入CSS样式2）创建外部样式表文件。在项目中的css目录上右击，选择“新建”→“CSS文件”命令，在“新建CSS文件”对话框中输入文件名称wbys.css，单击“创建”按钮，如图3-1-16所示。图3-1-16新建CSS文件知识宝典——引入CSS样式在wbys.css文件中输入CSS样式代码，代码如下图3-1-17引入外部样式后的效果3）链接CSS外部样式表，在wbys.html文档中输入下列代码，效果如图3-1-17所示。知识宝典——引入CSS样式企业说：①

行内样式由于将表现和内容混在一起，不符合Web标准，因此应尽量少用或不用。②

内部样式只对样式所在的HTML页面有效。③

当多个页面需要使用相同风格的样式时，可使用外部样式表。这种方式下，同一个样式可以被多个HTML页面链接使用，实现了结构与表现相分离，有助于网页的前期制作和后期维护。知识宝典——CSS常用选择器选择器也称选择符，是CSS样式中的重要部分，是指某个样式所要应用的HTML元素。要使用CSS对HTML页面中的元素实现一对一、一对多或者多对一的控制，就需要用到CSS选择器。在CSS中，根据选择器的类型可将选择器分为基础选择器和复合选择器。（1）基础选择器CSS中常用的基础选择器有4种，分别是标签选择器、类选择器、id选择器和通配符（*）选择器。知识宝典——CSS常用选择器1）标签选择器。标签选择器使用HTML标签名称作为选择器，为页面中同类的标签指定统一的CSS样式。定义标签选择器的语法如下：标签名称{

属性1:属性值;

属性2:属性值;…}知识宝典——CSS常用选择器例如，使用h1选择器定义HTML页面中所有一级标题的样式，代码如下：图3-1-18在网页中使用标签选择器的效果在网页中直接作用于对应的标签，代码如下：使用标签选择器的效果如图3-1-18所示。知识宝典——CSS常用选择器2）类选择器。类选择器指定的样式可以被网页上的多个标签元素使用。类选择器以“.”开始，其后接类名称。使用类选择器定义的CSS样式，需要设置元素的class属性值为其指定样式。定义类选择器的语法如下：.类名称{

属性1:属性值;

属性2:属性值;…}知识宝典——CSS常用选择器例如，定义一个类选择器.text的代码如下：在网页中使用标签的class属性，属性值为类名，代码如下：运用类选择器的效果如图3-1-19所示。图3-1-19在<h2>和<p>标签应用类选择器知识宝典——CSS常用选择器企业说：类选择器可以为具有相同或相似样式的一组元素设置样式。多个标签可以使用同一个类名，使不同的标签具有相同的样式。特别注意，类名的第一个字符不能是数字，并且严格区分大小写，一般采用小写字母表示。知识宝典——CSS常用选择器3）id选择器。id选择器用于对某个元素定义单独的样式。id选择器以“#”开始，语法如下：#id名称{

属性1:属性值;

属性2:属性值;…}说明：1）id名称即HTML元素的id属性值，id名称在一个文档中是唯一的，只对应页面中的某一个具体元素。2）id选择器定义的样式能自动应用到网页中该id名称的元素上。知识宝典——CSS常用选择器例如，在<p>标签中应用id选择器，使用标签的属性“id”，值为id选择器的名称，代码如下：id选择器p1的定义如下：在页面中应用id选择器的效果如图3-1-20所示。图3-1-20在页面中应用id选择器的效果知识宝典——CSS常用选择器3）通配符（*）选择器。通配符选择器匹配HTML中所有元素的设置样式，是所有选择器中作用范围最广的，使用“*”定义。通配符选择器的语法格式如下：*{

属性1:属性值;

属性2:属性值;…}例如，定义通配符选择器，将HTML中所有元素的外边距和内边距设置为0，代码如下：知识宝典——CSS常用选择器说明：CSS选择器的命名规范如下。1）类选择器和id选择器都需要使用英文小写，禁止使用特殊字符。2）名称间隔使用“-”连字符，下画线“_”禁止出现在class命名中。3）不要随意使用id选择器。id选择器是唯一的，类选择器却可以重复使用。另外，id选择器的优先级优先于类选择器，所以id选择器应该按需使用，不能滥用。4）使用有意义的名称，建议使用与结构化或者作用目标相关的，而不是抽象的名称，尽量不缩写。知识宝典——CSS常用选择器（2）复合选择器复合选择器建立在基础选择器之上，是由两个或多个基础选择器通过不同的方式进行组合形成的。复合选择器可以更准确、更高效地选择目标HTML元素。常用的复合选择器有3种，分别是交集选择器、并集选择器、后代选择器。1）交集选择器。交集选择器表示两个选择器的交集，它由两个选择器构成，第一个是标签选择器，第二个是类选择器，两个选择器之间没有空格。与类名一致的标签元素才会应用交集选择器所定义的样式规则。交集选择器的语法格式如下：标签名称.类名称{

属性1:属性值;

属性2:属性值;…}知识宝典——CSS常用选择器如p.text{color:#aaafff;}，表示类名为“text”的<p>标签字体才显示#aaafff颜色。请看下面的例子，想一想三句诗句各显示什么颜色。知识宝典——CSS常用选择器预览效果如图3-1-21所示。图3-1-21交集选择器的预览效果知识宝典——CSS常用选择器2）并集选择器。并集选择器由多个选择器（可以是标签选择器、类选择器、id选择器）通过逗号连接而成，用以定义相同的样式。如果某些选择器定义的样式完全相关或者部分相同，则可以利用并集选择器来定义相同的部分。并集选择器的语法格式如下：选择器1,选择器2,选择器3，…{

属性1:属性值;

属性2:属性值;…}知识宝典——CSS常用选择器例如，h1,p{font-size:24px;color:#f00;}，h1和p是标签选择器，这段代码表示所有标题标签<h1>和段落标签<p>内文本的字号为24px、颜色为红色。请看下面的例子，代码及效果如图3-1-22所示。图3-1-22应用并集选择器的代码及效果知识宝典——CSS常用选择器3）后代选择器。标签选择器和类选择器之间没有空格时是交集选择器，当标签选择器和类选择器之间用空格分隔时，表示后代选择器。后代选择器也称为包含选择器，用于控制容器对象中的子对象，使其他容器对象中的同名子对象不受影响。书写时，容器对象写在前面，子对象写在后面，中间用空格分隔。如果容器对象有多层，则分层依次书写。后代选择器的语法格式如下：选择器1选择器2{

属性1:属性值;

属性2:属性值;…}知识宝典——CSS常用选择器例如，p.text{color:#aaafff;}，在标签选择器p和类选择器.text中间用空格分隔，表示后代选择器。p.text定义的样式仅适用于嵌套在<p>标签中类名为text的文本，其他不在<p>标签中类名为text的文本不受影响。请看下面的例子：知识宝典——CSS常用选择器<h1>中的<span>标签不受后代选择器的影响，只显示类选择器.text的属性（红色字体），第二个<p>标签中的<span>受到了后代选择器的影响，显示为浅蓝色，代码与效果如图3-1-23所示。图3-1-23使用后代选择器的代码及效果知识宝典——CSS常用选择器企业说：1）交集选择器用于简化样式表代码的编写。

2）并集选择器所定义的样式与各个选择器分别定义样式的作用相同，但并集选择器的写法更简捷。3）后代选择器只影响对应容器中的子对象，其他容器对象中的同名子对象不受影响。Web前端开发技术基础通关任务2制作红色资讯详情页2——CSS文本属性AIGC赋能版📑目录01.任务描述02.任务目标03.任务实施图3-3-9访问热点栏目最终效果任务描述为了更好地控制文本标签显示的样式，CSS提供了一系列强大的文本属性。通过本任务的实施，读者可深入学习并应用CSS文本属性，从而能够灵活地调整文本的字体、大小、颜色、对齐方式等，以设计出更加美观、易读和富有设计感的网页，效果如图3-1-24所示。任务描述任务目标1.掌握常用CSS文本属性的用法。2.熟练使用CSS文本属性设置样式。图3-1-24红色资讯详情页2效果任务实施——HTML结构分析整个页面代码结构运用HTML的<article>标签来搭建，页面主标题使用<h1>标签，副标题使用<h4>标签，文章正文分别使用5个<p>标签，代码结构如图3-1-25所示。图3-1-25代码结构任务实施——HTML结构搭建（1）打开项目新建页面1）打开HBuilderX软件，选择“文件”→“打开目录”命令，选择“通关任务1”中已经创建的项目“chapter3-1”。2）新建HTML文件，命名为“example02.html”，打开文件。（2）创建HTML结构1）在<title></title>标签对中输入标题“红色资讯详情页2”。2）在<body></body>标签对中插入用于定义独立内容的<article></article>标签对，在<article></article>标签对中分别插入<h1></h1>、<h4></h4>和5对<p></p>标签对，打开素材“example02.txt”，将文字复制到相应的标签对中，单击“浏览器运行”按钮预览页面，如图3-1-26所示。任务实施——构建HTML结构a）b)图3-1-26在example02.html文件中输入内容并显示页面效果任务实施——CSS样式分析整个页面定义了<article>和<h1>标签选择器，同时也应用了类选择器，并在标签中运用行内样式，效果如图3-1-24所示。具体CSS样式分析如下。1）设置<article>标签的样式为：页面宽度为960px，上下边距为0px，左右边距为自动，字体为微软雅黑，文字大小为16px，首行缩进2em，行高28px。2）标题“广西两人荣获……”的样式为：字体为华文彩云，文本居中对齐，颜色为红色。3）“作者，发布时间……”的样式为：字体为隶书，文本居中对齐。4）落款“摘自……”和“责编……”样式为：文本右对齐，字号为14px，行高为16px。5）文章第一段样式为：字体为楷体，颜色为#d2691e，人物信息“广西柳工……”的字体加粗。6）加下画线部分的文字样式为：文字为斜体并加粗。任务实施——CSS样式美化在<head></head>标签对中添加内部样式<style></style>标签对，设置网页中各元素的样式。（1）定义标签选择器1）设置article标签选择器的样式。2）设置h1标签选择器的样式。3）设置h4标签选择器的样式。任务实施——CSS样式美化企业说定义article、h1和h4标签选择器的样式后，效果如图3-1-27所示。图3-1-27定义article、h1、h4标签选择器后的效果任务实施——CSS样式美化企业说1）定义.right类选择器，设置第4、5个<p>标签的样式，即设置落款的样式，代码如下：使用.right类选择器的代码和效果如图3-1-28所示。图3-1-28使用.right类选择器的代码和效果任务实施——CSS样式美化企业说2）定义.kt类选择器，代码如下：设置第1个<p>标签的样式，即设置正文第一段的样式，使用.kt类选择器的代码和效果如图3-1-29所示。图3-1-29使用.kt类选择器的代码和效果任务实施——CSS样式美化企业说3）定义.bold类选择器，代码如下：设置第1个<p>标签中<span>标签的样式，使用.bold类选择器的代码和效果如图3-1-30所示。图3-1-30使用.bold类选择器的代码和效果任务实施——CSS样式美化企业说4）定义.underl类选择器，代码如下：设置第2个<p>标签中<span>标签的样式，使用.underl类选择器的代码和效果如图3-1-31所示，页面美化完毕。图3-1-31使用.underl类选择器的代码和效果知识宝典——CSS的文本属性CSS的常用文本属性很多，主要用于控制网页中文本的外观和格式。基本语法格式如下：

文本属性:属性值;1.font-familyfont-family属性用于设置字体。网页中常见的字体有宋体、微软雅黑、黑体、楷体等。可同时指定多个字体，中间用英文状态的逗号隔开，表示如果浏览器不支持第一个字体，则使用下一个字体，举例及效果见表3-1-5。说明：尽量使用系统默认字体，以保证文本在任何用户的浏览器中都能正确显示。知识宝典——CSS的文本属性2.font-sizefont-size属性用于设置字号大小。一般以px为单位，网页正文的字号一般为12px，标题或其他需要强调的文本可设置较大的字号，辅助信息或页脚可以设置较小的字号，举例及效果见表3-1-6。知识宝典——CSS的文本属性3.font-weightfont-weight属性用于设置字体粗细，常见的值有normal（正常）、bold（粗体）、bolder（更粗）、lighter（更细）等，也可以使用数值（100~900）来表示粗细程度，举例及效果见表3-1-7。知识宝典——CSS的文本属性4.font-stylefont-style属性用于设置字体风格，常用的属性值有italic（斜体）、oblique（倾斜）和normal（正常字体）。oblique（倾斜）是对没有斜体的字体使用的实现倾斜效果的属性，举例及效果见表3-1-8。知识宝典——CSS的文本属性5.text-decorationtext-decoration属性用于设置文本的underline（下画线）、overline（上画线）、line_x0002_through（删除线）和none（正常文本），举例及效果见表3-1-9。知识宝典——CSS的文本属性6.colorcolor属性用于设置文本颜色，常用于表示颜色参数的方式有3种。1）使用预定义的颜色值表示，包括black、olive、red、green、blue、maroon、teal、navy、lime、fuchsia、white、purple、silver、yellow、aqua等。2）使用十六进制数表示。采用#RRGGBB形式，RR是代表红色的分量值，GG代表绿色分量值，BB代表蓝色分量值，每组分量值的取值范围为00~FF（即0~9，A~F），如#1DB930，也可以写成#1db930，大小写不限。如果每组十六进制数的两位数相同，则可以用一位数表示，如#3300FF可表示为#30F。3）使用rgb()函数表示。例如，黄色可以表示为rgb(255,255,0)，举例及效果见表3-1-10。知识宝典——CSS的文本属性说明：本书项目统一采用十六进制数来表示颜色。知识宝典——CSS的文本属性7.text-aligntext-align属性用于设置文本水平对齐方式，常见的属性值有left（左对齐）、right（右对齐）、center（居中对齐）和justify（两端对齐），举例及效果见表3-1-11。知识宝典——CSS的文本属性8.text-indenttext-indent属性用于设置文本的首行缩进，一般以em（1em为一个中文字符的宽度）为单位来表示缩进的长度，举例及效果见表3-1-12。知识宝典——CSS的文本属性9.line-heightline-height属性用于设置行间的距离（行高），可以控制文字行与行之间的距离。可以使用像素值、em、百分比等来表示行高，举例及效果见表3-1-13。Web前端开发技术基础通关任务3制作红色资讯详情页3——CSS高级文本属性AIGC赋能版📑目录01.任务描述02.任务目标03.任务实施图3-3-9访问热点栏目最终效果任务描述运用CSS高级文本属性，能显著提升网页的美观度和可控性。在本次任务中，我们将处理文本溢出问题，学习定义服务器字体，同时了解选择器的优先级规则，红色资讯详情页3效果如图3-1-32所示。任务描述任务目标1.掌握CSS文本溢出的处理方式。2.熟练使用CSS文本属性设置页面样式。图3-1-32红色资讯详情页3效果任务实施——HTML结构分析整个页面代码结构运用了HTML的<article>标签来搭建，页面主标题使用<h1>标签，“日期、点击量”使用<p>标签，每条资讯的小标题使用<h3>标签，内容使用3个<p>标签，“查阅更多”使用<a>标签，资讯之间运用水平线标签<hr>分隔，代码结构布局如图3-1-33所示。图3-1-33代码结构布局任务实施——构建HTML结构3）插入文字，制作第1条资讯。插入<h3></h3>标签对，打开素材“example03.txt”，将第1条资讯的标题“1.红色文化资源数智实验室揭牌仪式”复制到<h3></h3>标签对中，继续插入<p></p>标签对，输入第1条资讯相对应的内容，单击“浏览器运行”按钮预览页面，代码和效果如图3-1-34所示。图3-1-34第1条资讯的代码和效果任务实施——构建HTML结构图3-1-35第2、3条资讯的代码和效果4）用相同的方法编辑第2、3、4条资讯，第2、3条资讯的代码和效果如图3-1-35所示。a）b）任务实施——CSS样式分析整个页面定义了标签选择器和类选择器，CSS样式应用效果如图3-1-32所示。具体CSS样式分析如下。1）页面<article>标签样式为：页面宽度为960px，上下边距为0px，左右边距自动居中，行高为20px。2）标题“红色资讯”为红色，水平居中对齐；“日期”一行为水平居中对齐。3）4个小标题左对齐，添加下画线，颜色为#333。4）4条资讯内容样式为：元素的宽度为850px，文字大小为18px、颜色为#333、首行缩进2em；设置文本的溢出方式为：元素内的文本不能换行，溢出的内容隐藏，并用省略标记“…”表示溢出文本。5）“查阅更多”的样式：文字右对齐，字体大小为14px，颜色为#333，带下画线，字体风格为斜体。6）右下角阴影部分的属性样式为：文本右对齐，字体大小为14px，颜色为#333，阴影效果为1px1px3px#666。图3-1-32红色资讯详情页3效果任务实施——定义和引入CSS1）定义标签选择器。本页面定义了article、h1、h3这3个标签选择器，以及h1和.text1的并集选择器，代码如下：图3-1-36定义标签选择器后的页面效果择器后的页面效果如图3-1-36所示。任务实施——定义和引入CSS图3-1-37使用.overflow类选择器的代码和效果2）定义和使用类选择器。定义.overflow类选择器，设置页面资讯详细内容溢出时的处置方式和属性设置，设置元素的宽度和高度、字号、字体颜色、首行缩进、元素内文本不能换行、溢出内容隐藏并使用省略标记，代码和效果如图3-1-37所示。任务实施——定义和引入CSS在页面中运用类选择器，第1条资讯的代码和效果如图3-1-38所示。图3-1-38第1条资讯的代码和效果文字的样式，包括居中对齐和倾斜；并集选择器统一设置这两部分右对齐，字号为14号，颜色为#333。代码如下。任务实施——定义和引入CSS4）分别为第2、3、4条资讯设置样式。用第1条资讯设置样式的方法，为第2、3、4条资讯设置相同的样式，第2、3、4条资讯的代码和效果如图3-1-39所示。图3-1-39第2、3、4条资讯的代码和效果知识宝典——CSS高级文本属性1.text-overflow属性text-overflow属性用于设置元素内文本溢出时的处置方式，常用属性值为clip和ellipsis。clip修剪元素内溢出的文本，使溢出的文本不显示，也不显示省略标记“...”；ellipsis在元素文本末尾用省略标记“...”表示被修剪的文本。常用语法格式如下：选择器{text-overflow:clip|ellipsis}如p{text-overflow:clip}，表示设置溢出文本不显示，也不显示省略标记“...”，text-overflow举例及效果见表3-1-14。知识宝典——CSS高级文本属性下面通过一个页面的制作案例来说明如何在页面中使用text-overflow属性设置溢出文本。1）在项目中新建text-overflow.html文件。在<title></title>标签对中输入“text-overflow属性”，在<body>中插入<p>标签，并输入文字，代码和效果如图3-1-40所示。图3-1-40text-overflow.html文件的代码和效果知识宝典——CSS高级文本属性2）定义CSS样式。在<style></style>标签对中定义p标签选择器，代码如下：保存CSS样式代码，预览网页，效果如图3-1-41所示。图3-1-41设置元素宽、高和边框的效果将height属性设置为40px后的效果如图3-1-42所示。图3-1-42设置height属性为40px后的效果知识宝典——CSS高级文本属性继续添加p标签选择器的代码，添加属性white-space，设置元素内的文本不能换行（nowrap），代码如下，效果如图3-1-43所示。图3-1-43设置元素内文本不能换行的效果知识宝典——CSS高级文本属性继续添加p标签选择器代码，添加overflow属性，设置溢出的内容隐藏，代码如下，效果如图3-1-44所示。图3-1-44设置文本内容隐藏的效果知识宝典——CSS高级文本属性继续添加p标签选择器代码，添加text-overflow属性，设置溢出文本用省略标记“...”表示，代码如下，效果如图3-1-45所示。图3-1-45用省略标记“…”表示溢出文本的效果知识宝典——CSS新增属性CSS3新增了许多属性，这些属性大大增强了网页的设计和布局能力。基本语法格式如下：文本属性:属性值;（1）text-shadow属性text-shadow属性用于设置文本的阴影效果，增强文本的视觉效果，常用语法格式如下：text-shadow:水平阴影距离垂直阴影距离模糊半径阴影颜色;阴影距离可以是正值，也可以是负值，表示不同方向的阴影效果。知识宝典——CSS新增属性如text-shadow:-3px3px3px#f00;表示设置文字阴影效果：水平阴影距离为-3px，垂直阴影距离为3px，模糊半径为3px，阴影颜色为#f00，text-shadow举例及效果见表3-1-15。企业说：text-shadow属性只会对文本产生效果，不会影响到其他元素或盒子模型。知识宝典——CSS新增属性（2）@font-face@font-face是CSS3的新增属性，定义服务器字体。通过这个属性，用户可以在网页中使用任何喜欢的字体，不需要考虑计算机是否安装了这些字体。定义服务器字体的基本格式如下：@font-face{font-family:字体名称;/*自定义的字体名称，一般使用英文字符*/src:url(字体存储路径);}知识宝典——CSS新增属性下面举例说明@font-face属性的定义与应用，代码如下，效果如图3-1-46所示。图3-1-46定义和使用服务器字体的效果知识宝典——CSS优先级3.CSS优先级定义CSS样式时，经常会在同一个元素上应用两个或更多规则，这时可能会出现优先级的问题。对同一个元素应用选择器样式的优先级是id选择器>类选择器>标签选择器。例如，新建一个.html文件，设置p标签选择器、.text类选择器和#p1id选择器，代码如下，页面的文字颜色是id选择器定义的颜色，如图3-1-47所示。图3-1-47显示id选择器定义的颜色Web前端开发技术基础晋级任务制作韦拔群诗词详情页AIGC赋能版图3-3-27页面效果任务要求综合运用HTML及CSS文本样式完成韦拔群诗词详情页的制作，具体网页效果如图3-1-48所示。图3-1-48韦拔群诗词详情页效果制作要点图3-1-49韦拔群诗词详情页结构分析1）参考图3-1-49，完成HTML结构搭建。2）运用CSS相关知识，参考图3-1-50，完成页面的样式设置。其中部分样式未提示，请自行分析后设置。图3-1-50CSS样式分析图任务小结在本任务中，我们以红色资讯详情页制作为核心，了解了CSS样式的基础知识，学习

了引入CSS样式，了解了常用选择器的定义与使用方法。另外，我们还对CSS中常见的文

本属性及新增文本属性进行了解析，了解了选择器的优先级。综合以上知识，完成了红色资

讯详情页的制作。本任务主要知识点见表3-1-16。任务小结感谢观看Web前端开发技术基础Web前端开发技术基础AIGC赋能版Web前端开发技术基础任务2红色景点页面制作——盒子模型及使用CSS设置图像样式通关任务1制作“龙州起义纪念馆”页面AIGC赋能版📑目录01.任务描述02.任务目标03.任务实施任务描述盒子模型是CSS中重要的核心概念之一，是使用CSS控制页面元素外观和位置的基础。掌握盒子模型的规律和特征，能更好地实现网页中各元素的呈现效果。本任务将使用盒子模型制作红色景点页面中的“龙州起义纪念馆”页面，并通过CSS样式对其进行美化。任务描述任务目标1.理解盒子模型的概念。2.掌握盒子模型的相关属性。3.能够使用盒子模型完成“龙州起义纪念馆”页面的制作。图3-2-1“龙州起义纪念馆”页面效果任务实施——结构分析页面由<div>、<h1>、<p>和<span>标签进行搭建。其中，<div>标签包含了标题标签<h1>和段落标签<p>，标签<p>中包含标签<span>。“龙州起义纪念馆”放置在<span></span>标签对中。任务实施——构建HTML结构（1）创建站点并保存网页1）运行HBuilderX软件，选择“文件”→“新建”→“项目”命令，在弹出的对话框中选择“普通项目”，将项目名称命名为“chapter3-2”，单击“浏览”按钮，选择存放路径，勾选“基本HTML项目”复选框，单击“创建”按钮新建项目。2）将项目中的“index.html”文件重命名为“example01.html”。3）打开example01.html文件，在<title></title>标签对中输入文字“龙州起义纪念馆”，为网页设置文档标题。（

2）创建HTML主体结构图3-2-3代码及效果任务实施——构建HTML结构1）在<body></body>标签对中输入<div></div>标签对，作为页面主体内容的容器。2）在<div></div>标签对中添加<h1></h1>和<p></p>标签对，并输入文字。3）为<p></p>标签对中的段首文字“龙州起义纪念馆”添加<span></span>标签对，后面会对其样式进行设置。CSS样式分析图3-2-4龙州起义纪念馆CSS样式分析后的效果任务实施——CSS样式分析1）设置<div>宽度为880px、高度为350px，盒子水平方向居中，设置边框为3px的酒红色（#C40001）实线，圆角半径为20px。2）设置<h1>字体颜色为#333333，文字水平方向居中，下外边距为5px。3）设置<p>内边距为10px，字体为微软雅黑，字体大小为16px，首行缩进2个字符，行高为40px。4）设置“龙州起义纪念馆”文字颜色为酒红色（#C40001），字体大小为20px，字体加粗。设置div的样式任务实施——CSS样式添加图3-2-5设置div样式后的效果在<head></head>标签对中添加内部样式表<style></style>标签对，设置网页各元素样式。（

1）设置<h1>、<p>、段首文字“龙州起义纪念馆”的样式。任务实施——CSS样式添加图3-2-1“龙州起义纪念馆”页面效果Web前端开发技术基础

通关任务2制作“八路军桂林办事处纪念馆”页面AIGC赋能版📑目录01.任务描述02.任务目标04.知识宝典03.任务实施任务描述图像是网页中主要的元素之一。图像不但能够美化页面，而且与文本相比能够更直观地表达信息。图文混排的页面，能让网页变得更加生动和形象，可以提高浏览者查看网页的兴趣。本任务主要使用HTML中的盒子模型、图像标签<img>搭建红色景点二级页面中的“八路军桂林办事处纪念馆”页面，并通过CSS样式对其进行美化。任务描述任务目标1.掌握图像的基本样式设置方法。2.掌握图像和文本混排的方法。3.掌握元素浮动属性的运用，能为元素设置浮动，并清除浮动带来的不良影响。4.能够使用图像样式、浮动属性完成“八路军桂林办事处纪念馆”页面的制作。图3-2-6“八路军桂林办事处纪念馆”页面效果任务实施——结构分析“八路军桂林办事处纪念馆”页面包含标题和内容，分别使用<h2>标签和<div>标签。<div>标签里面包含图片（<img>标签）和文字（<p>标签）。任务实施——HTML结构搭建（1）创建站点并保存网页1）打开项目“chapter3-2”，在项目中新建.html文件，重命名为example02.html。

图3-2-7代码结构图3-2-6“八路军桂林办事处纪念馆”页面效果2）打开example02.html文件，在<title></title>标签对中输入标题“八路军桂林办事处纪念馆”。（

2）创建HTML结构图3-2-8“八路军桂林办事处纪念馆”页面的HTML代码及效果任务实施——构建HTML结构1）在<body></body>标签对中添加<h2></h2>标签对制作标题，添加<div></div>标签对添加页面内容。2）在<div></div>标签对中添加<img>标签插入图片，添加两个<p></p>标签对，分别设置类名为text1、text2，输入文字内容。3）给类名为text1的段首文字“八路军桂林办事处纪念馆”添加<span></span>标签对。任务实施——CSS样式分析1）设置<h2>的宽度为500px，盒子水平方向居中，文字居中对齐，底部边框为5px的酒红色（#C40001）实线，底部外边距为15px。2）设置<div>宽度为800px，高度为350px，水平方向居中，设置边框为3px的酒红色（#C40001）实线，左上角、右上角圆角半径为15px，设置div水平阴影为5px，垂直阴影为5px，模糊半径为5px，颜色为#ccc。3）设置图片向左浮动，上、下、左、右外边距为10px，圆角半径为20px，图片水平阴影为5px，垂直阴影为5px，模糊半径为5px，颜色为#ccc。4）设置类名为text1、text2的段落文字，左、右内边距为10px，字体为微软雅黑，文字大小为14px，首行缩进2个字符，行高28px。5）给类名为text2的段落文字清除左、右浮动带来的影响，设置文字背景颜色为灰色（#DCDCDC），上外边距为30px。6）设置“八路军桂林办事处纪念馆”文字颜色为酒红色（#C40001），文字大小为18px，字体加粗。CSS样式分析任务实施——CSS样式添加图3-2-9设置h2和div样式后的效果在<head></head>标签对中添加内部样式表<style></style>标签对，设置网页各元素样式。1.设置<h2>、<div>的样式任务实施——CSS样式添加图3-2-9设置h2和div样式后的效果2.设置<img>的样式4.设置<h1>、<p>、段首文字“龙州起义纪念馆”的样式。任务实施——CSS样式添加图3-2-1“龙州起义纪念馆”页面效果任务实施——CSS样式添加图3-2-12设置类名为text1text2段落文字样式后的效果5.设置text1、text2段落文字的样式任务实施——CSS样式添加图3-2-6“八路军桂林办事处纪念馆”页面效果6.设置“八路军桂林办事处纪念馆”文字的样式知识宝典-——盒子模型HTML的盒子模型（BoxModel）是CSS布局的基础，决定了元素如何在页面上渲染以及它们之间如何进行交互。每个HTML元素都可以看作是由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成的矩形盒子。盒子模型为HTML元素的布局和样式提供了强大的控制手段，使得开发人员能够轻松地实现各种复杂的页面效果。同时，理解盒子模型也是掌握CSS布局和样式的基础。1.盒子模型的概念一个标准的W3C盒子模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）这4个属性组成。图3-2-13标准的W3C盒子模型组成知识宝典-——盒子模型2.盒子模型的类型及转换在CSS中，根据计算方式的不同，盒子模型分为标准盒模型和IE盒模型。在标准盒模型中width和height指的是内容区域（content）的宽度和高度，不是盒子的实际大小；在IE盒模型中，width和height指的是内容区域+border+padding的宽度和高度。表3-2-2 盒子模型的分类、说明和计算公式知识宝典-——盒子模型使用box-sizing属性可以将盒子模型由默认的标准盒模型转换为IE盒模型（怪异盒模型）。IE盒模型可以更方便地指定盒子的自身尺寸，省去计算。知识宝典-——盒子模型3.盒子模型的相关属性1）边框（border）属性在网页中，表格、段落、图片都可以设置边框样式。要设置一个元素的边框，必须设置以下3个方面：边框的宽度、边框的线、边框的颜色。边框有4条，每条边框都可以独立设置，如“border_x0002_top:上边框宽度上边框样式上边框颜色”；若4条边框的属性值一样，则可简写为“border:边框宽度边框样式边框颜色”。表3-2-3盒子模型border属性值举例及效果知识宝典-——盒子模型3.盒子模型的相关属性2）圆角边框（border-radius）属性CSS3中新增的border-radius属性用于设置圆角边框。设置圆角半径时，可以分别为4个角设置不同的圆角半径值。语法格式为“border_x0002_radius：圆角半径”。表3-2-4盒子模型border-radius属性值举例及效果知识宝典-——盒子模型3.盒子模型的相关属性3）内边距（padding）属性padding属性用于设置盒子中内容与边框之间的距离，可通过padding-top、padding-right、padding-bottom、padding-left分别设置上内边距、右内边距、下内边距、左内边距，也可通过padding综合设置4个方向的内边距。语法格式为“padding:像素值”。表3-2-5盒子模型padding属性值举例及效果以上可以简写为：padding：20px、5px、10px、30px;代表的方向为：上、右、下、左。知识宝典-——盒子模型3.盒子模型的相关属性4）外边距（margin）属性外边距用于设置盒子与其他盒子之间的距离，可通过margin-top、margin-right、margin-bottom、margin-left分别设置上外边距、右外边距、下外边距、左外边距，也可通过marging综合设置4个方向的外边距，其属性值的设置与padding相似。表3-2-6 盒子模型margin属性值举例及效果知识宝典-——盒子模型3.盒子模型的相关属性5）盒子阴影（box-shadow）属性box-shadow属性用于给盒子添加周边阴影效果。语法格式为“box-shadow:h-shadow（x轴偏移量）v-shadow（y轴偏移量）blur（模糊半径）spread（阴影大小）color（颜色）inset（阴影类型）”。表3-2-7 box-shadow属性值及说明表3-2-8 盒子模型box-shadow属性值举例及效果知识宝典-——盒子的浮动1）浮动属性。元素的浮动是指设置了浮动属性的元素会脱离标准流的控制，移动到指定位置。在CSS中，通过float属性设置左浮动或右浮动，语法格式为“float:属性值;”。表3-2-9 float属性值及说明表3-2-10 盒子模型float属性值举例及效果知识宝典-——盒子的浮动2）清除浮动。当为一个元素设置了浮动属性后，它会脱离正常的文档流，导致其后的元素受到浮动元素的影响而发生位置变化。为了使浮动元素下方的元素不再受浮动元素的影响，可为下方元素设置clear属性，使其正常显示在浮动元素的下方。表3-2-11 clear属性值及说明clear属性主要用于清除浮动，应用于需要清除浮动影响的元素，它规定了元素的哪一侧不允许出现其他浮动元素。语法格式为“选择器{clear:属性值}”。知识宝典-——盒子的浮动为box1、box2设置向左浮动后，box1、box2脱离文档流，box3向上移动，占用了box1、box2原来文档流的位置，此时box3的一部分被box1、box2遮挡。若想让box3正常显示在box1、box2的下方，则需要给box3设置清除浮动，使其不受box1、box2浮动带来的影响。

表3-2-12 清除浮动举例及效果Web前端开发技术基础

通关任务3制作“李明瑞、韦拔群革命烈士纪念馆”页面AIGC赋能版📑目录01.任务描述02.任务目标04.知识宝典03.任务实施任务描述在HTML中，背景图像对于网页设计和用户体验具有重要的意义。为背景元素添加图像，可以增加网页的视觉吸引力，提高用户的阅读体验，并有助于传达网页的主题和信息。本任务主要使用HTML中的盒子模型、图像标签、文字标签搭建红色景点二级页面中的“李明瑞、韦拔群烈士纪念馆”页面，并通过CSS样式对其进行美化。任务描述任务目标1.掌握页面插入图像、添加背景图像的方法。2.掌握背景图像基本样式的设置方法。3.掌握图像和文本混排编辑的方法。4.掌握页面背景的设置方法。5.能够利用盒子模型、背景图像样式等完成“李明瑞、韦拔群烈士纪念馆”页面的制作。图3-2-16“李明瑞、韦拔群革命烈士纪念馆”页面最终效果任务实施——结构分析“李明瑞、韦拔群烈士纪念馆”页面包含标题和内容，分别使用<h2>标签和<div>标签。<div>标签里面包含图片和文字两部分内容。任务实施——HTML结构搭建（1）创建站点并保存网页1）打开项目“chapter3-2”，在项目中新建.html文件，重命名为example03.html。2）打开example03.html文件，在<title></title>标签对中输入标题“李明瑞、韦拔群烈士纪念馆”。（

2）创建HTML结构图3-2-8“李明瑞、韦拔群烈士纪念馆”页面的HTML代码及效果任务实施——构建HTML结构1）在<body></body>标签对中输入<h1></h1>、<div></div>标签对，作为栏目的标题和内容的容器。2）在<div></div>标签对中添加<img></img>和<p></p>标签对以插入图片，输入对应文字。任务实施——CSS样式分析1）设置<body>内、外边距为0，页面文字大小为16px，页面背景颜色为淡黄色（#f5f5dc）。2）设置<h1>的内边距为10px，文字水平居中对齐，设置标题在页面水平居中。3）设置<div>宽度为960px，上下外边距为10px，水平方向居中，内边距为20px，设置边框为2px的淡黄（#daa520）实线，设置背景颜色为白色（#fff），在右下角插入背景图片，不重复。4）设置<div>中的图片宽度为290px，高度为250px，向左浮动，右外边距为20px，设置边框为3px的棕色（#AC724A）实线，圆角半径为15px。5）设置<div>中的段落文字<p>，上外边距为10px，首行缩进2个字符，行高为35px。CSS样式分析任务实施——CSS样式添加图3-2-18添加页面、h1和div样式后的效果在<head></head>标签对中添加内部样式表<style></style>标签对，设置网页各元素样式。1.设置<body>、<h1>、<div>的样式任务实施——CSS样式添加图3-2-16“李明瑞、韦拔群革命烈士纪念馆”页面最终效果2.设置<div>中的图片、段落文字<p>样式知识宝典-——图像样式网页能通过背景颜色或背景图像给人留下深刻的第一印象，如节日题材的网站一般采用应景的图片来营造节日氛围，所以在网页设计中，控制背景颜色和背景图像是很重要的。设置背景颜色或背景图像时可使用综合属性background设置与背景相关的参数。1.背景颜色样式在CSS中，使用background-color属性来定义元素的背景颜色。语法格式为“background_x0002_color:颜色值”。表3-2-13 background-color属性举例及效果知识宝典-——图像样式知识拓展：背景图像渐变效果CSS渐变主要分为两种类型：线性渐变（LinearGradients）和径向渐变（RadialGradients），下面重点介绍线性渐变（LinearGradients）。线性渐变（LinearGradients）沿着一条直线（或称为渐变线）创建颜色过渡。这条线由渐变的方向和角度定义。在CSS中，使用linear-gradient()函数来创建线性渐变，语法格式为“background:linear-gradient（渐变角度,颜色值1，颜色值2，…，颜色值n）”。知识宝典-——图像样式2.背景颜色样式background-image属性是控制元素的必选属性，定义了图像的来源。与HTML的<img>标签一样，必须定义图像的来源途径，图像才能显示。语法格式为“background-image:url（"图像地址"）”。表3-2-16 background-image属性举例及效果1）background-image（背景图像）属性知识宝典-——图像样式1.背景颜色样式background-repeat属性定义背景图像的显示方式，如是否平铺和如何平铺。语法格式为“background-repeat:属性值”。2）background-repeat（背景图像平铺）属性属性值说明repeat默认值。表示在水平方

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

温馨提示

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

最新文档

评论

0/150

提交评论