如何在HTML中将不同的样式添加到一行的不同部分，并一起打印所有内容？

<p>
  <span style="color: red;">这是红色文字</span>
  <span style="color: blue;">这是蓝色文字</span>
  <span style="color: green;">这是绿色文字</span>
</p>

.red-text {
  color: red;
}

.blue-text {
  color: blue;
}

.green-text {
  color: green;
}

<link rel="stylesheet" href="styles.css">

<p>
  <span class="red-text">这是红色文字</span>
  <span class="blue-text">这是蓝色文字</span>
  <span class="green-text">这是绿色文字</span>
</p>