Kommentare werden in CSS verwendet, um einen Codeblock zu erläutern oder um vorübergehende Änderungen während der Entwicklung vorzunehmen. Der kommentierte Code wird nicht ausgeführt.
Sowohl einzeilige als auch mehrzeilige Kommentare in CSS beginnen /*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:
/* *** * SECTION FOR H2 STYLE *** * A paragraph with information * that would be useful for someone * who didn't write the code. * The asterisks around the paragraph * help make it more readable. *** */CSS mit Kommentaren organisieren
In größeren Projekten können CSS-Dateien schnell größer und schwieriger zu warten sein. Es kann hilfreich sein, Ihr CSS in verschiedene Abschnitte mit einem Inhaltsverzeichnis zu unterteilen, um das Auffinden bestimmter Regeln in Zukunft zu erleichtern:
/* * CSS TABLE OF CONTENTS * * 1.0 - Reset * 2.0 - Fonts * 3.0 - Globals * 4.0 - Color Palette * 5.0 - Header * 6.0 - Body * 6.1 - Sliders * 6.2 - Imagery * 7.0 - Footer */ /*** 1.0 - Reset ***/ /*** 2.0 - Fonts ***/ /*** 3.0 - Globals ***/ /*** 4.0 - Color Palette ***/ /*** 5.0 - Header ***/ /*** 6.0 - Body ***/ h2 { font-size: 1.2em; font-family: "Ubuntu", serif; text-transform: uppercase; } /*** 5.1 - Sliders ***/ /*** 5.2 - Imagery ***/ /*** 7.0 - Footer ***/Ein bisschen mehr über CSS: CSS-Syntax und Selektoren
Wenn wir über die Syntax von CSS sprechen, sprechen wir darüber, wie die Dinge angeordnet 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 der CSS-Spezifität: CSS-Tricks
Inline-CSS wendet das Styling auf ein einzelnes Element und seine untergeordneten Elemente an, bis ein anderer Stil gefunden wird, der den ersten überschreibt.
Um Inline-CSS anzuwenden, fügen Sie einem HTML-Element, das Sie ändern möchten, das Attribut "style" hinzu. Fügen Sie in Anführungszeichen eine durch Semikolons getrennte Liste von Schlüssel / Wert-Paaren ein (die jeweils durch einen Doppelpunkt getrennt sind), die die festzulegenden Stile angeben.
Hier ist ein Beispiel für Inline-CSS. Die Wörter "Eins" und "Zwei" haben eine Hintergrundfarbe von Gelb und eine Textfarbe von Rot. Das Wort „Drei“ hat einen neuen Stil, der den ersten überschreibt, und hat eine Hintergrundfarbe von Grün und eine Textfarbe von Cyan. Im Beispiel wenden wir Stile auf Tags an, aber Sie können einen Stil auf jedes HTML-Element anwenden.
One Two Three 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.
Die Stile des internen CSS sind im Tag angegeben und in das Tag eingebettet .
Hier ist ein Beispiel, das einen ähnlichen Effekt hat wie das obige "Inline" -Beispiel, außer dass das CSS in einen eigenen Bereich extrahiert wurde. Die Wörter "Eins" und "Zwei" stimmen mit der Auswahl überein divund sind roter Text auf gelbem Hintergrund. Die Wörter "Drei" und "Vier" stimmen auch mit dem divSelektor überein , aber sie stimmen auch mit dem .nested_divSelektor überein, der für jedes HTML-Element gilt, das auf diese Klasse verweist. Dieser spezifischere Selektor überschreibt den ersten und sie werden als cyanfarbener Text auf grünem Hintergrund angezeigt.
div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four Die oben gezeigten Selektoren sind extrem einfach, können aber sehr komplex werden. Beispielsweise können Stile nur auf verschachtelte Elemente angewendet werden. Das heißt, ein Element, das einem anderen Element untergeordnet ist.
Hier ist ein Beispiel, in dem wir einen Stil angeben, der nur auf divElemente angewendet werden soll, die ein direktes untergeordnetes divElement anderer Elemente sind. Das Ergebnis ist, dass "Zwei" und "Drei" als roter Text auf gelbem Hintergrund angezeigt werden, "Eins" und "Vier" jedoch nicht betroffen sind (und höchstwahrscheinlich schwarzer Text auf weißem Hintergrund).
div > div { color: red; background: yellow; } One Two Three Four Externes CSS
Das gesamte Styling verfügt über ein eigenes Dokument, das im Tag verlinkt ist . Die Erweiterung der verknüpften Datei lautet.css