Cascading Style Sheets haben viele Vorteile. Sie ermöglichen es Ihnen, dasselbe Stylesheet auf Ihrer gesamten Website zu verwenden. Dazu gibt es zwei Möglichkeiten:
- Verknüpfung mit dem LINK-Element
- Importieren mit dem @import-Befehl
Vor- und Nachteile externer Stylesheets
Eines der besten Dinge an Cascading Style Sheets ist, dass Sie sie verwenden können, um Ihre Website konsistent zu halten. Dies geht am einfachsten, indem Sie ein externes Stylesheet verlinken oder importieren. Wenn Sie für jede Seite Ihrer Site dasselbe externe Stylesheet verwenden, können Sie sicher sein, dass alle Seiten das gleiche haben Stile.
Zu den Vorteilen der Verwendung externer Stylesheets gehört, dass Sie das Erscheinungsbild mehrerer Dokumente gleichzeitig steuern können. Dies ist besonders nützlich, wenn Sie mit einem Team von Personen zusammenarbeiten, um Ihre Website zu erstellen. Viele Stilregeln können schwer zu merken sein, und obwohl Sie möglicherweise einen gedruckten Stilleitfaden haben, ist es mühsam, ihn zu haben ständig durchblättern, um zu bestimmen, ob der Beispieltext in 12-Punkt-Arial-Schrift oder 14-Punkt geschrieben werden soll Kurier.
Sie können Stilklassen erstellen, die dann für viele verschiedene HTML-Elemente verwendet werden können. Wenn Sie häufig eine spezielle Wingdings-Schrift verwenden, um verschiedene Dinge auf Ihrer Seite hervorzuheben, können Sie die Wingdings -Klasse, die Sie in Ihrem Stylesheet eingerichtet haben, um sie zu erstellen, anstatt für jede Instanz des 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, was Ihnen mehr Kontrolle und Flexibilität auf Ihren Seiten bietet.
Allerdings gibt es auch sehr gute Gründe, keine externen Stylesheets zu verwenden. Zum einen können sie die Downloadzeit erhöhen, wenn Sie viele von ihnen verlinken.
Jedes Mal, wenn Sie eine neue CSS-Datei erstellen und sie in Ihr Dokument verknüpfen oder importieren, muss der Webbrowser erneut den Webserver aufrufen, um die Datei abzurufen. Und Serveraufrufe verlangsamen die Seitenladezeiten.
Wenn Sie nur über eine kleine Anzahl von Stilen verfügen, können diese die Komplexität Ihrer Seite erhöhen. Da die Stile nicht direkt im HTML-Code sichtbar sind, muss jeder, der sich die Seite ansieht, ein anderes Dokument (die CSS-Datei) besorgen, um herauszufinden, was vor sich geht.
So erstellen Sie ein externes Stylesheet
Externe Stylesheets werden genauso geschrieben wie eingebettete und Inline-Stylesheets. Aber alles, was Sie zum Schreiben brauchen, ist der Stil Wähler und der Erklärung. Sie benötigen kein STYLE-Element oder -Attribut im Dokument.
Wie bei allen anderen CSS, lautet die Syntax für eine Regel:
Selektor { Eigenschaft: Wert; }
Diese Regeln werden in eine Textdatei mit der Erweiterung geschrieben.
.css. Sie können beispielsweise Ihr Stylesheet benennen.
stile.css.
CSS-Dokumente verlinken
Um ein Stylesheet zu verlinken, verwenden Sie das LINK-Element. Diese hat die Attribute rel und href. Das rel-Attribut teilt dem Browser mit, was Sie verlinken (in diesem Fall ein Stylesheet) und das href-Attribut enthält den Pfad zur CSS-Datei.
Es gibt auch einen optionalen Attributtyp, mit dem Sie den MIME-Typ des verknüpften Dokuments definieren können. Dies ist in HTML5 nicht erforderlich, sollte aber in HTML4-Dokumenten verwendet werden.
Hier ist der Code, den Sie verwenden würden, um ein CSS-Stylesheet namens Styles.css zu verknüpfen:
Und in einem HTML 4-Dokument würden Sie schreiben:
type="text/css">
CSS-Stylesheets importieren
Importierte Stylesheets werden innerhalb des STYLE-Elements platziert. Sie können dann auch eingebettete Stile verwenden, wenn Sie möchten. Sie können importierte Stile auch in verknüpfte Stilvorlagen einschließen. Schreiben Sie in das STYLE- oder CSS-Dokument:
@import-URL(' http://www.yoursite.com/styles.css');