Должны ли глобальные стили CSS быть установлены в элементе html или в элементе body?

Иногда я вижу, что люди применяют глобальные стили css к html, иногда я вижу, что они применяют их к body, как с сырым css, так и с javascript.

Есть ли различия между этими двумя? Каков стандарт для создания глобального стиля css? Есть ли что-нибудь, что я должен знать при выборе между ними?

Ответ 1

Я предполагаю, что "глобальная стилизация страниц" здесь относится к вещам, таким как шрифты, цвета и фон.

Лично я применяю глобальный стиль страницы, по большей части, к body и простым селекторам элементов (p, h1, h2, h3..., input, img и т.д.). Эти элементы более тесно связаны с представлением пользователю содержимого HTML-страницы.

Мое логическое обоснование для этого простое: атрибуты представления bgcolor, background, text, topmargin, leftmargin и другие были переданы элементу body, а не элементу html. Эти атрибуты теперь преобразуются в их соответствующие правила CSS с крайне низким приоритетом в каскаде:

UA может выбрать для восприятия презентационных атрибутов в исходном документе HTML. Если это так, эти атрибуты переводятся в соответствующие правила CSS со спецификацией, равной 0, и обрабатываются так, как если бы они были вставлены в начале таблицы стилей автора.

Большинство, если не все реализации, о которых я знаю, преобразуют их в правила CSS на body, основываясь на их эквивалентах HTML. Другие, такие как link, alink и vlink, будут соответственно соответствовать правилам a:link, a:active и a:visited.

Конечно, следует отметить, что сам CSS сам по себе не имеет в себе семантики, поскольку сам язык стилей полностью отделен от структуры содержимого документа HTML. Хотя введение в CSS2.1 охватывает основы стилизации HTML-документа, обратите внимание, что раздел вызывает себя ненормативным (или информативным); это означает, что он не устанавливает жесткие и быстрые правила для исполнителей CSS. Вместо этого он просто предоставляет информацию для читателей.

Тем не менее, некоторые типы могут применяться к html для изменения поведения в режиме просмотра. Например, чтобы скрыть полосы прокрутки страницы, используйте:

html {
    overflow: hidden;
}

Вы также можете применять правила как для html, так и для body для интересных эффектов; см. следующие вопросы для деталей и примеров:

Обратите внимание, что html не является окном просмотра; в окне просмотра устанавливается исходный содержащий блок, в котором находится html. Этот исходный содержащий блок не может быть нацелен на CSS, потому что в HTML корневой элемент html.

Обратите также внимание, что технически нет никакой разницы между применением свойств к html и body, которые по умолчанию унаследованы, например font-family и color.

И последнее, но не менее важное: вот отличная статья , в которой подробно описываются различия между html и body с точки зрения CSS. В заключение (цитируется в первом разделе):

Элементы html и body представляют собой отдельные объекты уровня блока, в родительские/дочерние отношения.

Высота и ширина элемента html контролируются окном браузера.

Это элемент html, который имеет (по умолчанию) overflow:auto, вызывая если необходимо, появятся полосы прокрутки.

Элемент body (по умолчанию) position:static, что означает, что позиционированные дети расположенный по отношению к htmlэлементной системы координат.

Почти во всех современных браузерах встроенное смещение от края страница применяется через margin on элемент body, а не padding на html.

В качестве корневого элемента html более тесно связан с окном просмотра браузера, чем body (поэтому он говорит, что html имеет overflow: auto для полос прокрутки). Обратите внимание, однако, что полосы прокрутки не обязательно генерируются самим элементом html. По умолчанию это окно просмотра, которое генерирует эти полосы прокрутки; значения overflow просто передаются (или распространяются) между body, html и окном просмотра, в зависимости от установленных вами значений. Детали всего этого описаны в спецификации CSS2.1, которая говорит:

UA должны применять свойство переполнения в корневом элементе к окну просмотра. Когда корневой элемент является элементом HTML "HTML" или элементом "html" XHTML, и этот элемент имеет элемент HTML "BODY" или элемент "тело" XHTML в качестве дочернего элемента, пользовательские агенты вместо этого должны применять свойство "переполнение" от первого такого дочернего элемента до окна просмотра, если значение в корневом элементе "видимо". Значение "видимое" при использовании для окна просмотра должно интерпретироваться как "авто". Элемент, из которого распространяется значение, должен иметь использованное значение для "переполнения" "видимого".

Последняя точка пули, вероятно, имеет свои корни в вышеупомянутых атрибутах topmargin и leftmargin элемента body.

Ответ 2

Если вы хотите стилизовать только содержимое, которое будет отображаться, таргетинг на элемент <body> сохраняет правила стиля ненужным уровнем каскадирования.

Есть ли причина, по которой вы хотите применить стили к тегам <title>, <meta>, <script> и т.д.? Это произойдет путем таргетинга <html>.