字体颜色不更新

huangapple go评论61阅读模式
英文:

Font Color does not update

问题

我有一个简单的HTML片段,如下所示:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->
    <p align="left"> <font size="3"><strong> Asset: &nbsp;    </strong></font><strong><font color="blue" size="2"> something something here  </font></strong><br> </p>

<!-- end snippet -->

字体颜色似乎不起作用,但字体大小确实有变化。

此外,我了解到显式的font描述已过时,我们应该使用CSS样式。如果您可以提出这个选项,是否可以使用这个选项?

英文:

I have a simple HTML snippet like this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    &lt;p align= &quot;left&quot;&gt; &lt;FONT size=3&gt;&lt;STRONG&gt; Asset: &amp;nbsp;    &lt;/STRONG&gt;&lt;/FONT&gt;&lt;STRONG&gt;&lt;FONT color=&quot;blue&quot; size=2&gt; something something here  &lt;/FONT&gt;&lt;/STRONG&gt;&lt;br&gt; &lt;/p&gt;

<!-- end snippet -->

The font color does not seem to work but the font size does change.

Also, I do understand that explicit font description is expiring and we should be using the CSS styling. If you could suggest that option,okay to use that option as well.

答案1

得分: 2

最好使用 CSS:

&lt;p style=&quot;text-align:center; font-size:14px;&quot;&gt;&lt;strong&gt; 资产:&amp;nbsp;&lt;/strong&gt;&lt;strong style=&quot;color:blue;&quot;&gt;这里是一些内容&lt;/strong&gt;&lt;br&gt;&lt;/p&gt;
英文:

Is better to use css:

&lt;p style=&quot;text-align:center; font-size:14px;&quot;&gt;&lt;strong&gt; Asset: &amp;nbsp;&lt;/strong&gt;&lt;strong  style=&quot;color:blue;&quot;&gt;something something here&lt;/strong&gt;&lt;br&gt;&lt;/p&gt;

答案2

得分: 1

使用HTML元素和类是更好的选择,尽管我承认有些可能看起来过于复杂。

对于我的回答,首先我给段落添加了一个类。在其中,我将文本对齐到左侧并将其中的所有内容设置为加粗。

接下来,span元素默认是内联的(意味着它们与文本一起内联显示,但不能控制间距)。您也可以使用div。因此,段落标签中的每个span,我都将其设置为内联块,以便我可以控制其周围的间距,同时保持文本内联。

接下来,每个内容部分都被包装在自己的span中。

由于之前我已经将所有内容设置为加粗,所以我只会给标题span添加右边的边距以进行间距处理,并更改字体大小。

接下来,对于其余部分,我将其内容包装在另一个span中,并将颜色更改为蓝色(十六进制为#红色 绿色 蓝色),同时也更改了字体大小。

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->
.updated{
  text-align:left;
  font-weight:bold;
}

.updated span{
  display:inline-block;
}

.updated .title{
  margin-right:5px;
  font-size:18px;
}

.updated .content{
  color:#0000FF;  
  font-size:13px;
}

<!-- language: lang-html -->
Originial: <p align="left"> <FONT size=3><STRONG> Asset: &nbsp;    </STRONG></FONT><STRONG><FONT color="blue" size=2> something something here  </FONT></STRONG><br> </p>

Updated:
<p class="updated">
  <span class="title">Asset:</span>
  <span class="content">something something here</span>
</p>

<!-- end snippet -->
英文:

Using HTML elements and classes is the better option although I do admit some might seem overly complicated.

For my answer, first I give the paragraph a class. Inside of it, I'm aligning the text left and bolding EVERYTHING in it.

Next, spans are by default inline (meaning they show inline with the text, but you don't have control over the spacing). You could also use a div. So every span in the paragraph tag, I'm setting to inline block so I can control the spacing around it while keeping the text inline.

Next each part of the content gets wrapped in its own span.

Since earlier I already set all content to bold, I'm only going to give the title span a margin to the right to space it out and change the font size.

Next for the rest I wrapped that content in another span and changed the color to blue (hex is #Red Green Blue) and I changed the font size also.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.updated{
  text-align:left;
  font-weight:bold;
}

.updated span{
  display:inline-block;
}

.updated .title{
  margin-right:5px;
  font-size:18px;
}

.updated .content{
  color:#0000FF;  
  font-size:13px;
}

<!-- language: lang-html -->

Originial: &lt;p align= &quot;left&quot;&gt; &lt;FONT size=3&gt;&lt;STRONG&gt; Asset: &amp;nbsp;    &lt;/STRONG&gt;&lt;/FONT&gt;&lt;STRONG&gt;&lt;FONT color=&quot;blue&quot; size=2&gt; something something here  &lt;/FONT&gt;&lt;/STRONG&gt;&lt;br&gt; &lt;/p&gt;

Updated:
&lt;p class=&quot;updated&quot;&gt;
  &lt;span class=&quot;title&quot;&gt;Asset:&lt;/span&gt;
  &lt;span class=&quot;content&quot;&gt;something something here&lt;/span&gt;
&lt;/p&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月1日 23:48:15
  • 转载请务必保留本文链接:https://go.coder-hub.com/76383668.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定