Terrarium 项目之 CSS 入门用 Web-Dev-For-Beginners 实战 Kaskade、Selektoren 与 Positionierung【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本文是开源课程 Web-Dev-For-Beginners「Terrarium 项目」系列第 2 课德语版translations/de/3-terrarium/2-intro-to-css/README.md的完整技术解析与实践指南。你将学会把上一课用 HTML 搭好的玻璃罐骨架通过style.css变成带玻璃质感、可响应、可交互的视觉效果从 Kaskade层叠与 Vererbung继承两大机制到元素/类/ID 选择器的使用边界再到五种position值如何协同构成拖拽布局的地基。读完本文你能独立复刻一个只靠 CSS 绘制的玻璃罐盆栽页面并为下一课接入 JavaScript 拖拽交互做好准备。本课目标与前置条件本课不满足于“把页面变好看”。按原文档德语版的定位CSS 的作用更像是电影导演不仅决定外观还决定元素如何移动、如何响应交互、如何适应不同场景。现代 CSS 已经可以用纯代码自动适配手机、平板和桌面端布局也可以写出引导用户注意力的平滑动画。本课你将完成四件事用现代 CSS 技术为 Terrarium 构建一整套视觉设计深入 Kaskade、Vererbung 与各类 CSS-Selektor选择器的基本概念实现响应式responsive定位与布局策略仅用 CSS 形状与样式搭建玻璃罐容器。前置条件已完成上一课1-intro-to-html中 Terrarium 的 HTML 结构。仓库 3-terrarium/solution/index.html 展示了完整结构的参考形态左右两个#left-container/#right-container植物区、中间#terrarium玻璃罐区以及每个植物外层包一个.plant-holder、内层一个带唯一id的.plant图片。提示CSS 特性仍在快速演进在正式项目中使用较新特性前建议先用 CanIUse 等兼容性工具核对浏览器支持情况再决定是否引入。第一步创建并连接 style.css在 Terrarium 目录中新建style.css然后在 HTML 的head中通过link标签把它与页面连接起来link relstylesheet href./style.css /这段代码做的事情在 HTML 与 CSS 文件之间建立连接告诉浏览器加载并应用style.css中的样式relstylesheet声明这是一个样式表href./style.css指向文件路径。仓库中完整的连接示例见 3-terrarium/solution/index.html其中href./style.css与脚本script src./script.js defer/script并列是“结构HTML— 样式CSS— 行为JS”三层的直观体现。理解 CSS 的 Kaskade层叠机制CSS 之所以叫 “Cascading层叠Style Sheets”是因为样式像瀑布一样自上而下流动而且彼此之间可能冲突。原文用了一个军令层级类比上级命令“全军穿绿”而针对你所在部队的特令“典礼穿蓝礼服”——更具体的指令优先。CSS 遵循同样的逻辑理解这条层级链能大幅降低调试难度。亲手制造一次样式冲突先在h1标签上加入内联样式h1 stylecolor: redMy Terrarium/h1作用直接对h1应用红色通过style属性把 CSS 内嵌进 HTML为这个元素创造出优先级最高的规则。再往style.css中加入h1 { color: blue; }作用定义一条针对所有h1的规则通过外部样式表把文字设为蓝色相比内联样式这是一条优先级更低的规则。知识自检页面最终会显示哪种颜色为什么赢的是它——答案是红色因为内联样式优先级最高1000 点压过了元素选择器的蓝色1 点。优先级判定流程浏览器在决定h1颜色时的判定顺序原文档流程图的文字化检查是否存在内联样式stylecolor: red→ 有则直接应用1000 点无内联样式时检查 ID 规则如#heading { color: green }→ 应用100 点无 ID 规则时检查类/属性规则如.title { color: blue }→ 应用10 点无类规则时检查元素规则如h1 { color: purple }→ 应用1 点全部没有则回落到浏览器默认样式。CSS 优先级总顺序从高到低内联样式style属性ID#myId类.myClass与属性选择器元素选择器h1、div、p浏览器默认样式CSS-Vererbung继承实战CSS 继承机制像遗传学子元素会从父元素继承某些属性。把font-family设置在body上里面所有文字自动使用同一字体无需为每个元素单独声明。但并非所有属性都会继承字体、颜色这类文本样式会继承margin、padding、border这类布局属性不会继承。观察字体继承在body上设置字体族body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; }效果通过选中body为整页设定字体族使用带回退项的字体栈提升跨浏览器兼容性应用在各操作系统上表现良好的现代系统字体确保所有子元素默认继承该字体除非被显式覆盖。验证方法打开浏览器开发者工具F12进入 Elements 面板选中h1元素即可看到它从 body 继承了字体族。实验在body上尝试color、line-height、text-align等其他可继承属性观察标题与其余元素的变化。常见可继承属性color、font-family、font-size、line-height、text-align、visibility常见不可继承属性margin、padding、border、width、height、position小测验以下三条规则同时存在时div classspecial内部的h1会是什么颜色div { color: blue; } .special { color: green; } h1 { color: red; }答案红色。因为元素选择器h1直接命中了标题本身继承来的颜色哪怕来自类规则无法覆盖直接命中元素的规则。掌握 CSS-Selektoren选择器选择器是你精准命中元素的工具。原文打了个比方与其说“那栋房子”不如说“枫树街上那栋蓝墙红门的房子”。不同场景需要不同粒度的“导航”三种核心选择器各有分工。元素选择器Element-Selektoren按标签名命中 HTML 元素适合设置全站基础样式body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; } h1 { color: #3a241d; text-align: center; font-size: 2.5rem; margin-bottom: 1rem; }要点用body选择器建立全站一致的排版清除浏览器默认边距以获得可控布局统一标题的颜色、对齐与间距rem单位保证字号可缩放、可访问。元素选择器适合全局基础样式但要精细控制单个组件比如每株植物就需要更具体的选择器。ID 选择器#idID 选择器用#前缀命中带唯一id属性的元素。由于页面中 ID 必须唯一它们天然适合那些“仅此一个”的特殊元素——比如 Terrarium 的左右植物容器#left-container { background-color: #f5f5f5; width: 15%; left: 0; top: 0; position: absolute; height: 100vh; padding: 1rem; box-sizing: border-box; } #right-container { background-color: #f5f5f5; width: 15%; right: 0; top: 0; position: absolute; height: 100vh; padding: 1rem; box-sizing: border-box; }这段代码的效果用absolute把两个容器分别钉在左右边缘用vh视口高度单位让高度随屏幕自适应box-sizing: border-box让padding计入总宽度零值省略单位代码更干净背景色选淡灰#f5f5f5比刺眼的纯灰更柔和。代码质量挑战DRY注意这段 CSS 违反 DRYDont Repeat Yourself原则。可以用“ID 类”组合重构div idleft-container classcontainer/div div idright-container classcontainer/div.container { background-color: #f5f5f5; width: 15%; top: 0; position: absolute; height: 100vh; padding: 1rem; box-sizing: border-box; } #left-container { left: 0; } #right-container { right: 0; }仓库 3-terrarium/solution/style.css 正是采用这种重构后的写法公共样式集中在.container左右差异只由两个 ID 各自声明left: 0/right: 0完成。类选择器.class与“类 ID”组合模式类选择器用.前缀可复用于多个元素适合统一样式模式。Terrarium 中每株植物需要相似的样式又需要各自独立的位置因此采用“类管公共样式、ID 管唯一定位”的组合div classplant-holder img classplant altDecorative plant for terrarium idplant1 src3-terrarium/solution/images/plant1.png / /div关键点classplant-holder统一容器样式classplant统一图片样式与行为唯一idplant1供独立定位与后续 JavaScript 交互描述性alt文本保证读屏器可访问。对应的 CSS.plant-holder { position: relative; height: 13%; left: -0.6rem; } .plant { position: absolute; max-width: 150%; max-height: 150%; z-index: 2; transition: transform 0.3s ease; } .plant:hover { transform: scale(1.05); }逐条拆解.plant-holder用relative建立定位上下文高度 13% 保证所有植物垂直排布不滚动向左微移-0.6rem让植物在容器内更居中max-width/max-height: 150%允许植物按需响应式缩放z-index: 2让植物叠在其他元素之上transition配合:hover的transform: scale(1.05)实现柔和悬停放大。设计模式容器.plant-holder负责布局与定位内容.plant负责外观与缩放。这种分离让代码更易维护、更灵活。批判性思考为什么.plant-holder和.plant两者缺一不可如果只用其一要么失去统一布局上下文要么无法独立控制每株植物的外观与层级。附注transition与:hover属于本课“锦上添花”的视觉增强。从源码看基础版 3-terrarium/solution/style.css 的.plant仅含position: absolute; max-width: 150%; max-height: 150%; z-index: 2;未声明transition与:hover这两条是对应的增强扩展。CSS-Positionierung定位深入定位像舞台导演决定每个角色站在哪、如何移动。导航栏需要滚屏时吸附顶部那是定位。Tooltip 需要在特定位置出现也是定位。五种 position 值对照定位值行为适用场景static默认文档流忽略top/left/right/bottom普通文档布局relative相对自身正常位置偏移微调、建立定位上下文absolute相对最近的有定位祖先定位精确放置、叠层overlayfixed相对视口viewport定位导航栏、悬浮元素sticky依据滚动在relative与fixed间切换滚动时吸附的页头Terrarium 中的组合定位策略Terrarium 把三种定位值组合出完整布局/* 容器定位absolute —— 脱离文档流 */ .container { position: absolute; /* ... */ } /* 植物容器定位relative —— 建立定位上下文 */ .plant-holder { position: relative; /* ... */ } /* 植物定位absolute —— 在容器内精确放置 */ .plant { position: absolute; /* ... */ }策略解读absolute 容器脱离正常文档流钉在屏幕边缘relative 植物容器建立定位上下文同时保留在文档流中absolute 植物可以在 relative 容器内被精确摆放三者组合让植物可以纵向堆叠同时各自可独立定位。为什么这套组合如此重要plant元素需要absolute定位才能在下一课3-intro-to-DOM-and-closures通过 Drag Drop 被拖拽。absolute把它们从正常布局流中取出拖拽交互才成为可能。实验时间动手改值观察差异——把.container从absolute改成relative会怎样把.plant-holder从relative改成absolute布局如何变化把.plant改成relative又会出现什么现实世界类比static像书架上的书自然顺序relative像把书挪动一点但保留原位absolute像把书签精确夹到某一页fixed像翻页时始终可见的便利贴。思考题为什么侧边容器要用absolute为什么植物拖拽必须依赖absolute如果把position声明全部删掉页面会发生什么用 CSS 构建玻璃罐Glass-Gefäß接下来只用 CSS——不用任何图片或图形软件——画出玻璃罐。用定位、透明度营造逼真的玻璃、阴影与深度是 CSS 视觉能力的绝佳演示。玻璃罐四部件罐子由四层部件叠成全部使用百分比尺寸与absolute定位.jar-walls { height: 80%; width: 60%; background: #d1e1df; border-radius: 1rem; position: absolute; bottom: 0.5%; left: 20%; opacity: 0.5; z-index: 1; box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1); } .jar-top { width: 50%; height: 5%; background: #d1e1df; position: absolute; bottom: 80.5%; left: 25%; opacity: 0.7; z-index: 1; border-radius: 0.5rem 0.5rem 0 0; } .jar-bottom { width: 50%; height: 1%; background: #d1e1df; position: absolute; bottom: 0; left: 25%; opacity: 0.7; border-radius: 0 0 0.5rem 0.5rem; } .dirt { width: 60%; height: 5%; background: #3a241d; position: absolute; border-radius: 0 0 1rem 1rem; bottom: 1%; left: 20%; opacity: 0.7; z-index: -1; }各部件尺寸速览原文档流程图数据部件宽度高度关键属性罐盖.jar-top50%5%顶部位置border-radius: 0.5rem 0.5rem 0 0罐壁.jar-walls60%80%圆角1remopacity: 0.5泥土.dirt60%5%深棕色#3a241d底层z-index: -1罐底.jar-bottom50%1%底部位置border-radius: 0 0 0.5rem 0.5rem要点百分比尺寸保证任意屏幕下按比例缩放absolute定位让部件精确堆叠对齐不同opacity值营造玻璃通透感z-index分层让植物“装进”罐子里罐壁z-index: 1、植物z-index: 2、泥土z-index: -1内阴影box-shadow: inset 0 0 2rem rgba(0,0,0,0.1)与圆角让玻璃更真实。百分比带来的响应式设计全部尺寸都用百分比而非固定像素原因在于罐子在任何屏幕尺寸下都按比例缩放罐体各部件之间的视觉比例关系保持不变从手机到大屏显示器体验一致布局自适应而不被破坏。rem 单位与可访问性border-radius使用rem单位它相对根字号缩放。这使设计更可访问——尊重用户在系统层面对字体大小的偏好设置相对单位规范可参考 W3C CSS Values 规范中的 font-relative lengths。视觉实验把罐壁opacity从 0.5 改为 0.8玻璃观感如何变化把泥土颜色#3a241d换成#8B4513视觉效果有何不同把泥土z-index改成 2层叠关系会发生什么设计原则从简单形状构建复杂视觉——矩形 → 圆角矩形 → 罐体部件平涂颜色 → 透明度 → 玻璃效果单个元素 → 分层组合 → 立体观感。源码中的玻璃高光实现从仓库实现看基础罐体之外还补充了两个高光部件见 3-terrarium/solution/index.html 与 3-terrarium/solution/style.css.jar-glossy-long { width: 3%; height: 20%; border-radius: 2rem; background: #ddfbff; position: absolute; bottom: 20%; left: 5%; } .jar-glossy-short { width: 3%; height: 5%; border-radius: 2rem; background: #ddfbff; position: absolute; bottom: 45%; left: 5%; }这两个长、短椭圆浅蓝白#ddfbff、大圆角贴在罐壁左侧正是“玻璃反射”挑战的参考实现用border-radius塑造气泡般有机形状用低透明度浅色模拟光线在玻璃表面的反射。它们被嵌套在.jar-walls内部HTML 中位于罐壁 div 之内随罐壁一起定位。挑战练习玻璃反射与微风动画挑战一添加玻璃反射为罐子加入逼真的高光模拟光线在玻璃表面的反射为设计增加深度与真实感创建柔和的白色或浅色椭圆作为反射高光把它们放在罐体左侧的合适位置用恰当的opacity与模糊blur效果模拟真实反光用border-radius塑造有机的、气泡般的形状可尝试渐变gradient或box-shadow进一步提升真实感。预期效果参见 3-terrarium/2-intro-to-css/images/terrarium-final.png仓库解决方案 3-terrarium/solution/style.css 中的.jar-glossy-long/.jar-glossy-short即为此挑战的参考实现。挑战二植物微风摇曳动画用 CSS 动画让植物像被微风吹拂般轻轻摆动练习 Keyframes、transform与animation要求为.plant添加 keyframe 动画使其左右轻柔摆动每株植物旋转约 2–3 度周期 3–4 秒无限循环使用缓动函数easing让运动更自然。示例骨架keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } .plant { animation: sway 3.5s ease-in-out infinite; transform-origin: bottom center; }以上为练习示例未收录于仓库 solution 中建议在你自己副本上验证效果。本课作业CSS 重构Refactoring课程配套作业见 3-terrarium/2-intro-to-css/assignment.md德语目录下对应 translations/de/3-terrarium/2-intro-to-css/assignment.md。核心任务是把当前基于absolute定位的布局重构为Flexbox 或 CSS Grid同时保持视觉一致并实现响应式行为。三个阶段与要求概览阶段一分析与规划找出当前使用绝对定位的元素决定用 Flexbox 还是 Grid勾画新的布局结构。阶段二实现在新目录重建项目按需调整 HTML 结构用 Flexbox/Grid 替换绝对定位保持植物与罐体的视觉位置一致实现响应式适配。阶段三测试与文档跨浏览器Chrome/Firefox/Edge/Safari验证手机/平板/桌面多尺寸测试为 CSS 写注释说明布局选择截图留档。技术要点二选一同一批元素要么 Flexbox 要么 Grid用相对单位rem/em/%/vw/vh替代固定像素保持语义化 HTML 与 alt 文本命名一致、组织清晰。评估标准覆盖布局实现、代码质量、跨浏览器兼容、响应式设计与文档完整性四个维度。后续学习路径完成本课后你已具备Kaskade 理解样式如何继承与覆盖、选择器掌控元素/类/ID 精准命中、定位技能战略化放置与分层、视觉设计玻璃效果、阴影、透明、响应式技巧百分比布局与代码组织能力整洁可维护的 CSS 结构。下一步Terrarium 现在兼具结构HTML与样式CSS系列最终课3-intro-to-DOM-and-closures将引入 JavaScript 交互。推荐继续深入的方向Flexbox简化对齐与分布、CSS Grid复杂布局、CSS 变量减少重复、提升可维护性、响应式设计媒体查询、移动优先以及media断点实践——3-terrarium/solution/style.css 中的导航栏媒体查询就是现成范例。动手建议打开浏览器 DevTools 的 Elements 面板检视任意网站的 CSS 规则新建 CSS 文件并接入 HTML尝试用 Hex、RGB 与命名色三种方式改色给div添加padding与margin练习盒模型。课程配套的课前/课后测验与德语版完整目录见 translations/de/3-terrarium/2-intro-to-css/README.md 与 translations/de/3-terrarium/README.md。【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Terrarium 项目之 CSS 入门用 Web-Dev-For-Beginners 实战 Kaskade、Selektoren 与 Positionierung【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本文是开源课程 Web-Dev-For-Beginners「Terrarium 项目」系列第 2 课德语版translations/de/3-terrarium/2-intro-to-css/README.md的完整技术解析与实践指南。你将学会把上一课用 HTML 搭好的玻璃罐骨架通过style.css变成带玻璃质感、可响应、可交互的视觉效果从 Kaskade层叠与 Vererbung继承两大机制到元素/类/ID 选择器的使用边界再到五种position值如何协同构成拖拽布局的地基。读完本文你能独立复刻一个只靠 CSS 绘制的玻璃罐盆栽页面并为下一课接入 JavaScript 拖拽交互做好准备。本课目标与前置条件本课不满足于“把页面变好看”。按原文档德语版的定位CSS 的作用更像是电影导演不仅决定外观还决定元素如何移动、如何响应交互、如何适应不同场景。现代 CSS 已经可以用纯代码自动适配手机、平板和桌面端布局也可以写出引导用户注意力的平滑动画。本课你将完成四件事用现代 CSS 技术为 Terrarium 构建一整套视觉设计深入 Kaskade、Vererbung 与各类 CSS-Selektor选择器的基本概念实现响应式responsive定位与布局策略仅用 CSS 形状与样式搭建玻璃罐容器。前置条件已完成上一课1-intro-to-html中 Terrarium 的 HTML 结构。仓库 3-terrarium/solution/index.html 展示了完整结构的参考形态左右两个#left-container/#right-container植物区、中间#terrarium玻璃罐区以及每个植物外层包一个.plant-holder、内层一个带唯一id的.plant图片。提示CSS 特性仍在快速演进在正式项目中使用较新特性前建议先用 CanIUse 等兼容性工具核对浏览器支持情况再决定是否引入。第一步创建并连接 style.css在 Terrarium 目录中新建style.css然后在 HTML 的head中通过link标签把它与页面连接起来link relstylesheet href./style.css /这段代码做的事情在 HTML 与 CSS 文件之间建立连接告诉浏览器加载并应用style.css中的样式relstylesheet声明这是一个样式表href./style.css指向文件路径。仓库中完整的连接示例见 3-terrarium/solution/index.html其中href./style.css与脚本script src./script.js defer/script并列是“结构HTML— 样式CSS— 行为JS”三层的直观体现。理解 CSS 的 Kaskade层叠机制CSS 之所以叫 “Cascading层叠Style Sheets”是因为样式像瀑布一样自上而下流动而且彼此之间可能冲突。原文用了一个军令层级类比上级命令“全军穿绿”而针对你所在部队的特令“典礼穿蓝礼服”——更具体的指令优先。CSS 遵循同样的逻辑理解这条层级链能大幅降低调试难度。亲手制造一次样式冲突先在h1标签上加入内联样式h1 stylecolor: redMy Terrarium/h1作用直接对h1应用红色通过style属性把 CSS 内嵌进 HTML为这个元素创造出优先级最高的规则。再往style.css中加入h1 { color: blue; }作用定义一条针对所有h1的规则通过外部样式表把文字设为蓝色相比内联样式这是一条优先级更低的规则。知识自检页面最终会显示哪种颜色为什么赢的是它——答案是红色因为内联样式优先级最高1000 点压过了元素选择器的蓝色1 点。优先级判定流程浏览器在决定h1颜色时的判定顺序原文档流程图的文字化检查是否存在内联样式stylecolor: red→ 有则直接应用1000 点无内联样式时检查 ID 规则如#heading { color: green }→ 应用100 点无 ID 规则时检查类/属性规则如.title { color: blue }→ 应用10 点无类规则时检查元素规则如h1 { color: purple }→ 应用1 点全部没有则回落到浏览器默认样式。CSS 优先级总顺序从高到低内联样式style属性ID#myId类.myClass与属性选择器元素选择器h1、div、p浏览器默认样式CSS-Vererbung继承实战CSS 继承机制像遗传学子元素会从父元素继承某些属性。把font-family设置在body上里面所有文字自动使用同一字体无需为每个元素单独声明。但并非所有属性都会继承字体、颜色这类文本样式会继承margin、padding、border这类布局属性不会继承。观察字体继承在body上设置字体族body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; }效果通过选中body为整页设定字体族使用带回退项的字体栈提升跨浏览器兼容性应用在各操作系统上表现良好的现代系统字体确保所有子元素默认继承该字体除非被显式覆盖。验证方法打开浏览器开发者工具F12进入 Elements 面板选中h1元素即可看到它从 body 继承了字体族。实验在body上尝试color、line-height、text-align等其他可继承属性观察标题与其余元素的变化。常见可继承属性color、font-family、font-size、line-height、text-align、visibility常见不可继承属性margin、padding、border、width、height、position小测验以下三条规则同时存在时div classspecial内部的h1会是什么颜色div { color: blue; } .special { color: green; } h1 { color: red; }答案红色。因为元素选择器h1直接命中了标题本身继承来的颜色哪怕来自类规则无法覆盖直接命中元素的规则。掌握 CSS-Selektoren选择器选择器是你精准命中元素的工具。原文打了个比方与其说“那栋房子”不如说“枫树街上那栋蓝墙红门的房子”。不同场景需要不同粒度的“导航”三种核心选择器各有分工。元素选择器Element-Selektoren按标签名命中 HTML 元素适合设置全站基础样式body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; } h1 { color: #3a241d; text-align: center; font-size: 2.5rem; margin-bottom: 1rem; }要点用body选择器建立全站一致的排版清除浏览器默认边距以获得可控布局统一标题的颜色、对齐与间距rem单位保证字号可缩放、可访问。元素选择器适合全局基础样式但要精细控制单个组件比如每株植物就需要更具体的选择器。ID 选择器#idID 选择器用#前缀命中带唯一id属性的元素。由于页面中 ID 必须唯一它们天然适合那些“仅此一个”的特殊元素——比如 Terrarium 的左右植物容器#left-container { background-color: #f5f5f5; width: 15%; left: 0; top: 0; position: absolute; height: 100vh; padding: 1rem; box-sizing: border-box; } #right-container { background-color: #f5f5f5; width: 15%; right: 0; top: 0; position: absolute; height: 100vh; padding: 1rem; box-sizing: border-box; }这段代码的效果用absolute把两个容器分别钉在左右边缘用vh视口高度单位让高度随屏幕自适应box-sizing: border-box让padding计入总宽度零值省略单位代码更干净背景色选淡灰#f5f5f5比刺眼的纯灰更柔和。代码质量挑战DRY注意这段 CSS 违反 DRYDont Repeat Yourself原则。可以用“ID 类”组合重构div idleft-container classcontainer/div div idright-container classcontainer/div.container { background-color: #f5f5f5; width: 15%; top: 0; position: absolute; height: 100vh; padding: 1rem; box-sizing: border-box; } #left-container { left: 0; } #right-container { right: 0; }仓库 3-terrarium/solution/style.css 正是采用这种重构后的写法公共样式集中在.container左右差异只由两个 ID 各自声明left: 0/right: 0完成。类选择器.class与“类 ID”组合模式类选择器用.前缀可复用于多个元素适合统一样式模式。Terrarium 中每株植物需要相似的样式又需要各自独立的位置因此采用“类管公共样式、ID 管唯一定位”的组合div classplant-holder img classplant altDecorative plant for terrarium idplant1 src3-terrarium/solution/images/plant1.png / /div关键点classplant-holder统一容器样式classplant统一图片样式与行为唯一idplant1供独立定位与后续 JavaScript 交互描述性alt文本保证读屏器可访问。对应的 CSS.plant-holder { position: relative; height: 13%; left: -0.6rem; } .plant { position: absolute; max-width: 150%; max-height: 150%; z-index: 2; transition: transform 0.3s ease; } .plant:hover { transform: scale(1.05); }逐条拆解.plant-holder用relative建立定位上下文高度 13% 保证所有植物垂直排布不滚动向左微移-0.6rem让植物在容器内更居中max-width/max-height: 150%允许植物按需响应式缩放z-index: 2让植物叠在其他元素之上transition配合:hover的transform: scale(1.05)实现柔和悬停放大。设计模式容器.plant-holder负责布局与定位内容.plant负责外观与缩放。这种分离让代码更易维护、更灵活。批判性思考为什么.plant-holder和.plant两者缺一不可如果只用其一要么失去统一布局上下文要么无法独立控制每株植物的外观与层级。附注transition与:hover属于本课“锦上添花”的视觉增强。从源码看基础版 3-terrarium/solution/style.css 的.plant仅含position: absolute; max-width: 150%; max-height: 150%; z-index: 2;未声明transition与:hover这两条是对应的增强扩展。CSS-Positionierung定位深入定位像舞台导演决定每个角色站在哪、如何移动。导航栏需要滚屏时吸附顶部那是定位。Tooltip 需要在特定位置出现也是定位。五种 position 值对照定位值行为适用场景static默认文档流忽略top/left/right/bottom普通文档布局relative相对自身正常位置偏移微调、建立定位上下文absolute相对最近的有定位祖先定位精确放置、叠层overlayfixed相对视口viewport定位导航栏、悬浮元素sticky依据滚动在relative与fixed间切换滚动时吸附的页头Terrarium 中的组合定位策略Terrarium 把三种定位值组合出完整布局/* 容器定位absolute —— 脱离文档流 */ .container { position: absolute; /* ... */ } /* 植物容器定位relative —— 建立定位上下文 */ .plant-holder { position: relative; /* ... */ } /* 植物定位absolute —— 在容器内精确放置 */ .plant { position: absolute; /* ... */ }策略解读absolute 容器脱离正常文档流钉在屏幕边缘relative 植物容器建立定位上下文同时保留在文档流中absolute 植物可以在 relative 容器内被精确摆放三者组合让植物可以纵向堆叠同时各自可独立定位。为什么这套组合如此重要plant元素需要absolute定位才能在下一课3-intro-to-DOM-and-closures通过 Drag Drop 被拖拽。absolute把它们从正常布局流中取出拖拽交互才成为可能。实验时间动手改值观察差异——把.container从absolute改成relative会怎样把.plant-holder从relative改成absolute布局如何变化把.plant改成relative又会出现什么现实世界类比static像书架上的书自然顺序relative像把书挪动一点但保留原位absolute像把书签精确夹到某一页fixed像翻页时始终可见的便利贴。思考题为什么侧边容器要用absolute为什么植物拖拽必须依赖absolute如果把position声明全部删掉页面会发生什么用 CSS 构建玻璃罐Glass-Gefäß接下来只用 CSS——不用任何图片或图形软件——画出玻璃罐。用定位、透明度营造逼真的玻璃、阴影与深度是 CSS 视觉能力的绝佳演示。玻璃罐四部件罐子由四层部件叠成全部使用百分比尺寸与absolute定位.jar-walls { height: 80%; width: 60%; background: #d1e1df; border-radius: 1rem; position: absolute; bottom: 0.5%; left: 20%; opacity: 0.5; z-index: 1; box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1); } .jar-top { width: 50%; height: 5%; background: #d1e1df; position: absolute; bottom: 80.5%; left: 25%; opacity: 0.7; z-index: 1; border-radius: 0.5rem 0.5rem 0 0; } .jar-bottom { width: 50%; height: 1%; background: #d1e1df; position: absolute; bottom: 0; left: 25%; opacity: 0.7; border-radius: 0 0 0.5rem 0.5rem; } .dirt { width: 60%; height: 5%; background: #3a241d; position: absolute; border-radius: 0 0 1rem 1rem; bottom: 1%; left: 20%; opacity: 0.7; z-index: -1; }各部件尺寸速览原文档流程图数据部件宽度高度关键属性罐盖.jar-top50%5%顶部位置border-radius: 0.5rem 0.5rem 0 0罐壁.jar-walls60%80%圆角1remopacity: 0.5泥土.dirt60%5%深棕色#3a241d底层z-index: -1罐底.jar-bottom50%1%底部位置border-radius: 0 0 0.5rem 0.5rem要点百分比尺寸保证任意屏幕下按比例缩放absolute定位让部件精确堆叠对齐不同opacity值营造玻璃通透感z-index分层让植物“装进”罐子里罐壁z-index: 1、植物z-index: 2、泥土z-index: -1内阴影box-shadow: inset 0 0 2rem rgba(0,0,0,0.1)与圆角让玻璃更真实。百分比带来的响应式设计全部尺寸都用百分比而非固定像素原因在于罐子在任何屏幕尺寸下都按比例缩放罐体各部件之间的视觉比例关系保持不变从手机到大屏显示器体验一致布局自适应而不被破坏。rem 单位与可访问性border-radius使用rem单位它相对根字号缩放。这使设计更可访问——尊重用户在系统层面对字体大小的偏好设置相对单位规范可参考 W3C CSS Values 规范中的 font-relative lengths。视觉实验把罐壁opacity从 0.5 改为 0.8玻璃观感如何变化把泥土颜色#3a241d换成#8B4513视觉效果有何不同把泥土z-index改成 2层叠关系会发生什么设计原则从简单形状构建复杂视觉——矩形 → 圆角矩形 → 罐体部件平涂颜色 → 透明度 → 玻璃效果单个元素 → 分层组合 → 立体观感。源码中的玻璃高光实现从仓库实现看基础罐体之外还补充了两个高光部件见 3-terrarium/solution/index.html 与 3-terrarium/solution/style.css.jar-glossy-long { width: 3%; height: 20%; border-radius: 2rem; background: #ddfbff; position: absolute; bottom: 20%; left: 5%; } .jar-glossy-short { width: 3%; height: 5%; border-radius: 2rem; background: #ddfbff; position: absolute; bottom: 45%; left: 5%; }这两个长、短椭圆浅蓝白#ddfbff、大圆角贴在罐壁左侧正是“玻璃反射”挑战的参考实现用border-radius塑造气泡般有机形状用低透明度浅色模拟光线在玻璃表面的反射。它们被嵌套在.jar-walls内部HTML 中位于罐壁 div 之内随罐壁一起定位。挑战练习玻璃反射与微风动画挑战一添加玻璃反射为罐子加入逼真的高光模拟光线在玻璃表面的反射为设计增加深度与真实感创建柔和的白色或浅色椭圆作为反射高光把它们放在罐体左侧的合适位置用恰当的opacity与模糊blur效果模拟真实反光用border-radius塑造有机的、气泡般的形状可尝试渐变gradient或box-shadow进一步提升真实感。预期效果参见 3-terrarium/2-intro-to-css/images/terrarium-final.png仓库解决方案 3-terrarium/solution/style.css 中的.jar-glossy-long/.jar-glossy-short即为此挑战的参考实现。挑战二植物微风摇曳动画用 CSS 动画让植物像被微风吹拂般轻轻摆动练习 Keyframes、transform与animation要求为.plant添加 keyframe 动画使其左右轻柔摆动每株植物旋转约 2–3 度周期 3–4 秒无限循环使用缓动函数easing让运动更自然。示例骨架keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } .plant { animation: sway 3.5s ease-in-out infinite; transform-origin: bottom center; }以上为练习示例未收录于仓库 solution 中建议在你自己副本上验证效果。本课作业CSS 重构Refactoring课程配套作业见 3-terrarium/2-intro-to-css/assignment.md德语目录下对应 translations/de/3-terrarium/2-intro-to-css/assignment.md。核心任务是把当前基于absolute定位的布局重构为Flexbox 或 CSS Grid同时保持视觉一致并实现响应式行为。三个阶段与要求概览阶段一分析与规划找出当前使用绝对定位的元素决定用 Flexbox 还是 Grid勾画新的布局结构。阶段二实现在新目录重建项目按需调整 HTML 结构用 Flexbox/Grid 替换绝对定位保持植物与罐体的视觉位置一致实现响应式适配。阶段三测试与文档跨浏览器Chrome/Firefox/Edge/Safari验证手机/平板/桌面多尺寸测试为 CSS 写注释说明布局选择截图留档。技术要点二选一同一批元素要么 Flexbox 要么 Grid用相对单位rem/em/%/vw/vh替代固定像素保持语义化 HTML 与 alt 文本命名一致、组织清晰。评估标准覆盖布局实现、代码质量、跨浏览器兼容、响应式设计与文档完整性四个维度。后续学习路径完成本课后你已具备Kaskade 理解样式如何继承与覆盖、选择器掌控元素/类/ID 精准命中、定位技能战略化放置与分层、视觉设计玻璃效果、阴影、透明、响应式技巧百分比布局与代码组织能力整洁可维护的 CSS 结构。下一步Terrarium 现在兼具结构HTML与样式CSS系列最终课3-intro-to-DOM-and-closures将引入 JavaScript 交互。推荐继续深入的方向Flexbox简化对齐与分布、CSS Grid复杂布局、CSS 变量减少重复、提升可维护性、响应式设计媒体查询、移动优先以及media断点实践——3-terrarium/solution/style.css 中的导航栏媒体查询就是现成范例。动手建议打开浏览器 DevTools 的 Elements 面板检视任意网站的 CSS 规则新建 CSS 文件并接入 HTML尝试用 Hex、RGB 与命名色三种方式改色给div添加padding与margin练习盒模型。课程配套的课前/课后测验与德语版完整目录见 translations/de/3-terrarium/2-intro-to-css/README.md 与 translations/de/3-terrarium/README.md。【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
