Ответ 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
.