CSS 常用文本样式

以下是一些常用的 CSS 文本样式:

  • 字体样式

  • 字体类型:
  • font-family: 'Arial', sans-serif;:设置字体为 Arial,如果没有 Arial 字体,则使用系统默认的无衬线字体。
  • font-family: 'Times New Roman', serif;:设置字体为 Times New Roman,如果没有该字体,则使用系统默认的有衬线字体。

  • 字体大小:
  • font-size: 16px;:将字体大小设置为 16 像素。
  • font-size: 1.2em;:字体大小相对于其父元素字体大小的 1.2 倍,这是一种相对单位,常用于保持文本在不同屏幕和设备上的可读性。

  • 字体粗细:
  • font-weight: normal;:正常粗细,等同于 font-weight: 400;
  • font-weight: bold;:加粗,等同于 font-weight: 700;,常用于突出显示标题或重要信息。
  • font-weight: 100;:最细的字体粗细,数值越大,字体越粗,一般有 100、200、300、400、500、600、700、800、900 等等级别。


  • 文本排版

  • 文本对齐:
  • text-align: left;:文本左对齐,常用于段落文本的默认对齐方式。
  • text-align: center;:文本居中对齐,适用于标题、重要提示等需要突出显示的文本。
  • text-align: right;:文本右对齐,可用于一些特定的布局需求,如表格中的数据对齐。
  • text-align: justify;:两端对齐,常用于报纸、书籍等排版,使文本的左右两端都对齐,但可能会导致单词间距不均匀。

  • 文本缩进:
  • text-indent: 2em;:首行缩进 2 个字符宽度,符合中文排版习惯,常用于段落首行缩进,增强文本的层次感。

  • 行高:
  • line-height: 1.5;:行高是字体大小的 1.5 倍,合适的行高可以使文本更易读,避免行与行之间过于拥挤或过于疏远。
  • line-height: 24px;:将行高固定为 24 像素,适用于需要精确控制行间距的场景。


  • 文本修饰

  • 文本颜色:
  • color: #ff0000;:设置文本颜色为红色,使用十六进制颜色代码。
  • color: rgb(0, 0, 255);:设置文本颜色为蓝色,使用 RGB 颜色模式。
  • color: rgba(0, 128, 0, 0.5);:设置文本颜色为半透明的绿色,其中 0.5 表示透明度。

  • 文本装饰:
  • text-decoration: none;:去除文本装饰,常用于链接,使其看起来像普通文本。
  • text-decoration: underline;:给文本添加下划线,可用于强调或表示链接。
  • text-decoration: overline;:给文本添加上划线,较少使用,可用于一些特殊效果。
  • text-decoration: line-through;:给文本添加删除线,表示文本被删除或不再有效。


  • 其他

  • 字母间距:
  • letter-spacing: 1px;:字母间距增加 1 像素,可以使文本看起来更宽敞,常用于标题或需要强调的文本。

  • 单词间距:
  • word-spacing: 2px;:单词间距增加 2 像素,对英文等以空格分隔单词的语言有效,可改善文本的视觉效果。
  • 文本转换:
  • text-transform: uppercase;:将文本转换为大写,常用于标题或缩写词。
  • text-transform: lowercase;:将文本转换为小写。
  • text-transform: capitalize;:将每个单词的首字母大写,适用于标题或需要突出显示的文本。。

vertical-align

  • 属性名:vertical-align
  • 作用:用于指定同一行元素之间,或表格单元格内文字的垂直对齐方式
  • 常用值:
  1. baseline(默认值):使元素的基线与父元素的基线对齐。
  2. top:使元素的顶部与其所在行的顶部对齐。
  3. middle:使元素的中部父元素的基线加上父元素字母x的一半。
  4. bottom:使元素的底部与其所在行的底部对齐。

注意:vertical-align不能控制块元素。