01-Css基础入门

1 《CSS 基础入门：从 0 到能写页面样式》

1.1 CSS 是什么

• 1.1.1 核心作用： CSS（Cascading Style Sheets）用于美化网页，控制页面的外观（颜色、布局、字体等）。
• 1.1.2 与 HTML 的关系：
  • HTML：负责结构（骨架）
  • CSS：负责样式（外观）

👉 一句话理解： HTML 搭房子，CSS 搞装修

1.2 div 和 span 标签

1.2.1 div（块级元素）

• 1.2.1 特点：
  • 独占一行（换行显示）
  • 可以设置宽高
  • 是一个“容器”（常用于布局）
• 1.2.2 示例

这是一个div

另一个div

• 1.2.3 核心理解
  • 用于搭结构、做布局
  • 类似“盒子”

1.2.2 span（行内元素）

• 1.2.2 特点：
  • 不独占一行（可以一行多个）
  • 宽高无效（由内容决定）
  • 常用于包裹局部文字
• 1.2.3 示例

文字 1 文字 2

• 1.2.4 核心理解
  • 用于局部修饰
  • 类似“标签贴纸”

1.3 CSS 写在哪里（3 种方式）

1.3.1 行内式（不推荐）

• 写法

内容

• 特点
  • 写在标签内部
  • 优先级最高
  • ❌ 无法复用

1.3.2 内嵌式（常用）

• 写法

• 特点
  • 写在 <style> 标签中
  • 作用于当前页面

1.3.3 外链式（最推荐）

• 写法

/* base.css */ div { background-color: green; }

• 特点
  • CSS 单独文件
  • 可复用
  • 易维护（企业开发标准）

1.4 三种方式总结（非常重要）

• 1.4.1 使用场景
  • 行内式：临时修改
  • 内嵌式：单页面
  • 外链式：项目开发（主流）
• 1.4.2 优先级（核心）

👉 同时作用时：

行内式 > 内嵌式 > 外链式

1.5 CSS 基本语法结构

1.5.1 标准格式

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

• 1.5.2 示例

div { color: red; width: 300px; }

• 1.5.3 关键点
  • : 表示赋值
  • ; 分隔多个属性
  • 属性名是固定的（不能乱写）

1.6 就近原则（优先级细节）

• 1.6.1 规则 👉 谁离标签近，谁生效
• 1.6.2 示例

内容

• 最终结果

红色（行内式生效）

• 1.6.3 本质理解
  • CSS 是“覆盖”的过程
  • 越具体、越靠近 → 优先级越高

2 本章核心总结（你必须记住）

2.1 一句话总结

• CSS 就是控制网页外观的语言

2.2 三个最重要知识点

• 2.2.1 div vs span

  • div：布局（块）
  • span：修饰（行内）

• 2.2.2 CSS 三种写法

  • 行内 / 内嵌 / 外链

• 2.2.3 优先级规则

  行内 > 内嵌 > 外链

2.3 实战理解（关键）

• 页面结构 → 用 div
• 局部文字 → 用 span
• 项目开发 → 用 外链 CSS
• 临时测试 → 用 行内 CSS