CSS ist eine Abkürzung für Cascading Style Sheets.
Während sich die meisten Diskussionen über CSS im Web (oder sogar hier auf CSS-Tricks) um das Schreiben von Stilen und deren Einfluss durch die Kaskade drehen, sprechen wir nicht viel über den Teil der Sprache, der „Sheet“ (Blatt) bedeutet. Geben wir also diesem einsamen zweiten „S“ ein wenig Rampenlicht und verstehen wir, was wir meinen, wenn wir sagen, dass CSS ein Style-Sheet ist.
Das Sheet enthält die Stile
Die Kaskade beschreibt, wie Stile miteinander interagieren. Die Stile bilden den eigentlichen Code. Dann gibt es das Sheet, das diesen Code enthält. Ähnlich wie ein Blatt Papier, auf das wir schreiben, ist das „Sheet“ von CSS die digitale Datei, in der die Stile codiert werden.
Wenn wir das veranschaulichen würden, bildet die Beziehung zwischen den drei eine Art Kaskade.
Es kann mehrere Sheets geben, die jeweils mehrere Stile enthalten und mit einem HTML-Dokument verknüpft sind. Die Kombination dieser und die Prozesse, um herauszufinden, welche Stile Vorrang haben, um welche Elemente zu stylen, wird als Kaskade bezeichnet (das erste „C“ in CSS).
Das Sheet ist eine digitale Datei
Das Sheet ist so besonders, dass es eine eigene Dateiendung erhalten hat: .css. Sie haben die Möglichkeit, diese Dateien selbst zu erstellen. Das Erstellen einer CSS-Datei kann mit jedem Texteditor erfolgen. Es sind buchstäblich Textdateien. Keine „Rich Text“-Dokumente oder Word-Dokumente, sondern einfacher reiner Text.
Wenn Sie einen Mac verwenden, können Sie TextEdit starten, um mit dem Schreiben von CSS zu beginnen. Stellen Sie einfach sicher, dass es sich im Modus „Reiner Text“ befindet.
Wenn Sie Windows verwenden, ist die Standard-App Notepad das Äquivalent. Tatsächlich können Sie Stile in fast jedem einfachen Texteditor eingeben, um CSS zu schreiben, auch wenn dieser nicht dafür ausgelegt ist.
Unabhängig davon, welches Werkzeug Sie verwenden, ist der Schlüssel, Ihr Dokument als .css-Datei zu speichern. Dies kann normalerweise geschehen, indem Sie dies einfach beim Speichern zu Ihrem Dateinamen hinzufügen. So sieht das in TextEdit aus.
Ernsthaft, die Wahl des Texteditors zum Schreiben von CSS liegt ganz bei Ihnen. Es gibt viele, viele zur Auswahl, aber hier sind einige beliebte.
Sie greifen vielleicht zu einem davon, weil sie nützliche Dinge für Sie tun, wie z. B. die Syntax der Codes hervorzuheben (verschiedene Teile einfärben, um das Verständnis zu erleichtern).
Schauen Sie mal, ich habe einige Dateien komplett von Grund auf mit meinem Texteditor erstellt.
Diese Dateien sind zu 100 % in jedem Webbrowser gültig, egal ob neu oder alt. Wir haben buchstäblich gerade eine Website erstellt.
Das Sheet ist mit dem HTML verknüpft
Wir müssen jedoch das HTML und CSS verbinden. Das heißt, sicherstellen, dass die Stile, die wir in unserem Sheet geschrieben haben, auf die Webseite geladen werden.
Eine Webseite ohne CSS ist ziemlich karg.
Siehe den Pen Style-less Webpage von Geoff Graham (@geoffgraham) auf CodePen.
Sobald wir die CSS-Datei verknüpfen, voilà!
Siehe den Pen Webpage With Styles von Geoff Graham (@geoffgraham) auf CodePen.
Wie kam das zustande? Wenn Sie sich den oberen Teil jeder Webseite ansehen, gibt es einen <head>-Tag, der Informationen über das HTML-Dokument enthält.
<!DOCTYPE html>
<html>
<head>
<!-- a bunch of other stuff -->
</head>
<body>
<!-- the page content -->
</body>
</html>Auch wenn der Code innerhalb des <head> seltsam aussehen mag, gibt es typischerweise eine Zeile (oder mehr, wenn wir mehrere Stylesheets verwenden), die auf das Sheet verweist. Es sieht ungefähr so aus:
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>Diese Zeile sagt dem Webbrowser, während er diese HTML-Datei liest:
- Ich möchte ein Stylesheet verknüpfen.
- Hier ist der Speicherort.
Sie können das Sheet beliebig benennen.
- styles.css
- global.css
- ernsthaft-was-auch-immer-du-willst.css
Wichtig ist, den richtigen Speicherort der CSS-Datei anzugeben, sei es auf Ihrem Webserver, einem CDN oder einem anderen Server.
Hier sind einige Beispiele.
<head>
<!-- CSS on my server in the top level directory -->
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- CSS on my server in another directory -->
<link rel="stylesheet" type="text/css" href="/css/styles.css">
<!-- CSS on another server -->
<link rel="stylesheet" type="text/css" href="https://some-other-site/path/to/styles.css">
</head>Das Sheet ist für HTML nicht erforderlich
Sie haben oben das Beispiel einer kargen Webseite gesehen. Keine Webseite ist erforderlich, um ein Stylesheet zu verwenden.
Außerdem können wir technisch gesehen CSS direkt in HTML mit dem HTML-Attribut style schreiben. Dies wird als Inline-Styling bezeichnet und sieht ungefähr so aus, wenn Sie sich den Code einer HTML-Datei vorstellen:
<h1 style="font-size: 24px; line-height: 36px; color: #333333">A Headline</h1>
<p style="font-size: 16px; line-height: 24px; color: #000000;">Some paragraph content.</p>
<!-- and so on -->Das ist zwar möglich, aber es gibt drei schwerwiegende Nachteile, Stile auf diese Weise zu schreiben:
- Wenn Sie sich später für die Verwendung eines Stylesheets entscheiden, ist es äußerst schwierig, Inline-Stile mit den Stilen im HTML zu überschreiben. Inline-Stile haben Vorrang vor Stilen in einem Sheet.
- Die Wartung all dieser Stile ist schwierig, wenn Sie eine „schnelle“ Änderung vornehmen müssen, und es macht das HTML schwer lesbar.
- Es ist etwas seltsam zu sagen, dass wir CSS Inline schreiben, wenn es eigentlich keine Kaskade oder kein Sheet gibt. Alles, was wir wirklich schreiben, sind Stile.
Es gibt eine zweite Möglichkeit, CSS im HTML zu schreiben, und das ist direkt im <head> in einem <style>-Block.
<head>
<style>
h1 {
color: #333;
font-size: 24px;
line-height: 36px;
}
p {
color: #000;
font-size: 16px;
line-height: 24px;
}
</style>
</head>Das macht das HTML tatsächlich besser lesbar, was es bereits besser als Inline-Styling macht. Dennoch ist es schwierig, alle Stile auf diese Weise zu verwalten, da sie auf jeder einzelnen Webseite einer Website verwaltet werden müssen, was bedeutet, dass eine „schnelle“ Änderung mehrmals durchgeführt werden muss, je nachdem, mit wie vielen Seiten wir es zu tun haben.
Ein externes Sheet, das einmal im <head> aufgerufen werden kann, ist in der Regel die beste Wahl.
Das Sheet ist wichtig
Ich hoffe, dass Sie die Bedeutung des Sheets bis zu diesem Punkt zu schätzen wissen. Es ist ein Kernbestandteil des Schreibens von CSS. Ohne es wären Stile schwer zu verwalten, HTML wäre überladen und die Kaskade wäre zumindest in einem Fall nicht existent.
Das Sheet ist die Kernkomponente von CSS. Sicher, es scheint oft die zweite Geige nach dem ersten „S“ zu spielen, aber vielleicht liegt das daran, dass wir alle ein stilles Verständnis für seine Bedeutung haben.
Aufleveln
Nun, da Sie mit Informationen über Stylesheets ausgestattet sind, finden Sie hier weitere Ressourcen, in die Sie eintauchen können, um ein tieferes Verständnis dafür zu bekommen, wie CSS funktioniert.
- Spezifität bei CSS-Spezifität – Die Kaskade ist ein verwirrendes Konzept, und dieser Artikel erklärt das Konzept der Spezifität, eine Methode zu deren Verwaltung.
- Die neuesten Wege, um mit Kaskade, Vererbung und Spezifität umzugehen – Das sind viele Worte, aber der Artikel bietet Profi-Tipps zum Verwalten der Kaskade, einschließlich einiger Ideen, die in Zukunft möglich sein könnten.
- Inline-Stile mit CSS überschreiben – Dies ist ein alter Hut, aber gut. Obwohl die Technik heute wahrscheinlich nicht mehr die beste Praxis ist, ist sie eine gute Veranschaulichung, wie diese Inline-Stile überschrieben werden können, die wir zuvor erwähnt haben.
- Wann die Verwendung von !important die richtige Wahl ist – Dieser Artikel ist eine perfekte Ergänzung zum vorherigen Artikel darüber, warum diese Methode möglicherweise nicht die beste Praxis ist.
Ein Punkt, den man berücksichtigen sollte, ist der zusätzliche Aufruf des Servers, wenn man ein externes Stylesheet verwendet. Früher war es Best Practice (und ich denke, für die Codeorganisation ist es das immer noch), aber Google hat angefangen, „render-blocking“ Stylesheets für Standardseiten zu markieren und ein hybrides Modell zu fördern, bei dem kritische Render-CSS im Head-Style enthalten ist und externe Dateien im Hintergrund per Lazy Loading geladen werden. Und wenn man eine AMP-Seite entwickelt, hat man alle möglichen Einschränkungen für sein CSS, und es kommt ALLES in den Head... Ich frage mich, ob das zweite „S“ im nächsten Jahr vielleicht ein Relikt aus vergangenen Zeiten wird... :(
Man könnte Tipps zur Verwendung von style.php-Dateien hinzufügen, mit PHP-Variablen als Breite des Hauptinhalts einer Seite zum Beispiel. Besonders wenn ein CMS involviert ist.
Toller Artikel! Ich werde mir die vorgeschlagenen weiterführenden Links, die Sie am Ende fallen gelassen haben, ansehen.
Seien Sie vorsichtig mit TextEdit (MacOS), da es gerade Anführungszeichen in intelligente (geschweifte) Anführungszeichen umwandelt, selbst im Modus „Reiner Text“ … es sei denn, Sie SCHALTEN die systemweite Einstellung aus, die diesen Schrecken verursacht.
Systemeinstellungen > Tastatur > Text > „Intelligente Anführungszeichen und Gedankenstriche verwenden“.
Sublime Text ist ein großartiger Editor, aber wenn Sie nach einer kostenlosen Alternative suchen, würde ich zunächst Notepad++ verwenden. Atom ist auch gut.
Ich genieße diese Serie wirklich! Bitte machen Sie weiter so.