h1标签小于h2，全部插入节标签 [英] h1 tag smaller than h2, all insde a section tag

问题描述

我的h1标签，它是一个标签标签，比h2标签小。标签外侧的h1标签尺寸正确。我一直在浏览我的CSS页面，并没有发现任何可以实现这一点的事情。这是我的CSS页面：

  body 
 {
字体：100％/ 1.4 Verdana，Arial， Helvetica，sans-serif; 
背景颜色：＃42413C; 
保证金：0; 
 padding：0; 
颜色：＃000; 
 background-image：url（images / mass_effect_1_citadel_dreamscene_by_droot1986-d5sw7hu.jpg）; 
} 
 
 a img 
 {
 border：none; 
} 
 
 .container 
 {
 width：960px; 
背景颜色：＃192370; 
 margin：0 auto; 
} 
 
标题
 {
 background-color：＃050a2e; 
} 
 
 .sidebar1 
 {
 float：left; 
 width：175px; 
背景颜色：＃2236d1; 
 padding-bottom：10px; 
边框：实心的薄黑色; 
 text-align：center; 
} 
 
 .content 
 {
 padding：10px 0; 
 width：780px; 
 float：right; 
边框：实心的薄黑色; 
} 
 
页脚
 {
填充：10px 0; 
背景颜色：＃050a2e; 
职位：亲属; 
明确：两者; 
 text-align：center; 
} 
 
标题，部分，页脚，旁边，文章，数字
 {
 display：block; 
颜色：白色; 
} 
 
 a：link 
 {
 text-decoration：none; 
颜色：＃d1bd22; 
 font-size：1.3em; 
} 
 
 a：visited 
 {
 text-decoration：none; 
颜色：白色; 
 font-size：1.3em; 
} 
 
 a：hover 
 {
 text-decoration：underline; 
颜色：＃d1bd22; 
 font-size：1.3em; 
} 
 
 a：活动
 {
 text-decoration：underline; 
颜色：白色; 
 font-size：1.3em; 
 
 $ / code> 

任何帮助将不胜感激

h1 >部分元素以较小的字体显示。这是由支持部分和建议呈现。 部分元素已被定义，因此在它内部，一个 h1 元素是段落的标题，所以相对于页面作为整体而言，它处于第二级（或者甚至在较低级别，如果部分元素已嵌套）。

<对于这种方法的适用性有各种各样的意见，但这正是HTML5草案所说的，以及一些浏览器已经实施的内容。另一方面，旧的浏览器忽略了这些规则，所以这种方法实际上并不稳健。这是更安全的（根据HTML5，完全可以接受）为节标题使用 h2 。

My h1 tag, which is insode a section tag, is small than an h2 tag. The h1 tag was the correct size when out side the section tag. I keep looking through my CSS page and am finding nothing that would make this happen. Here is my CSS page:

body 
{
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #42413C;
    margin: 0;
    padding: 0;
    color: #000;
    background-image: url(images/mass_effect_1_citadel_dreamscene_by_droot1986-d5sw7hu.jpg);
}

a img 
{
    border: none;
}

.container 
{
    width: 960px;
    background-color: #192370;
    margin: 0 auto;
}

header 
{
    background-color: #050a2e;
}

.sidebar1 
{
    float: left;
    width: 175px;
    background-color: #2236d1;
    padding-bottom: 10px;
    border: solid thin black;
    text-align: center;
}

.content 
{
    padding: 10px 0;
    width: 780px;
    float: right;
    border: solid thin black;
}

footer 
{
    padding: 10px 0;
    background-color: #050a2e;
    position: relative;
    clear: both;
    text-align: center;
}

header, section, footer, aside, article, figure 
{
    display: block;
    color: white;
}

a:link
{
    text-decoration: none;
    color: #d1bd22;
    font-size: 1.3em;
}

a:visited
{
    text-decoration: none;
    color: white;
    font-size: 1.3em;
}

a:hover
{
    text-decoration: underline;
    color: #d1bd22;
    font-size: 1.3em;
}

a:active
{
    text-decoration: underline;
    color: white;
    font-size: 1.3em;
}

Any help would be greatly appreciated

解决方案

If you test the situation without your style sheet, you will see that h1 inside a section element appears in a smaller font. This is caused by a browser style sheet, in browsers that support section and its suggested rendering in HTML5. The section element has been defined so that within it, an h1 element is a heading for the section, so relative to the page as a whole, it is at the 2nd level (or even at a lower level, if section elements have been nested).

There are various opinions on the adequacy of that approach, but that’s what HTML5 drafts say and what some browsers have implemented. On the other hand, old browsers ignore such rules, so the approach is not practically robust. It is safer (and quite acceptable according to HTML5) to use h2 for section headings.

这篇关于h1标签小于h2，全部插入节标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！