Question

好的，我有一个＆lt; h1＆gt;在我的＆lt; header＆gt;中和一个＆lt; h1＆gt;在我的＆lt; section＆gt;中。第一个问题是为什么这两者的大小都是＆lt; h1＆gt;。不同？我假设他们有自己的大小取决于他们的父母标签，这是我不确定。第二个是我有造型这个＆lt; h1＆gt;使用外部CSS，例如：

h1{
   font-size:2em; 
}

tutorial 但是，＆lt; h1＆gt;在＆lt; header＆gt;内不会改变，只有＆lt; h1＆gt;在＆lt; section＆gt;内合理。我甚至在html中仍然是初学者，所以请很好地解释。提前谢谢。

Answer 1

问题演示：http://jsfiddle.net/c06tpb3u

您没有使用任何CSS重置，这意味着您已经在浏览器的怜悯和default Stylsheet。

h1 {
    display: block;
    font-size: 2em;
    font-weight: bold;
    margin: 0.67em 0;
}

是为h1标题元素

设置的默认样式

而对于section事情变得很咸了：

h2, *:-moz-any(article, aside, nav, section) h1 { /*<<<< note h1 here*/
    display: block;
    font-size: 1.5em; /*<<<< and the new value*/
    font-weight: bold;
    margin: 0.83em 0;
}
h1 {
    /*display: block;*/
    /*font-size: 2em;*/
    /*font-weight: bold;*/
    /*margin: 0.67em 0;*/
}

因此你可以注意到（上面是在FF中检查）h1被覆盖，因为h1在section内。该组中省略了<heading>元素，将heading1保留为2em默认字体大小。

<子> Browsers' default CSS for HTML elements
https://developer.mozilla.org/en/docs/Web/CSS/length

em
此单位表示元素的计算字体大小。如果在font-size＆gt;上使用属性本身，它表示元素的继承字体大小。此单元通常用于创建可缩放的布局，即使用户更改字体的大小，也可以保持页面的垂直节奏。 CSS属性line-height，font-size，margin-bottom和margin-top通常具有以em表示的值。

Answer 2

要覆盖任何CSS，请将!important表示法添加到样式..

h1{
   font-size:2em !important; 
}

这将覆盖任何浏览器的默认CSS。

关于标题1的CSS3样式

2 个答案: