CSS文本属性-文本颜色、文本对齐、文本装饰、文本缩进、行间距

Love The Way You Lie 2022-12-16 14:28 218阅读 0赞

CSS文本属性

CSS Text（文本）属性可以定义文本的外观，比如颜色，对齐方式，装饰文本，文本缩进等。

文本颜色

color属性用于定义文本的颜色。






















颜色表示 属性值
预定义的颜色值 red，green，blue，pink等等
十六进制 #FF0000,#FF6600,#19D794
RGB代码 rgb（255，0,0）或者rgb（100%，0%，0%）

在写demo测试时经常使用预定义的颜色值，但是开发时经常使用十六进制的表示方法。

文本对齐

text-align属性用于设置元素内文本内容的水平对齐方式。

  1. div{
  2.     text-align:center;
  3. }

left：左对齐；center：居中对齐；right：右对齐。

文本装饰

text-decoration属性规定添加到文本的装饰，可以给文本添加下划线、删除线、上划线。

  1. div {
  2.     text-dectoation: underline;
  3. }

text-decoration的属性值默认为none，没有装饰线；underline，下划线（链接自带下划线）；overline ，上划线；line-through，删除线。

可以使用

  1. a {
  2.     text-dectoation: none;
  3. }

取消链接的下划线。

文本缩进

text-indent属性用来指定文本的第一行的缩进。

  1. p {
  2.     text-indent: 40px;
  3. }

在这里插入图片描述

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度。

em是一个相对单位，就是当前元素1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

  1. p{
  2.     text-indent: 2em;
  3. }

在这里插入图片描述

行间距

line-height属性用于设置行间的距离，可以控制文字行与行之间的距离。

  1. p {
  2.     line-height: 50px;
  3. }

ne-height属性用于设置行间的距离，可以控制文字行与行之间的距离。

  1. p {
  2.     line-height: 50px;
  3. }

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，218人围观）

还没有评论，来说两句吧...

相关阅读

    相关 css 文本两端对齐

    在做表单时我们经常遇到让上下两个字段对齐的情况，比如姓名， 手机号码， 出生地。这样我们就要用到 text-align， text-justify样式了。 text-alig

    你的名字你的名字/ 0 赞/ 727 阅读