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 auch sehr gut für „ul, table, img, usw.“ verwendet 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:




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.

Diese Schriftart muss dann auch im System installiert sein, ansonsten verwendet der Browser die Standardeinstellungen. Um weitere Funktionen zu nutzen kann CSS3 verwendet werden, insofern dies der Browser unterstützt.



#id_name {
    font-family: arial, Verdana;
}

CSS Code Beispiel:



Ausgabe im Browser:



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.


FIXME

.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>
...



HTML Code Beispiel:



Ausgabe im Browser:




Text einrücken


Erste Zeile im Absatz einrücken mit text-indent.

.class {
    text-indent: 40px;
}


CSS Code Beispiel:



Ausgabe im Browser:



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%;
}



CSS Code Beispiel:

firstletter.jpg

Ausgabe im Browser:



Cloud