Über mich

Startseite arrow Know How arrow CSS Workshop arrow Der Aufbau einer CSS-Datei

Der Aufbau einer CSS-Datei


Die Syntax, also wie eine CSS-Datei aufgebaut sein muss, ist sehr einfach gehalten. Im Prinzip sagt man nicht mehr als folgendes:

Die Klasse "infotext" soll die Schriftart Verdana haben mit der Größe 12 Pixel und der Farbe rot. Im CSS-Code sieht das jetzt so aus:

.infotext {
    font-family:Verdana;
    font-size:12px;
    color:#FF0000;
}



Ich habe mir angewöhnt die Einträge einer Klasse immer so einzurücken. Das ist aber jedem selbst überlassen. Diese Art der Notierung ist jedoch weitverbreitet und erleichtert so das Arbeiten ungemein.

Man unterscheidet bei CSS zwischen "Class" und "Id". Eine ID ist einmalig und wird auf einer Seite nur einmal verwendet. Eine Klasse kann mehrmals benutzt werden. Warum man darin unterscheidet liegt an der Speichernutzung des Browsers. Ist aber heutzutage auch nicht mehr von großer Relevanz. Wer mit anderen Programmiersprachen mal gearbeitet hat kennt, diese Unterscheidung unter Variablendeklaration.

Wenn unsere Klasse "infotext" eine ID wäre, hätten wir im Stylesheet keinen Punkt davor gesetzt sondern eine Raute (#). Hinter dem ".infotext" öffnen und schließen wir den Bereich mit geschweiften Klammern { }. Alles was dazwischen steht wird dem Element zugeordnet. Jede Eigenschaft wird mit einem Semikolon (;) getrennt.

Man kann aber nicht nur Klassen definieren sondern auch allgemeinen HTML-Elementen von vornherein sagen, wie sie auszusehen haben.

Innerhalb der HTML-Codes gibt es verschiedene Tags, z.B: <body> <a> <img> <ul> <br> <p>

Allen diesen Tags können wir jetzt von Anfang an sagen, wie sie auszusehen haben. Also zum Beispiel sollen alle Bilder (img) einen 2 Pixel dicken, blauen Rand haben:

img {
    border:2px solid #0000FF;
}



Oder der Hintergrund vom <body> soll schwarz sein und die Schrift darauf weiß:

body {
    background:#000000;
    color:#FFFFFF;
}




 
< Zurück   Weiter >