Colours
Web Basics — HTML & CSS Lesson 14 2:11 English narration · English + 中文 subtitles burned in
Chapters
Transcript
The simplest way to write a colour is to name it.
写颜色最简单的方式，就是叫它的名字。
Red and blue you would expect; there are also tomato, gold, teal, steel blue, orchid — about a hundred and forty of them, and every browser knows all of them.
red 和 blue 你能想到； 还有 tomato、gold、teal、steelblue、orchid—— 一共大约一百四十个，而且每个浏览器都认得它们。
They are easy to type and easy to remember, which is the whole of their advantage.
它们好打、好记，这就是它们全部的优点。
What they cannot give you is a colour that is not on the list.
而它们给不了你的，是清单上没有的那种颜色。
For anything else there is the hex code: a hash followed by six characters.
其它任何颜色，就用十六进制码：一个 # 后面跟六个字符。
They look arbitrary until you split them into three pairs.
在你把它们拆成三组之前，它们看着毫无道理。
The pairs are how much red, green and blue to mix, each one from zero up to f f.
这三组分别是要混入多少红、绿、蓝，每一组从 00 到 ff。
So this particular blue has a lot of blue, a fair amount of green and very little red — and you can read that straight off the code.
所以这个特定的蓝里，蓝很多，绿不少，红极少—— 而这些你直接从代码上就能读出来。
You will not calculate these by hand; a colour picker in any design tool hands you the code.
你不会去手算这些；任何设计工具里的取色器都会把代码给你。
Two properties use colours, and mixing them up is the usual first mistake.
有两个属性会用到颜色，而把它们弄混，是最常见的第一个错误。
Colour, on its own, is the letters.
单写 color，指的是文字本身。
Background dash colour is the area behind them.
background-color 指的是文字后面那块区域。
And here is the useful trick: put it on body and you have coloured the whole page, because body is the box that holds everything you can see.
还有一个好用的技巧：把它写在 body 上， 你就给整个页面上了色， 因为 body 正是装着你能看见的一切的那个盒子。
One thing to watch as soon as you start choosing colours: keep the text and its background far enough apart to read.
一旦你开始挑颜色，有一件事要注意： 让文字和它的背景拉开足够的差距，能读得清。
Pale grey on white is a real temptation and an unreadable page — if the two are too close together, some of your visitors simply cannot make out the words.
白底上的浅灰字很诱人，但那是一个读不了的页面—— 如果两者靠得太近，你的一部分访客根本看不清那些字。
Now the two tasks: give the page a soft background, then colour the heading with a hex code.
现在做那两道题： 给页面加一个柔和的背景色， 再用一个十六进制码给标题上色。
Four things to take with you.
带走四点。
One: a colour can be a name, a hex code, or an r g b value.
第一：颜色可以写成名字、十六进制码，或者 rgb 值。
Two: a hex code is three pairs — red, green, blue.
第二：十六进制码是三组——红、绿、蓝。
Three: colour is the text, and background colour is behind it.
第三：color 是文字，background-color 是它后面的部分。
Four: put a background on body to colour the whole page.
第四：把背景色写在 body 上，就能给整个页面上色。
Now do both tasks.
现在把两道题都做一下。