CSS: Gestaltung des Inhalts
CSS (Cascading Stylesheets) ist der Code, der Webinhalte gestaltet. Die Gestaltung des Inhalts führt Sie durch alles, was Sie für den Einstieg benötigen. Wir werden Fragen beantworten wie: Wie mache ich Text rot? Wie kann ich Inhalte an einer bestimmten Stelle im (Webseiten-) Layout anzeigen lassen? Wie kann ich meine Webseite mit Hintergrundbildern und Farben dekorieren?
Voraussetzungen: | Grundlegende Vertrautheit mit Ihrem Betriebssystem, der grundlegenden Software, die Sie zum Erstellen einer Webseite nutzen werden, und Dateisystemen. |
---|---|
Lernziele: |
|
Was ist CSS?
Ähnlich wie HTML ist CSS keine Programmiersprache. Es ist auch keine Auszeichnungssprache. CSS ist eine Stylesheet-Sprache. Mit CSS können Sie gezielt HTML-Elemente gestalten. Zum Beispiel wählt dieses CSS den Absatztext aus und ändert die Farbe zu Rot:
p {
color: red;
}
Probieren wir es aus!
- Erstellen Sie in Ihrem Ordner
first-website
einen neuen Ordner namensstyles
. - Fügen Sie mit einem Texteditor die drei oben gezeigten CSS-Zeilen in eine neue Datei ein.
- Speichern Sie die Datei in Ihrem Ordner
styles
mit dem Namenstyle.css
.
Damit der Code funktioniert, müssen wir dieses CSS (oben) in Ihr HTML-Dokument einbinden. Andernfalls wird das Styling das Aussehen des HTML nicht ändern.
-
Öffnen Sie Ihre Datei
index.html
. Fügen Sie die folgende Zeile im Kopfbereich des HTML-Dokuments ein (zwischen den<head>
-Tags und</head>
):html<link href="styles/style.css" rel="stylesheet" />
-
Speichern Sie
index.html
und laden Sie es in Ihrem Browser. Sie sollten etwas wie das hier sehen:
Wenn Ihr Absatztext rot ist, herzlichen Glückwunsch! Ihr CSS funktioniert.
Anatomie eines CSS-Rulesets
Lassen Sie uns den CSS-Code für roten Absatztext analysieren, um zu verstehen, wie er funktioniert:
Die gesamte Struktur wird als Ruleset bezeichnet. (Der Begriff Ruleset wird oft einfach als Regel bezeichnet.) Beachten Sie die Namen der einzelnen Teile:
- Selektor
-
Dies ist der HTML-Elementname am Anfang des Rulesets. Er definiert die Elemente, die gestaltet werden sollen (in diesem Beispiel
<p>
-Elemente). Um ein anderes Element zu gestalten, ändern Sie den Selektor. - Deklaration
-
Dies ist eine einzelne Regel wie
color: red;
. Sie gibt an, welche Eigenschaften des Elements gestaltet werden sollen. - Eigenschaften
-
Dies sind Merkmale eines HTML-Elements, deren Werte Sie ändern können, um das Aussehen anzupassen. (In diesem Beispiel ist
color
eine Eigenschaft der<p>
-Elemente.) In CSS wählen Sie, welche Eigenschaften Sie in der Regel beeinflussen möchten. - Eigenschaftswert
-
Rechts von der Eigenschaft – nach dem Doppelpunkt – steht der Eigenschaftswert. Damit wird ein bestimmtes Erscheinungsbild für eine gegebene Eigenschaft ausgewählt. (Zum Beispiel gibt es viele
color
-Werte zusätzlich zured
.)
Beachten Sie die weiteren wichtigen Teile der Syntax:
- Abgesehen vom Selektor muss jedes Ruleset von geschweiften Klammern umschlossen sein (
{}
). - Innerhalb jeder Deklaration müssen Sie einen Doppelpunkt (
:
) verwenden, um die Eigenschaft von ihrem Wert oder ihren Werten zu trennen. - Innerhalb jedes Rulesets müssen Sie ein Semikolon (
;
) verwenden, um jede Deklaration von der nächsten zu trennen.
Um mehrere Eigenschaftswerte in einem Ruleset zu modifizieren, schreiben Sie sie durch Semikolons getrennt, wie hier:
p {
color: red;
width: 500px;
border: 1px solid black;
}
Mehrere Elemente auswählen
Sie können auch mehrere Elemente auswählen und ein einziges Ruleset auf alle anwenden. Trennen Sie mehrere Selektoren durch Kommata. Zum Beispiel:
p,
li,
h1 {
color: red;
}
Verschiedene Arten von Selektoren
Es gibt viele verschiedene Selektortypen. Die obigen Beispiele verwenden Elementselektoren, die alle Elemente eines bestimmten Typs auswählen. Aber wir können auch spezifischere Auswahlen treffen. Hier sind einige der häufigeren Selektortypen:
Selektorname | Was wird ausgewählt | Beispiel |
---|---|---|
Elementselektor (manchmal als Tag- oder Typselektor bezeichnet) | Alle HTML-Elemente des angegebenen Typs. | p wählt <p> |
ID-Selektor | Das Element auf der Seite mit der angegebenen ID. Auf einer HTML-Seite sollte jeder ID-Wert einzigartig sein. |
#my-id wählt <p id="my-id"> oder
<a id="my-id">
|
Klassenselektor | Das/Die Element(e) auf der Seite mit der angegebenen Klasse. Mehrere Instanzen derselben Klasse können auf einer Seite vorkommen. |
.my-class wählt <p class="my-class"> und
<a class="my-class">
|
Attributselektor | Die Element(e) auf der Seite mit dem angegebenen Attribut. |
img[src] wählt <img src="my-image.png"> , aber nicht
<img>
|
Pseudo-Klassenselektor | Die angegebenen Elemente, aber nur wenn sie im angegebenen Zustand sind. (Zum Beispiel, wenn ein Cursor über einen Link schwebt.) |
a:hover wählt <a> , aber nur wenn
der Mauszeiger über den Link schwebt.
|
Es gibt noch viele Selektoren zu entdecken. Um mehr zu erfahren, lesen Sie unsere Selektor-Tutorials, beginnend mit Basis-Selektoren.
Schriftarten und Text
Da wir einige CSS-Grundlagen erkundet haben, verbessern wir das Erscheinungsbild des Beispiels, indem wir weitere Regeln und Informationen zur Datei style.css
hinzufügen.
-
Suchen Sie zuerst den Output von Google Fonts, den Sie zuvor aus Wie wird Ihre Webseite aussehen? gespeichert haben. Fügen Sie das
<link>
-Element irgendwo in den Kopfbereich Ihrerindex.html
ein (irgendwo zwischen den<head>
-Tags und</head>
). Es sieht etwa so aus:html<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
Dieser Code verlinkt Ihre Seite mit einem Stylesheet, das die Schriftfamilie Open Sans für Ihre Webseite lädt.
-
Löschen Sie anschließend die bestehende Regel in Ihrer Datei
style.css
. Es war ein guter Test, aber wir wollen nicht mit viel rotem Text weitermachen. -
Fügen Sie die folgenden Zeilen hinzu (unten gezeigt) und ersetzen Sie die Zuweisung von
font-family
mit Ihrerfont-family
-Auswahl aus Wie wird Ihre Webseite aussehen?. Die Eigenschaftfont-family
bezieht sich auf die Schriftart(en), die Sie für Text verwenden möchten. Diese Regel definiert eine globale Basis-Schriftart und Schriftgröße für die gesamte Seite. Da<html>
das Elternelement der gesamten Seite ist, erben alle darin enthaltenen Elemente die gleichefont-size
undfont-family
.csshtml { font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high */ font-family: "Open Sans", sans-serif; /* this should be the rest of the output you got from Google Fonts */ }
Hinweis: Alles zwischen
/*
und*/
in CSS ist ein CSS-Kommentar. Der Browser ignoriert Kommentare beim Rendern des Codes. CSS-Kommentare sind eine Möglichkeit, hilfreiche Notizen zu Ihrem Code oder Ihrer Logik zu schreiben. -
Setzen wir nun Schriftgrößen für Elemente, die Text im HTML-Body enthalten (<h1>,
<li>
und<p>
). Wir zentrieren auch die Überschrift. Schließlich erweitern wir das zweite Ruleset (unten) mit Einstellungen für Zeilenhöhe und Zeichenabstand, um den Hauptinhaltsblock besser lesbar zu machen.cssh1 { font-size: 60px; text-align: center; } p, li { font-size: 16px; line-height: 2; letter-spacing: 1px; }
Passen Sie die px
-Werte nach Belieben an. Ihre Arbeit sollte aussehen wie hier:
CSS: Alles über Boxen
Etwas, das Sie mit CSS zunehmend bemerken werden: Vieles davon dreht sich um Boxen. Dazu gehört das Festlegen von Größe, Farbe und Position. Die meisten HTML-Elemente auf Ihrer Seite können als Boxen betrachtet werden, die auf anderen Boxen liegen.
Foto von https://www.geograph.org.uk/photo/3418115 Copyright © Jim Barton cc-by-sa/2.0
CSS-Layout basiert hauptsächlich auf dem Box-Modell. Jede Box, die Platz auf Ihrer Seite einnimmt, hat Eigenschaften wie:
padding
, der Raum um den Inhalt. Im untenstehenden Beispiel ist es der Raum um den Absatztext.border
, die feste Linie, die sich direkt außerhalb des Paddings befindet.margin
, der Raum rund um die Außenseite des Rahmens.
In diesem Abschnitt verwenden wir außerdem:
width
(eines Elements).background-color
, die Hintergrundfarbe eines Elements und seines Paddings.color
, die Farbe des Inhalts eines Elements (normalerweise Text).text-shadow
setzt einen Schlagschatten auf den Text innerhalb eines Elements.display
legt den Anzeigemodus eines Elements fest (lesen Sie weiter, um mehr zu erfahren).
Fahren wir fort, indem wir weiteres CSS hinzufügen. Fügen Sie die neuen Regeln unten in style.css
ein. Experimentieren Sie mit der Änderung von Werten, um zu sehen, was passiert.
Die Farbe der Seite ändern
html {
background-color: #00539f;
}
Diese Regel setzt eine Hintergrundfarbe für die gesamte Seite. Ändern Sie den Farbcode auf die Farbe, die Sie in "Wie wird meine Webseite aussehen?" gewählt haben.
Den body
gestalten
body {
width: 600px;
margin: 0 auto;
background-color: #ff9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
Der obige Code setzt neue Werte für mehrere Eigenschaften des <body>
-Elements. Gehen wir die Werte Zeile für Zeile durch:
width: 600px;
Dies zwingt den Body, immer 600 Pixel breit zu sein.margin: 0 auto;
Wenn Sie zwei Werte bei einer Eigenschaft wiemargin
oderpadding
setzen, betrifft der erste Wert die obere und untere Seite des Elements (in diesem Fall0
); der zweite Wert betrifft die linke und rechte Seite. (Hier istauto
ein spezieller Wert, der den verfügbaren horizontalen Raum gleichmäßig zwischen links und rechts aufteilt.) Sie können auch ein, zwei, drei oder vier Werte verwenden, wie in der Margin-Syntax dokumentiert.background-color: #FF9500;
Diese Eigenschaft setzt die Hintergrundfarbe des Elements. In diesem Projekt wird eine rötlich-orange Farbe für das Body-Hintergrundfarbe verwendet, im Gegensatz zu Blau für das<html>
-Element. (Experimentieren Sie ruhig.)padding: 0 20px 20px 20px;
Dies setzt vier Werte für das Padding. Ziel ist es, etwas Platz um den Inhalt zu schaffen. In diesem Beispiel gibt es kein Padding oben und 20 Pixel auf der rechten, unteren und linken Seite. Die Werte setzen von oben, rechts, unten, links, in dieser Reihenfolge. Wie beimargin
, können Sie ein, zwei, drei oder vier Werte verwenden, wie in der Padding-Syntax dokumentiert.border: 5px solid black;
Dies setzt Werte für die Breite, den Stil und die Farbe des Rahmens. In diesem Fall handelt es sich um einen durchgehenden schwarzen Rahmen mit einer Breite von fünf Pixeln, auf allen Seiten des Bodys.
Positionierung und Gestaltung des Hauptseitentitels
h1 {
margin: 0;
padding: 20px 0;
color: #00539f;
text-shadow: 3px 3px 1px black;
}
Möglicherweise ist Ihnen aufgefallen, dass oben im Body ein hässlicher Abstand vorhanden ist. Das liegt daran, dass Browser Default-Styling auf h1-Elemente (unter anderem) anwenden. Das mag wie eine schlechte Idee erscheinen, aber die Absicht besteht darin, rudimentäre Lesbarkeit für ungestylte Seiten zu gewährleisten. Um diesen Abstand zu entfernen, überschreiben wir das Standard-Styling des Browsers mit der Einstellung margin: 0;
.
Als Nächstes setzen wir das obere und untere Padding der Überschrift auf 20 Pixel.
Danach setzen wir die Überschriftentextfarbe identisch mit der HTML-Hintergrundfarbe ein.
Schließlich setzt text-shadow
einen Schatten auf den Textinhalt des Elements. Die vier Werte sind:
- Der erste Pixelwert legt den horizontalen Versatz des Schattens relativ zum Text fest: wie weit er sich horizontal bewegt.
- Der zweite Pixelwert legt den vertikalen Versatz fest: wie weit er sich nach unten bewegt.
- Der dritte Pixelwert setzt den Unscharfungsradius des Schattens. Ein größerer Wert erzeugt einen unschärferen Schatten.
- Der vierte Wert setzt die Grundfarbe des Schattens.
Versuchen Sie, mit verschiedenen Werten zu experimentieren, um zu sehen, wie sie das Aussehen verändern.
Das Bild zentrieren
img {
display: block;
margin: 0 auto;
max-width: 100%;
}
Als Nächstes zentrieren wir das Bild, damit es besser aussieht. Wir könnten denselben Trick margin: 0 auto
wie beim Body anwenden. Es gibt jedoch Unterschiede, die eine zusätzliche Einstellung erfordern, damit das CSS funktioniert.
Das <body>
ist ein Block-Element, was bedeutet, dass es Platz auf der Seite einnimmt. Der auf ein Block-Element angewandte Rand wird von anderen Elementen auf der Seite respektiert. Im Gegensatz dazu sind Bilder Inline-Elemente; damit der Auto-Margin-Trick bei diesem Bild funktioniert, müssen wir ihm Block-Level-Verhalten mit display: block;
zuweisen.
Schließlich fügen wir max-width: 100%;
hinzu, um sicherzustellen, dass das Bild, wenn es größer als die für den Body festgelegte Breite (600 Pixel) ist, bei dieser Breite angezeigt wird und nicht größer.
Hinweis:
Machen Sie sich keine allzu großen Sorgen, wenn Sie display: block;
und die Unterschiede zwischen einem Block-Element und einem Inline-Element oder max-width: 100%;
nicht vollständig verstehen. Diese werden Ihnen beim weiteren Studium von CSS klarer werden. Weitere Informationen zu diesen Eigenschaften finden Sie auf MDNs display
und max-width
Referenzseiten.
Fazit
Wenn Sie alle Anweisungen in diesem Artikel befolgt haben, sollten Sie eine Seite haben, die ähnlich wie diese aussieht:
(Sie können unsere Version hier ansehen.) Wenn Sie Schwierigkeiten haben, können Sie Ihre Arbeit immer mit unserem fertigen Beispielcode auf GitHub vergleichen.
In diesem Artikel haben wir nur an der Oberfläche von CSS gekratzt. Unsere Kernmodule, beginnend mit dem Modul zu den Grundlagen der CSS-Gestaltung, werden dies viel ausführlicher behandeln.