css文本制作

基础文本样式设置

使用 color 设置文本颜色，支持十六进制、RGB 或颜色名称：

p {
  color: #ff0000; /* 红色 */
  color: rgb(255, 0, 0); /* RGB格式 */
  color: red; /* 颜色名称 */
}

通过 font-family 定义字体，建议设置备用字体：

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

字体大小与粗细调整

font-size 控制文字大小，单位可选 px、em 或 rem：

h1 {
  font-size: 2em; /* 相对单位 */
}

font-weight 调整粗细，支持数值或关键词：

strong {
  font-weight: bold; /* 或700 */
}

文本对齐与装饰

text-align 控制水平对齐方式：

div {
  text-align: center; /* left/right/justify */
}

text-decoration 添加下划线、删除线等：

a {
  text-decoration: none; /* 去除链接下划线 */
}
span {
  text-decoration: line-through; /* 删除线 */
}

高级文本效果

text-shadow 创建文字阴影效果：

h2 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 水平偏移 垂直偏移 模糊度 颜色 */
}

letter-spacing 和 line-height 调整间距：

p {
  letter-spacing: 1px; /* 字符间距 */
  line-height: 1.6; /* 行高 */
}

响应式文本处理

使用 vw 单位实现视窗自适应文字大小：

.title {
  font-size: 5vw; /* 视窗宽度的5% */
}

媒体查询调整不同设备的文本样式：

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}