example.css<\/strong>:<\/p>body {\n\n background-color: yellow;\n\n}\n\nh1 {\n\n color: blue;\n\n margin-right: 30px;\n\n}<\/pre>Stellen Sie sicher, dass Sie keinen Abstand zwischen dem Eigenschaftswert hinzufügen. Zum Beispiel, anstatt margin-right: 30px<\/strong> sollten Sie nicht margin-right: 30 px<\/strong> schreiben.<\/p>Verwenden Sie dann das <link><\/strong>-Tag im <head> <\/strong>-Abschnitt Ihrer HTML-Seite, um eine CSS-Datei mit einem HTML-Dokument zu verknüpfen. Geben Sie als nächstes den Namen Ihrer externen CSS-Datei an. In diesem Fall ist es example.css<\/strong>, daher sieht der Code wie folgt aus:<\/p><head>\n\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"example.css\" media=”screen” \/>\n\n<\/head><\/pre>Für ein besseres Verständnis finden Sie hier eine Aufschlüsselung der Attribute, die im <link><\/strong>-Tag enthalten sind:<\/p>\n- rel<\/strong>: Definiert die Beziehung zwischen dem verlinkten Dokument und dem aktuellen. Verwenden Sie das rel-Attribut nur, wenn das href<\/strong>-Attribut vorhanden ist.<\/li>\n\n\n\n
- type<\/strong>: Bestimmt den Inhalt der verlinkten Datei oder des Dokuments zwischen den Tags <style> <\/strong>und <\/style><\/strong>. Sie haben text<\/strong> oder css<\/strong> als Standardwert.<\/li>\n\n\n\n
- href<\/strong>: Gibt den Ort der CSS-Datei an, die Sie mit dem HTML verknüpfen möchten. Wenn sowohl HTML- als auch CSS-Dateien im selben Ordner sind, geben Sie nur den Dateinamen ein. Andernfalls geben Sie den Ordnernamen an, in dem Sie die CSS-Datei speichern.<\/li>\n\n\n\n
- media<\/strong>: Beschreibt die Art der Medien, für die die CSS-Stile optimiert sind. In diesem Beispiel setzen wir screen<\/strong> als Attributwert ein, um seine Verwendung für Computerbildschirme zu implizieren. Um die CSS-Regeln auf gedruckte Seiten anzuwenden, setzen Sie den Wert auf print<\/strong>.<\/li>\n<\/ul>
Sobald Sie das <link><\/strong>-Element in Ihrer HTML-Datei eingefügt haben, speichern Sie die Änderungen und geben Sie die URL Ihrer Website in Ihren Webbrowser ein. In der CSS-Datei geschriebene Stile sollten das Aussehen der Webseite ändern.<\/p>Obwohl externes CSS die Webentwicklung erleichtert, gibt es einige Dinge zu beachten, dass HTML-Seiten möglicherweise nicht richtig gerendert werden, bevor das externe Stylesheet geladen ist. Darüber hinaus kann das Verlinken zu mehreren CSS-Dokumenten die Ladezeit Ihrer Webseite erhöhen.<\/p>
In diesem Zusammenhang könnte es besser sein, die Inline-Stil-Methode zu verwenden, wenn Sie ein bestimmtes HTML-Element bearbeiten möchten. Gleichzeitig könnte der interne oder eingebettete Stil ideal sein, um CSS-Regeln auf einer einzelnen Seite anzuwenden.<\/p>