CSS Notes

CSS 基础笔记

CSS 基础笔记：记录样式表、盒模型、Flex / Grid 布局、响应式和个人主页里的视觉风格。

CSS 是什么

CSS 负责网页的外观。HTML 搭结构，CSS 决定颜色、大小、间距、布局、圆角、阴影和动画。

用 <link rel="stylesheet"> 把 CSS 文件引入 HTML。

通过类名、标签名或状态选择页面元素。

后面的规则、权重更高的规则会覆盖前面的样式。

每个元素都可以理解成一个盒子，常见属性包括内容、内边距、边框和外边距。

元素内容和边框之间的距离。

元素和其他元素之间的距离。

让卡片和按钮变成圆角。

个人主页里大量用到 Flex 和 Grid：导航栏适合 Flex，卡片列表和左右布局适合 Grid。

适合一维排列，比如导航、按钮组、标签列表。

适合二维布局，比如项目卡片、关于我卡片。

配合媒体查询，让手机和电脑都能舒服显示。

这个网站目前的风格是柔和渐变、玻璃拟态、圆角卡片和轻微动效。

使用半透明背景、边框和 backdrop-filter。

用 CSS 变量统一管理主题色。

通过 body.dark 切换深色样式。