Wissenswertes

« zurück
  • Sie sind hier: Home » 2011 » 09 » 04 » Hilfreiche Tipps im Bereich CSS

Suche

Schnell Geld verdienen!

Wichtiges!

Neuigkeiten

Archiv

Letze Kommentare

  • fevarus: Dake für den Hinweis und viel erfolg euch bei eurem Projekt. :)
  • fevarus: Hallo Martin, wir wünschen dir dabei viel Erfolg! Bei Fragen kannst du dich gern jederzeit an uns wenden. :)
  • Martin: Das ist mal eine richtig gute Idee, mit der Webseite noch ein bisschen Nebeneinnahmen zu erziehlen. Ich werde...
  • fevarus: :)
  • fevarus: :)

Tag Clouds

Statistik

Hier können Sie aktiv unsere Seitenzugriffe einsehen.
57140 Leser seit dem 11.09.2009

Hilfreiche Tipps im Bereich CSS

fevarus Veröffentlichte am 4. September 2011 diesen Artikel

CSS

CSS


CSS gehört heutzutage schon mit in jede gut geführte Webseite.
Durch das Einbinden dieser Codesprache ist es sehr einfach große Webseiten wie zum Beispiel auf einer Community schnell Änderungen durchzuführen, welche auf sämtlichen Unterseiten sichtbar sind, sofern die ID bzw. CSS definierte Klasse (class) des Elements auf der Seite zu sehen ist.

Dies ist natürlich sehr nützlich, da sonst sehr viele Seiten zu überarbeiten wären.

Einige wichtige Befehle zeige ich euch hier.

padding:11px 12px 13px 14px;

Padding bewirkt das ein Element innerhalb eines Containers verschoben wird.
In diesem Beispiel hat das Element mehr Platz In folgenden Richtungen: 11 Pixel Oben, 12 Pixel rechts, 13 Pixel unten und 14 Pixel links.
Geschrieben wird es immer im Uhrzeigersinn beginnend von oben an.

Es kann auch, falls es identisch sein sollte, nach oben und unten vergeben werden (in dem Beispiel 14px) und nach links und rechts (in diesem Beispiel 10px).
Dies sieht dann wie folgt aus:

padding:14px 10px;

Alternativ kann auch nur eine einzige Richtung angegeben werden wie zum Beispiel:

padding-top:11px;

padding-right:12px;

padding-bottom:13px;

padding-left:14px;

Hier ein Beispiel dafür:

hier der Beispieltext mit padding 11px oben, 12px rechts, 13px unten, 14px links

Zur besseren Verdeutlichung habe ich einen Rahmen um das Element gesetzt.

So wurde der Text ohne dass padding aussehen.

hier der Beispieltext ohne padding

Ein weiteres nützliches Element nennt sich margin.
Es wird genauso wie padding geschrieben nur das anstatt padding margin steht.
Dieses Element bewirkt, dass der Container anstatt Innenabstand den gewünschten Außenabstand bekommt.

margin:11px 12px 13px 14px;

Hier ein Beispiel dafür:

hier der Beispieltext mit margin

Zur besseren Verdeutlichung habe ich einen Rahmen um das Element und darüber und darunter einen dunklen Balken eingefügt.

So wurde der Text ohne dass margin aussehen.

hier der Beispieltext ohne margin

Weitere schöne Begriffe sind witdh und height.
Durch diese Deklaration wird dem Element eine feste Höhe und Breite gegeben.
Wird die height weggelassen erhält das Element automatisch die Funktion height:auto; .
Dies bewirkt das der Text innerhalb dieses Elements das Element in der Höhe mit wachsen lässt.
Geschrieben wird es folgendermaßen:

height:11px;

width:11px;

Leave a Reply

Back to Top ↑