Websites sind eine Kombination aus Stil und Struktur. Im heutigen Web ist es eine bewährte Methode, diese beiden Aspekte einer Website voneinander zu trennen.
HTML war schon immer das, was einer Site ihre Struktur verleiht. In den frühen Tagen des Webs enthielt HTML auch Stilinformationen. Elemente wie das Das Tag wurde über den HTML-Code verteilt und fügte neben strukturellen Informationen Informationen zum Aussehen und Verhalten hinzu. Die Bewegung der Webstandards hat uns dazu veranlasst, diese Praxis zu ändern und stattdessen alle Stilinformationen in CSS oder Cascading Style Sheets zu verschieben. Um dies noch einen Schritt weiter zu gehen, empfehlen wir Ihnen, ein so genanntes "externes Stylesheet" für das Design Ihrer Website zu verwenden.
Vor- und Nachteile externer Stylesheets
Eine der besten Eigenschaften von Cascading Style Sheets besteht darin, dass Sie diese verwenden können, um die gesamte Website konsistent zu halten. Am einfachsten ist es, ein externes Stylesheet zu verknüpfen oder zu importieren. Wenn Sie für jede Seite Ihrer Website dasselbe externe Stylesheet verwenden, können Sie sicher sein, dass alle Seiten denselben Stil haben. Sie können es auch erleichtern, Änderungen für die Zukunft vorzunehmen. Da jede Seite dasselbe externe Stylesheet verwendet, wirkt sich jede Änderung an diesem Blatt auf jede Site-Seite aus. Das ist viel besser, als jede Seite einzeln ändern zu müssen!
Vorteile externer Stylesheets
- Sie können das Erscheinungsbild mehrerer Dokumente gleichzeitig steuern.
- Dies ist besonders nützlich, wenn Sie mit einem Team zusammenarbeiten, um Ihre Website zu erstellen. Viele Stilregeln können schwer zu merken sein, und obwohl Sie möglicherweise einen gedruckten Stilführer haben, ist es ineffizient und mühsam, ständig durchzugehen, um zu bestimmen, ob Beispieltext in 12-Punkt-Arial-Schrift oder 14-Punkt-Kurier geschrieben werden soll. Wenn Sie alles an einem Ort haben und da auch Änderungen vorgenommen werden, können Sie die Wartung erheblich vereinfachen.
- Sie können Stilklassen erstellen, die dann für viele verschiedene HTML-Elemente verwendet werden können.
- Wenn Sie häufig einen bestimmten Schriftstil verwenden, um verschiedene Elemente auf Ihrer Seite hervorzuheben, können Sie ein Klassenattribut verwenden, das Sie in Ihrem Stylesheet eingerichtet haben, um dieses Aussehen und Verhalten zu erhalten, anstatt einen bestimmten Stil für jede Instanz des zu definieren Betonung.
- Sie können Ihre Stile einfach gruppieren, um effizienter zu sein.
- Alle für CSS verfügbaren Gruppierungsmethoden können in externen Stylesheets verwendet werden. Dies gibt Ihnen mehr Kontrolle und Flexibilität auf Ihren Seiten.
Nachteile externer Stylesheets
- Externe Stylesheets können die Downloadzeit verlängern, insbesondere wenn sie extrem groß sind. Da es sich bei der CSS-Datei um ein separates Dokument handelt, das geladen werden muss, hat dies Auswirkungen auf die Leistung, um diesen Download durchzuführen.
- Externe Stylesheets werden sehr schnell umfangreich, da es schwer zu sagen ist, wann ein Style nicht mehr verwendet wird, da er nicht gelöscht wird, wenn die Seite entfernt wird. Die richtige Verwaltung Ihrer CSS-Dateien ist wichtig, insbesondere wenn mehrere Personen mit derselben Datei arbeiten.
- Wenn Sie nur eine einseitige Website haben, ist es möglicherweise nicht erforderlich, eine externe Datei für CSS zu erstellen, da Sie nur diese eine Seite zum Stylen haben. Viele der Vorteile von externem CSS gehen verloren, wenn Sie nur eine einzelne Seiten-Site haben.
So erstellen Sie ein externes Stylesheet
Externe Stylesheets werden mit einer ähnlichen Syntax wie Stylesheets auf Dokumentebene erstellt. Sie müssen jedoch lediglich den Selektor und die Deklaration einfügen. Genau wie in einem Stylesheet auf Dokumentebene lautet die Syntax für eine Regel:
Selektor {Eigenschaft: Wert;}
Speichern Sie diese Regeln in einer Textdatei mit der Erweiterung .css. Dies ist nicht erforderlich, aber es ist eine gute Angewohnheit, sich damit zu beschäftigen, sodass Sie Ihre Stylesheets in einer Verzeichnisliste sofort erkennen können.
Nachdem Sie ein Stylesheet-Dokument erstellt haben, müssen Sie es mit Ihren Webseiten verknüpfen. Dies kann auf zwei Arten erfolgen:
- Verlinkung
- Um ein Stylesheet zu verknüpfen, verwenden Sie das HTML-Tag. Das hat die Attribute rel, Art, und href. Das rel-Attribut gibt an, was Sie verknüpfen (in diesem Fall ein Stylesheet), der Typ definiert den MIME-Type für den Browser, und der Wert href ist der Pfad zur CSS-Datei.
- Importieren
- Sie würden ein importiertes Stylesheet innerhalb eines Stylesheets auf Dokumentebene verwenden, damit Sie die Attribute eines externen Stylesheets importieren können, ohne dabei Dokumentspezifische zu verlieren. Sie rufen es ähnlich wie ein verknüpftes Stylesheet auf, es muss nur innerhalb einer Style-Deklaration auf Dokumentebene aufgerufen werden. Sie können so viele externe Stylesheets importieren, wie Sie zur Verwaltung Ihrer Website benötigen.
Originalartikel von Jennifer Krynin. Bearbeitet von Jeremy Girard am 08.08.17
