CSS系列之文本属性

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	允许对长的不可分割的单词进行分割并换行到下一行。