如何在一个语句中在 HTML 中设置不同的颜色？答案

【问题标题】：How to set different colors in HTML in one statement?如何在一个语句中在 HTML 中设置不同的颜色？
【发布时间】：2022-04-03 23:55:59
【问题描述】：

我正在考虑在一行中使用不同颜色的文本。这怎么可能？

<p style="color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20"> My Name is: 

 <"color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20"> Tintincute </p>

我想为 Tintincute 设置一种不同的颜色，但在一行中，这个问题的问题是，名称下降了一个空格。

这是代码示例：

<p style="color:#4C4C4C;font-weight:bold">All fields marked with   <style="color:#FF0000;font-weight:bold">*</color> <style="color:#4C4C4C;font-weight:bold">are required</p>

更新

@Phil：我尝试使用代码，但没有成功。代码本身显示在页面上。我就是这样做的：

<div style="color:red">[+validationmessage+]</div>
p.detail {color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20 }
span.name {color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20 }
<p class="detail">My Name is: <span class="name">Tintincute</span> </p>

【问题讨论】：

这是一个编程问题，因此应该在 Stack Overflow 上，但是，这里没有太多信息。你已经有什么代码（例如）。
@ChrisF：请检查我上面的代码示例。谢谢
这就是你想要的：My Name is:&nbsp;Tintincute。 Span 不会阻塞，因此会引入新行。
@slhck：感谢您的建议，但我希望整个句子都在一行中。通过引入“ ”这个命令，这将引入一行，
我会在一分钟内发布一个新的答案。

标签： html text

【解决方案1】：

您可以为此使用 CSS 并为元素创建类。所以你会有这样的东西

p.detail { color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20 }
span.name { color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20 }

然后您的 HTML 将显示为：

<p class="detail">My Name is: <span class="name">Tintinecute</span> </p>

它比内联样式表更整洁，更易于维护并提供更多重用。

这是完整的 HTML 来说明我的意思：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <style type="text/css">
    p.detail { color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20 }
    span.name { color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20 }
    </style>
</head>
<body>
    <p class="detail">My Name is: <span class="name">Tintinecute</span> </p>
</body>
</html>

您会看到我在标题中的样式标记中有样式表类，然后我只在代码中应用这些类，例如 ... 。阅读 w3schools 教程，它只需要几个小时，并且在您设置 HTML 元素的样式时真的会让您大吃一惊。如果将其剪切并粘贴到 HTML 文档中，则可以编辑样式并查看在浏览器中打开文件时它们的效果。像这样进行实验是一种很好的学习方式。

【讨论】：

如果我不使用 CSS 怎么办，它也可以单独使用 HTML 吗？
是的，如果您使用原始示例中的内联样式表：
我的名字是：Tintinecute
谢谢@Phil：如果您的建议适用于我的代码，我会尝试。
感谢我尝试使用您建议的代码的链接，但它不起作用。如果你检查我编辑过的，你会看到...
w3schools 应该有很多错误。 tizag.com/cssT 或类似的资源要好得多。

【解决方案2】：

使用span 标签

<style>
    .redText
    {
        color:red;
    }
    .blackText
    {
        color:black;
        font-weight:bold;
    }
</style>

<span class="redText">My Name is:</span>&nbsp;<span class="blackText">Tintincute</span>

避免内联样式也是一个好主意。请改用自定义 CSS 类。

【讨论】：

问你一个简单的问题：如何将它集成到 div 代码中？特别是如果我的代码以：“div style="color:red">"
如果您的跨度在 div 内，则 div 的样式将被您的自定义类覆盖（它仍然有效）。这能回答你的问题吗？
非常感谢。是的，但我认为我最好把 div 拿出来。它似乎有效，但如果我正在制作电子表格，我仍在尝试弄清楚如何更改其他字体的样式。

【解决方案3】：

使用FONT标签怎么样？

喜欢：

H<font color="red">E</font>LLO.

此处无法显示示例，因为此站点不允许使用字体标签。

Span 样式也快速简单。

【讨论】：

【解决方案4】：

.rainbow {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

&lt;h2&gt;&lt;span class="rainbow"&gt;Rainbows are colorful and scalable and lovely&lt;/span&gt;&lt;/h2&gt;

【讨论】：

【解决方案5】：

<p style="font-weight:bold"> ¿ is this color   
                <span style="color:red; font-weight:bold"> red? </span> 
                <span style="font-weight:bold"> ? </span>   
            </p>

【讨论】：

【解决方案6】：

我知道这有点笨拙，但它确实有效

如果你有，例如：

<a>Color1 Color2</a>

你可以只对里面的部分文本进行样式化

<a>Color1 <a style=color:yellow>Color2</a></a>

输出

【讨论】：