如何在一个语句中设置html中的不同颜色

tin*_*tes 11 html text

嗨,我想在一行中有不同颜色的文字怎么可能:

<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>
Run Code Online (Sandbox Code Playgroud)

我想为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>
Run Code Online (Sandbox Code Playgroud)

@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>
Run Code Online (Sandbox Code Playgroud)

Phi*_*hil 22

你可以使用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 }
Run Code Online (Sandbox Code Playgroud)

然后您的HTML将读取:

<p class="detail">My Name is: <span class="name">Tintinecute</span> </p>
Run Code Online (Sandbox Code Playgroud)

它比内联样式表更整洁,更易于维护并提供更大的重用.

这是完整的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>     
Run Code Online (Sandbox Code Playgroud)

你会看到我在标题中的样式标记中有样式表类,然后我只在代码中应用这些类,如<p class="detail"> ... </p>.通过w3schools教程,它只需要几个小时,并且在设置HTML元素的样式时真的会转过身来.如果将其剪切并粘贴到HTML文档中,则可以编辑样式并查看在浏览器中打开文件时它们具有的效果.像这样试验是一种很好的学习方法.


Jam*_*ill 10

使用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>
Run Code Online (Sandbox Code Playgroud)

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


小智 5

使用FONT标签怎么样?

喜欢:

H<font color="red">E</font>LLO.
Run Code Online (Sandbox Code Playgroud)

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

Span 风格也快速而简单。