Externe Seitenformatierung mit CSS (Tutorial)
![[Bildschirmfoto]
Externe Seitenformatierung mit CSS [Bildschirmfoto]
Externe Seitenformatierung mit CSS](img/css_datei_erstellen.png)
Ein kompletter Webauftritt lässt sich so, optisch mit wenigen Klicks und Einträgen verändern.
🖝 Stellen Sie Sich vor auf Ihrer Homepage gibt es zwanzig oder noch mehr Seiten und bei jeder müssen Sie die Hintergrundfarbe einzeln umändern — was für eine Tipparbeit. Und wenn Sie fertig sind, gefällt Ihnen eine andere Farbe doch besser.
Einfacher geht es mit einer externen CSS-Datei:
1. Öffnen Sie einen Texteditor zum Beispiel „Notepad“ oder Notepad++ » notepad-plus.sourceforge.net (kostenlos).
2. Fügen Sie folgende Regel (CSS-Anweisung) ein:
body { background-color: Yellow; }
3.
Speichern Sie die Datei unter dem Namen: style.css
4.
Fügen Sie einmalig in allen Seiten zwischen <head>
und </head>
folgendes ein:
<link rel="stylesheet" href="style.css
">
✔ Ab jetzt brauchen Sie nur in der Datei:
style.css
die Hintergrundfarbe zu ändern und alle anderen Seiten
haben die gleiche Hintergrundfarbe.
Formatierung mit CSS
Mit der Regel body {…}
können Sie den HTML-Tag » <body> formatieren.
Der Name body
entspricht dabei den HTML-Tag
<body>
im Dokument.
Es lassen sich auch zahlreiche andere HTML-Elemente formatieren (Mehr dazu weiter unten).
body { background-color: Yellow; }
Zwischen den geschweiften Klammern {} wird eine CSS-Anweisung eingefügt.
Mehrere Anweisungen werden mit einem Strichpunkt ; (Semikolon) voneinander getrennt.
Mit den Anweisungen kann man zum Beispiel den Hintergrund, die Schriftfarbe, die Schriftart oder die Schriftgröße ändern.
Schriftart ändern
Fügen Sie zusätzlich folgende CSS-Anweisung in der Datei: style.css
ein
(hier im Beispiel mit der Farbe Rot markiert!):
body {
background-color: Yellow;
font-family: Verdana;
}
Weitere Schriftarten: Verdana, Arial, Tahoma, Times New Roman, Courier, Courier New, Comic Sans MS, …
Schriftgröße ändern
Fügen Sie zusätzlich folgende CSS-Anweisung ein:
body {
background-color: Yellow;
font-family: Verdana;
font-size: 12px;
}
Mit font-size: 12px;
setzen Sie die Schriftgröße auf eine Größe von 12 Pixel.
Schriftfarbe ändern
Fügen Sie zusätzlich folgende CSS-Anweisung ein:
body {
background-color: Yellow;
font-family: Verdana;
font-size: 12px;
color: Blue;
}
Die Farbe können Sie als Farbnamen (Red, Blue, Green, Yellow,
…) oder Hexadezimal
(#FF0000, #0000FF, #FFFF00,
…) eintragen.
Siehe dazu » Farbnamen, Hexadezimal, Dezimal, Prozent und Negativ
Hintergrundbild einbauen
Fügen Sie zusätzlich folgende CSS-Anweisung ein:
body {
background-color: Yellow;
font-family: Verdana;
font-size: 12px;
color: Blue;
background-image: url(bild.jpg);
}
Anstatt bild.jpg
geben Sie den gewünschten Namen der Grafik ein.
CSS geht ab!
Das war noch nicht alles, CSS kann noch viel mehr, hier sind die wichtigsten Anweisungen zusammengefasst:
- Linkfarbe ändern
- HTML-Tag formatieren
- HTML-Tag (Kind-Element) formatieren
- Mehrere HTML-Elemente zusammen formatieren
- Eigenschaften mit einer „class” formatieren
- Eigenschaften mit einer „ID” formatieren
- Kind-Kombinator
- Benachbarte-Geschwister-Kombinator
- Attribut-Selektoren
- Inhalte generieren
Linkfarbe ändern
Mit neuen Regeln gestalten Sie nun die Links auf der Website. Dazu wird der <a>-Tag formatiert.
Einen normalen Link einfärben:
a:link { color: Blue; }
Einen bereits besuchten Link einfärben:
a:visited { color: Darkmagenta; }
Einen Link einfärben wenn man mit dem Mauszeiger über den Link fährt:
a:hover { color: Hotpink; }
Viele weitere Beispiele finden Sie unter: » CSS Hyperlinks
HTML-Tag formatieren
Sie können mit CSS auch viele andere HTML-Elemente formatieren, zum Beispiel den <strong>-Tag, <div>-Tag oder den <h1>-Tag:
h1 { font-family: Verdana; font-size: 18px; color: Blue; }
HTML-Tag (Kind-Element) formatieren
Des weiteren ist es möglich nur bestimmte Tags zu formatieren, zum Beispiel alle <strong>-Tags die in einem Textabsatz (mit dem <p>-Tag) vorkommen. Wichtig: Lassen Sie zwischen den zwei Tag-Namen ein Leerzeichen .
p strong {
color: Green;
}
Die HTML-Datei sollte dann so aussehen:
<p>Das ist ein <strong>kleiner</strong> Text.</p>
Das Eltern-Element ist hier im Beispiel der <p>-Tag, innerhalb dieses Tags befindet sich das Kind-Element <strong>.
Ausgabe:
Das ist ein kleiner Text.
Mehrere HTML-Elemente zusammen formatieren
Um mehrere HTML-Elemente zusammen zu formatieren, wird zwischen den Tag-Namen ein Komma , gesetzt.
Angenommen Sie möchten den <h1> und
den <div>-Tag die gleiche Hintergrundfarbe geben:
h1, div {
background-color: Green;
}
Eigenschaften mit einer „class” formatieren
In CSS ist es möglich eine „class” (Klasse) zu definieren. Sie können irgend einen Namen für die Regel verwenden. Wichtig ist, das Sie vor der Regel einen Punkt . setzen.
➤ Ein Name muss mit einem Buchstaben beginnen (A-Za-z). Jedes weitere Zeichen kann ein Buchstabe, eine Ziffer (0-9), ein Bindestrich-Minus (-) oder ein Unterstrich (_) sein. Außerdem darf eine Klasse keine deutschen Umlaute (ä,ö,ü, …), Leerzeichen oder Sonderzeichen enthalten.
.textfarbe_blau {
color: Blue;
}
In der HTML-Datei bauen Sie dann folgendes ein:
<span class="textfarbe_blau">Das ist ein kleiner Text.</span>
Ausgabe: Das ist ein kleiner Text.
Ein weiteres Beispiel:
.hintergrund_gelb { background-color: Yellow; }
In der HTML-Datei bauen Sie dann folgendes ein:
<span class="hintergrund_gelb">Das ist ein kleiner Text.</span>
Ausgabe: Das ist ein kleiner Text.
• Beide Klassen zusammen benutzen.
Hier setzen Sie zwischen den beiden Klassen einfach ein Leerzeichen .
<span class="textfarbe_blau hintergrund_gelb">Das ist ein kleiner Text.</span>
Ausgabe: Das ist ein kleiner Text.
Eigenschaften mit einer „ID” formatieren
Soll Ihre Navigation auf jeder Seite gleich aussehen, dann nehmen Sie am
besten eine ID. Im Gegensatz zur einer „class” darf das Attribut „id”
(Bsp.: id="navigation"
) nur ein einziges mal auf der Seite stehen.
Sie können irgend einen Namen für die Regel verwenden. Wichtig ist, das Sie vor der
Regel eine Raute # setzen.
➤ Ein Name muss mit einem Buchstaben beginnen (A-Za-z). Jedes weitere Zeichen kann ein Buchstabe, eine Ziffer (0-9), ein Bindestrich-Minus (-) oder ein Unterstrich (_) sein. Außerdem darf eine ID keine deutschen Umlaute (ä,ö,ü, …), Leerzeichen oder Sonderzeichen enthalten.
#navigation {
background-color: Papayawhip;
width: 150px;
padding: 10px;
border-radius: 12px;
}
In der HTML-Datei bauen Sie dann folgendes ein:
<div id="navigation"> <a href="link1.htm">Demolink 1</a> <br> <a href="link2.htm">Demolink 2</a> <br> <a href="link3.htm">Demolink 3</a> </div>
Ausgabe:
Kind-Kombinator
Der Kind-Kombinator (>) beschreibt eine direkte Eltern-Kind-Beziehung. Die Anweisung
body > p
betrifft also nur Absätze,
die unmittelbar auf body
folgen, nicht aber Absätze, die im weiteren
definierten <div>-Tag enthalten sind.
body > p {
color: Yellow;
}
<body> <p>...</p> <div id="inhalt"> <p>...</p> </div> <p>...</p>
Der Absatz innerhalb des <div>-Tags mit der ID #inhalt
wird von der Anweisung
body > p
nicht erfasst.
Benachbarte-Geschwister-Kombinator
Der Benachbarte-Geschwister-Kombinator (+) erfasst Elemente, die unmittelbar aufeinander folgen. Möchte man zum Beispiel den ersten Absatz (p), der auf eine Überschrift (h1) folgt, immer gefettet darstellen, könnte man folgendes anweisen:
h1 + p {
font-weight: bold;
}
Attribut-Selektoren
HTML-Elemente können mit CSS über ihre Attributwerte angesprochen werden um diese anzupassen. Im folgenden Beispiel werden Hyperlinks mit Symbolen gekennzeichnet, die Besucher erkennen sofort, was Ihnen beim anklicken des jeweiligen Links erwartet.
Links ein Icon zuweisen
• Zeigt Symbolische Links bei allen Links die mit http:// beginnen (^).
a[href^="http://"] { padding-right: 16px; background: url(extern.png) right no-repeat; }
<a href="http://www.google.de">Google.de</a>
- Google.de
• Zeigt Symbolische Links bei allen Links die mit .zip enden ($).
a[href$=".zip"] { padding-left: 15px; background: url(download.gif) left no-repeat; }
<a href="datei.zip">Datei herunterladen</a>
- Datei herunterladen
• Zeigt Symbolische Links bei allen Links die bing enthalten (*).
a[href*="bing"] { padding-right: 14px; background: url(stein.gif) right no-repeat; }
<a href="http://www.bing.de">Bing.de</a>
- Bing.de
Inhalte generieren
Die CSS-Anweisung content generiert zusammen mit ::before und
::after einfache Zeichenketten vor oder nach dem Element.
Im Beispiel wird im <div>-Tag mit der
ID #test
neuer Inhalt hinzugefügt:
div#test::before { content: "Alt"; background-color: Lawngreen; } div#test::after { content: "Neu"; background-color: Fuchsia; }
<div id="test"> -Beispiel- </div>
Bild hinzufügen
div.test2::after { content: url(birne.gif); }
<div class="test2">Glühbirne: </div>
CSS-Anweisungen einfach oder kompliziert
Bei den CSS-Anweisungen sollten Sie immer genau wissen was Sie machen. Verwenden Sie einfache Anweisungen um Ihre Website zu gestalten, an komplexe Anweisungen können Sie sich später, mit mehr Erfahrung, heran wagen.
Weitere CSS-Anweisungen und Tipps finden Sie unter » Textgestaltung mit CSS, » Farbverlauf mit CSS, » CSS Hyperlinks und ein wenig Spielerei unter » Bilder mit Hover-Effekt