Wenn ich mir einen CSS-Stil für eine Webseite ansehe, schaue ich mir normalerweise zuerst die Gestaltung der Tags <html>und <body>an und dann schaue ich mir andere Unterelemente an. Das Styling von <html>und <body>-Tags ist für viele Webdesigner ziemlich verwirrend, und ich habe keine Richtlinien gefunden, die dieses Thema klären.
Also erstelle ich diese Frage:
<html>Welche Stile und <body>Tags (die eine solche Basis für eine typische Webseite bilden) können angewendet werden ? Und was ist gute/schlechte Technik?
Per Konvention sollten die meisten Stile im <body>Element platziert werden .
Es gibt jedoch einen wichtigen Grund, Stile auf das Element selbst anzuwenden <html>: wenn Sie die Standardschriftstile festlegen, insbesondere font-size. Dies liegt daran , dass das <html>Tag das Root-Element ist, daher rembasiert die Größenanpassung (Root-Em-Einheit) auf dem, was für das <html>Element eingestellt ist.
Ein Beispiel dafür ist wie folgt
html {
font-size:12px;
}
body {
font-size:16px;
}
.em-block {
font-size:1.2em; /* Renders to font-size: 19px */
}
.rem-block {
font-size:1.2rem; /* Renders to font-size: 14px */
}
Das einzige andere wirkliche Szenario, warum Sie das Element formatieren müssten, wäre, <html>wenn Sie aus irgendeinem wirklich merkwürdigen Grund nicht das gesamte HTML-Element im Textkörper hätten. Dies ist selten und wird im Allgemeinen nicht empfohlen, aber ich habe es schon einmal gesehen. In diesem Fall vhwürden , vw, vmaxund vminalle relativ zum <html>Element skaliert werden, nicht zum <body>.
Sie können andere Stile, die Sie vererben möchten, in das <html>Tag einfügen, es gibt keine Regel, die besagt, dass dies nicht möglich ist, es ist einfach nicht empfohlen oder konventionell und kann von seinen untergeordneten Elementen überschrieben werden, insbesondere von <body>.
<html>- Fügen Sie normalerweise nur das hinzu, was unbedingt erforderlich ist<body>- Fügen Sie erneut mit Bedacht hinzuWenn Ihr Projekt wächst, kann und wird die CSS-Spezifität Sie wieder beißen, wenn Sie nicht aufpassen.
HTML ist sehr freizügig, es gibt unzählige Möglichkeiten, eine Aufgabe zu erfüllen, insbesondere im Layout. Dies führt im Allgemeinen zu vielen Meinungen darüber, was das „Beste“ ist. Für mich wende ich mich bei der Suche nach einem Ansatzpunkt an angesehene Menschen.
In diesem Fall würde ich mit Normalize css beginnen . Es ist nicht das „Ende alles, sei alles“, aber ich habe festgestellt, dass es ein guter Anfang ist. Wenn Sie sich die normalize.css-Datei ansehen, enthält sie außerdem viele sehr gute Kommentare, die helfen, die getroffenen Entscheidungen zu erklären. Es wird Ihnen nicht sagen, was Sie eingeben können / was nicht, aber ich denke, es leistet gute Arbeit, um darzulegen, wie eine ebene Basis aussehen kann.
Danach wird Ihr Projekt wahrscheinlich etwas Struktur benötigen. Die Struktur des HTML- und CSS-Codes trägt viel dazu bei, zu verstehen, wie und warum Entscheidungen getroffen werden. Eine Quelle für "guten Codegeruch" ist SMACSS , eine Struktur, an der ich arbeite, um sie in meinen Arbeitsablauf einzubauen. SMACSS ist nicht die einzige Lösung, aber es kann Ihnen helfen, Ihr Projekt zu verstehen und gute Knochen darunter zu legen.
Wenn Sie interessiert sind, gibt es mehrere andere gute CSS-Strukturen, die Sie sich ansehen sollten: OOCSS & BEM
Schließlich sehe ich gerne, wie andere Berufstätige ihre Arbeit machen. Mehrere große Websites haben Beiträge darüber veröffentlicht, wie sie funktionieren, einer, der mir besonders gut gefallen hat, stammt von Trellos Blog . Es ist gut, sich solche Dinge anzusehen, denn es ist nicht nur die Theorie, sondern die Lehre von Menschen, die diese Tools täglich verwenden, um echte Probleme auf echten Websites zu lösen.
Keines davon allein wird die Frage „Was ist zu tun/wie zu stylen <tag name>?“ lösen, aber sie werden als Wegweiser dienen, die Sie zu der Lösung führen, die für Sie, Ihr Team und Ihr(e) Projekt(e) funktioniert. .
Sie sollen Styling auf Body-Tags anwenden. Setzen Sie beispielsweise die Hintergrundfarbe auf Weiß, legen Sie Schriftart, Schriftfarbe, Schriftgröße usw. fest. Sie sollten immer externe Stylesheets verwenden. Zur besseren Verwaltung und Handhabung sollten Sie mehrere Stylesheets verwenden.
body {
background-color: #56473 ;
font-family: Arial;
font-size: 1.3em;
margin: 5px;
oder alles, was Sie hier wollen.
DA01
HTML? Normalerweise gibt es keinen Grund, Stile anzuwendenHTMLAlbert