如何在一个语句中在 HTML 中设置不同的颜色? [英] How to set different colors in HTML in one statement?
问题描述
我想在一行中使用不同颜色的文本.这怎么可能?
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>
我想为 Tintincute 使用不同的颜色，但在一行中遇到了这个问题，名称减少了一个空格.
I would like to have a different color for Tintincute but in one line the problem with this, the name went down one space.
这是代码示例:
<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:我尝试使用代码，但是没有用.代码本身显示在页面上.我是这样做的:
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:
<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>
推荐答案
您可以为此使用 CSS 并为元素创建类.所以你会有这样的东西
You could use CSS for this and create classes for the elements. So you'd have something like this
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 将显示为:
Then your HTML would read:
<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.
这里是完整的 HTML 来演示我的意思:
Here's the complete HTML to demonstrate what I mean:
<!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>
你会看到我在标题的样式标签中有样式表类，然后我只在代码中应用这些类，例如 <p class="detail">... </p>.通过 w3schools 教程，它只需要几个小时，当涉及到设置 HTML 元素的样式时，它会真正让你大开眼界.如果将其剪切并粘贴到 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.
这篇关于如何在一个语句中在 HTML 中设置不同的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
