CSS HTML Kopf Inhalt Fussbereich Schriften Schriftgrößen

Hier befassen wir uns mit dem Kopf, Inhalt, und fußbereich. So wie Schriften, und schriftgrößen.
Bitte nicht vergessen, dass der Verweis zur CSS Datei, in diesem Fall, die externe CSS Datei im Header nicht fehlen darf.

<link href=”css/ style.css” rel=”stylesheet” type=”text/css”>

CSS Definition:

body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
}

#kopfbereich
{
background-color: #ff0000;height:100px;
}
#inhaltsbereich {
background-color: limegreen;height:418px;
}
#fussbereich {
background-color: silver;height:50px;
}

* {
margin:0;
padding:0;
}

Erklärung:

Ob als Farbe ein Hexadezimalwert, oder ein farbenname angegeben wird, macht keinen Unterschied. Es ist beides erlaubt. Siehe Beispiel, den Wert im “Kopfbereich”.
Die Werte “margin:0; so wie padding:0; müssen zusätzlich angeben werden, da jeder Internetbrowser von Hause aus, mit einem  Vorgaben für Abstände etc. konfiguriert wurde. Die beiden Werte setzen die Standardwerte in diesem Fall außer Kraft, und es entstehen keine Lücken mehr.

Html Definition:

<div id=”kopfbereich”>
<p align=”center” >Hier kommt der Kopfbereich.</p>
</div>
<div id=”inhaltsbereich”>
<h1>Beispiel für das  Layout im Body Bereich.</h1>
<p>Hier unser Inhalt</p>
<p>Und mehr Inhalt</p>
</div>
<div id=”fussbereich”>
<p>Fußbereich</p>
</div>

Html Erklärung:

Standardmäßig wird ein Text, oder Bild in einem Tag immer links begonnen. Wir aber so wie im Beispiel des “Kopfbereich” der Wert “align=”center” eingesetzt, erscheint der Inhalt in der Mitte.
Mit “<h1>”, so  wie “</h1>” setzt man auch Überschriften. Die kleineste Schriftgröße wäre in diesem Fall “<h6>”und geschlossen wieder mit “</h6>”

Standard Farbnamen in CSS:

Es gibt folgende 16 Standard Farbnamen:
Black, Maroon, Green, Olive, Navy, Purple, Teal, Gray, Silver, Red, Lime, Yellow, Blue, Fuchsia, Aqua, White. Dazu kommen noch unzählige erweiterte farbennamen.
Wie jedoch bereits erwähnt, können in CSS auch durchaus anstatt der Farbnamen auch Hexawerte eingegeben werden, jedoch muss dann immer die Route # davor gesetzt werden. Hexawerte bestehen immer aus 6 Zahlen, oder auch Zahlen mit Buchstaben kombiniert.

Schriften in CSS:

Schriften werden immer mit “font-family”  begonnen, dahinter mit den eigentlichen Schriftarten.
Die wohl am meisten verwendete ist
{
font-family: Verdana, Arial, Helvetica, sans-serif;
}
Bei Bestimmungen bestimmter Schriften, sei jedoch Vorsicht geboten. Wie zum Beispiel der altdeutschen Schrift.
Es gibt Schriftarten, die nicht im Betriebssystem von Hause aus installiert sind. Ist jedoch die Interesse dafür so groß, dass unbedingt eine Schriftart verwendet wird, die nicht im Betriebssystem installiert ist, also separat installiert werden muss, so besteht hier der Nachteil, dass die Schrift zwar auf dem eigenen PC sichtbar ist, aber der Besucher der Webseite sieht sie nur als Standardschrift.

Es gibt daher nur eine einzige Möglichkeit, damit auch der Besucher der Webseite die gleiche Schrift zu sehen bekommt, in dem die Schrift als Bild in die Webseite eingebunden wird.
Ob sich dieser Aufwand jedoch lohnt, ist Ansichtssache.

Schriftgröße in CSS:

Diese wird meist in absolute Pixel { font-size: 20px; } angegeben. Wobei die Zahl 20 hier nur als Beispiel angegeben ist. Es gibt auch “pt” für Point, so wie “in” für Inch, “mm” für Millimeter, “cm” für Zentimeter.

Comments are closed.