Не могу разобраться с логикой css, как он работает?

Question

[therealgorbonis]

Задаю стиль
body {
font-family: verdana, tahoma, arial, sans-serif;
}
form input {
font-size: 12px;
font-weight: bold;
}
Во всем документе изменился шрифт на verdana, кроме текстового поля инпута формы

Приходится писать
form input {
font: 12px verdana;
}
И тогда все норм.
Очень хочу понять почему так происходит? Ведь я задал в body шрифт для все странице, а меняется не визде?

Answer 1

[Юрий Лобанов]

Все потому, что у input font-family не inherit по умолчанию, то есть не наследуется, а задан в стилях браузера. Соответственно Ваш стиль перекроет это правило только если Вы конкретно для input укажете font-family, или будете использовать *.
codepen.io/iiil/pen/chtkb

Вы не совсем понимаете принцип наследования. К примеру, если Вы укажете высоту для общей обертки или для body в пикселях, то это не приведет к тому, что все дочерние элементы будут наследовать эту высоту. Скорее всего Вас это не удивит, так как по умолчанию элементы высоту не наследуют. С font-family же Вы удивляетесь потому, что большинство элементов его наследуют, но вот есть исключения.

Comments

[therealgorbonis]

Спасибо большое, теперь более менее понял. А кроме инпута какие есть исключения? И где можно про это все почитать?

[Евгений Петров]

Это потому, что мало кто читал, что такое каскадность.

@therealgorbonis во-первых, задавайте шрифт в html — именно оттуда берётся rem. Во-вторых, пользуйтесь консолью и спецификациями.

[Юрий Лобанов]

@therealgorbonis @Petroveg Вам ответил в общем-то. Спецификации читайте, еще раз почитайте что такое каскадность, ну и так, само со временем придет.
Вы ведь всегда видите то, что верстаете. Ну инпут вот заметили, потом заметите и другие вещи. Только прежде чем вопрос задавать, сначала подумайте, потом погуглите. Если с английским все хорошо, то вообще вряд ли найдете такой вопрос, который не задавался еще.

[hjk]

@therealgorbonis в довесок можно почитать про normalize.css necolas.github.io/normalize.css — там как раз такие вещи исправляются. Но увлекаться не стоит.

[Vladimir T]

www.w3.org/TR/CSS21/propidx.html

[Евгений Петров]

@hjk сколько же там ерунды... Браузеры научились наконец-то поддерживать градацию 100-900, а эти говнокодеры лепят font-weight: bold. Про outline вообще молчу.

[hjk]

@Petroveg хм, а что плохого в font-weight: bold? Это ведь то же самое, что и 700. А с outline что не так? Я немного не понял.

[Евгений Петров]

@hjk плохо то, что bolder, который и стоит по умолчанию, подразумевает переход на 100, а bold всегда на 700. Кому и зачем понадобилось переписывать корректный bolder на топорный bold?

А outline — это возможность видеть активную гиперссылку при навигации клавишами. Лишать этой возможности людей — архиглупость.