Colours and backgrounds · 颜色与背景
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · 此页面需较新浏览器（支持 SharedArrayBuffer）。请升级 Chrome、Edge、Firefox 或 Safari 至最新版本。
English
Colours
- You can name a colour:
red,blue,green,tomato,gold, and many more. - Or use a hex code like
#2a7ae2— a#followed by six letters/numbers. - Names are easy to remember; hex codes give you millions of exact colours.
中文
颜色
- 你可以用名字写颜色:
red、blue、green、tomato、gold等等。 - 也可以用十六进制代码,比如
#2a7ae2—— 一个#加上六个字母/数字。 - 名字好记;十六进制代码能给你数百万种精确的颜色。
English
Backgrounds
colorchanges the text colour.background-colorchanges the colour behind an element.- Put
background-coloronbodyto colour the whole page.
中文
背景
color改变文字的颜色。background-color改变元素背后的颜色。- 把
background-color写在body上,就能给整个页面上色。
<style>
body { background-color: #f3f4f6; }
h1 { color: tomato; }
</style>
<h1>Hello!</h1>
<p>A page with a soft grey background.</p>
English
Common mistakes
colorsets the text;background-colorsets the background.- A colour is a name, a
#rrggbbcode, orrgb(...).
中文
常见错误
color设文字;background-color设背景。- 颜色可以是名字、
#rrggbb码或rgb(...)。
English
Now you try
coloris the text;background-coloris behind it.- Colour the page background, then use a hex colour on the heading.
中文
现在你来试试
color是文字,background-color是它背后的颜色。- 先给页面背景上色,再用十六进制颜色给标题上色。
Give the whole page a soft background. Add body { background-color: lightyellow; }. · 给整个页面一个柔和的背景。加上 body { background-color: lightyellow; }。
Colour the heading with a hex code. Add h1 { color: #2a7ae2; } (that's a blue). · 用十六进制代码给标题上色。加上 h1 { color: #2a7ae2; }(这是一种蓝色)。