Почему размер H1 внутри элемента section отличается?

Я очень новый новичок в HTML5 даже в HTML. Меня смущает заголовок, который используется HTML-кодом, это мой фрагмент кода:

<body>
  <header>
    <h1>Text A</h1> 
  </header>

  <section>
    <h1>Text B</h1>
    <article>
      <header>
        <hgroup>
          <h1>Text C</h1>
          <h2>Text C2</h2>
        </hgroup>
       </header>

Хорошо, давайте перейдем к теме, мой вопрос;

  1. заголовок ‹h1› внутри ‹header> части ‹body> намного больше, чем ‹h1> внутри части ‹section>, которая намного больше, чем ‹h1> внутри ‹article> части ‹section>. Другими словами: Текст A> Текст B> Текст C, даже если они используют один и тот же заголовок.

  2. почему текст C2 намного больше, чем текст C, хотя текст C2 использует ‹h2>, а текст C использует ‹h1>, и они находятся в одном месте?

Это какие-то баги? Я, кстати, пользуюсь браузером Firefox. Заранее спасибо.


html firefox html-heading
person Yagami    schedule 10.10.2014    source источник
comment
Какой-нибудь из этих ответов сработал для вас?   -  person    schedule 12.10.2014
comment
Возможный дубликат тега h1 меньше, чем h2, все внутри тег раздела   -  person Joe    schedule 20.02.2017

Ответы (2)


arrow_upward
5
arrow_downward

JSFiddle.

Это просто структура DOM.

потому что другой элемент имеет другой стиль по умолчанию для наследования.
Эта ссылка формирует MDN.

<h1>Text A</h1>

<header>
     <h1>Text A</h1> 
</header>
<section>
    <header>
         <h1>Text A</h1>

    </header>
</section>
<article>
    <header>
         <h1>Text A</h1>
          <section>
              <header>
                  <h1>Text A</h1>
              </header>
          </section>
    </header>
</article>
person Todd Mark    schedule 10.10.2014
comment
Чтобы добавить к ответу Тодда, если вы поместите h1 {font-size: 2em;} в свой CSS, все ваши H1 будут одного размера. Вы можете стилизовать их по-разному, используя разные селекторы. Например: section header h1 {font-size: 3em;} будет стилизовать только те H1, которые находятся внутри HEADER, которые находятся внутри SECTION. - person Bob Brown; 10.10.2014
comment
@BobBrown Кстати, у всех браузеров свой стиль. если вы используете h1{font-size:2em;}. На самом деле вы используете CSS для определения DOM. Но в чистом html браузер всегда отображает DOM. - person Todd Mark; 10.10.2014
comment
Итак, я открыл его в IE11, тогда стиль в порядке, для размера текста A = размера текста B = размера текста C (используя ‹h1›), затем размера текста C › размера текста C2 (как ‹h1› › ‹h2›), так что тогда это зависит от нашего браузера. Но это сложно, так как же нам написать наш код, чтобы ВЕСЬ браузер интерпретировал наш код одинаково, для этого случая в заголовке? - person Yagami; 10.10.2014
comment
@Yagami: см. мой комментарий о CSS. - person Bob Brown; 10.10.2014
comment
Хорошо, я понял, Боб, так что речь идет о создании дополнительного кода с помощью CSS. Пока я просто пропускаю это, но, кстати, я понимаю его суть. - person Yagami; 10.10.2014
comment
@ToddMark Ссылка MDN, которую вы разместили, интересна, но она не отвечает на вопрос, почему два элемента h1 имеют разные размеры. В своем ответе вы показываете элементы h1 в разных местах вложенности, но не объясняете, почему это может привести к тому, что h1 будут иметь разные размеры. section, article и т. д. не имеют настройки font-size по умолчанию, поэтому не может быть, чтобы h1 внутри section что-то наследовало от него. - person ; 10.10.2014
comment
@ToddMark - обратите внимание, что ваш HTML недействителен. Вы не можете иметь заголовок, являющийся потомком другого заголовка. - person Alohci; 10.10.2014
comment
Кстати, все браузеры имеют собственный стиль. Правильным термином будет таблица стилей пользовательского агента. - person ; 28.05.2016

arrow_upward
9
arrow_downward

Правила по умолчанию для h1 отличаются, если он находится внутри section. Это по дизайну. См. следующее правило «пользовательского агента» Chrome по умолчанию:

:-webkit-any(article,aside,nav,section) h1 { font-size: 1.5em; }

Вышеприведенное переопределяет правило Chrome по умолчанию для h1, которое

h1 { font-size: 2em; }

Вы можете указать свое собственное правило h1, которое переопределит вышеуказанное правило, поскольку ваши собственные правила имеют более высокий приоритет, чем правила пользовательского агента:

h1 { font-size: 2em; }

Это не связано ни с абсолютными, ни с относительными размерами шрифта, ни с унаследованными размерами шрифтов. Не может быть, чтобы h1 внутри section было меньше, потому что оно наследуется от section, потому что section не имеет встроенного размера шрифта.

Причина того, что Text C2 больше, чем Text C, заключается в том, что упомянутое выше правило по умолчанию применяется только к h1 элементам внутри article элементов, но не к h2 по причинам, хорошо известным разработчикам браузеров. Вы можете убедиться в этом, изучив каскад в своем любимом инспекторе DOM/style.

Кстати, приведенный выше :-webkit-any — это псевдокласс, специфичный для Chrome, который соответствует любому из вложенных селекторов, поэтому вам не нужно писать article h1, aside h1, nav h1, section h1. В FF эквивалентом будет :-moz-any. Это не стандарт, и в CSS4 он будет реализован как псевдокласс :matches.

person Community    schedule 10.10.2014