CSS

Aus Marketing United
Wechseln zu:Navigation, Suche
Hinweis:
Diese Seite ist eine persönliche Sammlung zu Infos rund um CSS (Cascading style sheets).
Sie hat weder den Anspruch auf Vollständigkeit, noch auf vollständige Richtigkeit :)
Trotzdem wird der ein oder andere hier vielleicht noch ein paar wertvolle Infos oder Links rausziehen können.


1 Allgemeines zu CSS

  • Stylesheets dienen dazu Layouts für Webseiten zu definieren.
  • Ohne Style-Angaben ist das Aussehen von den Default-Einstellungen des Browsers abhängig. Die Website sieht in diesem Fall in jedem Browser anders aus. Mit Stylesheets kann man erzwingen, dass die Website in jedem Browser gleich aussieht.
  • Es gibt drei verschiedene Arten, wie man CSS einbinden kann:
    • Embedded: Stylesheets im Head-Bereich der HTML-Datei
    • Inline: CSS direkt in den Tags, Beispiel <p style="bla"></p>
    • External: Stylecheets in einer seperatren CSS-Datei. Vorteil hiervon: Man kann die Datei leicht in mehrere (oder alle) HTML-Dateien einbinden.
    • Mehr Infos zum Einbinden von CSS gibt es auf Selfhtml.
  • Die Reihenfolge der style definitions ist in CSS normalerweise egal. Eine Ausnahme gibt es allerdings: Für die Style-Definitionen der Links ist es wichtig, dass a:hover und a:active nach a:link und a:visited definiert werden.

2 Tipps & Tricks

  • Unterschied zwischen den Attributen "width" und "max-width":
    • "width" ist wirklich eine feste Breite -> wird das Browser-Fenster verkleinert, wird Seiteninhalt rechts abgeschnitten
    • "max-width" ist die maximale Breite -> wird das Browser-Fenster kleiner gemacht als die Angabe unter max-width, so wird der Seiteninhalt weiter verkleinert und ist somit noch komplett lesbar
  • media-Parameter: kann man zum Beispiel nutzen um fürs Drucken (media="print") andere Styles zu verwenden als auf dem Schirm (media="screen")
  • Das Attribut z-index (für Schichtpositionierungen) funktioniert nur bei positionierten Elementen (position:absolute, position:relative, position:fixed).
  • Mit dem Attribut "text-shadow" kann man einen schönen Textschatten-Effekt produzieren - zum Beispiel mit dem Code text-shadow: 0 1px 2px #777777;
  • Die Standard-Attribute für das body-Tag sind color, background-color, font-size und font-family.
    Beispiel für eine typische Style-Definition für den Body-Bereich:
body {
     color: #5d665b;
     background-color: #e8eae8;
     font-size: small;
     font-family: Verdana, Geneva, Arial, sans-serif;
} 
  • Möglichkeiten um Ausgabe unterhalb von floatenden Objekten zu erzwingen (Textumfluss beenden):
    • clear:both
    • Alternative zu CSS: <br clear="all">
  • Um einen pre-Bereich nicht über die ganze Seitenbreite zu strecken, sondern der Breite des Elternelements anzupassen: white-space: pre-wrap;

2.1 margin-Attribut

  • Kann in einer Kurzform verwendet werden: margin: a b c d. Dabei stehen die Werte a bis d der Reihe nach für die Abstände top, right, bottom und left.
  • Wird nur ein Wert hinter margin angegeben, so wird allen 4 Abständen dieser Wert zugewiesen. Beispiel: margin: 200px; erzeugt einen Abstand von 200 Pixeln in alle 4 Richtungen.

3 Website mit CSS zentrieren

4 Siehe auch

5 Weblinks

5.1 Tipps & Tricks

6 Weiterführendes

6.1 Tools


Erzähl's weiter:

Wir freuen uns über deinen Kommentar: