Question

我有以下声明：

<font color="#2B547E">

现在我不想在我的HTML中硬编码;相反，我想申请一个CSS课程。我不希望我的页面中的所有字体都使用此颜色，仅适用于特定部分。我尝试了以下方法：

 <font class="xyz" >

但它不起作用。我不能使用div / span，因为它导致我的html模板中有一个新行，因为我无法更改某些预定义的样式表。

如何将该硬编码值移动到css？

Answer 1

如果您可以为此<font>元素添加CSS类，则应该可以切换为使用<span>：

HTML：

<span class="coloredText">text</span>

CSS：

.coloredText {
    display: inline; /* will stop spans creating a new line */
    color: #2B547E;
}

如果仍然发现跨度创建换行符，则可以将规则更改为
display: inline !important; - 这将增加此规则的优先级，以使其生效。我不确定CSS-pedants是否对!important的使用不满意，但它可能会有所帮助。

Answer 2

应该是：

HTML：

<font class="xyz">...</font> <!-- or any other tag -->

CSS：

font.xyz {color:#2B547E;} /* or just .xyz */

另请参阅：Class and ID Selectors

Answer 3

首先，使用重置css将所有样式重置为您选择的默认样式。

我使用这个，但还有其他人：http://meyerweb.com/eric/tools/css/reset/

然后，编写您的CSS并使用定位将样式应用于不同的元素

此链接解释了CSS特异性：http://www.htmldog.com/guides/cssadvanced/specificity/

<link rel='stylesheet' href='reset.css'>
<style>
#top p {
  color: blue;
}

#bottom p {
  color: red;
} 

.black {
  background: #000;
}
</style>


<div id='top'>
  <p>This text will be blue</p>
  <span class='black'>I have a black background</span>
<div>

<div id='bottom'>
  <p>This text will be red</p>
  <span class='black'>I have a black background too!</span>
<div>

Answer 4

你可以使用这样的组合：

<div class="xyz">Your content goes here...</div>

，CSS可以是：

.xyz {display: inline; color: #2B547E;}

这将解决新线的问题，并提供所需的颜色。

Answer 5

更具体的选择器，而不是div，使用div.class或div.id

<div class="Foo">
  Bar
</div>


div.Foo {
  color:#2B547E;
  margin:0;  /* overriding the predefined styles in other sheet */
  padding:0;  /* overriding the predefined styles in other sheet */
}

用导致新行的任何内容替换margin / padding。

另外，我总是建议不要使用样式标签;比如Font。你的Html应该只使用声明性标签。更不用说Font标签是deprecated。

Answer 6

HTML

<p>Lorem ipsum dolor sit amet, <span class="xyz">consectetur adipiscing elit.</span> Mauris ultrices arcu eu velit euismod pulvinar.</p>

CSS

.xyz { 颜色：＃66CD00; }

View a live example

Answer 7

我有点迷失在你能做什么和不能在这里做什么;）但我会把它放在这里

font[color="#2B547E"] {color: red;}

<p>I have following statement: <font color="#2B547E">I can't use a div/span as it results in a new line in my html template due to some predefined stylesheet which I can't change.</font></p>

不幸的是 IE7 存在问题，但如果您使用font[color] {color: red;}它会确定目标 - 这当然不会让您根据现有颜色专门定位，如果这是您所追求的 - 但如果这就是你所需要的，它会将它们全部瞄准它们，两者的混合可能提供足够好的回退吗？

Answer 8

您的问题可能是CSS特异性的情况，我无法从提供的详细信息中得知。如果您的跨度样式是通过ID（例如

）定义的

#somediv span{ display:block}

那个css会覆盖像

这样的东西

span.myspan{display:inline}

因为ID样式更具体，你可以通过几种方式解决这个问题，首先你可以在html中设置内联样式。

<span style"display:inline; color:#2b547e;">some text</span>

或者您可以通过在css中包含父ID来创建一个类并使用更具体的样式

#somediv span.myclass{display:inline}

如何防止HTML中某些属性的硬编码？

8 个答案: