So, letztes Mal hatten wir uns mit CSS beschäftigt, mal wieder. Die Idee von CSS ist, dass wir

Layout-Eigenschaften unabhängig von den funktionalen Eigenschaften des Textes haben.

Also zum Beispiel so was wie ein P sagt ein Paragraf. Das heißt, das Zeug, was in dem

P-Element drin ist, hat die Funktion eines Paragrafen und es sagt mir noch nicht, wie es aussieht.

Natürlich hat der Browser eine Default-Art und Weise, wie er es darstellt.

Kleiner Sprung zum letzten Paragrafen, irgendwie rechtsbündig und so ein Krempel.

Aber wir sagen ihnen nicht, wie es aussehen soll. Und dafür kann man diese CSS-Sprache nehmen.

Und die hat im Wesentlichen, besteht hier aus einer Menge von Regeln.

Jeder Regel hat einen Selektor, der sagt, auf welche Elemente soll ich angewandt werden.

Und dann ein Regelteil, der dann so was sagt, wie die Hintergrundfarbe soll rot sein.

Eigentlich eine sehr einfache Sache. Eine Sache, die wir schon immer wieder sehen.

In der Informatik machen wir Spezialsprachen für gewisse Aspekte.

Und das Gute daran, Spezialsprachen zu haben, ist, dass die einzelnen Sprachen relativ einfach sein können.

Und wenn man mehrere solche Sprachen zusammenfüllt, kann man interessante Dinge tun.

Und wir hatten uns das angeguckt mit diesem Beispiel dieses Layouts.

Ah ja, wenn man es anmacht, geht es besser.

An diesem Beispiel des Layouts und hatten da was Hübsches gesehen.

Wir hatten hier noch weitere Dinge geguckt. Wir hatten uns angeguckt, wie wenn man Texte machen will, wie fließt der Text.

Wir haben hier normale Flussweise von diesen Dev-Elementen.

Dev-Elemente haben die Idee, dass sie immer ganz neue Zeilen anfangen.

Es sei denn, wir sagen ihnen, wie sie fließen sollen.

Das haben wir jetzt auf der nächsten Datei.

Wenn man diesen hier sagt, float left, dann vergessen sie, was wir vorher als Default hatten.

Und fließen alle nach links. Und fließen auch, wie wir sehen werden, um jedes Hindernis herum.

Sie verhalten sich in diesem Fall so ein bisschen wie Wörter in einem Text, in einem Fließtext.

Ich kann das auch für dieses blaue Quadrat machen.

Dem sage ich, fließe bitte nach rechts. Dann fließt das in dem orangenen Quadrat nach rechts.

Wenn ich davon mehrere hätte, würden die sich dann sozusagen alle nach rechts fließen.

Und wenn ich Text habe und im Text sage, er soll nach rechts fließen,

in diesem Fall sage ich das dadurch, dass das Innere der Text, das erbt vom, nein, fließt nach links,

und so wie halt Platz ist.

Wir haben dieses Quadrat, was nach rechts fließt, das verwendet irgendwelchen Platz.

Und dann fließt auf dem anderen Platz die Schrift nach links.

Also zum Beispiel, wenn Sie in der Zeitung sehen, dass Sie irgendwie einen Text haben, und da ist irgendwo ein Bild drin.

Genau so macht man es. Der Text fließt nach links, die Bilder fließen zum Beispiel nach rechts,

wenn man sie rechtsbündig haben will, oder wenn man sie absolut platzieren will, kann man auch sagen, da sollst du hin,

dann fließt das andere da rum herum. Und das kann man also durch sehr leichtes CSS basteln.

Und dann hatten wir unser Beispiel hier angeguckt, wo wir nach und nach durch CSS in diesem Fall hier die Schriftarten angepasst hatten.

Dann hatten wir ein wenig mit Farben gespielt über CSS.

Dann hatten wir mit Größen gespielt über CSS und mit Rahmen. Wir hatten einen gepunkteten Rahmen um alles drum herum gebastelt.

Und schließlich und endlich hatten wir noch eine Katze dazu gemacht.

Die Katze muss man natürlich mit HTML basteln. Über so einen Image Tag.

Das kriegt ein Identifier, damit man ihn hinterher wiederfindet.

Eine Source des SRC sagt uns, wo ich die Datei finde. Das kann auch eine URL sein.

Und dann kommt im Style, wo soll sie denn hin und wie groß ist sie usw.

Position Absolute heißt, ich gebe tatsächlich an, wo sie hin muss. Und zwar wie viel sie vom linken Rand entfernt sein soll.

Wie viel der linke Rand der Katze, vom linken Rand des umgebenden Feldes entfernt.

Und wie viel der obere Rand der Katze, vom oberen Rand des Feldes entfernt ist.

Man kann übrigens diese Werte auch negativ machen und damit kann man wirklich die Katze positionieren wo man will.

Und dann sagen wir noch, die soll 300 Pixel breit sein.