Ein externes Stylesheet definiert, wie eine Webseite aussieht. Sie können ein Stylesheet verwenden, um Dinge wie Größe, Farbe und Schriftart des Textes, die Farbe von Schaltflächen oder die Position von Menüs und Seitenleisten festzulegen.
In einem externen Stylesheet verwendeter Code
Es gibt zwei Arten von Code, die verwendet werden, um eine einfache Webseite zu erstellen:
- HyperText-Auszeichnungssprache (HTML): Definiert den Inhalt einer Webseite. Es enthält den eigentlichen Text mit einer Markierung, die angibt, ob es sich bei Textabschnitten um Absätze, Überschriften oder Listen handelt. Es enthält auch Links zu Bildern, die auf der Seite erscheinen, und Hyperlinks zu externen Seiten.
- Cascading Style Sheets (CSS): Eine Kodierungssprache, die verwendet wird, um anzugeben, wie der Inhalt angezeigt wird. Es definiert, wie jeder Textelementtyp angezeigt wird und kann denselben Elementtyp unterschiedlich anzeigen, wenn sie zu verschiedenen Klassen gehören oder eine unterschiedliche ID haben. Dadurch können sich Dinge wie Menüs und Listen innerhalb des Haupttextes einer Webseite sehr unterschiedlich verhalten.
Im Allgemeinen ist es eine gute Idee, Stil und Inhalt zu trennen, da Sie sich auf eine Sache gleichzeitig konzentrieren können. Dies wird im Team noch wichtiger, da Spezialisten für Inhalt und Präsentation unabhängig voneinander arbeiten können. Vielleicht noch wichtiger ist, dass es auch die einheitliche Anwendung eines einzigen Satzes von Stilanweisungen auf einer gesamten Website ermöglicht.
Die visuelle Darstellung der Website kann dann von einem einzigen Stylesheet aus geändert werden, ohne jede Webseite einzeln zu bearbeiten. Bei größeren komplexen Websites können eine Reihe von Stylesheets verwendet werden, um den Text, die Menüs und die Unterteilungen innerhalb der Seiten zu steuern. Diese Sammlung von Stylesheets kann als "Thema" bezeichnet werden.
Verwenden eines externen CSS zum Verknüpfen von HTML mit CSS
Es ist möglich, den CSS-Stil direkt in den HTML-Code einer Webseite einzufügen, indem Sie CSS verwenden, um jeden Absatz und jede Überschrift individuell zu gestalten. Diese Art von Inline-Styling ist im Allgemeinen keine gute Idee, da Sie alle Vorteile der Trennung von Stil und Inhalt verlieren. Vor allem verlieren Sie die Möglichkeit, Ihre gesamte Website konsistent aus einer einzigen Datei zu aktualisieren.
Die richtige Methode zum Anwenden eines Stils auf eine Website besteht darin, für jeden Stiltyp, den Sie anwenden möchten, eine einzelne externe Stylesheet-Datei zu erstellen und dann aus jeder HTML-Datei auf diese Dateien zu verweisen. Beispielsweise könnten Sie die folgenden externen Stylesheets haben:
- text.css
- menus.css
- layout.css
Sie können innerhalb dieser externen Stylesheets Änderungen am CSS-Code vornehmen, ohne deren zu ändern Dateinamen, d. h. die Verweise auf diese Dateien im HTML-Code all Ihrer Webseiten, werden nicht angezeigt geändert.
Beispiele für HTML und CSS
Eine sehr einfache HTML-Seite könnte folgenden Code enthalten:
Alles über mich!
Auf dieser Seite geht es um mich und warum ich großartig bin.
Wenn Sie sehen möchten, wie das in einem Webbrowser aussieht, kopieren Sie den Text in einen Texteditor wie Notizblock. Speichern Sie die Datei als "index.html" und ziehen Sie sie in Ihren Browser, um den Old-School-Stil zu sehen.
Ein einfaches externes Stylesheet kann mit dieser Seite verknüpft werden, indem der folgende Code unter dem hinzugefügt wird.
type = "text/css"
href = "myStyle.css" />
Erstellen Sie eine weitere Textdatei namens myStyle.css, die sich im selben Ordner wie index.html befindet und den folgenden Code enthält:
h1 {
Farbe: #FF7643;
Schriftart: Arial'
}
p {
Farbe Rot;
Schriftgröße: 1,5em;
}
Es gibt noch viel mehr, was Sie mit CSS tun können. Wenn Sie mehr erfahren möchten, W3 Schulen ist ein großartiger Ort, um zu beginnen.