CSS学习总结（3）——CSS文本样式（属性）

font-family属性

font-family属性指定元素的字体。
有两种字体系列名称：
字体系列：特定的字体系列（如Times New Roman或Arial）
通用族：一组具有相似外观的字体族（如Serif或Monospace）
HTML

<p class="serif">Serif字体。
</p>

CSS

p.serif {font-family: "Times New Roman", Times, serif;
}

font-family属性应包含几个字体名称作为备选。在CSS样式中指定Web字体时，如果计算机出于某种原因没有选择的字体时，则会尝试下一个字体。如果字体名称包含多个单词，请记住使用引号。

body {font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

font-size属性

font-size属性用于设置字体的大小。设置网页字体大小的其中之一方法是使用关键字。例如xx-small, small, medium, large, larger等。
HTML

<p class="small">小号字体
</p>

CSS

p.small {font-size: small;
}

还可以使用像素(px)或相对尺寸单位(em)数值来操纵字体大小。当需要像素精度时，以像素值(px)设置字体大小。em尺寸单位是设置字体大小的另一种方式（em是相对尺寸单位）。它允许所有主流浏览器调整文本的大小。如果在页面上的任何位置设置字体大小，那么这是浏览器的默认大小，即16px。计算em大小，em = px / 16，即 1em = 16px。

p{font-size: 30px;
}

p{font-size: 1.65em;
}

font-style属性

font-style属性有三个值：normal，italic和oblique。normal无效果
font-style属性通常用于指定斜体文本italic、oblique。

p{color:red;font-style:  italic;
}

font-weight属性

font-weight控制文本的粗细。值可以设置为normal (默认)，bold，bolder，和lighter。
根据文本的厚度，也可以使用从100（细）到900（粗）的数字来定义字体粗细。400与normal相同，700与bold相同。

p.light {font-weight: lighter;
}
p.thick {font-weight: bold;
}
p.thicker {font-weight: 500;
}

font-variant属性

font-variant属性small-caps可以将字体转换为所有小型大写字母。值可以设置为normal，small-caps，和 inherit。

p.small {font-variant: small-caps;
}

color属性

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

p.xie{color:red;
}

定义color的其他方法是使用十六进制值和RGB。十六进制形式是一个井号(#)，最多6个十六进制值(0-F)。RGB定义了红色，绿色和蓝色的各个值。

text-align属性(水平对齐）

text-align属性指定元素中文本的水平对齐方式。默认情况下，您网站上的文字左对齐。但是，有时您可能需要不同的对齐方式。文本对齐属性值如下：left，right，center和justify。

p.right {text-align: right;
}

vertical-align属性（垂直对齐）

vertical-align属性设置元素的垂直对齐。常用的值是top，middle和bottom。

td.bottom {vertical-align: bottom;
}

vertical-align属性还包含以下值：baseline，sub，super，%和px(或pt，cm)。可以使用pt(点)，cm(厘米)和%(百分比)值来代替px值。

span.super {vertical-align: super;
}

vertical-align属性对所有元素的行为都不一样。 display: inline-table; 和 display: table-cell;使用样式来使垂直对齐属性能在div中起效果。

text-decoration属性

text-decoration属性用于指定文本将如何装饰。
常用的值有：
none - 默认值，这定义了一个正常的文本
inherit - 从其父元素继承此属性
overline - 在文本上方绘制水平线
underline - 在文本下方绘制水平线
line-through - 在文本中绘制水平线（替换HTML<s>标记）
可以将underline，overline或line-through组合起来，以添加多条装饰线。

p.line-through {text-decoration: line-through;
}

text-indent属性(缩进）

text-indent属性指定在文本的第一行开始之前应该留下多少水平空间。属性值是长度(px，pt，cm，em等)，%和inherit。如果值为负值，则第一行将向左缩进。

/***文本向右缩进60px***/
p {text-indent: 60px;
}

text-shadow属性

text-shadow为文本添加阴影。它有四个值：

第一个值：定义阴影在x（水平）方向的距离
第二个值：定义y（垂直）方向的距离
第三个值：定义阴影的模糊
第四个值：设置颜色
处理阴影时，可以使用任何CSS支持的颜色格式。对于x和y偏移，可以使用各种类型的单位（如px，cm，mm，in，pc，pt等）负值也被支持。

p.cu{font-weight: 800;text-shadow: 5px 2px 4px red;
}

text-transform属性

text-transform可以实现文本的首字母大写效果。

p.capitalize {text-transform: capitalize;
}

使用text-transform，您可以使文本显示为全部大写uppercase或全部小写lowercase。

letter-spacing属性

letter-spacing属性用于设置文本中字符之间的间距。
值可以设置为：

normal 定义了默认样式，字符之间没有额外的空间;
length长度计量单位，用px，pt，cm，mm等测量单位定义字符之间的额外空间;
inherit 继承其父元素的属性;

 p.normal { letter-spacing: normal;
}
p.space { letter-spacing: 4px;
}

letter-spacing使用负值可以减少字符之间的间距。

word-spacing属性

word-spacing 属性指定文本中单词之间的空格。就像letter-spacing属性一样，可以将word-spacing 的值设置为normal，length和inherit。

 p.space { word-spacing: 30px;
}

white-space属性

white-space可以设置元素内的换行符。参数可以是normal，inherit，nowrap等。nowrap会屏蔽该元素中的所有换行符, 文本将继续在同一行，直到遇到一个<br />标记。
white-space也支持其他值：
pre ：文本支持所有的换行和空格
pre-line ：文本支持换行，忽略额外的空格
pre-wrap ：文本将在必要的时候或者行的结尾进行换行。