freeCodeCamp 实战用 CSS text-transform 属性将文本转为大写——Applied Visual Design 挑战解析【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本文基于 freeCodeCamp 课程库中「Applied Visual Design」板块的挑战文档 587d781c367417b2b2512ac0.md 展开讲解 CSStext-transform属性的完整取值体系并通过该挑战的原始代码、参考答案与测试断言演示如何在卡片式页面中将h4标题渲染为大写同时理解「视觉变换」与「修改 DOM 文本内容」的本质区别。挑战在课程中的位置该挑战属于 Responsive Web Design 认证下的 Applied Visual Design 板块。从 板块结构文件 可以看到它是challengeOrder中的第 13 个挑战元数据 id 为587d781c367417b2b2512ac0dashedName为use-the-text-transform-property-to-make-text-uppercase前一个挑战是「Decrease the Opacity of an Element」降低元素不透明度后一个挑战是「Set the font-size for Multiple Heading Elements」为多个标题设置字号。板块的归属关系可在 responsive-web-design.json 中确认applied-visual-design排在basic-html-and-html5与basic-css之后是该认证的第 3 个板块——学习者先掌握 HTML 基础与 CSS 基础再进入本板块做综合视觉设计练习。挑战元数据中challengeType: 0表示这是一个常规编码挑战附有视频讲解与论坛讨论主题forumTopicId: 301081。text-transform 属性取值全表文档给出的核心知识是text-transform属性用于改变文本的外观appearance让页面文本保持一致的呈现风格而无需改动 HTML 元素的实际文本内容。以下表格完整继承自原始文档示例文本为 Transform me值结果lowercasetransform meuppercaseTRANSFORM MEcapitalizeTransform Me每个单词首字母大写initial使用该属性的默认值inherit继承父元素的text-transform值none默认值保持原始文本不变需要注意两点语义区别none才是该属性的默认值而initial的语义是「回到初始值」——对text-transform而言两者结果相同都是none但initial的作用是显式覆盖从父元素继承来的值capitalize与uppercase不同前者只把每个单词的首字母变大写后者把所有字母都变大写。任务要求与初始代码挑战的指令instructions是使用text-transform属性把h4的文本转换为大写。初始代码seed是一个带阴影的卡片式布局包含标题h4Alphabet/h4、一段关于 Google 创始人的段落和两个链接。为便于阅读下文将链接的href统一替换为#原始文件 587d781c367417b2b2512ac0.md 中指向人物词条页面style h4 { text-align: center; background-color: rgba(45, 45, 45, 0.1); padding: 10px; font-size: 27px; } p { text-align: justify; } .links { text-align: left; color: black; opacity: 0.7; } #thumbnail { box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } .fullCard { width: 245px; border: 1px solid #ccc; border-radius: 5px; margin: 10px 5px; padding: 4px; } .cardContent { padding: 10px; } .cardText { margin-bottom: 30px; } /style div classfullCard idthumbnail div classcardContent div classcardText h4Alphabet/h4 hr pemGoogle was founded by Larry Page and Sergey Brin while they were uPh.D. students/u at strongStanford University/strong./em/p /div div classcardLinks a href# target_blank classlinksLarry Page/abrbr a href# target_blank classlinksSergey Brin/a /div /div /div这段 seed 代码本身就是一个「视觉设计」练习的延续h4已有居中对齐、半透明背景色、内边距和字号#thumbnail用两层box-shadow做出卡片浮起效果.links通过opacity: 0.7降低链接不透明度即上一课的内容。本课要做的就是在h4规则里补上最后一块视觉细节——大写字号。参考答案官方 solutions 部分的修改只有一行在h4选择器中追加text-transform: uppercase;。style h4 { text-align: center; background-color: rgba(45, 45, 45, 0.1); padding: 10px; font-size: 27px; text-transform: uppercase; } /* 其余规则p、.links、#thumbnail、.fullCard、.cardContent、.cardText与 seed 完全一致 */ /style div classfullCard idthumbnail div classcardContent div classcardText h4Alphabet/h4 hr pemGoogle was founded by Larry Page and Sergey Brin while they were uPh.D. students/u at strongStanford University/strong./em/p /div div classcardLinks a href# target_blank classlinksLarry Page/abrbr a href# target_blank classlinksSergey Brin/a /div /div /div渲染后h4显示为 ALPHABET但注意 HTML 源码里的文本节点仍然是Alphabet——这正是text-transform的设计意图只改渲染结果不改数据。测试断言如何验证「只改外观不改内容」原始文档的 hints 部分包含两组自动化断言它们精确界定了通过本挑战的两个条件。条件一h4的计算样式必须是uppercase。const h4Element document.querySelector(h4) const h4Style window.getComputedStyle(h4Element); assert.equal(h4Style?.textTransform, uppercase);这里使用的是window.getComputedStyle它返回元素的计算样式camelCase 键名如textTransform。这意味着测试检查的是浏览器解析样式表后的最终生效值而不是你在 HTML 上写了什么属性——即使值来自inherit从父级继承只要计算结果是uppercase就能通过。条件二h4的原始文本不能真的被改成大写。assert.notEqual( document.querySelector(h4)?.textContent, document.querySelector(h4)?.textContent?.toUpperCase() );这条断言要求textContent与它自身的大写形式不相等即文本节点里必须还保留着小写字母Alphabet而非ALPHABET。它从反面拦截了「直接把 HTML 里的字母敲成大写」这种错误解法那样虽然视觉正确但违背了「用 CSS 属性完成变换」的挑战目标也破坏了内容与表现分离的原则。两条断言合起来恰好完整描述了text-transform的语义边界样式层负责呈现getComputedStyle可见数据层保持原样textContent不变。这一点对可访问性和国际化都有实际意义——屏幕阅读器、复制粘贴、以及后续多语言翻译读取的都是原始文本而不是视觉上的大写形态。该属性在 freeCodeCamp 平台自身代码中的应用text-transform并非课程里的孤立知识点freeCodeCamp 自己的客户端代码就大量使用它。从源码结构看至少以下组件样式表包含该属性profile.css个人页面组件searchbar-base.css搜索栏基础样式donation.css捐赠组件landing.css落地页组件。这说明「用 CSS 变换文字大小写来控制视觉层级」是真实生产代码中的常规手法与本课程挑战所练习的场景一致。小结通过这一挑战可以掌握三件事text-transform的六个取值lowercase/uppercase/capitalize/initial/inherit/none及默认值为none的语义在既有卡片样式text-align、background-color、box-shadow等基础上用一行声明完成大写标题的视觉调整用getComputedStyle与textContent双断言验证「样式生效」与「内容未改」两个正交条件理解 CSS 表现层与 HTML 数据层的分离。挑战原文含完整 seed、solutions 与测试代码见 curriculum/challenges/english/blocks/applied-visual-design/587d781c367417b2b2512ac0.md板块完整挑战顺序见 applied-visual-design.json。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 freeCodeCamp 实战：用 CSS text-transform 属性将文本转为大写——Applied Visual Design 挑战解析
freeCodeCamp 实战用 CSS text-transform 属性将文本转为大写——Applied Visual Design 挑战解析【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本文基于 freeCodeCamp 课程库中「Applied Visual Design」板块的挑战文档 587d781c367417b2b2512ac0.md 展开讲解 CSStext-transform属性的完整取值体系并通过该挑战的原始代码、参考答案与测试断言演示如何在卡片式页面中将h4标题渲染为大写同时理解「视觉变换」与「修改 DOM 文本内容」的本质区别。挑战在课程中的位置该挑战属于 Responsive Web Design 认证下的 Applied Visual Design 板块。从 板块结构文件 可以看到它是challengeOrder中的第 13 个挑战元数据 id 为587d781c367417b2b2512ac0dashedName为use-the-text-transform-property-to-make-text-uppercase前一个挑战是「Decrease the Opacity of an Element」降低元素不透明度后一个挑战是「Set the font-size for Multiple Heading Elements」为多个标题设置字号。板块的归属关系可在 responsive-web-design.json 中确认applied-visual-design排在basic-html-and-html5与basic-css之后是该认证的第 3 个板块——学习者先掌握 HTML 基础与 CSS 基础再进入本板块做综合视觉设计练习。挑战元数据中challengeType: 0表示这是一个常规编码挑战附有视频讲解与论坛讨论主题forumTopicId: 301081。text-transform 属性取值全表文档给出的核心知识是text-transform属性用于改变文本的外观appearance让页面文本保持一致的呈现风格而无需改动 HTML 元素的实际文本内容。以下表格完整继承自原始文档示例文本为 Transform me值结果lowercasetransform meuppercaseTRANSFORM MEcapitalizeTransform Me每个单词首字母大写initial使用该属性的默认值inherit继承父元素的text-transform值none默认值保持原始文本不变需要注意两点语义区别none才是该属性的默认值而initial的语义是「回到初始值」——对text-transform而言两者结果相同都是none但initial的作用是显式覆盖从父元素继承来的值capitalize与uppercase不同前者只把每个单词的首字母变大写后者把所有字母都变大写。任务要求与初始代码挑战的指令instructions是使用text-transform属性把h4的文本转换为大写。初始代码seed是一个带阴影的卡片式布局包含标题h4Alphabet/h4、一段关于 Google 创始人的段落和两个链接。为便于阅读下文将链接的href统一替换为#原始文件 587d781c367417b2b2512ac0.md 中指向人物词条页面style h4 { text-align: center; background-color: rgba(45, 45, 45, 0.1); padding: 10px; font-size: 27px; } p { text-align: justify; } .links { text-align: left; color: black; opacity: 0.7; } #thumbnail { box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } .fullCard { width: 245px; border: 1px solid #ccc; border-radius: 5px; margin: 10px 5px; padding: 4px; } .cardContent { padding: 10px; } .cardText { margin-bottom: 30px; } /style div classfullCard idthumbnail div classcardContent div classcardText h4Alphabet/h4 hr pemGoogle was founded by Larry Page and Sergey Brin while they were uPh.D. students/u at strongStanford University/strong./em/p /div div classcardLinks a href# target_blank classlinksLarry Page/abrbr a href# target_blank classlinksSergey Brin/a /div /div /div这段 seed 代码本身就是一个「视觉设计」练习的延续h4已有居中对齐、半透明背景色、内边距和字号#thumbnail用两层box-shadow做出卡片浮起效果.links通过opacity: 0.7降低链接不透明度即上一课的内容。本课要做的就是在h4规则里补上最后一块视觉细节——大写字号。参考答案官方 solutions 部分的修改只有一行在h4选择器中追加text-transform: uppercase;。style h4 { text-align: center; background-color: rgba(45, 45, 45, 0.1); padding: 10px; font-size: 27px; text-transform: uppercase; } /* 其余规则p、.links、#thumbnail、.fullCard、.cardContent、.cardText与 seed 完全一致 */ /style div classfullCard idthumbnail div classcardContent div classcardText h4Alphabet/h4 hr pemGoogle was founded by Larry Page and Sergey Brin while they were uPh.D. students/u at strongStanford University/strong./em/p /div div classcardLinks a href# target_blank classlinksLarry Page/abrbr a href# target_blank classlinksSergey Brin/a /div /div /div渲染后h4显示为 ALPHABET但注意 HTML 源码里的文本节点仍然是Alphabet——这正是text-transform的设计意图只改渲染结果不改数据。测试断言如何验证「只改外观不改内容」原始文档的 hints 部分包含两组自动化断言它们精确界定了通过本挑战的两个条件。条件一h4的计算样式必须是uppercase。const h4Element document.querySelector(h4) const h4Style window.getComputedStyle(h4Element); assert.equal(h4Style?.textTransform, uppercase);这里使用的是window.getComputedStyle它返回元素的计算样式camelCase 键名如textTransform。这意味着测试检查的是浏览器解析样式表后的最终生效值而不是你在 HTML 上写了什么属性——即使值来自inherit从父级继承只要计算结果是uppercase就能通过。条件二h4的原始文本不能真的被改成大写。assert.notEqual( document.querySelector(h4)?.textContent, document.querySelector(h4)?.textContent?.toUpperCase() );这条断言要求textContent与它自身的大写形式不相等即文本节点里必须还保留着小写字母Alphabet而非ALPHABET。它从反面拦截了「直接把 HTML 里的字母敲成大写」这种错误解法那样虽然视觉正确但违背了「用 CSS 属性完成变换」的挑战目标也破坏了内容与表现分离的原则。两条断言合起来恰好完整描述了text-transform的语义边界样式层负责呈现getComputedStyle可见数据层保持原样textContent不变。这一点对可访问性和国际化都有实际意义——屏幕阅读器、复制粘贴、以及后续多语言翻译读取的都是原始文本而不是视觉上的大写形态。该属性在 freeCodeCamp 平台自身代码中的应用text-transform并非课程里的孤立知识点freeCodeCamp 自己的客户端代码就大量使用它。从源码结构看至少以下组件样式表包含该属性profile.css个人页面组件searchbar-base.css搜索栏基础样式donation.css捐赠组件landing.css落地页组件。这说明「用 CSS 变换文字大小写来控制视觉层级」是真实生产代码中的常规手法与本课程挑战所练习的场景一致。小结通过这一挑战可以掌握三件事text-transform的六个取值lowercase/uppercase/capitalize/initial/inherit/none及默认值为none的语义在既有卡片样式text-align、background-color、box-shadow等基础上用一行声明完成大写标题的视觉调整用getComputedStyle与textContent双断言验证「样式生效」与「内容未改」两个正交条件理解 CSS 表现层与 HTML 数据层的分离。挑战原文含完整 seed、solutions 与测试代码见 curriculum/challenges/english/blocks/applied-visual-design/587d781c367417b2b2512ac0.md板块完整挑战顺序见 applied-visual-design.json。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考