Wie man CSS zu HTML hinzufügt

Das Hinzufügen von CSS zu HTML kann verwirrend sein, da es viele Möglichkeiten gibt, dies zu tun.

CSS mit HTML verbinden können Sie, indem man auf eine separate Stylesheet-Datei verweist, Dateien aus bestehenden Stylesheets importiert, CSS in ein Style-Tag einbindet oder Inline-Stile direkt zu HTML-Elementen hinzufügt. Viele dieser Methoden können auch mit Javascript durchgeführt werden.

Heute werden wir die Vor- und Nachteile jeder CSS-Methode untersuchen, sehen, wie sie funktioniert, und lernen, wann sie zu verwenden ist.

Wir werden darüber berichten, wie das geht:

  •  Link zu einer Stylesheet-Datei;
  • Einbetten von CSS mit einem Style-Tag;
  •  Fügen Sie Inline-Stile zu HTML-Elementen hinzu;
  • Importieren einer Stylesheet-Datei und wie man
  • CSS mit Javascript einfügen.

Wir werden auch einige der häufigsten Fragen behandeln, die Entwickler beim Einfügen von CSS in HTML-Dokumente haben:

Wie Sie CSS verkleinern können, um Ihre Website zu beschleunigen; und
Wie man CSS oberhalb des Falzes einfügt, um die Renderzeit der Seite zu verbessern.

1. So verlinken Sie auf eine Stylesheet-Datei

Dies ist die gebräuchlichste Methode, um CSS-Regeln an HTML-Dokumente anzuhängen.

Bei dieser Methode sind alle Ihre Style-Regeln in einer einzigen Textdatei enthalten, die mit der Erweiterung .css gespeichert wird. Diese Datei wird auf Ihrem Server gespeichert und Sie verlinken sie direkt aus jeder HTML-Datei. Wir verwenden ein Link-Tag, das eine einfache HTML-Zeile ist, die Sie in den Kopfbereich Ihres HTML-Dokuments eingeben, es sieht so aus:

<link rel=“stylesheet“ type=“text/css“ href=“mystyles.css“ media=“screen“ />

Das rel-Attribut ist auf Stylesheet gesetzt, um dem Browser mitzuteilen, dass es sich bei der verknüpften Datei um ein Casscading Style Sheet (CSS) handelt.

Wenn Sie HTML5 verwenden, ist das type-Attribut nicht erforderlich, Sie können es entfernen und ein paar Bytes pro Seite speichern.

Im href-Attribut geben Sie den Pfad zu Ihrer CSS-Datei an.

Wenn sich die CSS-Datei im gleichen Ordner wie Ihre HTML-Datei befindet, ist kein Pfad erforderlich, Sie müssen nur den Dateinamen wie im obigen Beispiel angeben.

Wenn es in einem Ordner gespeichert ist, können Sie den Ordnerpfad relativ zur HTML-Datei wie folgt angeben:

<link href=“Ordnername / mystyles.css“ ….. >

Sie können auch einen Pfad relativ zum Root Ihrer Domäne angeben, indem Sie einen solchen Schrägstrich voranstellen:

<link href=“/ordnername/mystyles.css“ ….. >

Absolute URLs funktionieren auch:

<link href=“https://www.yourdomain.com/foldername/mystyles.css“ ….. >

Das Medienattribut in einem Link-Tag gibt an, wann die CSS-Regeln angewendet werden sollen. Hier sind die häufigsten Werte:

  • Der Bildschirm zeigt die Verwendung auf einem Computerbildschirm an.
  • Projektion für projizierte Präsentationen.
  • Handheld für Handheld-Geräte (typischerweise mit kleinen Bildschirmen).
  • Drucken, um gedruckte Webseiten zu gestalten.
  •  all (Standardwert) Das ist es, was die meisten Leute wählen. Sie können das Medienattribut ganz weglassen, wenn Sie möchten, dass Ihre Styles für alle Medientypen angewendet werden.

Vorteile der Verknüpfung mit einer separaten CSS-Datei

  • Änderungen an Ihrem CSS werden auf allen Seiten berücksichtigt: Sie müssen nur einmal eine CSS-Änderung in Ihrer einzelnen CSS-Datei vornehmen und alle Webseiten werden aktualisiert.
  • Das Ändern des Designs Ihrer Website ist einfach: Sie können Ihre CSS-Datei ersetzen, um das Aussehen Ihrer Website vollständig zu ändern. Das beste Beispiel dafür finden Sie in CSS Zen Garden.
  • Die Site-Geschwindigkeit steigt bei mehrfachen Seitenanfragen: Wenn eine Person zum ersten Mal Ihre Website besucht, lädt ihr Browser das HTML der aktuellen Seite plus die verlinkte CSS-Datei herunter. Wenn sie zu einer anderen Seite navigieren, muss ihr Browser nur das HTML der neuen Seite herunterladen, die CSS-Datei wird zwischengespeichert und muss nicht erneut heruntergeladen werden. Dies kann einen großen Unterschied machen, besonders wenn Sie eine große CSS-Datei haben.

Nachteile

  • Für jede verknüpfte CSS-Datei ist ein zusätzlicher HTTP-Request erforderlich: Überschüssige HTTP-Anfragen können das Rendern Ihrer Seite verzögern. Wir werden die Lösung für dieses Problem in Kürze behandeln.
  • Sie können so viele CSS-Dateien in Ihr HTML-Dokument aufnehmen, wie Sie möchten, indem Sie mehrere Link-Tags hinzufügen. Denken Sie einfach daran, dass jede Datei eine zusätzliche HTTP-Anfrage erfordert.