Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.
Zurück zur vorherigen Seite:
What is CSS?Dieser zweite Teil des CSS Getting Started Tutorials erklärt die Beziehung zwischen CSS and Documenten. Im Beispiel werden Sie lernen, wie Sie ein CSS-Stylesheet Ihrem Dokument hinzufügen.
Warum CSS ?
Mithilfe von CSS definieren Sie Styles für Ihr Dokument. Das beinhaltet das Design, Layout und Varianten der Darstellung für verschiedene Geräte und Bildschirmgrößen. Sie können Ihr CSS direkt in den <Kopfbereich> (head) Ihres Dokumentes einbetten (eingebettetes Stylesheet) oder eine separate CSS-Datei mit Ihrem Dokument verknüpfen (externes Stylesheet). Dazu müssen Sie einfach einen Link auf Ihr Stylesheet in den <Kopfbereich> Ihres Dokumentes einbauen.
Die Trennung von Inhalt und Form mithilfe eines externen Stylesheets hat viele Vorteile:
- Sie müssen nicht alles doppelt und mehrfach tun
- Die Wartung wir d vereinfacht
- Ein ganzer Webauftritt kann an einer zentralen Stelle umgestaltet werden.
Mit CSS speichern Sie die Darstellungsinformationen in einer gemeinsamen Datei, die alle Seiten verwenden, die damit verknüpft sind. So können Sie beispielsweise die Farbe oder den Stil einer Überschrift für alle Ihre Webseiten ändern, die auf das selbe CSS-Stylesheet verlinken, indem Sie einfach einige wenige CSS-Attribute in diesem Stylesheet ändern.
Wenn ein User eine Webseite betrachten will, lädt der Browser die Styleinformationen gemeinsam mit dem Inhalt der Seite.
Wenn ein User eine Webseite drucken will, können Sie ihm unterschiedliche Stilinformationen für den Druck anbiete, sodass die ausgedruckte Seite schön gestaltet ist.
Wie arbeiten nun HTML und CSS zusammen? Generell kann man sagen: Verwenden Sie HTML um den Inhalt (content) Ihres Dokumentes zu beschreiben und CSS um die Form, den Darstellungsstil Ihrer Seite zu beschreiben und nicht ihren Inhalt. Etwas später werden Sie in diesem Tutorial auch Ausnahmen von dieser Regel kennenlernen.
Auch eine Auszeichnungssprache wie HTML stellt Methoden zur Verfügung um einen Darstellungsstil zu definieren.
Beispielsweise können Sie in HTML einen <b>Tag verwenden um Text fett darzustellen, oder Sie können die Hintergrundfarbe eines Dokumentes mithilfe des <body>Tags festlegen.
Wenn Sie CSS verwenden vermeiden Sie üblicherweise diese Möglichkeiten der Auszeichnungssprache damit alle Styleinformationen Ihrers Dokumentes an einer Stelle beisammen bleiben.
Action: Ein CSS-Stylesheet anlegen
- Erstellen Sie ein eneue Textdatei im selben Verzeichnis wo sie schon Ihr Dokument doc1.html abgelegt haben.
- Speichern Sie Ihre datei als:
style1.css. Das wird nun Ihr Stylesheet. - Kopieren Sie nachfolgende Zeile in Ihr neu erstelltes Stylesheet und speichern dieses.
strong {color: red;}
Verknüpfung von Dokument und Stylesheet
- Um nun die beiden Dateien miteinander zu verknüpfen, bearbeiten Sie Ihre HTML Datei. Fürgen Sie die unten hervorgehobene Zeile hinzu:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel="stylesheet" href="style1.css"> </head> <body> <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> </body> </html> - Speichern Sie die HTML Datei und aktualisieren Sie Ihre Browserdarstellung (reload). Das Stylesheet hat die Initialien rot gefärbt:
Cascading Style Sheets
Außer rot (red) erlaubt CSS noch andere Farbnamen.
Versuchen Sie fünf weitere Farbnamen herauszufinen ohne in einem Referenzdokument nachzusehen.
CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.
Was nun?
Go to Next Section:
Wie CSS funktioniert.Sie haben nun Ihr HTML-Dokument mit Ihrem separaten CSS-Stylesheet verknüpft. Als nächstes lernen Sie, wie Ihr Browser diese beiden kombiniert um das Dokument darzustellen.