CSS2
Mit CSS (Cascading Style Sheets) lassen sich Seitenlayout und Inhalte voneinander getrennt und formatiert darstellen. Die Daten der „*.css“ Dateien werden immer von oben nach unten gelesen. Gleiche „id="name"“ Elemente sollten im HTML Dokument nur einmal, gleiche „class="name"“ Elemente können mehrmals definiert werden.
Die CSS Elemente können innerhalb des „head“ Kontainers definiert werden.
<head> ... <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> ... <style type="text/css"> <!-- body { font-family: verdana, Arial; font-size: 12px; } #divs { CSS Elemente } .class { CSS Elemente } --> </style> </head> ...
HTML Code Beispiel:
Besser ist es, die CSS Datei auszulagern. Diese wird dann folgendermassen in die HTML Konstruktion eingebunden.
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <link href="css/datei.css" type="text/css" rel="stylesheet" media="screen" /> ... </head> ... ... </html>
HTML Code Beispiel:
font (Schrift)
Alles was mit Schriftart, Schriftgröße, Farbe, Ausrichtung zu tun hat.
font-family
Mit font-family wird die Schriftart definiert, die in der Webseite im Browser angezeigt werden soll.
#id_name { font-family: arial, Verdana; }
font-size
Mit font-size wird die Schriftgröße festgelegt.
Die Schriftgröße kann mit folgenden Parametern ausgegeben werden:
- px ⇒ Gibt die Schiftgröße in Pixel aus.
- % ⇒ Gibt die Schriftgröße prozentual der Schriftgröße des Elternelementes aus.
.fosi10 { font-size: 10px; } .fosi12 { font-size: 12px; } .fosi16 { font-size: 16px; }
CSS Code Beispiel:
... <div id="">Ausgabe der Schrift in</div> <div class="fosi10">10 px</div> <div class="fosi12">12 px</div> <div class="fosi16">16 px</div> ...
Textformatierung
Text einrücken
Erste Zeile im Absatz einrücken mit text-indent.
.class { text-indent: 40px; }
Erster Buchstabe Gross
Mit dem Pseudo Element first-letter kann man den ersten Buchstaben im Absatz vergrössert darstellen.
.class:first-letter { font-size: 200%; }
Cloud