Стилизировать элемент `<html>` в CSS? - PullRequest
Новая
       11

Стилизировать элемент `<html>` в CSS?

24 голосов
/ 07 апреля 2010

Может кто-нибудь объяснить мне, почему мы можем стилизовать элемент html?
В чем различия между ним и body?

Я обычно вижу учебники и несколько веб-сайтов, использующих body и никогдаhtml, я узнал об этом только при использовании YUI 3: сброс CSS , так как изменение фона в body не сработало.

Редактировать : На самом деле, я до сих пор не обнаружил проблемы, связанной с тем, что, когда я добавляю reset.css, фон становится белым, когда я удаляю его, он возвращается к нормальному.Еще инспектор Chrome говорит, что фон нормальный.Кстати, это становится не по теме.: p
Редактировать 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">

Ответы [ 6 ]

18 голосов
/ 07 апреля 2010

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

Самый заметный стиль, который вы, вероятно, увидите, это 

html,body{
   min-height:101%;
}

Это используется для того, чтобы полосы прокрутки в браузерах, таких как Firefox, всегда отображались на странице. Это останавливает смещение страниц влево и вправо при переходе между длинными и короткими страницами.

11 голосов
/ 07 апреля 2010

Причина, по которой нам разрешено стилизовать элемент html, заключается в том, что он является элементом DOM, как и любой другой. Все элементы DOM могут быть стилизованы под нечто, чем они не являются, как контейнер. Возьмите этот пример: 

<html><body>This is my page.</body></html>

Использование CSS для ограничения ширины тела до 80%, установка границ для тела и назначение html другого цвета фона (создание эффекта «off page») будет вполне приемлемым, сохраняя семантику разметки без изменений разделить беспорядок.

Вот метод, который я обнаружил для центрирования контейнеров (по вертикали и по горизонтали) на экране без использования тонны элементов или таблиц или даже необходимости знать размер центрированного контейнера. 

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's probably a better way to do precisely that, but this works.
  display:table; 
  margin:0 auto; # center the div
}
4 голосов
/ 07 апреля 2010

Вы можете стилизовать элемент html (черт возьми, вы можете head, title { display: block; }, если хотите), но поддержка браузера немного слабая (IIRC, Internet Explorer <8 имеет проблемы). </p>

1 голос
/ 07 апреля 2010

Я бы сказал, что <html> не является видимым элементом как таковым, и он содержит разделы для семантических (например, <head>) и презентационных данных (<body>).

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

Но люди применяют стили к элементу <html> для пары случаев: (a) потому что все его дочерние элементы унаследуют этот стиль, и (b) в особых случаях, таких как трюк с полосой прокрутки, упомянутый Джейми Диксоном. 1010 *

0 голосов
/ 07 апреля 2010

html - это содержащий элемент для всего документа, он содержит <body>, который отображается браузером, и <head>, который содержит метаинформацию на странице / документе, которую вы просматриваете. На самом деле бесполезно иметь возможность стилизовать элемент html, поскольку он не отображается браузером.

Однако его можно использовать для создания селекторов CSS с помощью (например, html div.dataView { color: red })

0 голосов
/ 07 апреля 2010

Я не верю, что вы можете, но стиль <body> должен работать на вас

...