如何在一个语句中设置html中的不同颜色 [英] how to set different colors in html in one statement
问题描述
< p 您好我正在考虑在一行中使用不同颜色的文本。风格= 颜色：＃4C4C4C;字型重量：粗体;字体家庭：宋体;字体大小：20 >我的名字是：
<color：＃FF0000; font-weight：bold; font-family：Tahoma; font-size：20> Tintincute< / p>
我想为Tintincute设置不同的颜色，但在一行中，下了一个空间。
这是代码示例：
< p style = color：＃4C4C4C; font-weight：bold>标记有< style =color：＃FF0000; font-weight：bold> *< / color> < style =color：＃4C4C4C; font-weight：bold>是必需的< / 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>我的名字是：< span class =name> Tintincute< / span> < / p为H.
您可以使用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>我的名字是：< span class =name> Tintinecute< / span> < / p为H.
这样的内联样式表更加整洁，易于维护并提供更高的重用性。
下面是完整的HTML来展示我的意思：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://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>我的名字是：< span class =name> Tintinecute< / span> < / p为H.
< / body>
< / html>
您会看到标题中的样式标签中有样式表类，然后我只在代码中应用这些类，如
< p class =detail> ...< / p>。通过w3schools教程，它只需要几个小时，并且在涉及到HTML元素的样式设计时会真正让你感到满意。如果将其剪切并粘贴到HTML文档中，则可以编辑样式并查看在浏览器中打开文件时它们具有的效果。像这样进行实验是学习的好方法。Hi 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.
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>@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>
解决方案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 }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.
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>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屋！
