CSS Text文本

• 文本颜色

    color属性用来设置文字的颜色。颜色值有三种表示方法：十六进制值，RGB值，名称。 

 <style>
     .p1{color: #ff0000;}
     .p2{color: rgb(0,255,0);}
     .p3{color: blue;}
 </style>

    

•  文本方向

     direction属性用来设置文本方向。可以为rtl(从右到左)，ltr(从左到右)以及inherit(继承父元素)。

.pl{direction: ltr;}
.pr{direction: rtl;}
div{direction: rtl;}
div p{direction: inherit;}
/以下为html部分///
<p class="pl">文本方向从左到右</p>
<p class="pr">文本方向从右到左</p>
<div>
    <p>文本方向继承父元素</p>
</div>

•  文本字符间距

     letter-spacing属性用来设置字符间距。可取normal(默认)字符间没有间隔，指定一个长度允许负值，inherit(继承父元素)。

 .nrm{letter-spacing: normal;}
 .len{letter-spacing: 10px;}
 .len2{letter-spacing: -10px;}
 div{letter-spacing: 20px;}
 div p{letter-spacing: inherit;}
//以下为HTML部分///
 <p class="nrm">默认没有间隔</p>
 <p class="len">指定长度</p>
 <p class="len2">负值</p>
 <div>
     <p>继承父元素</p>
 </div>

•  文本行高

     line-height属性用来设置行高。可取normal(默认)自动设置合理行距大多数浏览器为20px；数字值，会根据字体尺寸设置行间距且默认行间距为1;设置具体值为固定行间距；使用%根据字体设置；inherit(继承父元素)。

.nrm{line-height: normal;}
.num1{line-height: 2;}
.num2{line-height: 0.5;}
.num3{line-height: 2;font-size: 20px;}
.len{line-height: 25px;}
.pct1{font-size: 10px;line-height: 100%;}
.pct2{font-size: 15px;line-height: 100%;}
 div{line-height: 30px;}
 div .p{line-height: inherit;}
//以下为HTML部分/
<p class="nrm">
    默认行间距。<br>默认行间距。<br>默认行间距。
</p>
<p class="num1">
    数字设置更大间距。<br>数字设置更大间距。<br>数字设置更大间距。
</p>
<p class="num2">
    数字设置更小间距。<br>数字设置更小间距。<br>数字设置更小间距。
</p>
<p class="num3">
    数字在更大字体下。<br>数字在更大字体下。<br>数字在更大字体下。
</p>
<p class="len">
    数值固定行距。<br> 数值固定行距。<br> 数值固定行距。
</p>
<p class="pct1">
    百分比在小字体下。<br>百分比在小字体下。<br>百分比在小字体下。
</p>
<p class="pct2">
    百分比在大字体下。<br>百分比在大字体下。<br>百分比在大字体下。
</p>
<div>
    <p>
        行距继承。<br>行距继承。<br>行距继承。
    </p>
</div>

•  文本对齐方式

      text-align属性用来设置文本的对齐方式。可取center(居中)、left(左对齐)、right(右对齐)；justify(两端对齐)每一行宽度相等以及inherit(继承父元素)。

.lft{text-align: left;}
.rit{text-align: right;}
.cnt{text-align: center;}
.jst{text-align: justify;}
以下为HTML部分//
<p class="lft">
    左对齐。
</p>
<p class="rit">
    右对齐。
</p>
<p class="cnt">
    居中。
</p>
<p class="jst">
    两端对齐。两端对齐。两端对齐。两端对齐。两端对齐。两端对齐。两端对齐。
    两端对齐。两端对齐。两端对齐。两端对齐。两端对齐。两端对齐。两端对齐。
</p>

• 文本装饰

     text-decoration属性用于文本的装饰。text-decoration属性是text-decoration-line、text-decoration-color、text-decoration-style三种属性的缩写，这三种属性大部分浏览器除Firefox外不再支持。使用语法：text-decoration：line(可以添加多个) style(可选) color(可选)。line可选none(默认文本)、underline(下划线)、overline(上划线)、line-through(删除线)。style可选solid(默认实线)、double(双线)、dotted(点线)、dashed(虚线)、wavy(波浪线)。

<p style="text-decoration: overline;">文本装饰</p>
<p style="text-decoration: overline wavy;">文本装饰</p>
<p style="text-decoration: overline wavy red;">文本装饰</p>
<p style="text-decoration: underline;">下划线</p>
<p style="text-decoration: line-through;">删除线</p>
<p style="text-decoration: underline solid;">实线</p>
<p style="text-decoration: underline double;">双实线</p>
<p style="text-decoration: underline dotted;">点线</p>
<p style="text-decoration: underline dashed;">虚线</p>
<p style="text-decoration: underline wavy;">波浪线</p>

• 文本缩进

     text-indent属性用于文本首行的缩进。可取数值，%(依据父元素)，以及inherit(继承父元素)。

<p style="text-indent: 10px;">首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进</p>

  

• 文本阴影      

     text-shadow属性用于文本阴影。必需h-shadow(水平阴影距离，右正左负)，必需v-shadow(垂直阴影距离，下正上负)，可选blur(模糊的距离)，可选color(阴影的颜色)。

.shd1{text-shadow: 2px 2px;}
.shd2{text-shadow: 2px 2px 2px;}
.shd3{text-shadow: 2px 2px 2px red;}
///以下为HTML部分/
<p class="shd1">
    无模糊距离无颜色。
</p>
<p class="shd2">
    有模糊距离无颜色。
</p>
<p class="shd3">
    有模糊距离有颜色。
</p>

•  文本转换

     text-transform属性用来控制文本的大小写。可取none(默认允许大小写)，capitalize(每个单词以大写字母开头)，uppercase(转为大写)，lowercase(专为小写)以及inherit(继承父元素)。

.non{text-transform: none;}
.cap{text-transform: capitalize;}
.upp{text-transform: uppercase;}
.low{text-transform: lowercase;}
//以下为HTML部分
 <p class="non">
    This is none.
</p>
<p class="cap">
    this is capitalize.
</p>
<p class="upp">
    this is uppercase.
</p>
<p class="low">
    THIS IS LOWERCASE.
</p>

 

• 文本重写

     unicode-bidi属性与direction属性一起使用，来设置文本是否被重写，以便在同一文档中支持多种语言，因为有些语言如阿拉伯语是从右往左写的。可取normal(默认)、embed(创建一个附加的嵌入层面)、bidi-override(创建一个附加的嵌入层，方向取决于direction属性)。

<p style="direction: rtl;unicode-bidi: bidi-override;">bidi override</p>
<p style="direction: rtl;unicode-bidi: bidi-override;">this is
<span style="unicode-bidi: embed;"> embed</span>
</p>

•  元素垂直对齐

    vertical-align属性用于设置元素的垂直对齐方式。可取baseline(默认)元素放在父元素的基线上；sub/super(垂直对齐文本的下标/上标)；top(把元素的顶端与行中最高元素的顶端对齐)；middle(把元素放在父元素的中部)；bottom(元素及其后代的底部与行底部对齐)；text-top/text-bottom(把元素的顶端/底端与父元素字体的顶端/底端对齐)；数值将元素升高或降低；%值根据行高设置。

<p>垂直对齐<span style="vertical-align: baseline;">默认</span>方式</p>
<p>垂直对齐<span style="vertical-align: sub;">下标</span>方式</p>
<p>垂直对齐<span style="vertical-align: super;">上标</span>方式</p>
<p style="font-size: 20px;">垂直对齐<span style="vertical-align: top;font-size: 10px;">top</span>方式</p>
<p style="font-size: 20px;">垂直对齐<span style="vertical-align: middle;font-size: 10px;">middle</span>方式</p>
<p style="font-size: 20px;">垂直对齐<span style="vertical-align: bottom;font-size: 10px;">bottom</span>方式</p>
<p>垂直对齐<span style="vertical-align: text-top;font-size: 20px;background-color: tomato;">text-top</span>方式</p>
<p>垂直对齐<span style="vertical-align: text-bottom;font-size: 20px;background-color: tomato;">tetx-bottom</span>方式</p>
<p>垂直对齐<span style="vertical-align:10px;">length</span>方式</p>
<p>垂直对齐<span style="vertical-align:50%;">%</span>方式</p>

• 元素中空白处理方式 

     white-spacing属性用于处理元素内的空格与换行。可取normal(默认)多个空格合并为一个，换行符被忽略；pre(空格不会被合并且换行保留)；nowrap(空格被合并，忽略换行)；pre-wrap(空格不会合并，保留换行)；pre-line(合并空格，保留换行)；以及inherit(继承父元素)。

normal与nowrap的区别：normal到达容器边界换行，nowrap将所有文本写在同一行。

pre与pre-wrap的区别：pre类似HTML中<pre>标签文字不受容器宽度影响，pre-wrap受到容器影响。

<p style="white-space: normal;">
    默认   空格合并一格，
    换行被忽略。
</p>
<p style="white-space: pre;">
    pre    空格不会合并，
    换行被保留。
</p>
<p style="white-space: nowrap;">
    noewrap     空格合并一格，
    换行被忽略。
</p>
<p style="white-space: pre-wrap;">
    pre-wrap    多个空格不会合并，
    换行被保留。
</p>
<p style="white-space: pre-line;">
    pre-line      多个空格被合并，
    换行保留
</p>

• 文本字间距 

     word-spacing属性用来设置单词之间的间距。可取normal(默认)，指定数值(可为负)，以及inherit(继承父元素)。

.nor{word-spacing: normal;}
.len{word-spacing: 20px;}
/以下为HTML部分///
<p class="nor">
    this is normal。
</p>
<p class="len">
    this is not normal。
</p>