CSS

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.

Inhaltsverzeichnis

1 Allgemeines zu CSS
2 Tipps & Tricks
- 2.1 margin-Attribut
- 2.2 Website mit CSS zentrieren
3 Sass, SCSS und Less
4 Weblinks
- 4.1 Tipps & Tricks
5 Weiterführendes
- 5.1 Tools
- 5.2 Weblinks

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 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.
Um einen Zeilenumbruch innerhalb content: hinzubekommen, baue ein /A ein und nutze white-space: pre;. Beispiel:

#deine-ID::before {
    content: "Hallo \A";
    white-space: pre;
}

Um ein background-image mit opacity zu versehen, siehe [1].

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

CSS: Best practices
CSS Infographic: Interesting Facts and History
campaignmonitor.com/css/ - Infos über den Einsatz von CSS in E-Mails
css-tricks.com/downloads/css-stuff - Slider, Tabs, Zoomer und vieles mehr in CSS
emailology.org - List of universally supported CSS & HTML in Email clients
universalwebservices.net - Modify CSS with JavaScript
Context dependant selectors in CSS
css3button.net - Button-Generator mit Hilfe von CSS3

4.1 Tipps & Tricks

5 Weiterführendes

HTML

5.1 Tools

CSS button library built with Sass & Compass - Vielzahl von schönen Buttons die über CSS erzeugt werden
CSS-Validator
HTMLPad - Intelligenter HTML-, CSS- und JavaScript-Editor
Long Shadows Generator - Erzeugt Lange Schatten per CSS

5.2 Weblinks

html.com - Große Plattform, auf der du HTML und CSS lernen kannst

Autoren

Stefan Seidner-Britting (29)
Christian Herrmann (1)

Jeder Autor hat seine eigenen Passagen zu diesem Artikel beigesteuert. Deshalb muss nicht jeder Autor alle Passagen des Artikels unterstützen.<br />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.