Stile dell'elemento `<html>` in CSS?

Qualcuno può spiegarmi perché possiamo modellare l'elemento html?
Quali sono le differenze tra questo e body?Stile dell'elemento `<html>` in CSS?

Io di solito vedo tutorial e siti web che utilizzano molteplici body e mai html, ho trovato solo su di esso quando si utilizza YUI 3: CSS Reset dal cambiare lo sfondo in body non ha funzionato.

Edit: In realtà, non ho ancora trovato il problema per quanto riguarda che, quando aggiungo il reset.css lo sfondo diventa bianco, quando rimuovo ritorna alla normalità. Tuttavia, l'ispettore di Chrome afferma che lo sfondo è quello normale. A proposito, questo è fuori tema. : p
Modifica 2: Il colpevole era il doctype. In qualche modo ha reso lo stile html nel rendering css-reset dopo lo stile body nel mio foglio di stile. Forse dovrei aprire una domanda su questo.

Doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

fonte

2010-04-07 Diogo Gomes

Dovresti poter modificare lo sfondo per l'elemento ''; Sospetto che tu abbia appena commesso un errore sulla falsariga o sulla sintassi. – ewall

Decisamente dovrebbe essere in grado di cambiare il colore bg con l'elem . Questo è quello che è! – dscher

Molto spesso troverete persone styling l'elemento HTML in quanto ha un effetto sul modo in cui la pagina viene visualizzata.

Lo stile più notevole è probabile che per vedere è

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

Questo viene utilizzato per garantire che le barre di scorrimento in browser come Firefox, mostrano sempre sulla pagina. Ciò interrompe lo spostamento della pagina verso sinistra e verso destra quando si passa da una pagina lunga a una pagina breve.

fonte

2010-04-07 14:34:34

+1 per il trucco della barra di scorrimento –

Che trucco hacky. –

Per il trucco della barra di scorrimento preferisco 'overflow-y: scroll;' tuttavia IE8 non lo supporta. –

Offhand, direi: <html> non è un elemento visibile per sé, e contiene sezioni per semantica (ad esempio <head>) e dati di presentazione (<body>).

D'altra parte, <body> è un blocco per elementi visibili, quindi può essere assegnato uno stile di presentazione.

Ma le persone applicano gli stili all'elemento <html> per un paio di casi: (a) perché tutti i suoi elementi figli erediteranno quello stile e (b) in casi speciali come il trucco della barra di scorrimento menzionato da Jamie Dixon.

fonte

2010-04-07 14:17:24 ewall

Pedanteria: è , non

. – Syntactic

Grazie! Ora risolto. – ewall

Io non credo che si possa, ma lo styling <body>dovrebbe lavoro per voi

fonte

2010-04-07 14:21:03

È strano, sul mio progetto non funziona ancora su una pagina di test solo per questo, * funziona *. Ho persino rimosso la maggior parte della pagina e dei CSS. –

È possibile lo stile l'elemento html (diamine è possibile head, title { display: block; } se vi piace), ma il supporto del browser è un po 'debole (IIRC , Internet Explorer < 8 presenta problemi).

fonte

2010-04-07 14:27:07 Quentin

Problemi con cosa? Voglio dire, quale sarebbe il * modo * corretto per "rendere" quel css? –

Problemi come in "Non ti lascia disegnare nulla al di fuori del corpo, e non è troppo contento del tuo styling del corpo in certi modi" ... se non ricordo male. – Quentin

Per quanto riguarda il modo corretto - lo stesso come se lo si fosse applicato a qualsiasi altro elemento. La testa e il titolo sono di default visualizzati come 'display: none'. Fanno ancora parte del DOM e (in teoria) sono disponibili per lo styling. Se il mio ricordo del tempo non mi sta deludendo, stavo armeggiando per avere il '' visualizzato nel viewport nei giorni in cui Mozilla era un browser a sé stante. – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/19068/">Quentin</a></span> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="1038284119" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">0<i class="fa fa-thumbs-up"></i></span> </div> <div class="post-offset"> <div class="answer fmt"> <p>html è l'elemento che contiene l'intero documento, contiene lo <code class="prettyprint-override"><body></code> che è ciò che viene reso dal browser e <code class="prettyprint-override"><head></code> che contiene meta informazioni sulla pagina/documento che si sta visualizzando. In realtà non ha senso essere in grado di disegnare l'elemento html dal momento che non è reso dal browser.</p> <p>Può tuttavia essere utilizzato per costruire voi CSS selettori con (<code class="prettyprint-override">html div.dataView { color: red }</code> per esempio)</p> </div> <div class="post-info"> <div class="post-meta row"> <p class="text-secondary col-lg-6"> <span class="source"> <a rel="noopener" target="_blank" href="https://stackoverflow.com/q/2593254">fonte</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2010-04-07 14:27:24</span> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/187018/">ChrisR</a></span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div>  <div class="comments"> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+1</span></div> <div class="col-lg-11"> <p class="commenttext">può il downvoter plz elaborare che cosa non va in questa risposta? Sono impaziente di imparare/sapere :) – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/187018/">ChrisR</a></span> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+3</span></div> <div class="col-lg-11"> <p class="commenttext">Forse perché hai detto il corpo invece di html due volte, il che significa che questa affermazione è falsa: 'Non serve essere in grado di modellare l'elemento del corpo poiché non è visualizzato dal browser' – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/52201/">cjk</a></span> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">Aw crap ... sei così vero ... l'ho letto almeno quattro volte ... grazie per aver chiarito! – <span class="text-secondary"> <small> <a rel="noopener" target="_blank" href="https://stackoverflow.com/users/187018/">ChrisR</a></span> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> <article class="board-top-1 padding-top-10"> <div class="post-col vote-info"> <span class="count">9<i class="fa fa-thumbs-up"></i></span> </div> <div class="post-offset"> <div class="answer fmt"> <p>Il motivo per cui è consentito lo stile dell'elemento html è perché è un elemento DOM come qualsiasi altro.Tutti gli elementi DOM possono essere disegnati per essere qualcosa che non sono, come un contenitore. Prendete questo esempio:</p> <pre><code class="prettyprint-override"><html><body>This is my page.</body></html> </code></pre> <p>Utilizzo di CSS per limitare la larghezza del corpo al 80%, l'impostazione delle frontiere sul corpo e dando il codice html di un colore di sfondo diverso (creando un effetto "off page") sarebbe perfettamente accettabile, mantenendo la semantica del markup è intatta senza ricorrere al div-clutter.</p> <p>Ecco una tecnica che ho scoperto per centrare i contenitori (verticalmente e orizzontalmente) sullo schermo senza utilizzare tonnellate di div o tabelle, o anche dover conoscere la dimensione del contenitore centrato.</p> <pre><code class="prettyprint-override">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 } </code></pre> </div> <div class="post-info"> <div class="post-meta row"> <p class="text-secondary col-lg-6"> <span class="source"> <a rel="noopener" target="_blank" href="https://stackoverflow.com/q/2593360">fonte</a> </span> </p> <p class="text-secondary col-lg-6"> <span class="float-right date"> <span>2010-04-07 14:40:37</span> </p> <p class="col-12"></p> <p class="col-12"></p></div> </div>  <div class="comments"> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">Cosa c'entra questo con la domanda dell'OP? Applica lo stile a 'html'? – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+0</span></div> <div class="col-lg-11"> <p class="commenttext">Utilizza lo stile per l'elemento html. – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> <div itemprop="comment" class="post-comment"> <div class="row"> <div class="col-lg-1"><span class="text-secondary">+2</span></div> <div class="col-lg-11"> <p class="commenttext">Esattamente. Era un esempio di stile dell'elemento html. – <span class="text-secondary"> <small> <span></span> </small> </span> </p> </div> </div> </div> </div> </div> </article> </div> <div class="clearfix"> </div> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-6208739752673518" data-ad-slot="1575177025"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="padding-top-10"></div> </div> </div> <script type="text/javascript" src="http://img.uwenku.com/uwenku/script/side.js?t=1644592048671"></script> <script type="text/javascript" src="http://img.uwenku.com/uwenku/plugin/highlight/highlight.pack.js"></script> <link href="http://img.uwenku.com/uwenku/plugin/highlight/styles/docco.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $('pre').each(function(i, e) { hljs.highlightBlock(e, "<span class='indent'> </span>", false) }); </script> <div class="col-lg-3 col-md-4 col-sm-5"> <div id="rightTop"> <div class="row"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6208739752673518" data-ad-slot="5415218910" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="row sidebar panel panel-default"> <div class="panel-heading font-bold"> Ultima domanda </div> <div class="m-b-sm m-t-sm clearfix"> <ul class="side_article_list"> <li class="side_article_list_item"> 1. <a href="http://it.uwenku.com/question/p-rwqdsrwd-u.html" target="_blank" title="Come usare il modulo 'expect' di ansible per più risposte diverse?"> Come usare il modulo 'expect' di ansible per più risposte diverse? </a> </li> <li class="side_article_list_item"> 2. <a href="http://it.uwenku.com/question/p-dvjtmjag-bg.html" target="_blank" title="Imposta la directory di lavoro in Python/Spyder in modo che sia riproducibile"> Imposta la directory di lavoro in Python/Spyder in modo che sia riproducibile </a> </li> <li class="side_article_list_item"> 3. <a href="http://it.uwenku.com/question/p-dydslcir-u.html" target="_blank" title="enum gerarchica in Java"> enum gerarchica in Java </a> </li> <li class="side_article_list_item"> 4. <a href="http://it.uwenku.com/question/p-zartuxjr-cd.html" target="_blank" title="Cassetto di navigazione in React-Native"> Cassetto di navigazione in React-Native </a> </li> <li class="side_article_list_item"> 5. <a href="http://it.uwenku.com/question/p-wceszzmt-by.html" target="_blank" title="Stream audio da PC a smartphone?"> Stream audio da PC a smartphone? </a> </li> <li class="side_article_list_item"> 6. <a href="http://it.uwenku.com/question/p-tvinntye-bd.html" target="_blank" title="La funzione dell'interfaccia è in conflitto con il getter della proprietà"> La funzione dell'interfaccia è in conflitto con il getter della proprietà </a> </li> <li class="side_article_list_item"> 7. <a href="http://it.uwenku.com/question/p-awznzbrl-m.html" target="_blank" title="In che modo JVM riutilizza le sottostringhe String internate?"> In che modo JVM riutilizza le sottostringhe String internate? </a> </li> <li class="side_article_list_item"> 8. <a href="http://it.uwenku.com/question/p-pwyltbrs-m.html" target="_blank" title="Come eseguire l'aggiornamento di Composer sul server PHP?"> Come eseguire l'aggiornamento di Composer sul server PHP? </a> </li> <li class="side_article_list_item"> 9. <a href="http://it.uwenku.com/question/p-rdtdkyxe-t.html" target="_blank" title="C macro espansione ordine"> C macro espansione ordine </a> </li> <li class="side_article_list_item"> 10. <a href="http://it.uwenku.com/question/p-czelrhfn-h.html" target="_blank" title="Il comando 'thread return' di LLDB emette un errore in una funzione Swift"> Il comando 'thread return' di LLDB emette un errore in una funzione Swift </a> </li> </ul> </div> </div> </div> <p class="article-nav-bar"></p> <div class="row sidebar article-nav"> <div class="row box_white visible-sm visible-md visible-lg margin-zero"> <div class="top"> <h3 class="title"><i class="glyphicon glyphicon-th-list"></i> Problemi correlati</h3> </div> <div class="article-relative-content"> <ul class="side_article_list"> <li class="side_article_list_item">Nessun problema correlato^_^</li> </ul> </div> </div> </div> </div> </div> </div> </div>  <footer id="footer"> <div class="bg-simple lt"> <div class="container"> <div class="row padder-v m-t"> <div class="col-xs-8"> <ul class="list-inline"> <li><a href="http://it.uwenku.com/contact">Contattaci</a></li> <li>© 2020 IT.UWENKU.COM</li> <li><a target="_blank" href="https://beian.miit.gov.cn/">沪ICP备13005482号-4</a></li> <li><script type="text/javascript" src="https://v1.cnzz.com/z_stat.php?id=1280101193&web_id=1280101193"></script></li> <li><a href="http://www.uwenku.com/" target="_blank" title="优文库">简体中文</a></li> <li><a href="http://hk.uwenku.com/" target="_blank" title="優文庫">繁體中文</a></li> <li><a href="http://ru.uwenku.com/" target="_blank" title="поле вопросов и ответов">Русский</a></li> <li><a href="http://de.uwenku.com/" target="_blank" title="Frage - und - antwort - Park">Deutsch</a></li> <li><a href="http://es.uwenku.com/" target="_blank" title="Preguntas y respuestas">Español</a></li> <li><a href="http://hi.uwenku.com/" target="_blank" title="कार्यक्रम प्रश्न और उत्तर पार्क">हिन्दी</a></li> <li><a href="http://it.uwenku.com/" target="_blank" title="IL Programma di chiedere Park">Italiano</a></li> <li><a href="http://ja.uwenku.com/" target="_blank" title="プログラム問答園区">日本語</a></li> <li><a href="http://ko.uwenku.com/" target="_blank" title="프로그램 문답 단지">한국어</a></li> <li><a href="http://pl.uwenku.com/" target="_blank" title="program o park">Polski</a></li> <li><a href="http://tr.uwenku.com/" target="_blank" title="Program soru ve cevap parkı">Türkçe</a></li> <li><a href="http://vi.uwenku.com/" target="_blank" title="Đáp ứng viên">Tiếng Việt</a></li> <li><a href="http://fr.uwenku.com/" target="_blank" title="Programme interrogation Park">Française</a></li> </ul> </div> </div> </div> </div> </div> </footer>  <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f78a970f17b19a79fc477a3378096f29"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>