freeCodeCamp Applied Visual Design 课程实战用 font-size 为多个标题元素建立字号体系【免费下载链接】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视觉设计应用模块的练习题目《Set the font-size for Multiple Heading Elements》展开完整还原该练习的字号层级要求、可运行的 HTML/CSS 代码与配套测试断言并结合课程仓库中的挑战文件、模块结构与测试运行器实现讲解font-size属性如何用于统一多个元素的视觉一致性。读完本文你可以独立完成这道练习、理解其自动化测试的原理并掌握为h1h6建立字号比例体系的通用做法。1. 挑战定位与文档结构这道挑战存放在课程仓库的标准挑战目录中挑战文件applied-visual-design/587d781c367417b2b2512ac2.md其 YAML 前置元数据frontmatter声明了挑战的标识信息其中id: 587d781c367417b2b2512ac2是唯一标识dashedName为set-the-font-size-for-multiple-heading-elementschallengeType为0另外还关联了视频课程与论坛主题forumTopicId: 301067。在模块组织层面该挑战的排课顺序由 applied-visual-design.json 中的challengeOrder数组决定。从源码结构看这道题位于Use the text-transform Property to Make Text Uppercaseid...512ac0之后紧接着是姊妹题Set the font-weight for Multiple Heading Elementsid...512ac3两者共同构成“为多个标题元素设置排版属性”的连续训练。2. 核心概念font-size 与视觉一致性挑战文档给出的概念描述是font-size属性用于指定给定元素中文本的大小。这条规则可以用于多个元素以创建页面中文本的视觉一致性visual consistency。这正是本题的训练目标不是只改一个标题而是为h1到h6六个标题标签统一设置字号让页面形成一套自上而下递减的标题层级。浏览器对h1h6虽然有默认字号从大到小但默认值因浏览器而异显式为每个标签指定像素值是保证跨环境渲染一致、并建立可预测排版节奏的标准做法。3. 任务要求完整的字号层级表挑战的# --instructions--部分给出了硬性要求——在style标签中设置以下字号选择器要求的 font-size相对比例以 h6 为 1 基准h168px4.86h252px3.71h340px2.86h432px2.29h521px1.50h614px1.00可以看到这组数值形成一条平滑递减的字号曲线68 → 52 → 40 → 32 → 21 → 14相邻层级之间保持相近的收缩幅度而不是断崖式跳变。这种比例化设置是标题体系heading scale的基本设计手法。4. 动手实操从种子代码到参考答案4.1 种子代码Seed挑战文件# --seed--部分提供了一份“空壳”起点页面中已预置六个标题元素style标签内留白待填style /style h1This is h1 text/h1 h2This is h2 text/h2 h3This is h3 text/h3 h4This is h4 text/h4 h5This is h5 text/h5 h6This is h6 text/h64.2 参考答案Solution挑战文件# --solutions--部分给出的完整答案为六条独立的选择器规则style h1 { font-size: 68px; } h2 { font-size: 52px; } h3 { font-size: 40px; } h4 { font-size: 32px; } h5 { font-size: 21px; } h6 { font-size: 14px; } /style h1This is h1 text/h1 h2This is h2 text/h2 h3This is h3 text/h3 h4This is h4 text/h4 h5This is h5 text/h5 h6This is h6 text/h6写法要点每条规则使用元素选择器tag selector直接命中对应标签的所有实例font-size的取值统一使用px单位。这一点并非随意——后文的测试断言是按字符串精确比较计算样式的若写成68em或省略单位断言将失败六条规则互相独立未使用选择器合并如h1, h2 { ... }因为每条规则的值不同分开书写最直观。5. 测试机制CSSHelp 如何验证你的样式挑战文件# --hints--部分附带了六段测试断言它们揭示了自动评测的实现方式。以h1为例const fontSizeOfh1 new __helpers.CSSHelp(document).getStyle(h1)?.getPropertyValue(font-size); assert.equal(fontSizeOfh1, 68px);其余五个标签的断言结构完全一致仅选择器与期望字符串不同h2期望52px、h3期望40px、h4期望32px、h5期望21px、h6期望14px。从断言代码可以读出三个实现事实测试运行在预览沙箱内__helpers是注入到挑战预览环境中的辅助对象CSSHelp接收当前document并读取元素上的样式。在客户端代码中预览页面由 frame.ts 构造其中可以看到预览 iframe 的构建逻辑主预览帧 id 为fcc-main-frame测试运行器资源来自/js/test-runner/路径并明确注释了框架自身的隐藏样式元素会带fcc-hide-header类以避免干扰 CSS 相关测试——这说明课程对“测试读到的样式”与“框架注入的样式”做了隔离。getStyle使用了可选链?.断言写成getStyle(h1)?.getPropertyValue(font-size)即当取不到样式对象时断言拿到undefined与期望值68px比较后判负。换句话说不写规则、或规则没生效测试都会失败。比较的是字符串化的计算值期望值形如68px这样的完整字符串意味着字号必须以像素写出且被浏览器规范化为该形式。这解释了第 4.2 节中“必须用 px”的要求。6. 举一反三与自检清单完成本题后可以用以下清单快速自检并迁移到实际项目中的标题体系设计六个标签是否各有独立规则遗漏任何一个标签对应的assert.equal都会失败每个数值是否严格等于要求68/52/40/32/21/14测试是精确字符串匹配近似值不算通过单位是否为px换用em、rem或裸数字都会导致断言不通过规则是否写在style标签内并被浏览器实际应用仅存在选择器但值写错如font-size: 68PX同样失败。这道题之后同一模块紧接着的Set the font-weight for Multiple Heading Elements挑战文件位于 applied-visual-design/587d781c367417b2b2512ac3.md会把同样的“多元素统一属性”模式应用到字重上两者合起来覆盖了标题排版中最核心的font-size与font-weight两个维度。【免费下载链接】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 Applied Visual Design 课程实战：用 font-size 为多个标题元素建立字号体系
freeCodeCamp Applied Visual Design 课程实战用 font-size 为多个标题元素建立字号体系【免费下载链接】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视觉设计应用模块的练习题目《Set the font-size for Multiple Heading Elements》展开完整还原该练习的字号层级要求、可运行的 HTML/CSS 代码与配套测试断言并结合课程仓库中的挑战文件、模块结构与测试运行器实现讲解font-size属性如何用于统一多个元素的视觉一致性。读完本文你可以独立完成这道练习、理解其自动化测试的原理并掌握为h1h6建立字号比例体系的通用做法。1. 挑战定位与文档结构这道挑战存放在课程仓库的标准挑战目录中挑战文件applied-visual-design/587d781c367417b2b2512ac2.md其 YAML 前置元数据frontmatter声明了挑战的标识信息其中id: 587d781c367417b2b2512ac2是唯一标识dashedName为set-the-font-size-for-multiple-heading-elementschallengeType为0另外还关联了视频课程与论坛主题forumTopicId: 301067。在模块组织层面该挑战的排课顺序由 applied-visual-design.json 中的challengeOrder数组决定。从源码结构看这道题位于Use the text-transform Property to Make Text Uppercaseid...512ac0之后紧接着是姊妹题Set the font-weight for Multiple Heading Elementsid...512ac3两者共同构成“为多个标题元素设置排版属性”的连续训练。2. 核心概念font-size 与视觉一致性挑战文档给出的概念描述是font-size属性用于指定给定元素中文本的大小。这条规则可以用于多个元素以创建页面中文本的视觉一致性visual consistency。这正是本题的训练目标不是只改一个标题而是为h1到h6六个标题标签统一设置字号让页面形成一套自上而下递减的标题层级。浏览器对h1h6虽然有默认字号从大到小但默认值因浏览器而异显式为每个标签指定像素值是保证跨环境渲染一致、并建立可预测排版节奏的标准做法。3. 任务要求完整的字号层级表挑战的# --instructions--部分给出了硬性要求——在style标签中设置以下字号选择器要求的 font-size相对比例以 h6 为 1 基准h168px4.86h252px3.71h340px2.86h432px2.29h521px1.50h614px1.00可以看到这组数值形成一条平滑递减的字号曲线68 → 52 → 40 → 32 → 21 → 14相邻层级之间保持相近的收缩幅度而不是断崖式跳变。这种比例化设置是标题体系heading scale的基本设计手法。4. 动手实操从种子代码到参考答案4.1 种子代码Seed挑战文件# --seed--部分提供了一份“空壳”起点页面中已预置六个标题元素style标签内留白待填style /style h1This is h1 text/h1 h2This is h2 text/h2 h3This is h3 text/h3 h4This is h4 text/h4 h5This is h5 text/h5 h6This is h6 text/h64.2 参考答案Solution挑战文件# --solutions--部分给出的完整答案为六条独立的选择器规则style h1 { font-size: 68px; } h2 { font-size: 52px; } h3 { font-size: 40px; } h4 { font-size: 32px; } h5 { font-size: 21px; } h6 { font-size: 14px; } /style h1This is h1 text/h1 h2This is h2 text/h2 h3This is h3 text/h3 h4This is h4 text/h4 h5This is h5 text/h5 h6This is h6 text/h6写法要点每条规则使用元素选择器tag selector直接命中对应标签的所有实例font-size的取值统一使用px单位。这一点并非随意——后文的测试断言是按字符串精确比较计算样式的若写成68em或省略单位断言将失败六条规则互相独立未使用选择器合并如h1, h2 { ... }因为每条规则的值不同分开书写最直观。5. 测试机制CSSHelp 如何验证你的样式挑战文件# --hints--部分附带了六段测试断言它们揭示了自动评测的实现方式。以h1为例const fontSizeOfh1 new __helpers.CSSHelp(document).getStyle(h1)?.getPropertyValue(font-size); assert.equal(fontSizeOfh1, 68px);其余五个标签的断言结构完全一致仅选择器与期望字符串不同h2期望52px、h3期望40px、h4期望32px、h5期望21px、h6期望14px。从断言代码可以读出三个实现事实测试运行在预览沙箱内__helpers是注入到挑战预览环境中的辅助对象CSSHelp接收当前document并读取元素上的样式。在客户端代码中预览页面由 frame.ts 构造其中可以看到预览 iframe 的构建逻辑主预览帧 id 为fcc-main-frame测试运行器资源来自/js/test-runner/路径并明确注释了框架自身的隐藏样式元素会带fcc-hide-header类以避免干扰 CSS 相关测试——这说明课程对“测试读到的样式”与“框架注入的样式”做了隔离。getStyle使用了可选链?.断言写成getStyle(h1)?.getPropertyValue(font-size)即当取不到样式对象时断言拿到undefined与期望值68px比较后判负。换句话说不写规则、或规则没生效测试都会失败。比较的是字符串化的计算值期望值形如68px这样的完整字符串意味着字号必须以像素写出且被浏览器规范化为该形式。这解释了第 4.2 节中“必须用 px”的要求。6. 举一反三与自检清单完成本题后可以用以下清单快速自检并迁移到实际项目中的标题体系设计六个标签是否各有独立规则遗漏任何一个标签对应的assert.equal都会失败每个数值是否严格等于要求68/52/40/32/21/14测试是精确字符串匹配近似值不算通过单位是否为px换用em、rem或裸数字都会导致断言不通过规则是否写在style标签内并被浏览器实际应用仅存在选择器但值写错如font-size: 68PX同样失败。这道题之后同一模块紧接着的Set the font-weight for Multiple Heading Elements挑战文件位于 applied-visual-design/587d781c367417b2b2512ac3.md会把同样的“多元素统一属性”模式应用到字重上两者合起来覆盖了标题排版中最核心的font-size与font-weight两个维度。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考