Protokoll vom 20.05.2014

Heute ging es schon so richtig in die Vollen. Wir haben uns mit „Klassen“, „Divs“ und natürlich jeder Menge CSS-Grundlagen beschäftigt.

Was haben wir gelernt?

Klassen erlauben mehr Flexibilität beim Styling
HTML erlaubt es, Inhaltsbereichen „Klassen“ zuzuweisen (Beispiel: <p class=“zitat“ … ), um damit individuelle Formatierungen per CSS zu erlauben. So lassen sich neben dem regulären <p> Element für Textabsätze also mittels Klassen beliebig viele weitere Absatzformate erstellen, die jeweils separat per CSS gestylt werden können. Klassen können beliebig oft im HTML verwendet werden, die Klasse „zitat“ kann also immer dann eingesetzt werden, wenn ein Zitat kenntlich gemacht werden soll. Klassen lassen sich auch für andere Inhalte wie z.B. <a> definieren, um vielleicht Bilder, Videos oder Links im Allgemeinen mit spezieller Formatierung darzustellen.

Div-Container eigenen sich zum Gruppieren von Inhalten
Divs (von engl.: division = „Abteilung“) sind erst mal nur leere Container. In diesen Containern können Inhalte quasi gesammelt werden, also Texte, Links, Bilder … alles Mögliche. Warum sollte man das machen? Divs lassen sich per CSS über die div-ID (die im HTML nur einmal verwendet werden sollte!) individuell stylen. Damit können also mehrere Texte und Bilder zum Beispiel mit einer Rahmenlinie umspannt werden, was man sonst (also nur mit den einzelnen Elementen) nicht hinbekäme. Divs lassen sich auch schachteln, ein „Umschlag“-Div kann z.B. in sich weitere Div-Container beinhalten. Das Styling des Umschlag-Divs wird dann an die beinhalteten Divs übergeben. Diese lassen sich aber per CSS auch individuell stylen, sofern nötig. Divs werden eher für einzigartige Objekte auf der Seite eingesetzt, also sowas wie Slider, Suchfenster oder spezielle Infoboxen, die nur einmal vorkommen. Anders als Klassen sollte dasselbe Div (also mit derselben Div-ID) nicht mehrfach eingesetzt werden, weil das u.U. Probleme mit Zuweisungen etc. geben kann.

Nachdenken erspart Fummelei an der CSS
Es ist wichtig, sich vor (!) dem Erstellen des HTMLs und der CSS Gedanken darüber zu machen, was man eigentlich wie darstellen will. Indem man z.B. in der CSS für den body bereits die Breite des Inhaltsbereichs und z.B. ein „margin: auto“ angibt, braucht man diese Angabe nicht jedem folgenden Element mehr zu geben. Gleiches gilt z.B. für verschachtelte Divs. Wenn das jeweils oberste Element (also das „Elternelement“) schon sinnvoll gestylt ist, erspart das nach hinten raus eine Menge Tipperei in der CSS.

Befehle und was man damit macht
Wir haben uns heute mit einer Reihe verschiedener Styling-Befehle für die CSS beschäftigt. Hier eine kleine Aufzählung.

background-color – bestimmt die Hintergrundfarbe eines Bereiches

color – bestimmt die Textfarbe eines Bereichs

font-family – bestimmt konkrete Schriftarten bzw. Schriftartfamilien, die vom Browser verwendet werden sollen

font-size – legt die Schriftgröße fest (hier sind auch Prozentangaben möglich)

font-weight – definiert den „Fettegrad“ einer Schrift

font-style – definiert kursive oder oblique (schräg) bzw. normale Schrift

width – bestimmt die Breite eines Bereichs (in Prozent möglich)

margin – bestimmt den Außenabstand eines Inhaltsbereichs von den umgebenden Elementen

padding – bestimmt den Innenabstand des Inhalts vom Rand des Bereichs

text-align – erlaubt es, den Text links- oder rechtsbündig, mittig oder z.B. im Blocksatz darzustellen

border-width – bestimmt die Strichstärke einer Rahmenlinie

border-color – legt die Farbe einer Rahmenlinie fesr

border-style – legt die Art der Rahmenlinie fest (solid = durchgezogen, dotted = Punktlinie usw.)

Advertisements

Kommentar hinterlassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s