CSS - Die ersten schritte
CSS (Cascading Style Sheets) wird zum Stylen und Layouten von Webseiten verwendet. Sie können beispielsweise die Schriftart, Farbe, Größe und den Abstand Ihres Inhalts ändern, ihn in mehrere Spalten aufteilen oder Animationen und andere dekorative Funktionen hinzufügen. Dieses Modul bietet einen sanften Einstieg in die CSS-Beherrschung mit den Grundlagen, wie es funktioniert, wie die Syntax aussieht und wie Sie damit HTML-Stilen hinzufügen können.
Voraussetzungen
Bevor Sie dieses Modul starten, sollten Sie:
- Grundlegende Vertrautheit mit der Verwendung von Computern und der passiven Verwendung des Webs (dh Betrachten, Konsumieren des Inhalts).
- Eine grundlegende Arbeitsumgebung, eine Basissoftware die auf Ihrem Computer eingerichtet wurde , und ein Verständnis für das Erstellen und Verwalten von Dateien.
- Grundlegende Vertrautheit mit HTML.
Anleitungen
Los geht es!
Wir nehmen ein einfaches HTML-Dokument und wenden CSS darauf an. Dabei lernen wir einige praktische Dinge über die Sprache.
Beginnend mit etwas HTML
Unser Ausgangspunkt ist ein HTML-Dokument. Sie können den Code von unten kopieren, wenn Sie auf Ihrem eigenen Computer arbeiten möchten. Speichern Sie den folgenden Code index.html in einem
Ordner auf Ihrem Computer.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Die serten Schritte mit CSS</title>
</head>
<body>
<h1>Überschrift in h1</h1>
<p>Dies ist der erste Abschnitt. In diesem Text ist ein <span>span element</span>
und auch ein <a href="http://example.com">link</a> enthalten.</p>
<p>Dies ist der zweite Abschnitt. Dieser enthält <em>emphasized</em> element.</p>
<ul>
<li>Item eins</li>
<li>Item zwei</li>
<li>Item <em>drei</em></li>
</ul>
</body>
</html>
Hinzufügen von CSS in unser Dokument
Das allererste, was wir tun müssen, ist dem HTML-Dokument mitzuteilen, dass wir einige CSS-Regeln haben, die wir verwenden möchten. Es gibt drei verschiedene Möglichkeiten, CSS auf ein HTML-Dokument anzuwenden, auf das Sie häufig stoßen. Im Moment werden wir uns jedoch mit der üblichsten und nützlichsten Methode befassen - dem Verknüpfen von CSS vom Kopf Ihres Dokuments aus.
Erstellen Sie eine Datei im selben Ordner wie Ihr HTML-Dokument und speichern Sie sie unter styles.css. Die .css Erweiterung zeigt, dass dies eine CSS-Datei ist.
Um nun die style.css mit der index.html zu Verknüpfen müssen Sie die folgende Zeile irgendwo im
<head> HTML-Dokument hinzuzufügen:
<link rel="stylesheet" href="styles.css"
Dieses Element teilt dem Browser mit, dass wir ein extrenes Dokument haben was eingebunden werden soll. Das relAttribut Sagt dem Browser das es sich bei diesem Dokument um ein Styleshhet handelt und
der href Attribut gibt an wo das Dokument auf dem Server zu finden ist. Sie können nun testen, ob der Browser die Codezeile lesen kann und CSS funktioniert, indem Sie eine Regel in Ihre sytle.css
hinzufügen.
Fügen Sie mit Ihrem Code-Editor folgendes zu Ihrer CSS-Datei hinzu:
h1 {
color: red;
}
Speichern Sie Ihre HTML- und CSS-Dateien und laden Sie die Seite in einem Webbrowser neu. Die Überschrift der Ebene 1 oben im Dokument sollte jetzt rot sein. In diesem Fall herzlichen Glückwunsch - Sie haben erfolgreich CSS auf ein HTML-Dokument angewendet. Wenn dies nicht der Fall ist, überprüfen Sie sorgfältig, ob Sie alles richtig eingegeben haben.
Hmtl-Elemente mit CSS gestalten und verschönern
Indem wir unsere Überschrift rot machen konnten, haben wir bereits gezeigt, dass wir bestimmte Element in einem HTML-Dokument als Ziel festlegen und formatieren können. Wir tun dies, indem wir auf einen
Element-Selektor abzielen - dies ist ein Selektor, der direkt mit einem HTML-Elementnamen übereinstimmt. Um alle Absätze im Dokument auszurichten, verwenden Sie die Auswahl p. Um alle Absätze
grün zu machen, würden Sie Folgendes verwenden:
p {
color: green;
}
Sie können mehrere Selektoren gleichzeitig ansprechen, indem Sie die Selektoren durch ein Komma trennen. Wenn alle Absätze und Listenelemente grün sein sollen, sieht der CSS-Code folgendermaßen aus:
p, li {
color: green;
}