Web-Dev-For-Beginners Terrarium 第 2 课CSS 级联、选择器与定位用纯 CSS 打造玻璃生态瓶【免费下载链接】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 课系统讲解 CSS 级联规则、属性继承、选择器优先级、五种定位方式以及如何仅用 CSS 矩形块、透明度与层叠构建一个玻璃罐生态瓶视觉。读完后你能为上一课写好的 HTML 结构套上完整样式理解absolute/relative组合布局的原理并掌握为后续 JavaScript 拖拽交互预留定位条件的方法。这节课的定位从 HTML 骨架到风格化页面HTML 课结束时你的生态瓶页面只有功能、没有观感。如果把 HTML 比作房子的框架CSS 就是让它像家的一切配色、家具摆放、灯光与空间流动。本项目的完整学习路径是第 1 课 HTML 结构搭好页面骨架第 2 课本文用 CSS 完成视觉设计第 3 课 DOM 与闭包用 JavaScript 让植物可拖拽。本课后你将达成四个具体目标创建使用现代 CSS 技术完成的生态瓶完整视觉设计理解级联cascade、继承inheritance与 CSS 选择器等基础概念实现响应式的定位与布局策略构建基于 CSS 形状与样式无图片素材的生态瓶容器。前提是你已经完成上一课的 HTML 结构并且页面结构准备就绪。把 CSS 接入 HTML第一个 style.css在开始写样式前需要先建立 HTML 与 CSS 文件之间的连接。在你的 terrarium 文件夹中新建style.css然后在 HTML 文档的head中加入link relstylesheet href./style.css /这段代码做的事情创建HTML 与 CSS 文件之间的连接告知浏览器加载并应用style.css中的样式使用relstylesheet属性声明这是一个 CSS 样式表通过href./style.css引用文件相对路径。仓库中的参考实现也是这样连接的见 solution/index.html 第 11 行link relstylesheet href./style.css /位于 Font Awesome 图标样式表之后、script src./script.js defer/script之前。CSS 级联样式冲突如何裁决CSS 全名 Cascading Style Sheets层叠样式表因为样式像瀑布一样层层叠加彼此可能冲突。可以类比命令层级一条总令说全体穿绿色一条针对你部队的具体命令说典礼穿深蓝色——更具体的指令优先。CSS 遵循同样的逻辑理解这个层级能大幅降低调试成本。动手实验制造一次样式冲突先给h1加内联样式h1 stylecolor: redMy Terrarium/h1直接给h1元素应用红色内联样式使用style属性把 CSS 直接嵌入 HTML形成针对该元素优先级最高的样式规则。再往style.css里加入规则h1 { color: blue; }定义一条针对所有h1元素的规则通过外部样式表把文字颜色设为蓝色优先级低于内联样式。结果页面显示红色。因为内联样式优先级最高。CSS 的完整优先级从高到低内联样式style属性ID 选择器#myId类选择器.myClass与属性选择器元素选择器h1、div、p浏览器默认样式可以把它理解成一个逐级检查的流程浏览器遇到h1后先查内联样式命中则直接采用最高权重否则查 ID 规则再查类规则再查元素规则全部落空才使用浏览器默认值。这个命中即止的判断顺序就是日常调 CSS 时为什么我的样式不生效问题的答案框架。CSS 继承哪些属性会传给子元素CSS 继承类似遗传父元素上的某些属性会自动传给后代。比如给body设置字体页面里所有文本默认都用这个字体但并非所有属性都继承——字体、颜色等文本样式会继承而margin、border等布局属性不会。观察字体继承给body设置字体族body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; }设置整页字体族通过选中body元素使用字体栈font stack提供回退选项提升跨环境兼容性选用现代系统字体在不同操作系统上观感都不错保证所有子元素继承该字体除非被显式覆盖。打开浏览器开发者工具F12进入 Elements 面板检查h1元素可以看到它从body继承了字体族可继承属性包括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; }答案红色。因为div和.special的颜色只会继承给没有自身颜色规则的子元素而h1 { color: red }是元素选择器直接命中h1本身覆盖继承值。这也提示了一条调试技巧先看哪个选择器直接命中了元素再看哪些值来自继承。CSS 选择器元素、ID 与类选择器是定位待样式化元素的手段。有时你需要整条街的每扇门都上同一种颜色元素选择器有时只需要其中一扇特殊的门ID 或类。元素选择器标签元素选择器按标签名命中元素适合设置全局基础样式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 选择器与 DRY 重构ID 选择器用#命中带特定id属性的元素。ID 在页面中必须唯一因此适合样式化独一无二的元素——比如生态瓶的左右两个植物容器#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计入总宽度省略零值后面的单位left: 0而非0px代码更干净设置柔和的浅灰背景#f5f5f5比纯灰更不刺眼。这段写法违反了 DRYDont Repeat Yourself原则——两个规则几乎逐行重复。改进做法是HTML 中同时挂 ID 与公共类CSS 中把公共样式抽进类选择器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; }仓库的参考实现正是这个重构后的结构solution/style.css 中.container承载全部公共样式background-color、width: 15%、position: absolute、height、padding而#left-container只写left: 0px、#right-container只写right: 0px。对应的 HTML 在 solution/index.html左右两个section内各放 7 个.plant-holder。类选择器.plant-holder 与 .plant 的两层模式类选择器用.可以复用是同一批元素共享一套样式的标准手段。生态瓶里每棵植物既有共享样式又需要各自独立定位因此采用公共类 唯一 ID的组合。每棵植物的 HTML 结构div classplant-holder img classplant altDecorative plant for terrarium idplant1 src./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); }建立relative定位为内部元素创建定位上下文设定每个植物槽位 13% 高度14 棵植物左右各 7恰好纵向排满微调槽位左移负left让植物在容器内更居中允许植物用max-width/max-height弹性缩放使用z-index: 2让植物层叠在玻璃罐z-index: 1之上添加transition:hover缩放效果让鼠标悬停有细腻反馈。这里的关键设计模式容器.plant-holder管布局与定位内容.plant管外观与缩放。两者分离后改布局不影响外观改外观不牵连布局。仓库实现见 solution/style.css。CSS 定位五个 position 值与生态瓶的三层组合CSS 定位像舞台调度有的演员按剧本队列站位static有的需要精确站到指定坐标absolute。掌握定位后吸顶导航、悬浮提示这类需求都有对应解法。position 值行为典型用途static默认文档流忽略top/left/right/bottom常规文档排版relative相对自身原始位置偏移小幅调整、创建定位上下文absolute相对最近的已定位祖先定位精确放置、覆盖层fixed相对视口定位导航栏、悬浮元素sticky滚动时在 relative 与 fixed 间切换滚动时吸顶的页头生态瓶页面正是三种定位的组合/* 容器定位 */ .container { position: absolute; /* 脱离文档流 */ /* ... 其他样式 ... */ } /* 植物槽位定位 */ .plant-holder { position: relative; /* 创建定位上下文 */ /* ... 其他样式 ... */ } /* 植物定位 */ .plant { position: absolute; /* 在 holder 内精确定位 */ /* ... 其他样式 ... */ }absolute 容器脱离正常文档流钉在屏幕左右边缘relative 槽位留在文档流中纵向堆叠同时为子元素建立定位参照系absolute 植物可以在各自的relative槽位内精确摆位三者组合使植物纵向等距排列且每棵都能独立移动。这个设计为下一课做了关键铺垫植物之所以能拖拽前提正是position: absolute。从源码看solution/script.js 中的dragElement函数通过 pointer 事件把鼠标位移换算成像素直接改写元素的style.top和style.leftterrariumElement.style.top terrariumElement.offsetTop - pos2 px; terrariumElement.style.left terrariumElement.offsetLeft - pos1 px;对static元素top/left不生效而absolute元素的offsetTop/offsetLeft有明确数值拖拽逻辑才能成立。也就是说这节课的定位写法不是纯装饰决策而是为 JS 交互预留的接口。可以试一组对照实验来验证自己的理解把.container从absolute改成relative、把.plant-holder改成absolute、把.plant改成relative分别观察布局如何崩塌。纯 CSS 玻璃罐四块矩形拼出来的视觉现在只用 CSS 造一个玻璃罐——不依赖任何图片或图形软件。用定位与透明度做出玻璃、阴影与纵深效果这套技巧能帮你识别大量网页设计背后的 CSS 手法。.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-walls60% 宽 × 80% 高的罐身圆角 0.5 透明度是玻璃通透感的主力.jar-top50% 宽 × 5% 高的罐口bottom: 80.5%恰好压在罐身上缘仅上两角圆润.jar-bottom50% 宽 × 1% 高的罐底垫在罐身下方.dirt60% 宽 × 5% 高的深棕色土层#3a241dz-index: -1让它沉到玻璃之后透过 0.5 透明度的罐身隐约可见——植物在罐内、土层在玻璃后的纵深感就来自这组层叠关系。整体层级可以这样记dirt (-1)jar 组件 (1)plant (2)。百分比尺寸内建响应式注意所有尺寸都用百分比而非固定像素保证生态瓶在任何屏幕尺寸上按比例缩放维持罐口、罐身、罐底、土层之间的比例关系提供从手机到大屏显示器的一致体验允许设计自适应而不破坏视觉布局。rem 单位与可访问性圆角使用rem单位它相对根字号缩放能尊重用户的字体偏好设置做出更包容的设计。深入理解可在官方 CSS Values 3 规范中查阅字体相对长度font-relative lengths章节。可视化实验改数值、看效果把罐身透明度从0.5调到0.8——玻璃观感如何变化把土层颜色从#3a241d换成#8B4513——视觉冲击有何不同把.dirt的z-index改成2——层叠关系会发生什么对照仓库实现lesson 增强版 vs solution 基础版仓库参考实现 solution/style.css 中的罐体四件套与课文一致但属于基础版本.jar-walls只有border-radius: 1rem而没有box-shadow.jar-top/.jar-bottom没有圆角。课文给出的版本在其之上做了两处增强——给.jar-walls增加box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1)的内阴影玻璃内侧的暗晕并给罐口/罐底补上圆角。对照这两个文件能直观看到同一组件从功能版打磨到质感版的 CSS 差异在哪里。挑战玻璃反光Glass Reflections接下来给玻璃罐加上真实感反光在罐体左侧放置浅色的细长椭圆高光模拟光线在玻璃表面的反射。目标效果就是文章开头那张成品图3-terrarium/2-intro-to-css/images/terrarium-final.png。要求拆解创建白色或浅色的细长椭圆作为高光放置在罐体左侧偏上区域施加合适的透明度/模糊效果模拟光线反射使用border-radius做出有机的气泡形状尝试用渐变或box-shadow进一步增强真实感。仓库的 solution/style.css 恰好给出了这套挑战的一个标准答案两个absolute定位的高光条嵌套在.jar-walls内部见 solution/index.htmljar-glossy-long与jar-glossy-short是.jar-walls的子元素.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: 2rem让两端呈胶囊状left: 5%统一贴在罐内左侧靠bottom不同值错开高度——这正是在左侧战略性地放置高光的最小实现。由于高光条是.jar-walls的子元素且.jar-walls自身opacity: 0.5高光也随罐身一起半透明化与玻璃融为一体。进阶练习让植物随风摇摆的 CSS 动画本课配套了一个 AI 辅助编程练习使用编辑器 Agent 模式给.plant类添加 keyframes 动画——每棵植物左右轻微旋转 2~3 度周期 3~4 秒无限循环并带缓动函数模拟自然微风。理解目标效果可以参考这样的关键帧结构供对照非仓库文件内容keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } } .plant { animation: sway 3.5s ease-in-out infinite; }这个练习串起了本课的多个知识点选择器.plant类命中全部 14 棵植物、transform与transition第 2 课已出现的属性、以及keyframes动画基础。由于每棵植物是absolute定位的独立元素旋转不会互相影响布局——又一次印证定位写法与交互能力的关系。课程作业用 Flexbox / Grid 重构定位方案课后作业 CSS Refactoring 要求把本课程的absolute定位方案重构为 Flexbox 或 CSS Grid 布局理解何时该用哪种布局是核心考核点。作业分三个阶段阶段 1分析与规划——审查现有代码找出所有使用绝对定位的元素在 Flexbox 与 Grid 之间选定其一草图规划容器与植物的组织方式。阶段 2实现——在独立文件夹中创建新版本按需调整 HTML 结构用 Flexbox 或 Grid 替换绝对定位保持植物与罐子的视觉位置一致实现响应式行为。阶段 3测试与文档——跨浏览器验证Chrome、Firefox、Edge、Safari在手机/平板/桌面尺寸下测试为布局选择添加 CSS 注释在不同浏览器与屏幕尺寸下截图留档。技术要点包括同一元素只选一种布局方案Flexbox 或 Grid不能混用于同一元素使用相对单位rem、em、%、vw、vh替代固定像素保持语义化 HTML 结构与alt文本命名一致、按逻辑组织 CSS。作业给出的两种参考方向/* Flexbox 思路 */ .terrarium-container { display: flex; flex-direction: column; min-height: 100vh; align-items: center; justify-content: center; } .plant-containers { display: flex; justify-content: space-between; width: 100%; max-width: 1200px; } /* Grid 思路 */ .terrarium-layout { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: auto 1fr; min-height: 100vh; gap: 1rem; }Grid 方案的1fr 3fr 1fr三列恰好对应左列植物 | 中央罐子 | 右列植物的页面结构——把本课的三区域视觉翻译成网格轨道是很自然的重构落点。交付物更新后的 HTML、重构后的 CSS、跨浏览器截图集桌面 1920x1080 / 平板 768x1024 / 手机 375x667至少两种浏览器、记录布局选择理由/挑战/兼容性说明/运行方法的 README。评分维度4 级量表布局实现、代码质量、跨浏览器兼容、响应式设计、文档完备度。加分项在同一设计的不同部位同时使用 Flexbox 与 Grid、为新布局添加 transition/animation、基于 CSS 自定义属性做暗色模式切换、使用容器查询container queries做组件级响应式。值得一提的是仓库参考实现本身已经示范了作业要求的部分现代布局技术solution/style.css 的导航栏用display: flexjustify-content: centergap: 2rem排列菜单项且 solution/style.css 中有一条media (max-width: 700px)媒体查询在小屏下把nav ul切换为flex-direction: column纵向排列——这是本课响应式设计目标的现成样板。延伸学习路径下一步学习内容Flexbox——简化元素对齐与分布CSS Grid——强大的复杂布局工具CSS 变量自定义属性——减少重复、提升可维护性响应式设计——保证站点在不同屏幕上的表现。动手练习平台在浏览器中搜索即可找到Flexbox Froggy青蛙主题 Flexbox 闯关、Grid Garden种胡萝卜学 Grid、CSS Battle限时 CSS 复刻挑战。配合官方 CSS 相对单位规范与浏览器内置的开发者工具Elements 面板可直接查看任意网站元素的样式与继承链足以支撑一个周期的持续练习。分阶段进度参考按课时折算阶段内容基础约 10 分钟关联 CSS 文件、理解级联规则、继承基础选择器约 15 分钟元素选择器、类模式、ID 特异性、组合器盒模型约 20 分钟margin/padding、border、内容尺寸、box-sizing 行为定位约 25 分钟static vs relative、absolute 定位、z-index、响应式单位视觉设计约 30 分钟颜色与透明度、阴影与效果、transition、transform响应式设计约 45 分钟媒体查询、弹性布局、移动端优先、视口优化进阶技术约 1 周Flexbox、Grid、自定义属性、关键帧动画工程能力约 1 个月组件化模式、可维护代码、性能优化、跨浏览器兼容本课工具包小结级联理解样式如何继承与覆盖、选择器掌握元素/类/ID 的精准命中、定位能力策略性摆放与层叠、视觉设计玻璃效果、阴影、透明度、响应式技术百分比布局、代码组织清晰可维护的结构、现代实践相对单位与可访问模式。下一步至此生态瓶同时拥有了结构HTML与样式CSS。下一课 Intro to DOM and Closures 将引入 JavaScript通过 DOM 操作与闭包实现植物拖拽——本课程的absolute定位将成为那段交互代码的地基。若想把作品发布到网上可参考 Terrarium 项目 README 中基于 Azure Static Web Apps 的部署流程将 App root 指向/solution目录即可。【免费下载链接】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），仅供参考