CSS文本样式详解，详解个66.6%吧

CSS文本样式：
一。font-family属性指定元素的字体。
有两种字体系列名称：
字体系列：Times New Roman或Arial
通用族：一组具有相似外观的字体族(如Serif或Monospace)

font-familys属性应该包含几个字体名称作为备选。
在CSS样式中指定Web字体时，请添加多个字体名称，以避免意外的行为。如果客户端计算机出于某种原因没有您选择的字体时，则会尝试下一个字体。

指定通用字体系列是一个很好的做法，如果没有其他字体可用，让浏览器在通用系列中选择相似的字体。
CSS代码如下：
body{
font-family:Arial,“Helvetica Neue”,Helvetica,sans-serif;
}

如果浏览器不支持Arial字体，则会尝试下一个字体（Helvetica Neue，Helvetica）。 如果浏览器没有任何一个，它会尝试通用的sans-serif。

再次提醒，如果字体名称包含多个单词，请记住使用引号。

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

<p class="small">
   Paragraph text set to be small
</p>
<p class="medium">
   Paragraph text set to be medium
</p>
<p class="large">
   Paragraph text set to be large
</p>
<p class="xlarge">
   Paragraph text set to be very large
</p>

CSS代码：

p.small {
   font-size: small;
}
p.medium {
   font-size: medium;
}
p.large {
   font-size: large;
}
p.xlarge {
   font-size: x-large;
}

我们还可以 使用像素（PX）或相对尺寸单位(em)数值来操纵字体大小。
要计算em大小，只需使用以下公式：em=px/16,
即1em=16px;

三。font-style通常用于指定斜体文本。
font-style属性有三个值：normal(正常)，itailc（倾斜）和oblique[əˈbliːk]（与itailc相同效果).
font-weight:控制文本的粗细。值可以设置为normal（默认），bold（黑体，粗体），bolder（粗体），lighter（浅色的）
根据文本的厚度，也可以使用从100（细）到900（粗）的数字来定义字体粗细。
400与normal相同，700与bold相同。

四。font-variant
font-variant属性允许您将字体转换为所有小型大写字母。
值可以设置为normal（默认），small-caps（首字母加大，其余为小型大写字母）和inherit(继承)。

html+css代码示例：

<p class="normal">pasdasdasdasdasasdas.</p>
<p class="small">asdasdasdasdasdasd.</p>

CSS代码：

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

color属性用于指定文本的颜色。
指定文本颜色的其中一种方法是使用颜色名称：如red，green，blue等。
定义color的其他方法是使用十六进制值和RGB。
十六进制是一个井号（#），最多6个十六进制（0-F）；
RGB定义红绿蓝三基色。
RGB应用实例：
HTML:

<h1>w3cschool</h1>
<p class="example">w3cschool</p>
CSS：
h1{
color:#0000FF;
}
p.example{
color:rgb(255,0,0);
}

四。text-align
text-align属性指定元素中文本的水平对齐方式。
默认情况下， 您网站上的文字左对齐。
但是，有时文本对齐属性如下：left,right,center和justify（使每行排齐）。

五。垂直对齐文本
vertical-align属性
vertical-align属性设置元素的垂直对齐。
vertical(垂直)。
常用的值是top,moddle和bottom.
下面的示例显示了如何垂直对齐表格之间得文本。

<table border="1" cellpadding="2" cellspacing="0" style="height:150px;">
<tr>
<td class="top">top</td>
<td class="middle">middle</td>
<td class="bottom">bottom</td>
</tr>
</table>

CSS代码：

td.top{
vertical-align:top;
}
td.middle{
vertical-align:middle;
}
td.bottom{
vertical-align:bottom;
}

vertical-align属性还包含以下值：baseline,sub（下标）,super(上标)，%和px（或pt,cm)->(当数值为正值时，起上标效果，当数值为负值时，起下标效果).

vertical-align属性
vertical-align属性对所有元素的行为都不一样。

例如，div元素需要一些额外的CSS样式。

HTML代码：

<div class="main">
   <div class="paragraph">
   w3cschool
   </div>
</div>

CSS代码：

.main {
    height: 150px; width: 400px;
    background-color: LightSkyBlue;
    display: inline-table;
}
.paragraph {
    display: table-cell;
    vertical-align: middle;
}

执行结果：

display: inline-table; 和 display: table-cell;使用样式来使垂直对齐属性能在div中起效果。

六。text-docoration属性
text-docoration属性用于指定文本将如何装饰。
常用的值有：
none：默认值，这定义了一个正常的文本。
inherit:从其父元素继承此属性。
overline：在文本上方绘制水平线。
underline：在文本下方绘制水平线。
line-through：在文本中绘制水平线(替换HTML标记)

下面的例子演示了每个值之间的差异。

HTML代码：

<p class="none">w3cschool</p>
<p class="inherit">w3cschool</p>
<p class="overline">w3cschool</p>
<p class="underline">w3cschool</p>
<p class="line-through">w3cschool</p>

CSS代码：

p.none {
   text-decoration: none;
}
p.inherit {
   text-decoration: inherit;
}
p.overline {
   text-decoration: overline;
}
p.underline {
   text-decoration: underline;
}
p.line-through {
   text-decoration: line-through;
}

执行结果：

您可以将underline，overline或line-through组合起来，以添加多条装饰线。

text-decoration: blink这个值是有效的,可以使文本闪烁，但是被弃用，大多数浏览器忽略它。

七。text-indent属性。
text-indent属性指定在文本第一行开始之前一个留下多少水平空间。
属性值是长度(px,pt,cm,em等),%和inherit。

八。text-shadow属性
text-shadow为文本添加阴影。
它有四个值：
第一个值：定义阴影X（水平）方向的距离。
第二个值：定义阴影y（垂直）方向的距离。
第三个值：定义阴影的模糊
第四个值：设置颜色

九。text-transform属性
text-transform可以实现文本的首字母大写效果。
HTML代码：

<p class="capitalize">
The value capitalize transforms the first 
    character in each word to uppercase; 
    all other characters remain unaffected.</p>

CSS代码：

p.capitalize{
text-transform；capitalize;
}

capitalize[ˈkæpɪtəlaɪz]:首字母大写

使用text-transform，您可以使文本显示为全部大写或全部小写。
HTML代码：

<p class="uppercase">This value transforms all characters to uppercase.</p>
<p class="lowercase">This value transforms all characters to lowercase.</p>

CSS代码：

p.uppercase {
   text-transform: uppercase;  /*全部大写*/
}
p.lowercase {
   text-transform: lowercase;  /*全部小写*/
}

none值不会产生任何效果。
text-transform：none；

十。letter-spacing属性
letter-spacing属性用于设置文本中字符之间得间距。
值可以设置为：
normal：定义了默认样式，字符之间没有额外的空间。
length：长度计量单位，用px,pt,cm,mm等测量单位定义字符之间的额外空间。
inherit：继承其父元素的属性。

html代码：

<p class="normal">w3cschool</p>
<p class="positive">w3cschol</p>

css代码：

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

letter-sapcing使用负值，可以减少字符之间得间距。
HTML代码：

<p class="positive">w3cschool</p>
<p class="negative">w3cschool</p>

CSS代码：

p.positive { 
   letter-spacing: 4px; 
}
p.negative { 
   letter-spacing: -1.5px; 
} 

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

word-spaing：30px;
/扩大间距/
word-spacing：-20px;
/缩小间距/

十一。white-space
white-space可以设置元素内的换行符。
参数可以是normal（默认），inherit（继承）,nowrap（屏蔽换行符）等。
nowrap会屏蔽该元素中所有的换行符。

white-space也支持其他值：
pre:文本支持所有的换行和空格
pre-line：文本支持换行，忽略额外的空格
pre-wrap：文本将在必要的时候或者行的结尾进行换行。