CSS 文本格式指南

设计网站时，格式化文本是创建有吸引力且可读的界面的一个重要方面。

CSS 提供了多个属性，允许您自定义各种文本元素，包括字体颜色、大小、系列、对齐方式、间距等。

下面是每个文本格式属性的详细指南，以及每个属性的示例。

 

字体颜色

参数：颜色值，可以是颜色名称（如 red ）、十六进制代码（如“#FF0000”）、RGB 值（如“rgb(255, 0, 0)”）或 RGBA 值（如、“rgba(255,0,0,0.5)”)。

p {  
  color: blue;  
}  

 

字体大小

参数：尺寸值，可以是像素（例如“16px”）、em 单位（例如“1em”）、rem 单位（例如“1.2rem”）、视口宽度单位（例如“10vw”） 、视口高度单位（例如“5vh”）或其他单位。

h1 {  
  font-size: 24px;  
}  

 

字体系列

参数：字体系列列表，按首选顺序指定。 您可以指定字体名称（例如， Arial ）或将包含特殊字符的字体名称括在双引号中（例如， " Times New Roman ）。

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

 

字体粗细和样式

参数 font-weight： normal(default)、 bold、 bolder、 lighter 或 100 到 900 之间的数值。

参数 font-style: normal(default), italic。

em {  
  font-style: italic;  
}  
  
strong {  
  font-weight: bold;  
}  

 

文字装饰

参数： "none"(default), "underline", "overline", "line-through"  或由空格分隔的值的组合。

a {  
  text-decoration: underline;  
}  
  
del {  
  text-decoration: line-through;  
}  

 

文本对齐

参数： "left"(default), "right", "center" or "justify".

p {  
  text-align: center;  
}  

 

行高和边距

参数 line-height：数值或当前字体大小的百分比。

参数margin：测量值，如像素（px）、em单位（em）、rem单位（rem）等。

p {  
  line-height: 1.5;  
  margin-bottom: 10px;  
}  

 

多列文本布局

参数：正整数或 "auto"(default)。

.container {  
  column-count: 2;  
}  

 

悬停时文本颜色变化

没有具体参数，仅使用伪类 :hover。

a:hover {  
  color: red;  
}  

 

状态下文本颜色变化（活动、访问）

没有具体参数，仅使用伪类 :active  和 :visited.

a:visited {  
  color: purple;  
}  

 

我们希望上述解释和示例能够帮助您了解如何使用和自定义 CSS 中的文本格式属性，以便在您的网站上创建具有视觉吸引力和吸引力的文本界面。