Применение стилей к тегу body будет применено ко всей странице, поэтому
body { font-family: Verdana }
будет применяться ко всей странице. Это также может быть сделано с
* {font-family: Verdana}
который будет применяться ко всем элементам и, следовательно, будет иметь тот же эффект.
Я понимаю принцип, что в первом случае стиль применяется к одному тегу, тексту для всей страницы, тогда как во втором примере шрифт применяется к каждому отдельному элементу HTML. Я спрашиваю, какова практическая разница в этом, каковы последствия и какова причина, ситуация или наилучшая практика, которая приводит к использованию одного над другим.
Одним из побочных эффектов, безусловно, является скорость (+1 Роб). Меня больше всего интересует фактическая причина выбора одного из других с точки зрения функциональности.
design-patterns
coding-style
html
css
Майкл Даррант
источник
источник
Ответы:
Функциональные различия между этими двумя вариантами выбора CSS ... (мое мнение)
тело
Универсальный селектор * (все элементы)
Предложения
источник
Попробуйте что-то вроде этого
против
И посмотрите, какие стили применяются к ячейкам таблицы.
Существует различие между «применяется ко всему документу» и «применяется к каждому элементу документа», когда вы имеете дело с каскадными таблицами стилей.
Применение каскадного стиля к телу применяет его ко всем тегам внутри тела, пока тег не перезапишет его. Затем перезаписанный стиль применяется ко всем тегам в этом.
Однако есть некоторые стили, которые не каскадируются, такие как margin и padding (обычно там, где это не имеет смысла). Они могут быть применены только к определенным тегам, и здесь подстановочный знак может оказаться полезным (хотя и редко).
Большинство не каскадных стилей также имеют значение наследования (например,
margin: inherit
), что означает «принять значения родительского тега».источник
Я забыл все подробности, но с помощью селектора * производительность снижается, поскольку каждый элемент оценивается, когда браузер анализирует CSS и применяет стиль. iirc, устанавливая шрифт, в данном случае, просто для родителя, делает одну ссылку для каждого элемента, и дополнительная работа не требуется.
Есть и другие проблемы, но, опять же, я не помню их все и не использовал * в течение многих лет.
источник
Общее руководство для хорошего дизайна CSS должно быть как можно более конкретным, но не более.
Итак, в вашем примере применение стиля к элементу body будет как можно более конкретным и определенно более конкретным, чем селектор '*'.
источник
Как уже упоминалось,
body { font-family: Verdana }
будет выбрать шрифт Verdena только те элементы , которые наследуют вfont-style
собственность от своих родителей, что все его родителей тоже наследуют свойство eventualy образуютbody
элемент, и* {font-family: Verdana}
будет выбирать шрифт Verdena для всех элементов. Я хотел бы проиллюстрировать разницу на примере:Используя селектор тела:
Используя универсальный селектор
*
:Используйте коды css и html примеров, которые вы поймете, что
<input>
элемент вообще не наследует стиль шрифта и, следовательно, все, что вы вводите в форму, получает стиль шрифта по умолчанию для таблицы стилей агента пользователя. Во втором примере универсальный селектор*
явно устанавливает стиль шрифта для каждого элемента, включаяinput
элемент.источник