问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

 <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>

原文由 tintincutes 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmltext
阅读 854
2 个回答
得票最新
社区维基
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>

您会看到我在标题的样式标记中有样式表类，然后我只在代码中应用这些类，例如 <p class="detail"> ... </p> 。完成 w3schools 教程，它只需要几个小时，并且在样式化 HTML 元素时真正让您转身。如果将其剪切并粘贴到 HTML 文档中，则可以编辑样式并查看在浏览器中打开文件时它们的效果。像这样进行实验是一种很好的学习方式。

原文由 Phil 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

使用 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 类。

原文由 James Hill 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题