🎨 CSS 学习笔记（一）——从“能看”到“好看”的第一步> 如果说 HTML 是网页的骨架， > 那 CSS 就是让

如果说 HTML 是网页的骨架，
那 CSS 就是让网页“变好看”的灵魂。

今天是 CSS 的第一天，目标很明确：
会写、能用、看得懂。

一、CSS 是什么？能干什么？

CSS，全称是 Cascading Style Sheets（层叠样式表） 。

简单理解：

CSS = 专门负责美化 HTML 的语言

它主要用来控制：

文字（颜色、大小、粗细、对齐方式）
图片（大小、边框、间距）
页面布局和整体外观

🎯 CSS 的最大价值在于一句话：

结构（HTML）和样式（CSS）相分离

这样做的好处：

HTML 只负责结构
CSS 专心负责样式
页面更好维护，也更专业

二、CSS 的语法规则（必会）

一条 CSS 规则由两部分组成：

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

示例：

<head>
  <style>
    h4 {
      color: blue;
      font-size: 100px;
    }
  </style>
</head>

📌 关键点总结：

选择器：选中谁
属性：改什么
属性值：改成什么
多个属性用 ; 隔开
: 和 ; 都是英文符号

三、CSS 代码书写规范（很重要）

1️⃣ 推荐的书写格式（展开式）

h3 {
  color: pink;
  font-size: 20px;
}

❌ 不推荐紧凑式（可读性差）

2️⃣ 大小写规范

✅ 强烈推荐：全部小写

h3 {
  color: pink;
}

3️⃣ 空格规范（细节决定专业）

h3 {
  color: pink;
}

冒号后一个空格
选择器和 { 之间有空格

四、CSS 选择器的作用

选择器的作用只有一个：选对人

先选中元素
再给它设置样式

五、CSS 基础选择器（重点）

1️⃣ 标签选择器

p {
  color: red;
}

特点：

按标签名选
会影响页面中 所有该标签

2️⃣ 类选择器（最常用）

.red {
  color: red;
}

HTML 中使用：

<div class="red">内容</div>

特点总结：

使用 . 开头
一个类可以给多个元素用
一个元素可以有多个类
命名要有意义（不要中文、不要纯数字）

3️⃣ 多类名选择器（非常常见）

<div class="red font20">亚瑟</div>

规则：

多个类名用 空格隔开
样式会叠加生效

4️⃣ id 选择器

#header {
  background: pink;
}

特点：

页面中唯一
常用于 JS 操作
不适合大量使用

📌 经典比喻：

class：名字（可重复）
id：身份证（唯一）

5️⃣ 通配符选择器

* {
  margin: 0;
  padding: 0;
}

作用：

选中页面 所有元素
常用于清除默认样式

⚠️ 特殊场景使用，不要滥用

六、CSS 字体属性（高频）

1️⃣ 字体大小 `font-size`

p {
  font-size: 20px;
}

要点：

浏览器默认 16px
实际开发尽量给明确大小
可以给 body 统一设置

2️⃣ 字体粗细 `font-weight`

p {
  font-weight: 700;
}

3️⃣ 字体样式 `font-style`

p {
  font-style: normal;
}

常用于取消斜体。

4️⃣ 字体综合写法（重点）

body {
  font: normal 400 16px/24px "Microsoft YaHei";
}

⚠️ 规则：

顺序不能乱
必须保留 font-size 和 font-family

七、CSS 文本属性

1️⃣ 文本颜色 `color`

div {
  color: #ff0000;
}

📌 开发中最常用 十六进制

2️⃣ 文本对齐 `text-align`

div {
  text-align: center;
}

3️⃣ 文本修饰 `text-decoration`

a {
  text-decoration: none;
}

重点掌握：

添加下划线
去掉下划线

4️⃣ 文本缩进 `text-indent`

p {
  text-indent: 2em;
}

📌 em 是相对单位，等于当前字体大小。

5️⃣ 行高 `line-height`

p {
  line-height: 26px;
}

公式理解：

行高 = 上间距 + 文字高度 + 下间距

八、CSS 三种引入方式（必考）

1️⃣ 行内样式（不推荐）

<div style="color:red;">内容</div>

只适合简单测试。

2️⃣ 内部样式（练习常用）

<style>
  div {
    color: red;
  }
</style>

3️⃣ 外部样式（实际开发必用）

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

🎯 核心思想：

结构与样式彻底分离

九、Chrome 调试工具（前端必备）

几个超实用技巧：

Ctrl + 滚轮：缩放代码
左边 HTML，右边 CSS
样式可直接在线修改
没样式 → 类名或引入错误
黄色叹号 → CSS 属性写错

✨ 总结

CSS 第一天的核心收获：

理解 CSS 的角色
掌握基础选择器
学会字体 & 文本样式
明白三种引入方式
开始学会用浏览器调试

CSS 不难，难的是细节。
把基础打牢，后面的布局和动画才稳。

🎨 CSS 学习笔记（一）——从“能看”到“好看”的第一步