css_控制文本

心已赠人 2022-05-25 04:54 255阅读 0赞

CSS 文本属性可定义文本的外观。

通过文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

l 基本属性

<table> 
 <tbody> 
 <tr> 
 <td>属性</td> 
 <td>描述</td> 
 <td>示例</td> 
 </tr> 
 <tr> 
 <td>color</td> 
 <td>设置文本颜色</td> 
 <td>color:red;</td> 
 </tr> 
 <tr> 
 <td>background-color</td> 
 <td>背景颜色</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>text-align </td> 
 <td>对齐方式</td> 
 <td>text-align:center/left/right</td> 
 </tr> 
 <tr> 
 <td>line-height</td> 
 <td>设置行高</td> 
 <td>line-height:30px;line-height:200%px;line-height:2;</td> 
 </tr> 
 <tr> 
 <td>letter-spacing</td> 
 <td>设置字符间距</td> 
 <td>letter-spacing:20px;letter-spacing:-0.5em</td> 
 </tr> 
 </tbody> 
</table>

其中1em=10px。但是效果而言，1em=16px.

![20180508143503993][]

![20180508143512961][]

l text-decoration 属性

text-decoration 属性规定添加到文本的修饰。

<table> 
 <tbody> 
 <tr> 
 <td>值</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>underline</td> 
 <td>下划线</td> 
 </tr> 
 <tr> 
 <td>overline</td> 
 <td>上划线</td> 
 </tr> 
 <tr> 
 <td>line-through</td> 
 <td>删除线</td> 
 </tr> 
 <tr> 
 <td>none</td> 
 <td>无线</td> 
 </tr> 
 </tbody> 
</table>

![20180508143645386][]

![20180508143657505][]

![20180508143710493][]

l text-indent 属性

text-indent 属性规定文本块中首行文本的缩进。

<table> 
 <tbody> 
 <tr> 
 <td>值</td> 
 <td>描述</td> 
 </tr> 
 <tr> 
 <td>length</td> 
 <td>定义固定的缩进。默认值：0。</td> 
 </tr> 
 <tr> 
 <td>%</td> 
 <td>定义基于父元素宽度的百分比的缩进。</td> 
 </tr> 
 </tbody> 
</table>

![20180508143832409][]

![20180508151119395][]

![20180508151126940][]

l text-transform 属性

text-transform 属性控制文本的大小写。

<table> 
 <tbody> 
 <tr> 
 <td>值</td> 
 <td>描述</td> 
 </tr> 
 <tr> 
 <td>none</td> 
 <td>默认。定义带有小写字母和大写字母的标准的文本。</td> 
 </tr> 
 <tr> 
 <td>capitalize</td> 
 <td>文本中的每个单词以大写字母开头。</td> 
 </tr> 
 <tr> 
 <td>uppercase</td> 
 <td>全转为大写字母。</td> 
 </tr> 
 <tr> 
 <td>lowercase</td> 
 <td>全转为小写字母</td> 
 </tr> 
 </tbody> 
</table>

![20180508151323371][]

![20180508151330914][]

![20180508151340846][]

l 字体属性

<table> 
 <tbody> 
 <tr> 
 <td>属性</td> 
 <td>描述</td> 
 <td>示例</td> 
 </tr> 
 <tr> 
 <td>font-size</td> 
 <td>字体大小</td> 
 <td>font-size:16px;</td> 
 </tr> 
 <tr> 
 <td>font-family</td> 
 <td>字体系列</td> 
 <td>font-family:"微软亚黑";</td> 
 </tr> 
 <tr> 
 <td>font-style</td> 
 <td>设置字体的风格</td> 
 <td>normal（标准字体）italic（斜体）oblique（倾斜字体样式）</td> 
 </tr> 
 <tr> 
 <td>font-weight</td> 
 <td>设置文本的粗细</td> 
 <td>Normal（相当于400）/bold（相当于700）/bolder/lighter/100-900</td> 
 </tr> 
 </tbody> 
</table>

![20180508151443195][]

![20180508151450184][]

![20180508151457475][]

[20180508143503993]: /images/20220525/b68e2ab9657a48b58af3a0c3f3c578a7.png
[20180508143512961]: /images/20220525/0f9dc8534b134cf9ab2b6e7a27d8da71.png
[20180508143645386]: /images/20220525/76c3cdebd38a4a629b46482b8c3dc117.png
[20180508143657505]: /images/20220525/cb03c270df9544ab9ec171e1ea513ef0.png
[20180508143710493]: /images/20220525/44f356ecd9db45ecb6e87acd6b3f0b46.png
[20180508143832409]: /images/20220525/527333061678425b9c770db83a14eb2d.png
[20180508151119395]: /images/20220525/96466620eb054dd2b6a6cc76219321f3.png
[20180508151126940]: /images/20220525/374a63830ebb496cae89dd6dcb81d9fd.png
[20180508151323371]: /images/20220525/e690c64d1b584a9ab8d157a8efbc6aa2.png
[20180508151330914]: /images/20220525/3c0632e0dbae443ca769ba9071358948.png
[20180508151340846]: /images/20220525/e4a8cb1367424b22bb8ab90669f52f49.png
[20180508151443195]: /images/20220525/192b8d0c754f4b5db698901d93dbdde3.png
[20180508151450184]: /images/20220525/7a401bbc57f147bea0b8a67f5eec021d.png
[20180508151457475]: /images/20220525/7fa3e0cbe22e433db6dc97bf7570d494.png