Стилизовать элемент HTML в CSS?

20

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

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

Редактировать : На самом деле, я до сих пор не обнаружил проблемы, связанной с тем, что, когда я добавляю файл reset.css, фон становится белым, а когда я удаляю его, он возвращается к нормальному состоянию. Еще инспектор Chrome говорит, что фон нормальный. Кстати, это становится не по теме. : p
Редактировать 2 : виновником был тип документа. Каким-то образом он сделал стиль html в css-reset визуализации после стиля body в моей таблице стилей. Может быть, я должен открыть вопрос по этому поводу.

Тип документа: <!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 другой цвет фона (создав эффект «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
}
    
ответ дан 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> для пары случаев: (a) потому что все его дочерние элементы будут наследовать этот стиль, и (b) в особых случаях, таких как трюк с полосой прокрутки, о котором упоминал Джейми Диксон.

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

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

    
ответ дан 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