CSS
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
- 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
unda:active
nacha:link
unda: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 Einheiten
em
undrem
: Die Einheitem
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 mitrem
einfacher, weil die Bezugsgröße immer fix ist. Beiem
dagegen kann es durch mehrere verschalteteem
schwieriger werden, endgültige Schriftgrößen zu bestimmen. - Um einen Zeilenumbruch innerhalb
content:
hinzubekommen, baue ein/A
ein und nutzewhite-space: pre;
. Beispiel:
#deine-ID::before {
content: "Hallo \A";
white-space: pre;
}
- Um ein
background-image
mitopacity
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:
- Einfache und leichte Erklärung
- Variante bei der der Inhalt bei kleinem Browser-Fenster aus dem Bildschirm geschoben wird
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
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
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.