CSS -样式不继承属性

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

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

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>
<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>

浏览器的用户样式表样式h1和p，以及所有其他单独的元素，这比通过body具有更高的专一性。

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

h1, p { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px; }
你可能也对CSS重置感兴趣。

h1的默认字体大小与浏览器相关联，默认情况下，您可以使用重置样式表来解决这个问题，或者简单地。

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

H1和p都有原生的浏览器定义的样式，不同于默认的浏览器样式。如果没有任何样式信息，H1看起来与正文中的文本不同，对吗?由于这些原因，您需要显式地覆盖它们。

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

H1元素没有继承font-size，因为它在浏览器的默认样式表中设置了font-size。

p元素不继承它，因为该元素位于表格单元格中，而浏览器中的"怪癖模式"意味着，在许多其他事情中，表格会破坏继承。您的页面以怪癖模式显示，因为它没有文档类型声明;把<!doctype html>放在最开始是避免怪癖模式的最简单的方法，但是许多页面依赖于怪癖模式而在"标准模式"下分崩离析。

如果取消注释第一个规则，它使用通用选择器*，它将应用于所有元素，但将被样式表中的任何其他规则(如p { font-size: 5px })覆盖。如果不是这种情况，那么另一个规则中有错误，请使用W3C CSS验证器先检查语法。

相关内容

最新更新

热门标签：