Styling das `<html>` Element in CSS? - Hervorragende Bibliothek

Kann mir jemand erklären, warum können wir das Element html stylen?
Was sind Unterschiede zwischen ihm und body?Styling das `<html>` Element in CSS?

ich in der Regel Tutorials und mehrere Websites sehen body verwenden und nie html, ich nur gefunden, wenn der Hintergrund bei der Verwendung YUI 3: CSS Resetbody seit Wechsel hat nicht funktioniert.

Bearbeiten: Eigentlich habe ich immer noch nicht das Problem in Bezug auf das, wenn ich die reset.css den Hintergrund wird weiß, wenn ich es entfernen wieder normal. Der Chrome-Inspektor sagt jedoch, dass der Hintergrund der normale Hintergrund ist. Btw, das kommt aus dem Thema. : p
Bearbeiten 2: Der Schuldige war der Doctype. Irgendwie hat es den html Stil im css-reset Render nach dem body Stil in meinem Stylesheet gemacht. Vielleicht sollte ich diesbezüglich eine Frage stellen.

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

Quelle

2010-04-07 Diogo Gomes

Sie sollten in der Lage sein, den Hintergrund für das '' Element zu ändern; Ich vermute, Sie haben nur einen Fehler in der Rechtschreibung oder Syntax. – ewall

Definitiv sollte in der Lage sein, die bg Farbe mit dem elem zu ändern. Das ist es! – dscher

Sie Leute Element das Styling der HTML finden Oft CSS-Selektoren zu bauen, da es sich um eine auf dem Weg beeinflussen hat die Seite gerendert wird.

Die bemerkenswerteste Art, die Sie wahrscheinlich zu sehen sind, ist

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

dies, dass die Bildlaufleisten in Browsern wie Firefox verwendet, um sicherzustellen, zeigen immer auf der Seite. Dadurch wird die Seite beim Wechseln zwischen langen und kurzen Seiten nach links oder rechts verschoben.

Quelle

2010-04-07 14:34:34

+1 für den Scrollbar-Trick –

Was für ein hacky Trick. –

Für den Scroll Bar Trick bevorzuge ich 'overflow-y: scroll;' aber IE8 unterstützt es nicht. –

Offhand, würde ich sagen: <html> ist kein sichtbares Element per se, und es enthält Abschnitte für die semantischen (z <head>) und Präsentationsdaten (<body>).

Auf der anderen Seite, <body> ist ein Block für sichtbare Elemente, so kann es einen Präsentationsstil gegeben werden.

Aber die Leute tun Stile auf das für ein paar Fälle <html> Element gelten: (a) weil alle untergeordneten Elemente werden diesen Stil erben, und (b) in besonderen Fällen wie der Scrollbar Trick, dass Jamie Dixon erwähnt.

Quelle

2010-04-07 14:17:24 ewall

Pedanterie: das ist , nicht

. – Syntactic

Danke! Jetzt behoben. – ewall

ich Sie können nicht glauben, aber Styling <body>sollte Arbeit für Sie

Quelle

2010-04-07 14:21:03

Es ist seltsam, auf meinem Projekt funktioniert es noch nicht auf einer Testseite nur dafür, * es funktioniert *. Ich habe sogar den größten Teil der Seite und CSS entfernt. –

Sie das ein wenig schwach (IIRC (Sie können head, title { display: block; } wenn man so will Heck), aber Browser-Unterstützung ist html Element Stil kann , Internet Explorer < 8 hat Probleme).

Quelle

2010-04-07 14:27:07 Quentin

Probleme mit was? Ich meine, was wäre der richtige Weg, um das CSS zu "rendern"? –

Probleme wie in "Lässt Sie nichts außerhalb des Körpers stylen, und ist nicht allzu glücklich mit Ihrem Körper in gewisser Weise Styling entweder" ... wenn ich mich richtig erinnere. – Quentin

Wie für den richtigen Weg - das gleiche wie wenn Sie es auf ein anderes Element angewendet haben. Kopf und Titel sind standardmäßig "display: none". Sie sind immer noch Teil des DOM und (theoretisch) für das Styling verfügbar. Wenn meine Erinnerung an die Zeit mich nicht im Stich lässt, fummelte ich daran, dass die '' im Ansichtsfenster in den Tagen angezeigt wurde, als Mozilla noch ein eigenständiger Browser war. – <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 ist das enthaltene Element für das gesamte Dokument, es enthält <code class="prettyprint-override"><body></code>, was vom Browser gerendert wird, und <code class="prettyprint-override"><head></code>, das Metainformationen auf der Seite/dem Dokument enthält, das Sie anzeigen. Es hat eigentlich keinen Sinn, das html-Element stylen zu können, da es nicht vom Browser gerendert wird.</p> <p>Es kann jedoch verwendet werden Sie mit (<code class="prettyprint-override">html div.dataView { color: red }</code> zum Beispiel)</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">Quelle</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">kann der downvoter plz ausarbeiten, was falsch mit dieser Antwort ist? Ich bin begierig zu lernen/wissen :) – <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">Möglicherweise weil Sie Körper anstelle von HTML zweimal gesagt haben, was bedeutet, diese Aussage ist unwahr: 'nicht verwenden, um das Körperelement stylen, da es nicht vom Browser gerendert wird ' – <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 Mist ... du bist so wahr ... Ich habe es mindestens vier Mal gelesen ... danke für die Erklärung! – <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>Der Grund, warum wir das HTML-Element stylen dürfen, ist, dass es ein DOM-Element wie jedes andere ist.Alle DOM-Elemente können so gestaltet werden, dass sie nicht wie ein Container sind. Nehmen Sie dieses Beispiel:</p> <pre><code class="prettyprint-override"><html><body>This is my page.</body></html> </code></pre> <p>CSS Mit der Körper zu 80% Breite zu begrenzen, grenzt an dem Körper setzen und dem HTML-Code eine andere Hintergrundfarbe zu geben (einen „Off-Page-Effekt“ entsteht) wäre durchaus akzeptabel sein, hält Die Semantik des Markups ist intakt, ohne auf div clutter zurückgreifen zu müssen.</p> <p>Hier ist eine Technik, die ich für die Zentrierung von Containern (vertikal und horizontal) auf dem Bildschirm ohne Verwendung von Tonnen divs oder Tabellen oder sogar die Größe des zentrierten Containers kennen gelernt habe.</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">Quelle</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">Was hat das mit der Frage des OP zu tun? Es gilt Styling für '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">Es verwendet Styling für das HTML-Element. – <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">Genau. Es war ein Beispiel für das Styling des HTML-Elements. – <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=1644592048381"></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"> Letzte Frage </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://de.uwenku.com/question/p-xgkprkyr-ee.html" target="_blank" title="Prevent AsyncPostBackTrigger, wenn der Wert in der Textbox nicht gültig ist"> Prevent AsyncPostBackTrigger, wenn der Wert in der Textbox nicht gültig ist </a> </li> <li class="side_article_list_item"> 2. <a href="http://de.uwenku.com/question/p-dxlbtmuj-em.html" target="_blank" title="Angular.js - Ansicht-ng-Optionen nach Änderung der Daten aktualisieren"> Angular.js - Ansicht-ng-Optionen nach Änderung der Daten aktualisieren </a> </li> <li class="side_article_list_item"> 3. <a href="http://de.uwenku.com/question/p-opvlwluv-cx.html" target="_blank" title="Swagger für den Frühling: Keine Zuordnung gefunden"> Swagger für den Frühling: Keine Zuordnung gefunden </a> </li> <li class="side_article_list_item"> 4. <a href="http://de.uwenku.com/question/p-kuuobdid-cz.html" target="_blank" title="Wie Grid.Column im Grid Xamarin.Form"> Wie Grid.Column im Grid Xamarin.Form </a> </li> <li class="side_article_list_item"> 5. <a href="http://de.uwenku.com/question/p-mvubloed-de.html" target="_blank" title="Kettenmethoden auf rxjava"> Kettenmethoden auf rxjava </a> </li> <li class="side_article_list_item"> 6. <a href="http://de.uwenku.com/question/p-zdptacvg-dd.html" target="_blank" title="Makro-Schaltfläche zum Übertragen von Informationen aus bestimmten Zellen in einer Tabelle in eine andere Tabelle"> Makro-Schaltfläche zum Übertragen von Informationen aus bestimmten Zellen in einer Tabelle in eine andere Tabelle </a> </li> <li class="side_article_list_item"> 7. <a href="http://de.uwenku.com/question/p-slozuezd-dc.html" target="_blank" title="Vorschlag über das Lesen von RDF mit C# und asp.net"> Vorschlag über das Lesen von RDF mit C# und asp.net </a> </li> <li class="side_article_list_item"> 8. <a href="http://de.uwenku.com/question/p-tupwvyxd-da.html" target="_blank" title="Kann ich den Befehl git in der Lieferpipeline verwenden, wenn git in einem anderen Pfad auf dem jenkins-Agent installiert ist als auf dem Master"> Kann ich den Befehl git in der Lieferpipeline verwenden, wenn git in einem anderen Pfad auf dem jenkins-Agent installiert ist als auf dem Master </a> </li> <li class="side_article_list_item"> 9. <a href="http://de.uwenku.com/question/p-plvxxyub-cm.html" target="_blank" title="Wiederverwendung von Aktionen über mehrere Reducer in redux"> Wiederverwendung von Aktionen über mehrere Reducer in redux </a> </li> <li class="side_article_list_item"> 10. <a href="http://de.uwenku.com/question/p-brgdwulf-co.html" target="_blank" title="Java - geben Sie einen Verweis auf eine bestimmte Stelle in einer Linkedlist mit Liste Iterator"> Java - geben Sie einen Verweis auf eine bestimmte Stelle in einer Linkedlist mit Liste Iterator </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> Verwandte Themen</h3> </div> <div class="article-relative-content"> <ul class="side_article_list"> <li class="side_article_list_item">Keine verwandten Themen^_^</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://de.uwenku.com/contact">Sprechen Sie uns an</a></li> <li>© 2020 DE.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>