CSS文字，文本常用样式

Dear 丶 2023-06-02 10:48 11阅读 0赞

## CSS文字，文本常用样式 ##

#### 字体属性 ####

**font-family**

如果电脑没有第一个字体，就切换到下一个

body {
        font-family: Microsoft YaHei,Helvetica,Arial,sans-serif;
    }

**font-size**

字体大小

浏览器字体默认大小一般16px

px是绝对大小，不会随浏览器变化变化

em相对单位

rem主要应用移动端

**color**

三种颜色表示

color:rgb();0-255 10进制
    color:red;
    color:#000000;16进制表示法
    
    color:rgba(255,0,0,.3);a为透明度

**font-style**

字体样式

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>normal</td> 
   <td>默认的，文本设置为普通字体</td> 
  </tr> 
  <tr> 
   <td>italic</td> 
   <td>如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。常用</td> 
  </tr> 
  <tr> 
   <td>oblique</td> 
   <td>将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。</td> 
  </tr> 
 </tbody> 
</table>

**font-weight**

字体粗细

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>normal</td> 
   <td>普通的字体粗细，默认</td> 
  </tr> 
  <tr> 
   <td>bold</td> 
   <td>加粗的字体粗细</td> 
  </tr> 
  <tr> 
   <td>lighter</td> 
   <td>比普通字体更细的字体</td> 
  </tr> 
  <tr> 
   <td>bolder</td> 
   <td>比bold更粗的字体</td> 
  </tr> 
  <tr> 
   <td>100~900</td> 
   <td>400表示normal</td> 
  </tr> 
 </tbody> 
</table>

#### 文本属性 ####

**text-decoration**

文字线条

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</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> 
 </tbody> 
</table>

**text-indent**

文本缩进

text-indent: 32px;
    text-indent:2em; 缩进2个字体的长度

**line-height**

行高

行高要大于字体大小

**letter-spacing**

文字之间的距离（中文）

**word-spacing**

英文单词之间的距离

**text-align**

文本对齐

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>left</td> 
   <td>文本左对齐，默认</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>文本右对齐</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>中心对齐</td> 
  </tr> 
 </tbody> 
</table>

转载于:https://www.cnblogs.com/zx125/p/11518507.html