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

下载本文档

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

文档简介

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高级文本

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

温馨提示

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

最新文档

评论

0/150

提交评论