Styling text
Web Basics — HTML & CSS Lesson 15 2:16 English narration · English + 中文 subtitles burned in
Chapters
Transcript
Back in lesson two the browser chose your heading sizes for you.
在第 2 课里，标题的大小是浏览器替你定的。
Now you can choose them yourself, with font-size, measured in pixels.
现在你可以自己定了，用 font-size，单位是像素。
Forty pixels for a heading is a reasonable size; sixteen or eighteen suits body text.
标题用 40 像素是个合适的大小；正文用 16 或 18 比较舒服。
One thing to know: the moment you set a size on an element, the browser's own choice for it stops applying, so set the ones you care about rather than half of them.
有一点要知道： 一旦你给某个元素设了字号，浏览器原本给它的那个选择就不再生效， 所以要把你在意的那些都设好，而不是只设一半。
Three more worth knowing.
还有三个值得掌握。
Font-weight bold thickens the letters — the same look as the strong tag, but chosen by you rather than by meaning.
font-weight 设为 bold 会让字变粗—— 外观和 strong 标签一样，但这次是你选的，而不是由含义决定的。
Font-family picks a different typeface for that element.
font-family 为这个元素挑一种不同的字体。
And line-height adds space between the lines of a paragraph.
而 line-height 增加段落里行与行之间的间距。
That last one is the quiet one that matters most: crowded lines are tiring to read, and one point six is a good place to start.
最后这个是最不起眼、却最要紧的： 行挤在一起读起来很累，而 1.6 是个不错的起点。
Text-align moves the words inside their box: left, which is the default, centre, or right.
text-align 让文字在它所在的盒子里移动： left 是默认值，还有 center 和 right。
And look carefully at what happened here — the box did not move or change size at all.
仔细看这里发生了什么——盒子完全没有移动，大小也没变。
It is still the full width of the page.
它依然是整个页面那么宽。
Only the words moved inside it.
移动的只是它里面的文字。
That is why centring a title looks right and centring a long paragraph looks strange: the lines no longer share a left edge for your eye to return to.
这就是为什么标题居中好看，而一长段正文居中就别扭： 各行不再共用一条左边缘，你的眼睛没法回到同一个位置。
One thing you have not seen yet: a single rule can carry as many declarations as you like.
还有一件你没见过的事： 一条规则里想写多少条声明都可以。
Font-size and text-align on the heading, font-family and line-height on the paragraph — four settings, two rules, each declaration ending in a semicolon.
标题上写 font-size 和 text-align， 段落上写 font-family 和 line-height—— 四个设置，两条规则，每条声明都以分号结尾。
Now the two tasks: make the heading forty pixels, then centre the paragraph.
现在做那两道题：把标题设成 40 像素，然后让段落居中。
Four things to take with you.
带走四点。
One: font-size sets how big the letters are, in pixels.
第一：font-size 决定字有多大，单位是像素。
Two: font-family picks the typeface, and font-weight the thickness.
第二：font-family 选字体，font-weight 选粗细。
Three: text-align moves the words inside their box, not the box itself.
第三：text-align 移动的是盒子里的文字，不是盒子本身。
Four: line-height spaces the lines, and one point six reads well.
第四：line-height 调整行距，1.6 读起来很舒服。
Now do both tasks.
现在把两道题都做一下。