Alles klar soweit !?

Sie befinden sich hier:

Herzlich Willkommen zu unserem CSS-Tutorium!

Hier werden wir euch die Vorz√ľge und die Nutzung von Cascading Style Sheets vorstellen. Desweiteren erstellen wir zusammen mit euch ein paar kleine Beispiele, denn auch hier gilt: Learning By Doing!

Allgemeines:

  • CSS ist wieder Name schon verr√§t ein Stylesheet. Das Bedeutet, dass es sich nur um die Formatierung beziehungsweise die Gestaltung von Elementen, Objekten, Texten, Grafiken, usw. handelt.
  • Es kann im “<head></head>“, also im Kopfbereich stehen, oder an dem jeweiligen Element selber (dazu sp√§ter mehr).
  • Wenn wir die CSS Angaben im Kopfbereich machen haben wir den Vorteil, dass wir die Werte nur einmal festlegen m√ľssen.
  • Es gibt teilweise √úbersetzungsunterschiede der Browser. Beispielsweise werden Abstandsweiten unterschiedlich umgesetzt.

In CSS gibt es das so genannte “Box-Modell“. In der folgenden Grafik seht Ihr dieses. Das Modell beschreibt den Unterschied und die Beziehung zwischen dem Au√üenabstand, Rahmen, Innenabstand, Inhalt. Jede Seite kann einzeln definiert werden.

 

¬†Man sieht dehr sch√∂n, welche Eigenschaften f√ľr welchen Abstand gelten:

  • margin gibt den jeweiligen Au√üenabstand beginnend vom Rahmen. Die Hintergrundfarbe ist immer transparent.
  • border ist die Rahmendicke. Hier ist die “Hintergrundfarbe” die Farbe der Rahmens.
  • padding gibt den Abstand vom Rahmen zum Inhalt an (Innenabstand).
  • Die Box vom Inhalt wird mit einer einfachen Gr√∂√üenangabe von “width” und “height” deklariert.

Keine Sorge, Ihr m√ľsst es noch nicht 100% verstehen, denn wir werden in den n√§chsten Abschnitten weiter darauf eingehen!

 

Ihr habt noch Fragen oder Anregungen, dann schreibt uns einfach eine E-Mail √ľber unser Kontaktformular oder kommentiert diesen Beitrag!

Alles klar soweit !?

vorheriger Artikel: nächster Artikel:
» «

Geschrieben am: 19. M√§rz 2015 um 15:14 // Thema: CSS //  Kommentar verfassen

Auf dieses Thema gibt es noch keine Reaktion

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *




Impressum // KlaroBox // die kostenlose Lernkiste