多语言展示
当前在线:176今日阅读:61今日分享:18

CSS文字中的属性的实例演示教程

用CSS可以控制文字的斜体、粗体设置字体大小以及制作带有下划线的文字。这里同行文字属性来完成对文字的基本设置,具有word排版的功能和实现word排版的效果。
工具/原料
1

CSS基础知识

2

HTML基础知识

方法/步骤
1

将网页中要显示的文字设置成斜体字,这里可以用到属性font-style:italic这个属性,具体代码这里为了演示使用CSS内嵌样式表来说明问题。 文字属性

这里我来演示文字属性

从下图可以看到浏览器中显示的文字倾斜了。

2

这里我再来说明如何使用CSS将文字设置成粗体,可以使用font-weight:bold;来实现。 文字属性

这里我来演示文字属性

我们可以看到执行结果,网页中的文字已经加粗了。

3

在CSS中,我们可以用font-size来设置文字的大小,在网页中一般用像素来表示。具体实例如下: 文字属性

这里我来演示文字属性

我这里用72像素来使得文字在浏览器中显示的比较大。

4

在CSS中给我提供了一个将小写字母转换成大写字母并且转化后的字母大小和以前小写字母的大小一样,使用的是font-variant:small-caps;这个属性。 文字属性

HtmLhTMl

可以看到我们如下图的执行效果,是不是很有意思的一个属性呢。

5

在CSS中如何设置文字的字体呢?我们知道在word中可以选择自己喜欢的字体来排版,在网页中是网络传输的如果电脑上没有相关字体则显示的效果就和实际的效果不相符。 文字属性

文字字体测试

这里我们电脑中有黑体,所以下图执行结果就显示的是黑体,如果没有黑体则会寻找后面的属性来显示。

6

我们该怎么设置文字的下划线呢?在这里我用text-decoration:underline;来实现这个功能,具体代码如下: 文字属性

文字字体测试下划线

通过如下图执行效果可以看到完美完成任务了。

注意事项
1

牢记CSS的属性能提高开发的效率

2

多写多练能加深编码效率

推荐信息