2008-10-14 208 views
7

我只有css的基本知识,是否有可能从一种样式继承属性到另一种样式。因此,例如,我可以将我默认的paragrah标记设置中指定的字体大小继承到我的超链接标记中。继承css属性

我想这样做的原因是为了更容易地保持多种风格。

回答

6

您可以一次像这样定义两个元素常见的样式:

p, a { 
    font-size: 1em; 
} 

,然后扩展每一个与他们各自的特性,只要你想:

p { 
    color: red; 
} 

a { 
    font-weight: bold; 
} 

记住:稍后在样式表中定义的样式通常覆盖之前定义的属性。

附加:如果你有没有准备好,我建议得到了Firebug Firefox扩展,所以你可以看到你的页面上的元素正在接受什么样的风格和他们来自哪里继承。

+0

”稍后在样式表中定义的样式总是会覆盖之前定义的属性“ 这并不完全正确。只有当选择器具有相同的特征时才会发生。 p#id将始终覆盖p.class - 请参阅CSS规范中的级联。 – Kornel 2008-10-15 20:56:45

2

没有CSS没有任何方法来继承样式。但有几种方法可以共享样式。这里有几个例子:

使用多个类

<p class="first all">Some text</p> 
<p class="all">More text</p> 
<p class="last all">Yet more text</p> 

p.all { font-weight: bold } 
p.first { color: red; } 
p.last { color: blue; } 

用逗号在您的样式

<p class="first">Some text</p> 
<p class="middle">More text</p> 
<p class="last">Yet more text</p> 

p.first, p.middle, p.last { font-weight: bold } 
p.first { color: red; } 
p.last { color: blue; } 

使用容器元素

<div class="container"> 
    <p class="first">Some text</p> 
    <p class="middle">More text</p> 
    <p class="last">Yet more text</p> 
</div> 

div p { font-weight: bold } 
p.first { color: red; } 
p.last { color: blue; } 

这些都不是您正在寻找的内容,但使用这些技巧将有助于将CSS重复保持在最低限度。

如果你愿意使用服务器端代码来预处理你的CSS,你可以得到你正在寻找的CSS继承类型。

1

是。

您应该了解CSS中的级联如何工作,并了解继承是如何工作的。一些样式会继承(如字体)和一些样式(如边框)​​。但是,您也可以告诉样式从DOM中的父元素继承。

这里的一些帮助是关于如何指定样式规则的知识。 This site about the CSS Specifity Wars可能有帮助(注意:这个网站目前正在关闭,但希望它会很快回来)。

此外,我发现它有时帮助超载的风格是这样的:

h1, h2, h3, h4, h5 h6 { font-weight: normal; border: 1px solid #ff0; } 
h1 { font-size: 300%; } 
... etc ... 
0

CSS将自动从父样式继承。例如,如果您以自己的身体风格说所有文字都应该是#EEE并且您的背景应该是#000,那么所有文字,无论是div还是跨度都将是#EEE。

关于在CSS3中添加继承的方式已经有相当多的讨论,但是这个规范还没有出来,所以现在我们不得不重复自己。

0

“...是否有可能从一种样式继承属性到另一种样式,因此,例如,我可以将我默认的paragrah标签设置中指定的字体大小继承到我的超链接标签中。

链接标签会自动使用段落中的字体,当且仅当它们是内的一段时。如果他们是一个段落之外(在列表中说的),他们不会使用相同的字体等

比如这个CSS:

* { 
margin: 0 10px; 
padding:0; 
font-size: 1 em; 
} 
p, a { font-size: 75%; } 

将生成的链接和段落在.75em大小。 但是它会在约.56em(.75 * .75)的段落内显示链接。

除了Jonathan Arkell引用的特异性参考,我建议在W3Schools上使用CSS Tutorial。 “