CSS外观属性

一、文本颜色：color

• 说明

  定义文本的颜色，取值方式有3种：

  1. 预定义颜色值，如red，green，blue等。
  2. 十六进制，以#开头 0~9 A B C D E F，16进制颜色代码指定颜色的组成方式：前两位表示红色，中间两位表示绿色，最后两位表示蓝色，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
  3. RGB代码，如红色：rgb(255,0,0)或rgb(100%,0%,0%)。

• 语法

  {color:颜色值;}
  

• 注意

  如果使用RGB时，取值为0，不能省略百分号，必须写成0%。

二、文本装饰

• 说明

  text-decoration，通常用于给文本添加装饰效果。

• 语法

  text-decoration:none/underline/overline/line-through
  

  none:没有修饰

  underline:添加下划线

  overline:添加上划线

  line-through:添加删除线

三、文本段落

关于文本段落的相关属性，这里我们主要讲解行间距、水平对齐方式以及首行缩进。

line-height：行间距

• 说明

  即行高，用于设置文本行高，行与行之间的距离，即字符的垂直间距，一般称为行高。

  常用单位有三种：像素px（常用），相对值em和百分比%。

• 语法

  {line-height:normal/数值;}
  

• 注意

  当行高等于容器高时，可实现文本在容器中垂直方向居中对齐；

  当行高小于容器高时，可实现文本在容器中垂直中齐以上任意位置的定位；

  当行高大于容器高时，可实现单行文本在容器中垂直中齐以下任意位置的定位。（IE6及以下版本存在浏览器兼容问题）

text-align：水平对齐方式

水平对齐方式

{text-align:left/right/center;}

垂直对齐方式

{vertical-align:top/bottom/middle;}

text-indent：首行缩进

• 说明

  用于设置首行文本的缩进。

• 语法

  {text-indent:value;}
  

• 注意

  text-indent可以取负值； text-indent属性只对第一行起作用

四、字间距和词间距

letter-spacing：字间距

• 说明

  用于字符与字符之间的空白。属性值可为不同单位的数值，允许使用负值，默认为normal。

• 语法

  {letter-spacing:value;}
  

word-spacing：词间距

• 说明

  用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。

• 语法

  {word-spacing:value;}
  

• 注意

  word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。