← FC Coder · HomePhase 00 · Lesson 02 · 60 min
Lesson02
Phase Zero · DevTools Explore · Matchday 02

给球员卡
换衣服

Today's 3 Jobs · 今天这三件事
  1. 01
    给哈兰德的名字涂一个粉色
    一个字变色 —— 改的是样子,不是骨头。
  2. 02
    把评分字变得跟脸一样大
    属性换一个,值换一个。
  3. 03
    给一群球员卡同时换衣服
    一条规则管一堆 —— 这是 CSS 的魔法。

今天你第一次**自己写**真正的 CSS。不装软件,依旧只在浏览器里。

Half 1 · 在脑子里

三层回忆 · 今天看皮肤

骨头(HTML)决定是什么,皮肤(CSS)决定长什么样。大脑(JS)留到下节课。

  1. 01

    骨头

    HTML

    决定是什么 —— 上节课见过。

  2. 02

    皮肤

    CSS

    决定长什么样 —— 今天的主角。

    今天只看这个
  3. 03

    大脑

    JavaScript

    决定会做什么 —— 下节课。

Essence · 本质 1/1

一条 CSS 规则长什么样

「谁 + 怎么改」。看到这个形状,就看到 CSS。

Chalk Board · 一条规则
h1 {
color: gold;
}
谁 · Selector
h1
怎么改 · Property
color
改成什么 · Value
gold

读出来:"选中所有 h1,把字涂成金色。"

Pitch Analogy · 球场比喻

选择器 = 教练喊号码

教练不会揪着每个人说话。他喊号码,一群人同时动。CSS 选择器一样。

  1. 01
    h1
    "所有当标题的,过来!"
    每一个 <h1>
  2. 02
    p
    "所有当段落的!"
    每一个 <p>
  3. 03
    .player-card
    "身上贴 'player-card' 签的,过来!"
    每一张带这个 class 的卡
Roster · 今天的三张字条

只学 3 种属性 · 够翻新一次

CSS 里有几百个属性。今天只要这三个。

  1. 01
    color
    字的颜色
    color: deeppink;
  2. 02
    font-size
    字的大小
    font-size: 56px;
  3. 03
    background-color
    整块的底色
    background-color: pink;
Warm-up · 赛前热身

先在这儿贴几张字条

右边三个旋钮,左边那张卡会立刻变。等会儿在 ea.com 上做的,就是这个。

99
ST
FC · CODER
🧒
你的名字
Name Color · 名字颜色
Font Size · 字大小 (18px)
Card Background · 卡片底色
Live Rule · 当前的字条
.player-card {
}

.player-card .name {
  color: deeppink;
  font-size: 18px;
}
Half 2 · 在屏幕上

现在去真球场 · 在 ea.com 上贴

做完一步就点 ✓。关掉浏览器也不丢。

Away Fixture · 客场
打开 ea.com/ratings →新窗口打开 · 回来打勾
01进场 · 侦查 Styles
01Min

打开球员页 + 召唤 DevTools

Chrome 地址栏:ea.com/games/ea-sports-fc/ratings。找到哈兰德或任意球员。Mac ⌘ + ⌥ + I,Windows F12。
02Min

切到 Styles 面板

点 DevTools 左上角 🖱️ 箭头,点哈兰德的名字。右边(或下面右半)找 Styles 面板。读一下已有的规则 —— 都是「选择器 { 属性: 值 }」的形状。
02动手 · 贴字条
03Min

贴第一张字条 · 名字变粉

在 Styles 顶部找 element.style { } 块。点大括号中间,打:color: deeppink · 按 Tab · 再打:font-size: 56px · Enter。网页上名字变粉 + 变大。
04Min

玩一下 · 换颜色 / 换大小

把 deeppink 换成 gold / skyblue / black,把 56px 换成 120px / 32px。属性没变,值变了,样子就变了。
05Min

给整张卡铺底色

在 Elements 面包屑往外走一层,选到整张卡的盒子(高亮要框住整张卡)。在 element.style { } 里打:background-color: pink。整张卡变粉底。
06Min

一条规则换一群卡的衣服

在 Styles 面板找 "+ New Style Rule"。DevTools 会猜一个选择器(通常是 .player-card)。如果猜的不对,看 Styles 里已有规则,挑一个出现最多、前面带 . 的 class 名抄过来 —— 能选中就对。光标跳进 { } 里打:background-color: lightpink · Enter · 所有卡同时变粉!
03收官 · 刷新看魔法消失
07Min

截图留念

Mac ⇧ + ⌘ + 4 框选,Windows Win + Shift + S。存:2026-XX-XX-我的粉色曼城.png。
08Min

刷新 · 字条被吹走

⌘ + R / F5。粉色、金色、字大小 —— 全没了。浏览器重新从 EA 服务器拿了一份原板。你贴的字条,只在自己这张板子上。
Half Time · 中场休息

讲给爸爸听

关掉 DevTools。看着爸爸,用自己的话。

01CSS 和 HTML 差在哪?为什么一个叫骨头、一个叫皮肤?Hint ↓

三层比喻。骨头是结构,皮肤是样子。同一根骨头可以穿任何一件衣服。

02一条 CSS 规则有几部分?用你自己的话讲一下。Hint ↓

选择器 + 属性对 = 「谁 + 怎么改」。喊号码,然后告诉他怎么做。

03Step 3 只改了名字,Step 5 改了整张卡,Step 6 改了所有卡。这三步里什么变了,什么没变?Hint ↓

值改没改?属性改没改?选择器变了吗?选择器的'颗粒度'是关键 —— 名字 → 一张卡 → 所有卡。

04我想让全网站的按钮都变成红色,用刚学的话说怎么写?Hint ↓

button { background-color: red; } —— 不要求一字不差,讲得清「谁 + 怎么改」就过。

Player Rating · 本课温度计

给今天打个分

没对错。说真话。爸爸会看到。

今天难度Difficulty
0
今天开心Fun
0
Final Whistle · 终场哨

今天你是 EA 画师。

还有 8 步没打勾。明天继续也行,这不是考试。

Next · Lesson 03 · 让球员学会算数 · Console 首秀 →