CSS-Kurs / CSS einbinden: Inline-Stile, interne und externe Stylesheets

Sie können CSS über das Style-Attribut eines Elements, ein Style-Element im HTML-Dokument oder ein verlinktes externes Stylesheet anwenden. Externe Stylesheets sind in der Regel leichter über mehrere Seiten hinweg zu pflegen, während die anderen Methoden für kleinere, spezifische Verwendungen geeignet sind.

Vergleichen Sie die drei Möglichkeiten, CSS anzuwenden

Alle drei Methoden wenden CSS an. Gewöhnliche interne und externe Regeln konkurrieren gemäß der Kaskade, einschließlich ihrer Selektoren und Reihenfolge der Quelle; eine externe Datei ist nicht von Natur aus schwächer. Inline-Deklarationen haben normalerweise Vorrang vor normalen Autor-Stylesheet-Deklarationen, aber Bedingungen wie !important ändern diesen Vergleich. Für weitere Details siehe Vererbung, Spezifität und Kaskade.

Schreiben Sie Inline- und interne Stile

Bei Inline-Styles schreiben Sie die Deklaration innerhalb der style-Attribut des Elements, das Sie gestalten möchten. Es werden keine Selektoren oder äußeren Klammern eingeschlossen. Der folgende Code legt die Farbe und den Hintergrund nur für einen Leittext fest.

<p style="color: #087f5b; background-color: #e9f7ef;">
  We open at 9 a.m. every day.
</p>

Im internen Stylesheet werden Regeln, einschließlich Selektoren und Klammern, im style-Element innerhalb von head geschrieben. Mehrere Sätze mit derselben Klasse können mit einer Regel gestaltet werden. Im folgenden Beispiel ist der HTML-Klassenwert notice und der CSS-Selektor ist .notice.

<head>
  <style>
    .notice {
      color: #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
  <p class="notice">We open at 9 a.m. every day.</p>
</body>

Beide Beispiele sind HTML-Snippets, um zu vergleichen, wo sie geschrieben werden. Beim Ändern der Methoden in dieser Übung entfernen Sie alle Deklarationen derselben Eigenschaften, die Sie mit der vorherigen Methode hinzugefügt haben. Mehrere Methoden gleichzeitig zu belassen, erschwert es, zwischen Verbindungsfehlern und Regelkonflikten zu unterscheiden.

Verknüpfen Sie ein externes Stylesheet

Erstellen Sie einen leeren garden-Ordner und speichern Sie die folgenden drei Dateien: Die CSS-Datei enthält nur CSS und inkludiert das <style>-Tag nicht. Beide HTML-Dateien verlinken style.css im selben Ordner.

garden/
├─ index.html
├─ visit.html
└─ style.css

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Small Garden</h1>
  <p class="notice">We open at 9 a.m. every day.</p>
  <a href="visit.html">View visitor information</a>
</body>
</html>

visit.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Visitor Information</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Visitor Information</h1>
  <p class="notice">Bring a water bottle and comfortable shoes.</p>
  <a href="index.html">Return to the garden introduction</a>
</body>
</html>

style.css

body {
  margin: 24px;
  font-family: sans-serif;
  line-height: 1.7;
}
h1 { color: #087f5b; }
.notice {
  padding: 16px;
  border: 1px solid #087f5b;
  background-color: #e9f7ef;
}

rel="stylesheet" bedeutet, dass die verbundene Datei ein Stylesheet ist, und href="style.css" ist der Speicherort der Datei, die gelesen werden soll. In HTML5-Dokumenten ist es nicht nötig, type="text/css" in regulären CSS-Verbindungen separat zu schreiben. Diese Übung, die lokale Dateien direkt öffnet, benötigt keinen Server oder zusätzliche Bibliotheken.

Wenn Sie index.html in Ihrem Browser öffnen, sehen Sie einen grünen Titel und ein helles Informationsfeld. Klicken Sie auf „View visitor information“ (Besucherinformationen anzeigen), um zu visit.html zu gelangen, und obwohl der Inhalt unterschiedlich ist, sind die Titel-Farbe und die Form des Informationsfeldes gleich. Wenn Sie die Titel-Farbe von style.css zu #1d4ed8 ändern und dann beide Seiten neu laden, werden beide Titel blau. Dies ist der Vorteil der Verwendung gemeinsamer Dateien.

Wählen Sie einen Pfad für die Ordnerstruktur

Der folgende Pfad wird basierend auf dem Speicherort des HTML-Dokuments gelesen. Wie im Beispiel ist die Voraussetzung ein reguläres Dokument, dessen Basis-URL nicht durch das base-Element ersetzt wurde. Wenn Sie die CSS-Datei verschieben, müssen Sie nicht nur den Dateinamen ändern, sondern auch href.

garden/
├─ pages/
│  └─ index.html
└─ css/
   └─ style.css

Schreiben Sie für die letzte Ordneranordnung <link rel="stylesheet" href="../css/style.css"> in pages/index.html. Das ../-Segment geht ein Verzeichnis nach oben. Web-Pfade verwenden Vorwärtsschlitze. Ein führender Schrägstrich, wie in /css/style.css, wird vom Stamm der Website aufgelöst und hat eine andere Bedeutung als dieser lokale relative Pfad. Siehe MDN: Erste Schritte.

Prüfen Sie Laden, Selektor und Kaskade getrennt

1. Überprüfen Sie zunächst die Dateiverbindung. Stellen Sie sicher, dass die Erweiterung nicht als .css.txt gespeichert ist und dass href und der tatsächliche Ordnerstandort übereinstimmen. Achten Sie auf Groß- und Kleinschreibung; insbesondere beim Bereitstellen auf einem Server kann ein abweichender Dateiname den Abruf verhindern. Wenn die Seite auf einem Webserver geöffnet wird, können Sie die CSS-Anfrage und -Antwort im Bereich Network der Entwicklerwerkzeuge überprüfen. Lokale Dateien können möglicherweise denselben HTTP-Statuscode nicht anzeigen.
2. Prüfen Sie, ob der Selektor auf das richtige Element zutrifft. Im HTML steht class="notice" in HTML, aber wenn .notcie in CSS geschrieben ist, ändert sich die Benachrichtigung nicht, auch wenn die Datei normal gelesen wird. In den Entwicklerwerkzeugen sehen Sie den tatsächlichen Klassennamen unter Elements und suchen unter Styles nach der passenden Regel.
3. Überprüfen Sie, ob die Regel überschrieben wurde. Wenn später eine andere Farbangabe gewinnt, kann die ursprüngliche Angabe in den Stilen durchgestrichen erscheinen. Bitte überprüfen Sie die endgültigen Anwendungsregeln separat von Problemen mit fehlenden CSS-Dateien.

Um zu prüfen, ob das Stylesheet geladen wird, fügen Sie vorübergehend body { background-color: #fff4cc; } am Ende hinzu und aktualisieren Sie die Seite. Eine gelbe Seite bestätigt, dass die Datei verbunden ist. Prüfen Sie dann, ob der Hinweis-Selector übereinstimmt und ob eine andere Angabe gewinnt. Entfernen Sie anschließend die temporäre Regel. !important kann eine fehlende Datei oder einen falsch geschriebenen Selector nicht reparieren. Weitere Details finden Sie unter CSS mit DevTools prüfen: Styles und Computed.