2012-01-26 2 views
1

Может ли кто-нибудь объяснить мне, почему размер шрифта не наследуется тегом p, а тег div и тэг, вложенный в него? Как и якорный тег? Разве они не наследуют перезаписанный размер шрифта тела: 160%, становятся все больше и больше?Почему шрифты не становятся все больше и больше? Наследуется ли наследование шрифтов?

Первая часть css является частью стиля перезагрузки Эрика Мейера, как вы знаете. Если мое понимание правильное, не следует ли помещать размер шрифта ниже шрифта только один, чтобы он вступил в силу? Разве это не просто перезаписывается благодаря каскадному эффекту?

На самом деле, если вы попытаетесь изменить этот размер шрифта: 100%; к чему-то другому (например: 200%), вы заметите, что он не имеет визуального эффекта (по крайней мере, не сразу).

Это шрифт: inherit; стиль, который делает то, о чем я не знаю? Это делает меня совершенно безумным ... не считая этого.

Спасибо заранее.

DEMO: 'http://tinkerbin.com/GMEyX3is'

<head> 
    <style> 
    html, body, div, span, applet, object, iframe, 
    h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
    a, abbr, acronym, address, big, cite, code, 
    del, dfn, em, img, ins, kbd, q, s, samp, 
    small, strike, strong, sub, sup, tt, var, 
    b, u, i, center, 
    dl, dt, dd, ol, ul, li, 
    fieldset, form, label, legend, 
    table, caption, tbody, tfoot, thead, tr, th, td, 
    article, aside, canvas, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section, summary, 
    time, mark, audio, video { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     outline: 0; 
     font-size: 100%; 
     font: inherit; 
     vertical-align: baseline; 
    } 

    body{ 
     font-size: 160%; 
    } 
    </style> 
</head> 

<body> 
    <p>Paragraph <a href="#">OUTSIDE</a> of div</p> 

    <div> 
    <p>Paragraph INSIDE of div</p> 
    </div> 
</body> 

ответ

2

Значение font-size: 100% здесь игнорируется, так как значение font: inherit (появляется позже) отменяет его. Параметр font всегда задает все свойства, связанные с шрифтом, и включает в себя font-size: inherit. Унаследованное значение обычно зависит от свойства, но это в большинстве случаев, и в этом случае значение вычисляет значение родительского элемента. Таким образом, независимо от значения, установленного в font-size для body, будет использоваться значение в пикселях или точках в зависимости от браузера. Именно это вычисленное значение, а не процент, наследуется.

Браузеры, которые не поддерживают значение inherit, просто проигнорируют эту настройку и используют font-size: 100%, что, конечно, приводит к тому же размеру.

+0

Итак, Jukka K. Korpela, если я правильно понял вас, размер шрифта: 100% в таблице стилей сброса Эрика Мейера должен только скрывать браузеры, которые не поддерживают наследуемое значение? Но это все еще оставляет вес шрифта из заголовков полужирным. Он игнорирует это, полагаю, ради простоты. – banzomaikaka

+0

Ознакомьтесь с собственными объяснениями Эрика по адресу http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/. (Я не претендую на то, чтобы понять все его рассуждения, и я не настроен на изменение стилей.) –

+0

Спасибо.Да, я уже прошел через эту страницу (это и несколько других), но не нашел упоминания о том, как использовать свойство font-size. Но вы, во всяком случае, очистили мои сомнения. Большое спасибо, сэр. Хех. ;) – banzomaikaka

1

Вы установите размер шрифта на body быть 160%. Это означает, что все элементы на странице теперь будут иметь размер шрифта, начиная с 60% больше, чем базовый шрифт, используемый браузером.

Когда размер шрифта установлен на 100% в стилях сброса, это в основном означает, что размер шрифта для всех элементов будет таким же, как размер базового шрифта браузера. Поэтому даже теги заголовков, такие как <h1>, <h2> ..., будут иметь одинаковый размер шрифта. Чтобы размер шрифта стал больше с каждым вложенным элементом, вам нужно будет определить размер шрифта на div и, если требуется, p. Так что, возможно, вы можете сделать что-то вроде:

div{ 
    font-size:200%; 
} 

p{ 
    font-size:200%; 
} 

Если вы определяете размер шрифта как 100%, он будет наследовать размер шрифта из его родительского элемента.

+0

Да, я понимаю. То, что на самом деле сбивало меня с толку, не знало, что значение font-inherit было рассчитанным значением, а не фактическим процентом. Спасибо;) – banzomaikaka

Смежные вопросы