如何在一个语句中在 HTML 中设置不同的颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6913234/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set different colors in HTML in one statement?
提问by tintincutes
I'm thinking of having different color of text in one line. How could that be possible?
我正在考虑在一行中使用不同颜色的文本。这怎么可能？
<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>
I would like to have a different color for Tintincute but in one line the problem with this, the name went down one space.
我想为 Tintincute 使用不同的颜色，但在一行中，这个问题的名称减少了一个空格。
This is the code example:
这是代码示例：
<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>
Update
更新
@Phil: I tried using the code, but it didn't work. The code itself was shown on the page. This is how I did it:
@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>
回答by Phil
You could use CSS for this and create classes for the elements. So you'd have something like this
您可以为此使用 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 }
Then your HTML would read:
然后你的 HTML 会读到：
<p class="detail">My Name is: <span class="name">Tintinecute</span> </p>
It's a lot neater then inline stylesheets, is easier to maintain and provides greater reuse.
它比内联样式表简洁得多，更易于维护并提供更大的重用性。
Here's the complete HTML to demonstrate what I mean:
这是完整的 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>
You'll see that I have the stylesheet classes in a style tag in the header, and then I only apply those classes in the code such as <p class="detail"> ... </p>. Go through the w3schools tutorial, it will only take a couple of hours and will really turn you around when it comes to styling your HTML elements. If you cut and paste that into an HTML document you can edit the styles and see what effect they have when you open the file in a browser. Experimenting like this is a great way to learn.
您会看到我在标题的样式标记中有样式表类，然后我只在代码中应用这些类，例如<p class="detail"> ... </p>. 通过 w3schools 教程，它只需要几个小时，当涉及到样式化 HTML 元素时，它会真正改变你。如果将其剪切并粘贴到 HTML 文档中，则可以编辑样式并查看在浏览器中打开文件时它们的效果。像这样的实验是一种很好的学习方式。
回答by James Hill
Use the spantag
使用span标签
<style>
.redText
{
color:red;
}
.blackText
{
color:black;
font-weight:bold;
}
</style>
<span class="redText">My Name is:</span> <span class="blackText">Tintincute</span>
It's also a good idea to avoid inline styling. Use a custom CSS class instead.
避免内联样式也是一个好主意。请改用自定义 CSS 类。
回答by JSiren
How about using FONT tag?
使用FONT标签怎么样？
Like:
喜欢：
H<font color="red">E</font>LLO.
Can't show example here, because this site doesn't allow font tag use.
无法在此处显示示例，因为此站点不允许使用字体标记。
Span style is fast and easy too.
Span 风格也快速而简单。
回答by Aashish
.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;
}<h2><span class="rainbow">Rainbows are colorful and scalable and lovely</span></h2>