CSS-常见外观（文本）样式属性的用法汇总

谁借莪１个温暖的怀抱￠ 2023-08-17 17:15 127阅读 0赞

#### color ####

`color: #f00;` 用于设置文本的颜色

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>color_name</td> 
   <td>颜色名称，例如：red、green、yellow 等</td> 
  </tr> 
  <tr> 
   <td>hex_number</td> 
   <td>十六进制的颜色值，例如：#ff0000、#00ff00、#0000ff 等</td> 
  </tr> 
  <tr> 
   <td>rgb_number</td> 
   <td>通过 rgb 代码表示的颜色，可以是具体值也可以用百分比，例如： rgb(255,0,0) 或 rgb(100%,0%,0%)</td> 
  </tr> 
 </tbody> 
</table>

在实际开发中多数情况是使用 十六进制的写法，十六进制的颜色值可以简写，例如：\#ff0000 可简写成 \#f00

#### text-align ####

`text-align: left;` 用于设置文本内容的水平对齐方式；是元素中的内容不是元素本身

<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>

#### text-indent ####

`text-indent: 0;` 用于设置文本块中首行文本的缩进

其属性值可为px（像素）、em（字符宽度的倍数）、%（相对于浏览器窗口宽度的百分比），允许使用负值；默认值为 零

在实际开发中多数使用 em 作为单位

#### letter-sapcing ####

`letter-spacing: normal;` 用于设置字符间的间距（水平方向）

属性值可以是 px、rem、em，允许为负值；默认值为 normal

#### line-height ####

`line-height: normal;`用于设置行高；行高是指上下文本行的基线间的垂直距离；其属性值可以是数值、px（像素）、em、%（百分比）；默认值为 normal；实际开发中用的最多的是像素，一般行高比字号大 8 个像素左右即可

如果想让单行文本垂直居中，直接将行高设置为盒子的高即可；当单行文本的行高小于盒子的高度时文字会偏上，大于盒子的高度时文字会偏下

#### text-decoration ####

`text-decoration: none;` 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>

在实际开发中多用来消除超链接默认的下划线