任务6.1 设置网页文本格式

模块6文本格式的高级设置任务6.1设置网页文本格式网页设计项目教程（HTML5+CSS3+JavaScript）学习目标知识目标理解CSS3文本样式属性的语法、取值与作用；掌握字体、字号、字体风格、加粗、大小写转换、字体复合属性、字体颜色与文本溢出等核心知识点。能力目标能够运用CSS3技术设置网页文本格式（颜色、字体、字号、粗体、斜体、文本修饰、背景色等）；能综合运用文本样式属性优化排版，提升可读性与视觉效果。素养目标培养学生的审美能力与细节意识；在任务实施中融入中华传统文化元素，增强文化素养与文化自信。任务描述文本是网页内容的核心载体，文本样式设置是网页美化中最常见的工作。为网页中的文本设置各种样式：颜色、字体、字号、粗体、斜体、文本修饰、背景色、阴影等。相关知识和技能任务6.1涵盖以下8个文本格式知识点：▪6.1.1字体——@font-face引入自定义字体▪6.1.2字号——px/em/rem单位▪6.1.3字体风格——font-style▪6.1.4加粗字体——font-weight▪6.1.5大小写转换——text-transform▪6.1.6字体复合属性——font简写▪6.1.7字体颜色——RGB多种表示▪6.1.8溢出文本——text-overflow6.1.1字体现代网页设计中，@font-face允许在网页中使用自定义字体，无需依赖用户系统已安装字体。▪作用：将字体文件直接嵌入网页，保证字体在所有设备与浏览器中显示一致。▪font-family：定义字体名称，作为CSS中引用该字体的标识符。▪src：指定字体文件路径与格式；url为字体地址，format指定字体格式（可选）。▪font-weight：定义字体粗细（normal/bold/400/700…）。▪font-style：定义字体样式（normal/italic）。▪font-display：控制字体加载时的显示行为（swap等）。实例代码6-1定义和使用自定义字体@font-face语法与参数（按属性分行书写，清晰规范）。@font-face{font-family:'YourFontName';src:local(<family-name>)|url('font.woff2')format('woff2'),url('font.woff')format('woff');font-weight:normal|bold|400|700|...;font-style:normal|italic;font-display:auto|block|swap|fallback|optional;}教学提示font-family为引用标识；src的url指向字体文件。font-display:swap可在加载期间显示回退字体，加载完成后切换。关键字体可用<linkrel="preload">提前加载。6.1.2字号初期普遍用px，但px在用户改变浏览器字号时易破坏布局，建议用相对单位。px（绝对单位）简单直观，但与设备、浏览器设置强绑定；用户缩放时布局易乱。p{font-size:20px;}em（相对父元素）相对父元素字体大小；父元素16px时，1.5em=24px。p{font-size:1.25em;}rem（相对根元素）相对<html>根元素字体大小，不受嵌套影响。p{font-size:1.25rem;}6.1.3字体风格font-style用于设置文本风格，可呈现斜体或偏斜体等强调效果。▪语法：font-style:inherit|italic|normal|oblique▪normal：正常风格，不做斜体/偏斜体修饰（常规样式）。▪italic：字体风格为斜体。▪oblique：字体风格为偏斜体。▪inherit：从父元素继承字体风格。案例演示6-2字体风格示例通过不同font-style值展示各种字体风格效果。<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><title>font-style字体属性</title><style>.normal-text{font-style:normal;}.italic-text{font-style:italic;}.oblique-text{font-style:oblique;}.inherit-text{font-style:inherit;}</style></head><body><divclass="normal-text">这是一段正常风格的文本。</div><divclass="italic-text">这是一段斜体风格的文本。</div><divclass="oblique-text">这是一段偏斜体风格的文本。</div><divstyle="font-style:italic;"><divclass="inherit-text">继承父元素的斜体风格。</div></div></body></html>说明normal/italic/oblique直接控制风格。inherit示例中，子元素从父元素继承italic。效果对照见图6-1。6.1.4加粗字体font-weight用于定义HTML元素的字体粗细。▪语法：font-weight:<weight-value>;▪normal：正常粗细（默认，相当于400）。▪bold：加粗（相当于700）。▪lighter：相对父元素变细。▪bolder：相对父元素变粗。▪数值100–900：以100为间隔，数值越大越粗（400=normal，700=bold）。案例演示6-3字体加粗示例通过不同font-weight值对比字体粗细效果。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>FontWeightExample</title><style>.normal-text{font-weight:normal;}.bold-text{font-weight:bold;}.lighter-text{font-weight:lighter;}.bolder-text{font-weight:bolder;}.custom-weight{font-weight:800;}</style></head><body><pclass="normal-text">正常粗细文本</p><pclass="bold-text">加粗文本</p><pclass="lighter-text">更细文本（相对父元素）</p><pclass="bolder-text">更粗文本（相对父元素）</p><pclass="custom-weight">自定义超粗文本（800）</p></body></html>说明normal/bold与400/700等价。lighter/bolder相对父元素粗细变化。效果对照见图6-2。6.1.5小写字母转为大写字母text-transform便捷地控制文本字符大小写转换。▪语法：text-transform:none|capitalize|uppercase|lowercase|full-width▪none：不转换，保留原始格式（默认）。▪capitalize：每个单词首字母大写，其余小写。▪uppercase：全部转为大写（强调、警告）。▪lowercase：全部转为小写（简约、现代风格）。▪full-width：所有字符转为全宽形式（需字体支持）。案例演示6-4大小写转换示例通过不同text-transform值展示大小写转换效果。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>TextTransformExample</title><style>.original-text{text-transform:none;}.capitalized-text{text-transform:capitalize;}.uppercase-text{text-transform:uppercase;}.lowercase-text{text-transform:lowercase;}.full-width-text{text-transform:full-width;}</style></head><body><pclass="original-text">OriginalText:helloworld!</p><pclass="capitalized-text">Capitalize:helloworld!</p><pclass="uppercase-text">Uppercase:helloworld!</p><pclass="lowercase-text">Lowercase:HELLOWORLD!</p><pclass="full-width-text">Full-width:English12345.</p></body></html>要点capitalize适合自动生成标题。uppercase/lowercase保证格式一致。仅改变视觉呈现，不改HTML实际文本。6.1.6字体复合属性font可在一条声明中综合设置字体多个方面，书写更简洁高效。▪顺序：font-stylefont-variantfont-weightfont-size[/line-height]font-family▪未指定的属性采用默认值；值之间必须用空格分隔，顺序尽量遵循规范。p{font:italicbold20px/1.5"TimesNewRoman";}6.1.7字体颜色合理用色可区分层次、强调重点；CSS中常用RGB模式表示颜色。▪十六进制：#rrggbb，前两位红、中两位绿、末两位蓝（如#66ff00）。▪RGB整数：rgb(r,g,b)，三值为0–255（如rgb(20,204,100)）。▪RGB百分比：rgb(r%,g%,b%)，三值为0%–100%（如rgb(20%,10%,95%)）。▪超链接状态：a:link/a:visited/a:hover/a:active分别设置不同颜色。▪注意文本与背景的对比度，必要时用媒体查询适配暗色模式。案例演示6-5文本颜色控制（一）CSS部分：三种颜色表示法与超链接状态。/*十六进制颜色表示法*/.text-hex{color:#66ff00;}/*青绿色文本*//*RGB整数表示法*/.text-rgb-integer{color:rgb(20,204,100);}/*浅绿色*//*RGB百分比表示法*/.text-rgb-percent{color:rgb(20%,10%,95%);}/*紫色*/.text-default{color:black;}/*超链接颜色示例*/a:link{color:#0000ff;}/*未访问：蓝*/a:visited{color:#800080;}/*已访问：紫*/a:hover{color:#ff0000;}/*悬停：红*/a:active{color:#008000;}/*活动：绿*/.colorful-box{background-color:#f0f8ff;/*爱丽丝蓝（淡蓝）*/border:2pxsolid#add8e6;/*浅蓝边框*/}案例演示6-5文本颜色控制（二）HTML部分：页面结构与颜色应用示例。<body><h2>文本颜色示例</h2><pclass="text-hex">十六进制：#66ff00。</p><pclass="text-rgb-integer">RGB整数：rgb(20,204,100)。</p><pclass="text-rgb-percent">RGB百分比：rgb(20%,10%,95%)。</p><pclass="text-default">默认黑色文本。</p><h2>超链接颜色示例</h2><ahref="">示例链接</a><h2>背景与边框颜色搭配示例</h2><divclass="colorful-box"><pclass="text-rgb-integer">文本与背景、边框搭配展示。</p></div></body></html>6.1.8溢出文本text-overflow定义文本溢出时是否用省略标记（…）标示。▪语法：text-overflow:clip|ellipsis▪clip：对溢出文本进行剪切（默认）。▪ellipsis：溢出处显示省略标记（…）。▪单独使用不能产生省略号，必须配合：▪white-space:nowrap（强制单行显示）+overflow:hidden（隐藏溢出）。案例演示6-6溢出文本效果（一）CSS部分：text-overflow配合nowrap与hidden实现省略号。.tech-desc{width:100%;border:1pxsolid#ddd;background-color:#f8f9fa;text-overflow:ellipsis;/*溢出显示省略号*/overflow:hidden;/*隐藏溢出内容*/white-space:nowrap;/*强制单行显示*/padding:8px12px;border-radius:4px;margin-top:8px;}案例演示6-6溢出文本效果（二）HTML部分：容器与文本结构示例。<divclass="tech-container"><h1>科技创新推动国家发展</h1><p>科技已成为国家竞争力的核心要素……</p><divclass="tech-item"><divclass="tech-title">5G通信技术</div><divclass="tech-desc">5G通信技术要求高速率、低时延……</div></div><divclass="tech-item"><divclass="tech-title">人工智能</div><divclass="tech-desc">人工智能是科技创新的重要方向……</div></div><divclass="tech-item"><divclass="t