暂无图片
暂无图片
暂无图片
暂无图片
暂无图片
首页 / CSS系列之文本属性

CSS系列之文本属性

风雪留客 2020-12-21
291

CSS文本属性:

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

文字颜色:

color 属性用于定义文本的颜色,可使用颜色名称,十六进制值,RGB代码来定义颜色,示例:

<style>
body {
  color:red;
  }
h1 {
  color:#00ff00;
  }
p {
  color:rgb(0,0,255);
  }
</style>

对其文本:

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

<style>
h1 {
  /* 居中对齐  */
  text-align:center
}
h2 {
  /* 左对齐  */
  text-align:left
}
h3 {
  /* 右对齐  */
  text-align:right
}
</style>

总结:

值描述
left左对齐。默认值：由浏览器决定。
right右对齐。
center居中。
justify实现两端对齐文本效果。

装饰文本:

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

<style>
h1 {
   /* 上划线。*/
  text-decoration:overline
}
h2 {
   /* 删除线。*/
  text-decoration:line-through
}
h3 {
   /* 下划线,链接a自带下划线。*/
  text-decoration:underline
}
h4 {
  /* 右对齐  */
  text-decoration:blink
}
h4 {
  /* 默认。定义标准的文本。*/
  text-decoration:none
}
</style>

总结:

值描述
none默认。定义标准的文本。没有装饰线。
underline下划线,链接a自带下划线。
overline上划线。
line-through删除线。

文本缩进:

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

<style>
p {
    /* 通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，该长度可以是负值。*/
    text-indent:50px;
  }
</style>

总结:

值描述
length定义固定的缩进。默认值：0。
%定义基于父元素宽度的百分比的缩进。
inherit规定应该从父元素继承 text-indent 属性的值。

除了px单位外,你还可以写成em:

<style>
p {
  /*em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。*/
  text-indent: 2em;
}
</style>

行间距:

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

<style>
p.small {
  line-height:24px
}
p.big {
  line-height:200%
}
</style>

总结:

值描述
normal默认。设置合理的行间距。
number设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length设置固定的行间距。
%基于当前字体尺寸的百分比行间距。

属性总结与扩展:

属性描述
color设置文本的颜色。
direction规定文本的方向 / 书写方向。
letter-spacing设置字符间距。
line-height设置行高。
text-align规定文本的水平对齐方式。
text-decoration规定添加到文本的装饰效果。
text-indent规定文本块首行的缩进。
text-shadow规定添加到文本的阴影效果。
text-transform控制文本的大小写。
unicode-bidi设置文本方向。
white-space规定如何处理元素中的空白。
word-spacing设置单词间距。
hanging-punctuation规定标点字符是否位于线框之外。
punctuation-trim规定是否对标点字符进行修剪。
text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行。
text-emphasis向元素的文本应用重点标记以及重点标记的前景色。
text-justify规定当 text-align 设置为 "justify" 时所使用的对齐方法。
text-outline规定文本的轮廓。
text-overflow规定当文本溢出包含元素时发生的事情。
text-shadow向文本添加阴影。
text-wrap规定文本的换行规则。
word-break规定非中日韩文本的换行规则。
word-wrap允许对长的不可分割的单词进行分割并换行到下一行。


数据库
文章转载自风雪留客，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

评论