你可能会说
这个页面太素了，帮我美化一下——加点圆角、阴影、渐变。
CSS 是网页的样式语言，控制元素的颜色、字体、间距、布局、动画等一切视觉表现。
网页的「装修」。HTML 只决定内容在哪，CSS 决定它长什么样——颜色、字体、大小、间距、圆角、阴影，全靠它。
生活类比
如果 HTML 是毛坯房，CSS 就是精装修——刷墙漆、铺地板、装吊灯。
🎮 动手试试
同一个元素，只改 CSS 就能从「毛坯」变「精装」。颜色、圆角、阴影都是 CSS 控制的。
CSS 盒模型中，从内到外的正确顺序是？
你可以这样告诉 AI
帮我美化这个组件的样式：圆角 12px、柔和阴影、hover 时微微上浮、用暖色调配色。
HTML 管「有什么」，CSS 管「长什么样」。结构 vs 外观。
传统 CSS 写在独立文件里，CSS-in-JS 把样式写在 JS 组件内部，作用域更明确。
美化界面
颜色、字体、圆角、阴影、渐变等视觉效果
响应式布局
让页面在手机、平板、电脑上都好看
动画效果
过渡、淡入淡出、滑动等动态效果
复杂交互逻辑
条件判断、数据处理、API 请求等需要 JavaScript
动态内容生成
根据数据渲染列表、条件显示等需要模板引擎或 JS 框架
指定「给谁加样式」，如 .class、#id、tag、tag > child
指定「改什么」，如 color、font-size、margin、display
指定「改成什么」，如 red、16px、flex、grid
每个元素 = content + padding + border + margin
用预设的工具类（如 px-4、text-red-500）快速组合样式，不写自定义 CSS
每个组件一个 CSS 文件，类名自动加哈希避免冲突
支持变量、嵌套、混入等高级功能，编译后变成普通 CSS