用户登录

font-family

用 font-family 这个样式属性可以设置文字使用的字体。在网页文档链接的样式表里,用 body 标签的名字作为样式选择器,一组大括号,里面用 font-family 指定一个字体组合,vscode 会帮我们列出一些常用的字体组合,比如这个 Times New Roman,Times,serif。

意思就是如果系统里有 Times New Roman 就用这种字体,没有就找一个 Times 类型的字体,如果还没有就选择 serif 这种类型的字体。现在页面上显示的中文,应该是一种宋体字。serif 类型的字体是有衬线字体。

再换一种字体组合,Arial, Helvetica, sans-serif, 现在页面上中文像是一种黑体字,因为 sans-serif 是无衬线字体。

color

设置文字的颜色可以使用 color 这个样式属性,它的值是一种颜色,比如 blue。页面上的文字会变成蓝色,说明 body 的子元素继承了来自 body 元素的 color 这个样式。

font-weight

用 font-weight 可以设置文字的粗细程度,它的值可以是用整百表示的数字值,比如 100,300,600,900,注意并不是所有数字值都会起作用,主要是看文字使用的字体是否支持。

这里我们也可以是表示粗细程度的关键词,比如 bold 表示加粗,你会发现页面的段落文本会加粗显示,标题文字没有变化,是因为浏览器默认给标题文字的样式已经是加粗的了。

再把 font-weight 设置成 lighter,表示细体。段落文字现在会用细体字,但是标题文字没有变化。这是因为,在这个标题元素上面也用了 font-weight 样式属性,这个样式会覆盖掉来自它父辈的 font-weight 样式。

line-height

line-height 这个样式属性可以设置元素的行高,就是每行文字占用的高度。添加一个 line-height 样式属性,它的值可以是一个具体的值,也可以是一个倍数。先把它设置成 18px,这个 px 表示像素,是一种长度单位。

现在页面上的文字的行高会是 18 像素。下面我们再试一下行高倍数,把 line-height 设置成 1 ,意思是使用 1 倍的行高,这样这个行高具体的值取决于文字的大小,如果文字是 16 像素,那它的行高就会是 16 像素,如果是 32 像素,行高就是 32 像素。

可以检查一下页面上的标题文字,然后打开计算样式,观察一下元素的 line-height ,显示它的行高是 32 像素,因为这个标题文字的大小是 32 像素。再检查一下这个段落元素,显示行高是 16 像素,因为段落文字的大小是 16 像素。

我们再把这个 line-height 样式属性的值设置成 2,表示 2 倍行高。检查一下段落文字,在计算样式这里显示它的行高的具体的值是 32 像素,因为现在用的是 2 倍的行高,文字的大小如果是 16 像素,它的行高就会是 32 像素。

font-size

要设置文字的大小,用的是 font-size 这个样式属性,把它的值设置成 18 像素。页面上的段落文字比之前大了一些,现在它的大小会是 18 像素。

同时我们再观察一下它的行高,会变成 36 像素,因为我们在样式表设置使用 2 倍的行高,当文字是 18 像素的时候,它的行高就会是 18 × 2 ,也就是 36 像素。

text-align

设置文字的对齐方式可以使用 text-align 这个样式属性,它的值可以是 center,居中对齐,可以是 right ,表示右对齐,也可以是 left ,左对齐。

CSS 文字样式(font-family, color, font-weight, line-height, font-size)《 Web 基础:样式基础 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点