CSS/HTML - Zweiter Artikel

Im letzten Artikel ging es um eine allgemeine Information, wie CSS mit HTML verbunden ist, und einem Beispiel dazu.

Bitte nicht vergessen, im Header der Html Seite muss der Verweis zur CSS vermerkt sein, ansonsten wirkt der “class“ Befehl nicht.

In der CSS werden einzelne Classen definiert, die dann in Html zur Anwendung kommen.
Der Classen-Wert ist das Stichwort für den Html Eintrag. Alles was innerhalb eines CSS Classen-Wertes steht, wird in Html bei der Classen-Eingabe alles so ausgegeben.

Wird nur ein Wort, ohne Punkt davor in der CSS als Classen-Wert angegeben, wird das Wort auch im Html als Klasse erfasst, bzw. erkannt.

Beispiel CSS Definition:
body = Textkörper
{
font-family: Verdana, Arial, Helvetica, sans-serif; = Schriftart
font-size: 12px; = Schriftgröße
text-decoration: none; = Der Text, wird er als Link dargestellt, wird nicht unterstrichen.
background-color:#4D4D4D; = Hintergrundfarbe der Seite
}

Der Hintergrund einer Webseite kann auch durchaus mit einem Bild in der CSS definiert werden.
background-image:url(../baum-engel_1.gif); = Zieladresse, wo das Bild liegt.
background-repeat:no-repeat; = Das Bild wird nicht gekachelt.
background-position:270px 250px; = Die genaue Position des Bildes.

Jedoch sei bemerkt, dass ein Hintergrundbild auf einer Webseite, nur in bestimmten Größen ratsam ist, da ein Bild immer feste Werte hat. Wird das Browserfenster kleiner gemacht, so ist auch das Bild nicht mehr richtig sichtbar.

HTML Definition:
Hier wird nur der Textkörper (body) definiert. Enthalten sind Schrift, Schriftgröße, so wie der Hintergrund, der Seite, in diesem Fall ein Farbwert.

Steht vor der Classen-Bestimmung ein Punkt, so muss in Html im entsprechenden Tag mit dem Wort “class“ begonnen werden..

Beispiel CSS Definition für fette Schrift:
.fett
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bolder;
font-variant: normal;
color: #CED0D7;
text-decoration: none;}

Sollen auf einer Seite auch verschiedene Schriftgrößen usw. geben, so ist eine neue Klasse zu bestimmen, die genau die Werte beinhaltet, die benötigt werden. Den Klassennamen, den kann man selbst bestimmen.

Html Definition:
Das ist ein Test

——————————————————————————————————————————–

Tabellen sollten immer in Prozentwerten angegeben werden, ist aber nicht zwingend. Bei der Höhenangabe ist jedoch der Pixelwert angzugeben.

CSS Definition:
table {width:90%; weight:700; }
td { border:1px solid #000; vertical-align:top; overflow:hidden; }

Html Definition:

Dies ist ein Test

———————————————————————————————————————————

Es gibt verschiedenste CSS Definierungen, in der die Werte für alle möglichen Bestimmungen in der Html Seite bestimmt werden können.
Sei es nun verschiedene Schriftgrößen, oder auch Tabellen, alles wird über die CSS vordefiniert.
Auch scripte können über die CSS definiert werden.
Zum Beispiel mit der Maus über einen Text fahren, und die Farbe des Textes ändert sich.

Zum Schluss sei noch bemerkt, dass alle Definitionen, bevor eine Webseite veröffentlicht wird, mit verschiedenen Browsern getestet werden sollten.
Leider haben die gängigsten Browserhersteller, wie Microsoft, mit dem Internet-Explorer, und Mozilla mit dem Firefox öfters einmal Probleme in der gleichen Darstellungsweise.

Dies liegt teilweise auch daran, weil der Weltgrößte Browserhersteller sich nicht unbedingt an den W3C Consortium Standard hält. Dieser kann leider nur Empfehlungen aussprechen, nach denen sich aber niemand richten muss.

Comments are closed.