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

前端之家收集整理的这篇文章主要介绍了如何在一个语句中设置html中的不同颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
嗨,我想在一行中有不同颜色的文字怎么可能: @H_403_2@<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提供不同的颜色,但在一行中存在问题,这个名字在一个空格中消失了.

这是代码示例:

@H_403_2@<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:我尝试使用代码,但它没有用.代码本身显示页面上.这就是我做的方式:

@H_403_2@<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为这个元素创建类.所以你有类似的东西 @H_403_2@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会读:

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

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

这是完整的HTML来展示我的意思:

@H_403_2@<!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文档中,则可以编辑样式并查看在浏览器中打开文件时它们具有的效果.像这样试验是一种很好的学习方法.

原文链接:https://www.f2er.com/html/231733.html

猜你在找的HTML相关文章