AI 编程基础

什么是 CSS

CSS（层叠样式表）是网页的皮肤和衣服。它决定了”页面长什么样”。

CSS 写在哪里

方式 1：内联样式（写在标签里）

<h1 style="color: purple; font-size: 32px;">标题</h1>

方式 2：style 标签

<style>
  h1 {
    color: purple;
    font-size: 32px;
  }
</style>

方式 3：外部 CSS 文件（推荐）

<link rel="stylesheet" href="style.css" />

CSS 语法

选择器 {
  属性: 值;
  属性: 值;
}

h1 {              /* 选择器：选中所有 h1 */
  color: purple;  /* 属性: 值 */
  font-size: 32px;
}

常用属性速查

颜色和背景

color: #7c3aed;           /* 文字颜色 */
background: #1e1e2e;      /* 背景色 */
background: linear-gradient(135deg, purple, cyan); /* 渐变 */

文字

font-size: 16px;          /* 字号 */
font-weight: 700;         /* 粗细：400正常/700加粗 */
text-align: center;       /* 对齐 */
line-height: 1.6;         /* 行高 */

间距

margin: 20px;             /* 外边距（外面） */
padding: 16px;            /* 内边距（里面） */

┌─────────────────────────┐
│         margin          │
│  ┌───────────────────┐  │
│  │      padding      │  │
│  │   实际内容区域     │  │
│  └───────────────────┘  │
└─────────────────────────┘

尺寸

width: 300px;             /* 宽度 */
height: 200px;            /* 高度 */
max-width: 800px;         /* 最大宽度 */

边框和圆角

border: 1px solid #ccc;   /* 边框 */
border-radius: 12px;      /* 圆角 */

布局

display: flex;            /* 弹性布局（最常用） */
display: grid;            /* 网格布局 */
gap: 16px;                /* 间距 */

Flexbox 布局速成

Flexbox 是最常用的布局方式：

.container {
  display: flex;           /* 开启弹性布局 */
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  gap: 16px;              /* 子元素间距 */
}

<div class="container">
  <div>元素1</div>
  <div>元素2</div>
  <div>元素3</div>
</div>

→ 三个元素会自动横向排列，居中对齐，间距 16px。

响应式设计

让页面在手机上也好看：

/* 手机屏幕时 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;  /* 改为纵向排列 */
  }
}

在 AI 编程中的应用

你不写 CSS，但你需要：

看一眼知道 color 是颜色、font-size 是字号
想改样式 → 找到对应的属性 → 告诉 AI
“把这个卡片的背景改成渐变色，加个阴影” → AI 帮你改

小结

CSS 核心就 10 个属性： color background font-size margin padding width border border-radius display:flex gap

其他属性 → 问 AI。

下一篇学 JavaScript 基础，理解页面交互。