Your first CSS
Web Basics — HTML & CSS Lesson 12 2:21 English narration · English + 中文 subtitles burned in
Chapters
Transcript
Halfway through the course, a second language arrives.
课程过半，第二种语言登场了。
HTML says what each thing IS — this is a paragraph, that is a heading.
HTML 说明每样东西“是什么”——这是段落，那是标题。
CSS says how it looks — this colour, that size, this much space.
CSS 说明它“长什么样”——这个颜色、那个字号、这么多间距。
They stay separate on purpose, and the reason is worth understanding now: because the look lives apart from the content, one CSS rule can restyle a thousand paragraphs at once.
它们被刻意分开，而现在正好理解其中的原因： 正因为外观和内容是分离的， 一条 CSS 规则就能一次性给一千个段落换装。
A rule has three parts, and every rule for the rest of this course has these same three.
一条规则有三个部分，而这门课接下来的每一条规则，都是这同样的三部分。
The selector, at the front, says which tags to change — here, p, meaning every paragraph.
最前面的选择器，说明要改哪些标签——这里是 p，也就是所有段落。
Then inside the braces, the property says what to change, and the value says what to change it to.
然后在花括号里面，属性说明要改什么，值说明改成什么。
Read the whole thing as a sentence: every paragraph, its colour, becomes blue.
把整句话连起来读： 所有段落，它们的颜色，变成蓝色。
The rules go in a style block near the top of your page.
规则写在页面顶部附近的 style 块里。
Write one rule for p, press play, and both of them turn blue — you did not touch either paragraph.
为 p 写一条规则，按下播放，两个段落都变蓝了—— 你一个段落都没有动过。
Better still, add a third paragraph tomorrow and it arrives blue as well, for free.
更妙的是，明天你再加第三个段落，它一出生就是蓝的，不用额外做什么。
That is what selecting by tag means: the rule describes a kind of thing, not one particular thing.
这就是“按标签选择”的含义： 规则描述的是一类东西，不是某一个具体的东西。
CSS punctuation is strict, and two slips account for most first-day trouble.
CSS 的标点很严格，而第一天的麻烦大多来自两个失误。
Between the property and the value goes a colon, not an equals sign — that catches everyone who has written code before.
属性和值之间用的是冒号，不是等号—— 写过别的代码的人几乎都会在这里栽一次。
And the semicolon ends the declaration; leave it out with one rule and it may still work, leave it out with two and the second one silently disappears.
而分号用来结束一条声明； 只有一条规则时漏掉它可能还能用， 有两条时，第二条就会悄无声息地消失。
Now the tasks: paragraphs blue, heading red, both inside the style block.
现在做那两道题：段落变蓝，标题变红，两条都写在 style 块里面。
Four things to take with you.
带走四点。
One: HTML is the content, CSS is how it looks.
第一：HTML 是内容，CSS 是外观。
Two: the selector picks which elements to change.
第二：选择器挑出要改哪些元素。
Three: the property and value say what changes, and to what.
第三：属性和值说明改什么、改成什么。
Four: rules live inside a style block, each line ending in a semicolon.
第四：规则写在 style 块里面，每一行以分号结束。
Now colour your paragraphs, then your heading.
现在先给段落上色，再给标题上色。