– Kommentare verwendet werden, die in CSS zu erklären, einen code-block oder temporäre Veränderungen während der Entwicklung. Der kommentierte Code wird nicht ausgeführt.
Sowohl ein-als auch mehrzeilige Kommentare in CSS beginnen mit /* und enden mit */, und Sie können Ihrem Stylesheet beliebig viele Kommentare hinzufügen. Zum Beispiel:
/* This is a single line comment*/.group:after { content: ""; display: table; clear: both;}/* This is a multi-line comment*/Sie können Ihre Kommentare auch lesbarer machen, indem Sie sie stilisieren:
In größeren Projekten können CSS-Dateien schnell an Größe zunehmen und schwierig zu pflegen werden., Es kann hilfreich sein, Ihr CSS in verschiedenen Abschnitten mit einem Inhaltsverzeichnis zu organisieren, um das Auffinden bestimmter Regeln in Zukunft zu erleichtern:
Ein bisschen mehr über CSS: CSS-Syntax und Selektoren
Wenn wir über die Syntax von CSS sprechen, sprechen wir darüber, wie die Dinge angelegt sind. Es gibt Regeln darüber, was wohin geht, damit Sie CSS konsistent schreiben können und ein Programm (wie ein Browser) es interpretieren und korrekt auf die Seite anwenden kann.
Es gibt zwei Möglichkeiten, CSS zu schreiben.,
Inline CSS
Besonderheiten zur CSS-Spezifität: CSS Tricks
Inline CSS wendet das Styling auf ein einzelnes Element und seine untergeordneten Elemente an, bis ein anderer Stil, der den ersten überschreibt, auftritt.
Um Inline-CSS anzuwenden, fügen Sie das Attribut „style“ einem HTML-Element hinzu, das Sie ändern möchten. Fügen Sie in Anführungszeichen eine durch Semikolon getrennte Liste von Schlüssel/Wert-Paaren (die jeweils durch einen Doppelpunkt getrennt sind) ein, die Stile angeben, die festgelegt werden sollen.
Hier ist ein Beispiel für Inline-CSS. Die Wörter „Eins“ und „Zwei“ haben eine Hintergrundfarbe von Gelb und Textfarbe von Rot., Das Wort „Drei“ hat einen neuen Stil, der den ersten überschreibt und eine Hintergrundfarbe von Grün und eine Textfarbe von Cyan hat. Im Beispiel wenden wir Stile auf <div> – Tags an, aber Sie können einen Stil auf jedes HTML-Element anwenden.
<div style="color:red; background:yellow"> One <div> Two </div> <div style="color:cyan; background:green"> Three </div></div>Internes CSS
Während das Schreiben eines Inline-Stils eine schnelle Möglichkeit ist, ein einzelnes Element zu ändern, gibt es eine effizientere Möglichkeit, denselben Stil auf viele Elemente der Seite gleichzeitig anzuwenden.,
Das interne CSS hat seine Stile im <style> – Tag angegeben und ist in das <head> – Tag eingebettet.
Hier ist ein Beispiel, das einen ähnlichen Effekt wie das obige „Inline“ – Beispiel hat, außer dass das CSS in seinen eigenen Bereich extrahiert wurde. Die Wörter „Eins“ und“Zwei“stimmen mit dem div Selektor überein und sind roter Text auf gelbem Hintergrund., Die Wörter „Drei“ und“Vier“stimmen auch mit dem Selektor div überein, aber sie stimmen auch mit dem Selektor Dies gilt für jedes HTML-Element, das auf diese Klasse verweist. Dieser spezifischere Selektor überschreibt den ersten und sie erscheinen als Cyan-Text auf grünem Hintergrund.
Die oben gezeigten Selektoren sind extrem einfach, können aber sehr komplex werden. Zum Beispiel ist es möglich, Stile nur auf verschachtelte Elemente anzuwenden; das heißt, ein Element, das ein Kind eines anderen Elements ist.,
Hier ist ein Beispiel, in dem wir einen Stil angeben, der nur auf div – Elemente angewendet werden sollte, die ein direktes untergeordnetes Element anderer div – Elemente sind. Das Ergebnis ist, dass „Zwei“ und „Drei“ als roter Text auf gelbem Hintergrund erscheinen, „Eins“ und „Vier“ jedoch unberührt bleiben (und höchstwahrscheinlich schwarzer Text auf weißem Hintergrund).
<style type="text/css"> div > div { color: red; background: yellow; }</style><div> One <div> Two </div> <div> Three </div></div><div> Four</div>Externes CSS
Das gesamte Styling verfügt über ein eigenes Dokument, das im <head> – Tag verknüpft ist. Die Erweiterung der verknüpften Datei ist .css