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

我有以下声明：如何防止HTML中某些属性的硬编码？

<font color="#2B547E">

现在我不想在我的html硬编码;相反，我想申请一个CSS类。我不希望这种颜色适用于我的页面中的所有字体，只适用于特定的部分。我试过以下内容：

<font class="xyz" >

但它不工作。我无法使用div/span，因为它导致我的html模板中出现一个新行，这是由于我无法更改某些预定义的样式表。

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

来源

2011-03-30 dojoX

你怎么能甚至希望，如果你还在使用CSS使用''标签？ – BoltClock 2011-03-30 07:14:20

CSS和字体标签是对比技术，因此不能合并到一个标签中。考虑一下在某艘不是海底潜艇的地方有深度计。这艘船是一艘潜艇，使用深度计，或者它不适用于深度计。所以font-tag不能有class属性。 – Bazzz 2011-03-30 07:40:14

@Bazzz - “font-tag不能有一个类属性”如果你尝试它，你会发现它工作得很好。 – Alohci 2011-03-30 08:20:33

应该是：

HTML：

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

CSS：

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

参见：Class and ID Selectors

来源

2011-03-30 07:16:50 Kobi

如果你可以添加CSS类此<font>元素，你应该能够切换到使用<span>：

HTML：

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

CSS：

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

如果你还是找跨度创建一个换行符，您可以将规则更改为
display: inline !important; - 这样会增加precendence这条规则将会生效。我不确定是否使用!important被CSS-pedants所淹没，但它可能有帮助。

来源

2011-03-30 07:17:17

良好的信息，但确实'！重要'是皱眉，理论上应该有可能创建不使用它的样式表。但是，如果条件是“重要”解决问题而不是彻底改变整个系统，那么应该使用它。更有趣的是你的'display：inline'，你声称停止创建新行，但是'span'按照定义是'inline'，并且不会创建新行。我理解你在这里的想法，但是如果所有跨度都创建新行，那么在css的早些时候就已经有错误了，你的方法只是症状治疗。 – Bazzz 2011-03-30 07:36:05

@Bazzz：我提出这个问题的原因是它的问题是“我无法使用div/span，因为它会导致我的html模板中出现一个新行，这是由于我无法更改某些预定义的样式表。”我意识到'span'是一个内联元素，但是如果另一个样式表（不能改变）使它们成为块元素，这会改变它们。 – 2011-03-30 07:39:14

您可以使用组合是这样的：

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

和CSS可以是：

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

这将解决新的生产线的问题，也给需要的颜色。

来源

2011-03-30 07:17:43 Kangkan

更具体与您的选择，而不是仅仅格，使用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 */ 
}

更换任何导致新生产线保证金/填充。

另外我总是建议不要使用样式标签;如Font。你的Html应该只使用声明式标签。更何况字体标签是deprecated。

来源

2011-03-30 07:18:25 firefox1986

首先，使用reset 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>

来源

2011-03-30 07:21:11 JohnP

HTML

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

CSS

.xyz {0}颜色：＃66CD00; }

View a live example

来源

2011-03-30 07:22:27 Jore

我有点失去了，以你可以和不能做什么这里;），但我会把这在柜面

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;}就会有问题 - 这当然不会让你专门用现有的颜色来定位，如果这就是你以后的样子 - 但是如果这些都是你需要的，两者的混合物提供足够的回退？

来源

2011-03-30 13:33:57 clairesuzy

您的问题可能是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}

来源

2011-03-31 19:20:22 andykrynn

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

回答

相关问题