🤖 Assistant

🎨 CSS 零基础完全指南

🌟 CSS 是什么？

  • CSS（Cascading Style Sheets）：层叠样式表
  • 控制网页的外观表现（如颜色、布局、字体）
  • HTML负责结构，CSS负责美化（类似毛坯房 + 装修）
  • 文件扩展名 .css（如 style.css）

📦 CSS 三种引入方式

1. 内联样式（直接写在标签里）

1
<p style="color: red;">红色文字</p>

2. 内部样式表（写在 <style> 标签中）

1
2
3
4
5
6
7
<head>
  <style>
    p {
      font-size: 16px;
    }
  </style>
</head>

3. 外部样式表（最常用，单独写.css文件）

1
2
<!-- 在head中链接 -->
<link rel="stylesheet" href="style.css">

🔍 CSS 选择器

1. 基础选择器

选择器 示例 说明
元素选择器 p { ... } 选择所有 <p> 标签
类选择器 .box { ... } 选择所有 class="box" 的元素
ID选择器 #header { ... } 选择 id="header" 的元素
通配符选择器 * { ... } 选择页面所有元素

2. 组合选择器

1
2
3
4
5
6
7
8
9
10
11
/* 后代选择器 */
div p { ... }        /* div里的所有p标签 */

/* 子元素选择器 */
div > span { ... }   /* div的直接子span */

/* 相邻兄弟选择器 */
h1 + p { ... }       /* 紧跟在h1后的第一个p */

/* 群组选择器 */
h1, h2, h3 { ... }   /* 同时选择多个元素 */

3. 伪类 & 伪元素

1
2
3
4
5
6
7
/* 伪类 */
a:hover { ... }      /* 鼠标悬停时 */
li:nth-child(2) { ... }  /* 第二个li元素 */

/* 伪元素 */
p::first-letter { ... }  /* 段落的首字母 */
div::after { content: "▶"; } /* 在div后添加内容 */

📐 盒模型（快递盒子理论）

盒模型

1
2
3
4
5
6
7
div {
  width: 200px;      /* 内容区宽度 */
  height: 100px;     /* 内容区高度 */
  padding: 20px;     /* 内边距（填充物厚度） */
  border: 5px solid #000; /* 边框（外壳） */
  margin: 30px;      /* 外边距（盒子间距） */
}

盒模型切换

1
2
box-sizing: content-box;  /* 默认（总宽度 = width+padding+border） */
box-sizing: border-box;   /* 推荐！总宽度 = width（包括padding和border） */

🎯 常用CSS属性

1. 文本样式

1
2
3
4
5
6
7
8
p {
  color: #ff0000;              /* 文本颜色 */
  font-size: 16px;             /* 字体大小 */
  font-family: "Microsoft Yahei", Arial; /* 字体 */
  line-height: 1.5;            /* 行高 */
  text-align: center;          /* 对齐方式 */
  text-decoration: underline;  /* 下划线/删除线 */
}

2. 背景样式

1
2
3
4
5
6
div {
  background-color: #f0f0f0;
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;      /* 背景图覆盖整个区域 */
}

3. 布局属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 显示模式 */
display: block;     /* 块级元素（独占一行） */
display: inline;    /* 行内元素（不换行） */
display: inline-block; /* 行内块（可设置宽高） */

/* 定位方式 */
position: static;   /* 默认 */
position: relative; /* 相对定位（参照自身位置） */
position: absolute; /* 绝对定位（参照最近定位父级） */
position: fixed;    /* 固定定位（参照浏览器窗口） */

/* Flex布局（重点！） */
.container {
  display: flex;
  justify-content: center; /* 水平对齐 */
  align-items: center;     /* 垂直对齐 */
}

🌀 Flex 布局速查表

容器属性

1
2
3
4
5
flex-direction: row;          /* 主轴方向（row/column） */
flex-wrap: wrap;              /* 是否换行 */
justify-content: space-between; /* 主轴对齐方式 */
align-items: center;          /* 交叉轴对齐 */
gap: 20px;                    /* 项目间距 */

项目属性

1
2
3
flex: 1;                      /* 分配剩余空间 */
align-self: flex-start;       /* 单独设置对齐 */
order: 2;                     /* 排列顺序 */

📱 响应式设计（媒体查询）

1
2
3
4
5
6
7
8
9
/* 当屏幕宽度小于600px时 */
@media (max-width: 600px) {
  .box {
    width: 100%; 
    flex-direction: column;
  }
}
/* 屏幕方向检测 */
@media (orientation: portrait) { /* 竖屏 */ }

🌈 CSS 进阶特性

1. 过渡动画

1
2
3
4
5
6
button {
  transition: all 0.3s ease;  /* 属性 | 时间 | 速度曲线 */
}
button:hover {
  transform: scale(1.1);
}

2. 关键帧动画

1
2
3
4
5
6
7
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(200px); }
}
.box {
  animation: slide 2s infinite alternate;
}

3. CSS 变量

1
2
3
4
5
6
:root {
  --main-color: #4285f4;      /* 定义变量 */
}
header {
  background-color: var(--main-color); /* 使用变量 */
}

🛠️ 综合案例：个人主页美化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/* style.css */
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 20px;
}

header {
  background: linear-gradient(45deg, #2196F3, #E91E63);
  color: white;
  padding: 2rem;
  text-align: center;
}

nav a {
  color: white;
  text-decoration: none;
  margin: 0 15px;
  padding: 5px;
  border-radius: 4px;
}

nav a:hover {
  background: rgba(255,255,255,0.2);
}

.profile-img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 40px;
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

🚀 最佳实践建议

  1. 使用语义化类名（如 .nav-link 而非 .blue-text）
  2. 遵循移动优先原则（先写移动端样式，再用媒体查询适配大屏）
  3. 善用开发者工具调试（按F12，实时调整样式）
  4. 保持代码整洁（使用CSS预处理器如Sass/Less）
  5. 学习使用CSS框架（Bootstrap/Tailwind CSS）

CSS的学习需要大量练习，尝试模仿优秀的网页设计，并亲手调试每个样式属感受变化！✨
```