CSS - 样式不继承属性

时间:2011-12-11 22:38:06

标签: html css inheritance styles

我有这个代码,我不明白为什么我的H1及其相关的P标签没有得到在BODY css元素中定义的字体和大小(没有继承)..除非我取消注释* css样式,什么是一个非常糟糕的主意。如果我这样做,我就无法改变它们在P css标签中重新定义它们的属性(继承似乎是强制的)。

我对maaany标签有这个问题,我不想每次都重新定义字体和大小。

global.css中

/*
* {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
*/
html {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px;
}

p {
    text-align:justify;
    margin:0px;
    margin-bottom:10px;
}

HTML

<HTML>
<HEAD>
<TITLE>a</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<LINK href="global.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<DIV>
  <TABLE width="100%" border="0" cellspacing="0" cellpadding="0">
    <TR>
      <TD width="1" valign="top"></TD>
      <TD valign="top">
        <div>
          <H1>Title</H1>
          <p>Some text</p>
        </div>
      </TD>
    </TR>
  </TABLE>
</DIV>
</BODY>
</HTML>

4 个答案:

答案 0 :(得分:3)

浏览器的用户样式表样式h1p,以及所有其他元素,它们的特异性高于body

单独设置它们以覆盖这些样式。

h1, p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px;
}

您可能也对CSS reset感兴趣。

答案 1 :(得分:1)

默认情况下,h1默认情况下浏览器会将字体大小与浏览器相关联,您可以使用重置样式表来解决此问题,也可以简单地使用。

  h1,p{
font-size:12px;}

答案 2 :(得分:1)

H1和P都具有与默认浏览器样式不同的原生浏览器定义样式。没有任何样式信息,H1看起来与身体中的文字不同,对吧?出于这些原因,您需要明确地覆盖它们。

html, h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

答案 3 :(得分:0)

H1元素不会继承font-size,因为它在浏览器的默认样式表中设置了字体大小。

P元素不会继承它,因为元素位于表格单元格中,浏览器中的“怪癖模式”意味着表格会破坏继承。您的页面以怪癖模式显示,因为它没有doctype声明;将<!doctype html>置于最开始是避免怪癖模式的最简单方法,但许多页面依赖于怪癖模式并在“标准模式”中分段。

如果您取消注释使用通用选择器*的第一个规则,它将应用于所有元素,但会被样式表中的任何其他规则覆盖,例如p { font-size: 5px }。如果情况似乎并非如此,那么其他规则中就会出错 - 请先使用W3C CSS Validator检查语法。