CSS
中级通用
CSS（层叠样式表）是控制网页元素外观和布局的样式语言。它解决同一内容在不同页面、屏幕上如何呈现的问题，比如让后台表格在窄屏时调整排布。
你可能会说：「帮我把这个后台页面排整齐，手机上也能看清楚，但别改它原有的功能。」
读之前建议先了解
动手看看后台订单页
订单管理
新建订单
概览
订单
客户
近期订单
订单 1 · 待处理
订单 2 · 待处理
订单 3 · 待处理
页面内容一直没变。这里用 CSS 控制字号、间距和排布；拖动参数，看看同一组订单在不同宽度下怎么呈现。
要点CSS 怎样决定网页最终长什么样？
- 1
用选择器找到要调整的元素
你可以按元素类型、类名等条件选中页面内容，再设置颜色、字号或间距。比如给后台所有订单卡片使用同一个类名，改一次样式就能让它们保持一致。
- 2
样式冲突时看层叠规则
同一个按钮可能同时受到通用样式和页面专用样式影响。浏览器会根据来源、优先级和声明顺序等规则确定结果，所以你看到样式没生效时，先查是否被别的规则覆盖。
- 3
布局还能随屏幕宽度变化
CSS 不只管颜色，也管元素占多大空间、怎么排列。做产品首页时，你可以用网格或弹性布局排卡片，再用媒体查询调整窄屏下的列数，让内容更容易阅读。
容易混淆的地方
HTML 负责表达页面有什么、内容是什么，例如标题、链接和表单；CSS 负责这些内容怎样显示。JavaScript 负责交互逻辑，例如点击后提交表单。CSS 也能呈现悬停等视觉状态，但仅靠它不能完成向服务器保存数据这类操作。
什么时候用
适合用
- 做后台页面时，统一表格、按钮和提示信息的字号、颜色与间距，让多个页面保持一致。
- 网站需要兼顾电脑和手机时，用 CSS 调整导航、卡片列数和内容宽度。
- 给现有网页做深色模式时，切换配色和边框等视觉样式，而不改页面内容。
不适合用
- 要把用户填写的资料保存到账户里时，CSS 不负责存储；需要交互代码和后端接口。
- 要设计原生手机 App 的界面时，不能直接拿网页 CSS 控制原生控件；用对应平台的界面方案。
- 要修改照片里人物的肤色时，CSS 只能改变图片整体呈现，具体修图要用图像编辑工具。
练一练选一个答案，看看解释
你让 AI 修改一个订单后台：桌面端每行显示三张订单卡片，手机端改为一张；点击卡片仍能进入详情。主要该怎样分工？
让 AI 帮你做复制给 AI Agent 直接用
请用 CSS 调整现有订单后台：桌面端订单卡片每行三张，窄屏时每行一张，并统一卡片间距。保留 HTML 的内容结构和现有跳转功能；完成后说明你修改了哪些样式，以及如何检查不同屏幕宽度下的效果。