Стилизация элемента html в CSS?

20

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

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

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

    
задан Diogo Gomes 07.04.2010 в 16:07
источник
  • Вы должны иметь возможность изменить фон для элемента <body>; Я подозреваю, что вы просто ошиблись по типу орфографии или синтаксиса. –  ewall 07.04.2010 в 16:19
  • Определенно должно быть возможно изменить цвет bg с помощью элемента <body>. Это и есть! –  dscher 07.04.2010 в 16:39

6 ответов

16

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

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

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

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

    
ответ дан Jamie Dixon 07.04.2010 в 16:34
источник
  • +1 для трюка прокрутки –  Diogo Gomes 07.04.2010 в 16:38
  • Какой хакерский трюк. –  Camilo Martin 21.12.2010 в 03:32
  • Для трюка прокрутки я предпочитаю overflow-y: scroll; однако IE8 не поддерживает его. –  Web_Designer 22.01.2012 в 02:56
9

Причина, по которой нам разрешено стилизовать элемент 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's probably a better way to do precisely that, but this works.
  display:table; 
  margin:0 auto; # center the div
}
    
ответ дан Tor Valamo 07.04.2010 в 16:40
источник
  • Что это связано с вопросом OP? Он применяет стиль к html? –  Matt Ball 07.04.2010 в 16:55
  • Он использует стиль для элемента html. –  Diogo Gomes 07.04.2010 в 17:31
  • Точно. Это был пример стилизации элемента html. –  Tor Valamo 07.04.2010 в 17:34
4

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

    
ответ дан Quentin 07.04.2010 в 16:27
источник
  • Проблемы с чем? Я имею в виду, что было бы правильным способом «сделать» этот css? –  Diogo Gomes 07.04.2010 в 16:37
  • Проблемы, как в разделе «Не позволяет вам что-то стилизовать вне тела, и не слишком доволен своим стилем тела определенным образом:« ... если я правильно помню. –  Quentin 07.04.2010 в 16:38
  • Что касается правильного пути - так же, как если бы вы применили его к любому другому элементу. Голова и название по умолчанию не отображаются: none. Они все еще являются частью DOM и (теоретически) доступны для стилизации. Если моя память о времени не мешает мне, я играл с тем, что <title> отображается в окне просмотра еще в те дни, когда Mozilla был браузером в своем собственном праве. –  Quentin 07.04.2010 в 16:40
1

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

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

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

ответ дан ewall 07.04.2010 в 16:17
источник
  • Педанти: это <head>, not <header>. –  Syntactic 07.04.2010 в 16:30
  • Спасибо! Теперь исправлено. –  ewall 07.04.2010 в 16:39
0

Я не верю, что вы можете, но стиль должен

    
ответ дан Owen Orwell 07.04.2010 в 16:21
источник
  • Странно, в моем проекте он пока не работает на тестовой странице, он работает. Я даже удалил большую часть страницы и css. –  Diogo Gomes 07.04.2010 в 16:35
0

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

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

    
ответ дан ChrisR 07.04.2010 в 16:27
источник
  • может ли downvoter plz уточнить, что случилось с этим ответом? Я очень хочу узнать / знать :) –  ChrisR 07.04.2010 в 16:35
  • Возможно, потому что вы сказали тело вместо html дважды, то есть это утверждение неверно: не использовать, чтобы иметь возможность стилизовать элемент body, поскольку он не отображается браузером –  cjk 07.04.2010 в 16:38
  • Ой дерьмо ... ты правда правда ... Я прочитал это как минимум четыре раза ... спасибо за разъяснение! –  ChrisR 07.04.2010 в 16:42
  • И, возможно, потому, что вы можете стилизовать элемент html (как указывали еще несколько ответов), что делает и остальную часть первого абзаца неправильной. –  Quentin 07.04.2010 в 16:43