Стилизация элемента `<html>` в CSS?
Может кто-нибудь объяснить мне, почему мы можем стилить элемент html
?
Каковы различия между ним и body
?
Я обычно вижу учебники и несколько веб-сайтов, использующих body
и никогда html
, я нашел об этом только при использовании YUI 3: CSS Reset, поскольку изменение фона в body
не сработало.
Изменить: На самом деле, я все еще не нашел проблемы в этом вопросе, когда я добавляю reset.css, фон становится белым, когда я удаляю его, он возвращается в нормальное состояние. Тем не менее, инспектор Chrome говорит, что фон нормальный. Кстати, это выходит из темы.: РЗабастовкa >
Редактировать 2: Преступником был тип. Как-то он сделал стиль html
в рендере css- reset после стиля body
в моей таблице стилей. Может быть, я должен открыть вопрос относительно этого.
Doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ответы
Ответ 1
Довольно часто вы обнаружите, что люди стилируют элемент HTML, так как он оказывает влияние на способ отображения страницы.
Самый известный стиль, который вы, вероятно, увидите, -
html,body{
min-height:101%;
}
Это используется, чтобы гарантировать, что полосы прокрутки в браузерах, таких как Firefox, всегда отображаются на странице. Это останавливает перемещение страницы влево и вправо при изменении между длинными и короткими страницами.
Ответ 2
Причина, по которой нам разрешено стилизовать элемент html, заключается в том, что это элемент DOM, как любой другой. Все элементы DOM могут быть стилизованы, чтобы быть тем, чем они не являются, например, контейнером. Возьмите этот пример:
<html><body>This is my page.</body></html>
Использование CSS для ограничения тела до 80% ширины, установка границ на тело и предоставление html другого цвета фона (создание эффекта "вне страницы" ) было бы вполне приемлемым, сохраняя семантику разметки без изменений на беспорядок.
Здесь была найдена техника для центрирования контейнеров (вертикально и горизонтально) на экране без использования тонны div или таблиц или даже для того, чтобы знать размер центрированного контейнера.
html {
display:table;
width:100%;
height:100%;
}
body {
display:table-cell;
vertical-align:middle;
}
body > div {
# "shrink wraps" the div so you don't have to specify a width.
# there probably a better way to do precisely that, but this works.
display:table;
margin:0 auto; # center the div
}
Ответ 3
Вы можете стилизовать элемент html
(если вам нравится), но поддержка браузера немного слаба (у IIRC, Internet Explorer & 8 есть проблемы).
Ответ 4
Отправлено, я бы сказал: <html>
не является видимым элементом как таковым и содержит разделы для семантических (например, <head>
) и данных представления (<body>
).
С другой стороны, <body>
является блоком для видимых элементов, поэтому ему может быть присвоен стиль презентации.
Но люди применяют стили к элементу <html>
для пары случаев: (а), потому что все его дочерние элементы наследуют этот стиль и (б) в особых случаях, таких как трюк прокрутки, который упоминал Джейми Диксон.
Ответ 5
Я не верю, что вы можете, но стиль <body>
должен работать для вас
Ответ 6
html является содержащим элементом для всего документа, он содержит <body>
, который является тем, что отображается браузером и <head>
, который содержит метаинформацию на просматриваемой странице/документе. На самом деле не имеет смысла стирать элемент html, поскольку он не отображается браузером.
Однако его можно использовать для создания селекторов css (например, html div.dataView { color: red }
)