CSS

Aus Marketing United
Wechseln zu:Navigation, Suche
Hinweis:

Dieser Artikel 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 wirst du hier vielleicht noch wertvolle Infos oder Links mitnehmen 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.
  • Kommentare in CSS werden über diesen Code realisiert: /* Das ist ein Kommentar */ Sie können sich auch über mehrere Zeilen mit Umbrüchen erstrecken. Einen einzeiligen Kommentar der Form // Kommentar gibt es in CSS nicht.

2 Tipps & Tricks

  • Unterschied zwischen den Attributen "width" und "max-width":
    • "width" ist wirklich eine feste Breite -> wird das Browser-Fenster verkleinert, wird der 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: 100%;
     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;
  • Ein übersichtliches Tutorial über display: flex und die vielfältigen Design-Möglichkeiten mit Flexboxes, findest du hier.
  • Der Unterschied zwischen den Einheitenem und rem: Die Einheit em bezieht sich immer auf das Elternelement. rem steht für "root em" (CSS 3) und bezieht sich somit immer auf die Schriftgröße des body beziehungsweise html (meistens 16 Pixel). Die Berechnung von endgültigen Schriftgrößen ist mit rem einfacher, weil die Bezugsgröße immer fix ist. Bei em dagegen kann es durch mehrere verschaltete em schwieriger werden, endgültige Schriftgrößen zu bestimmen

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.

2.2 Website mit CSS zentrieren

Artikel, die zeigen wie du eine Seite mit CSS zentrierst:

3 Sass, SCSS und Less

Sass und Less sind CSS-Präprozessoren, die CSS unter anderem um folgende Funktionen erweitern:

  • Variablen
  • Verschachtelung
  • Mixins
  • Mathematische Funktionen

Sass ist ein Akronym und steht für Syntactically Awesome Stylesheets. Bei Sass wird auf Klammern und Semikolons verzichtet. Stattdessen wird einfach mit Einrückungen gearbeitet.

SCSS ist eine andere Syntax für Sass, bei der wiederum mit Klammern und Semikolons gecoded wird. SCSS hat also den Vorteil, dass man sich als CSS-Gewohnter nicht umgewöhnen muss.

In Sass werden Variablen mit einem $-Zeichen dargestellt. Less nutzt für Variable das @-Zeichen.

Ein gute Einführung in Sass findest du hier.

4 Weblinks

4.1 Tipps & Tricks

5 Weiterführendes


5.1 Tools

                   


Autoren

Jeder Autor hat seine eigenen Passagen zu diesem Artikel beigesteuert. Deshalb muss nicht jeder Autor alle Passagen des Artikels unterstützen.
Zahl in Klammern = Anzahl der Artikel-Bearbeitungen dieses Autors. Eine hohe Anzahl bedeutet nicht zwangsweise, dass dieser Autor auch viel Inhalt zum Artikel beigesteuert hat.

6 Einzelnachweise

Online-Marketing-Quiz
Erzähl's weiter:
Was sagst du zu diesem Thema?