WEBVTT
Kind: captions
Language: zh-CN

00:00:01.280 --> 00:00:06.209
排版样式给文字提供了特殊效果

00:00:06.209 --> 00:00:09.314
回想一下所有你浏览过的 web 页面

00:00:09.314 --> 00:00:11.144
所有你见过的文字

00:00:11.144 --> 00:00:14.419
它们都被不同的方式设计和装饰过

00:00:14.419 --> 00:00:18.600
所有的一切都可以叫做排版样式

00:00:18.600 --> 00:00:24.045
CSS 通过不同的属性提供了很多方式来装饰你的文本

00:00:24.045 --> 00:00:28.130
让我们先来看一些实际例子 然后我们再具体深入的了解一下

00:00:28.129 --> 00:00:32.240
最后你会掌握所有排版样式相关的工具 让文字“活”过来

00:00:32.240 --> 00:00:34.835
这就是使用 CSS 的最终目的

00:00:34.835 --> 00:00:38.105
所以我们要了解的内容有

00:00:38.104 --> 00:00:43.969
text-align、font-size、color 和 line-height

00:00:43.969 --> 00:00:47.989
它们只是你的创意工具箱众多例子中的一部分

00:00:47.990 --> 00:00:53.750
可以实现自定义精美的文字内容 让我们来看一看吧

00:00:53.750 --> 00:00:59.200
这里你可以看到有一个简单的文件 仅有一个 div 元素

00:00:59.200 --> 00:01:03.790
它有个 typography 的 id 属性和一些文字内容

00:01:03.789 --> 00:01:05.655
不过如果我们在浏览器里面看看的话

00:01:05.655 --> 00:01:08.790
你可以看见文字有一点点小 不太容易阅读

00:01:08.790 --> 00:01:12.395
为了让它变得更出众 我们有很多可以改进的地方

00:01:12.394 --> 00:01:16.375
让我们来做一些有趣的事情

00:01:16.375 --> 00:01:23.355
首先 我们可以把文本内容居中显示

00:01:23.355 --> 00:01:28.045
然后给它一个更明显的颜色

00:01:28.045 --> 00:01:30.665
比如 黄色

00:01:30.665 --> 00:01:34.969
现在我们可以看到一堆居中的黄色文本

00:01:34.969 --> 00:01:38.870
对于我来说 我对排版样式要求通常比较高

00:01:38.870 --> 00:01:42.650
所以我认为有一些理想的宽度会更好一些

00:01:42.650 --> 00:01:44.990
这一行太长了

00:01:44.989 --> 00:01:46.609
用户没办法一次性阅读太长的文字

00:01:46.609 --> 00:01:54.379
所以我们设置一个百分之 64 的宽度

00:01:54.379 --> 00:01:57.339
现在它的可读性应该好多了

00:01:57.340 --> 00:01:59.890
再设置外边距为 auto 来让它居中显示

00:01:59.890 --> 00:02:02.310
现在我们已经居中了文字

00:02:02.310 --> 00:02:04.835
增加了一些宽度和颜色

00:02:04.834 --> 00:02:07.439
但是文字尺寸有一点小

00:02:07.439 --> 00:02:12.335
我们可以使用 font-size 属性来设置它

00:02:12.335 --> 00:02:20.110
我们可以设置为 24 像素 另外一种可以使用的单位是 em 我们会在以后了解到它

00:02:20.110 --> 00:02:28.260
1.1 em 这里会相对于 body 的字体尺寸计算 也就是相对于 18pt

00:02:28.259 --> 00:02:31.560
所以 1.1 会稍微大一点点

00:02:31.560 --> 00:02:36.515
我们设置为 1.4 来让它更大一些

00:02:36.514 --> 00:02:39.619
现在 每行之间的距离还是有一些紧密

00:02:39.620 --> 00:02:44.120
CSS 中的 line-height (行高) 属性可以帮助我们

00:02:44.120 --> 00:02:49.670
改变行与行之间的距离

00:02:49.669 --> 00:02:53.179
我们先设置夸张点 这样你好看清楚区别

00:02:53.180 --> 00:02:55.730
比如设置为 3.3 em

00:02:55.729 --> 00:02:59.349
你可以看到它们之间就有很大的行距

00:02:59.349 --> 00:03:04.064
你可以灵活搭配使用

00:03:04.064 --> 00:03:07.039
Font-size、line-height、margin、width、color、text-align 用好这些属性

00:03:07.039 --> 00:03:11.129
来创造出你想要的 CSS 排版样式