Web网页设计之css_5. 用css设置文本样式

本篇博客我们主要来说一下用css设置文本样式,内容比较多,大家好好练习一下

一、设置文本的大小、颜色、字体

设置文本大小我们可以使用 font-size,设置颜色我们可以使用 color,字体我们可以使用 font-family

可以看到,两个文本内容虽然一样,但是,字体、大小、颜色都不相同

二、倾斜、加粗

倾斜我们是使用的 font-style,加粗是使用的 font-weight

当然啊,这个 font-style 还有 font-weight 不止有这两个,还有很多种样子,大家都可以尝试一下

三、大小写字母来回转换

大小写字母来回转换我们可以不需要 Java 代码进行转换,直接使用样式也是可以做到的,使用的是 text-transform

这里给大家提供一段素材

abCdEfGHIJKlmnoPqRSTUvwxyZ

四、下划线、删除线等

这个下划线、删除线是使用 text-decoration 去进行设置

五、文字首行缩进

文字首行缩进我们也同样使用样式就可以实现,使用的是 text-indent,至于缩进多少,我们大部分文字是使用的是2个字

六、文字间距、文字行高

文字之间的间距是使用的 letter-spacing,而文字之间的行高是使用的是 line-height 去进行设置

当然啊,这个文字和文字之间的举例不要太大了,毕竟读起来费劲。

还有文字段落之间的行高也不要太大,这里我们是使用的 2,我们平时用 1.2 或者 1.3就好了

七、文本水平位置

文字水平位置我们可以使用 text-algin 去进行设置

这篇博客就到这里,大家好好练习一下,有不会的可以加我QQ:2100363119

最近我的官网已经开放,大家可以关注一下:https://www.lemon1234.com

猜你喜欢

转载自blog.csdn.net/weixin_45908370/article/details/108905491
今日推荐