CSS: основывать стили на теле или HTML?

Question

Когда я объявлял некоторые базовые стили для своего сайта, я использовал это для тега body. Как например

body {
  font-size: medium;
  line-height: 1.3em;
}

Но я также видел, как люди делают такие вещи с тегом html. И на обоих. Где это должно быть сделано? Должны ли некоторые быть на одном, а другие на другом? Должны ли все быть на одном из них? Или это просто не имеет значения? Или

Answer 1

Мне нравится применять базовые объявления к html. Большую часть времени я использую body в качестве контейнера, например:

html {
 /* Base styles go here */
 font: 14px/1.5 Arial, sans-serif;
 background: darkgreen;
}

body {
 background: lightgreen;
 padding: 0 20px;
 width: 920px;
 margin: 0 auto;
}

Посмотреть демо: http://jsbin.com/atiso3

Большинство людей склонны использовать дополнительные DIV просто для выполнения этого базового поведения. Нет необходимости, когда вы знаете, как использовать html и body в CSS;)

Answer 2

Я бы добавил стилизацию к тегу body, так как он имеет более смысловой смысл (вы не собираетесь стилизовать head, title и т. Д.).

Также я больше не вижу людей, добавляющих стили непосредственно к тегу html, кроме сброса некоторых стилей по умолчанию ...

Answer 3

Исходя из моего личного опыта, единственная ситуация, когда необходимо использовать определенные базовые стили как для html, так и body, - это когда вы делаете какие-то забавные хаки, которые полагаются на ширину или высоту 100% ("липкие" div некоторые такие). Во всех других ситуациях вполне нормально объявлять базовые стили только на body. Другими словами,

html, body {height:100%}

на самом деле может быть необходимо, но

html, body {font-family:Arial}

конечно не будет. В конце концов, все элементы, для которых вам понадобится font-family, в любом случае будут потомками body, поэтому нет смысла указывать его и для html.

Answer 4

html является контейнером для body, поэтому последний будет наследоваться от первого. Будьте осторожны при смешивании:

html, body { font-size: 80%; } сделает размер шрифта body равным 80% из 80% .

Я всегда использую html, но есть проблема с древней поддержкой браузера и / или режимом причуд.

Answer 5

Я бы либо настроился на само тело. Я склонен делать это или использовать базовый стиль div, зависит от того, что я делаю, но помещать его в объект html кажется не интуитивным.

Answer 6

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

В обоих случаях вы также можете использовать элементы формы, так как они обычно наследуют платформу по умолчанию.