css文本制作

使用CSS制作文本样式

通过CSS可以控制文本的字体、颜色、大小、对齐方式等属性。以下是一些常见的文本样式设置方法。

设置字体和大小

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

font-family定义字体类型，font-size控制文字大小。

调整文本颜色

h1 {
  color: #333333;
}

使用color属性改变文本颜色，支持十六进制、RGB或颜色名称。

控制文本对齐

div {
  text-align: center;
}

text-align属性设置文本水平对齐方式，可选值包括left、right、center和justify。

文本装饰与间距

添加文本装饰

a {
  text-decoration: none;
}

text-decoration用于添加或删除下划线、删除线等，常用值有underline、overline、line-through和none。

调整行高和间距

p {
  line-height: 1.5;
  letter-spacing: 1px;
}

line-height控制行间距，letter-spacing调整字符间距。

文本阴影与转换

添加文本阴影

h2 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

text-shadow参数依次为水平偏移、垂直偏移、模糊半径和颜色。

转换文本大小写

span {
  text-transform: uppercase;
}

text-transform可将文本转换为uppercase（大写）、lowercase（小写）或capitalize（首字母大写）。

响应式文本设计

使用视口单位

body {
  font-size: calc(14px + 0.5vw);
}

结合calc()和视口单位（如vw）实现字体大小随屏幕尺寸变化。

媒体查询调整

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

通过媒体查询在不同屏幕尺寸下应用不同的文本样式。